Some fun with <dialog>, async functions, and display:grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="UTF-8"> | |
<title>Dialog</title> | |
<style> | |
html { | |
font-family: sans-serif; | |
font-size: 16px; | |
width: 100%; | |
} | |
body { | |
box-sizing: border-box; | |
width: 100%; | |
} | |
* { | |
box-sizing: inherit; | |
} | |
.button { | |
cursor: pointer; | |
font-size: 1rem; | |
border-radius: 0; | |
border: .125rem solid #000; | |
} | |
.button--primary { | |
background: #36d; | |
color: #fff; | |
} | |
.dialog { | |
border: 0; | |
border-radius: 0 0 .25rem .25rem; | |
box-shadow: 0 0 .5rem rgba(0, 0, 0, .7); | |
padding: .5rem; | |
display: none; | |
width: 25rem; | |
height: 7rem; | |
position: fixed; | |
top: 0; | |
left: calc(50% - 12.5rem); | |
margin: 0; | |
} | |
.dialog[open] { | |
display: grid; | |
grid-gap: .5rem; | |
grid-template-columns: auto 5rem 5rem; | |
grid-template-rows: 1.5rem auto 1.5rem; | |
grid-template-areas: | |
"header header header" | |
"form form form" | |
". cancel ok" | |
; | |
} | |
.dialog__title { | |
grid-area: header; | |
font-family: Tahoma; | |
font-size: 1.1rem; | |
font-weight: normal; | |
padding: 0; | |
margin: 0; | |
} | |
.dialog__form { | |
grid-area: form; | |
} | |
.dialog__form input[type="text"] { | |
padding: 0 .375rem; | |
font-size: .9rem; | |
width: 100%; | |
height: 100%; | |
} | |
.dialog__cancel-button { | |
grid-area: cancel; | |
} | |
.dialog__ok-button { | |
grid-area: ok; | |
} | |
</style> | |
<dialog id="alert" class="dialog"> | |
<h1 class="dialog__title">#PLACEHOLDER#</h1> | |
<form class="dialog__form" method="dialog" id="alert-form"></form> | |
<button form="alert-form" class="button button--primary dialog__ok-button" value="ok">OK</button> | |
</dialog> | |
<dialog id="confirm" class="dialog"> | |
<h1 class="dialog__title">#PLACEHOLDER#</h1> | |
<form class="dialog__form" method="dialog" id="confirm-form"></form> | |
<button form="confirm-form" class="button button--primary dialog__ok-button" value="ok">OK</button> | |
<button form="confirm-form" class="button dialog__cancel-button" value="cancel">Cancel</button> | |
</dialog> | |
<dialog id="prompt" class="dialog"> | |
<h1 class="dialog__title"><label for="prompt-input">#PLACEHOLDER#</label></h1> | |
<form class="dialog__form" method="dialog" id="prompt-form"> | |
<input type="text" id="prompt-input" autofocus> | |
</form> | |
<button form="prompt-form" class="button button--primary dialog__ok-button" value="ok">OK</button> | |
<button form="prompt-form" class="button dialog__cancel-button" value="cancel">Cancel</button> | |
</dialog> | |
<script> | |
(() => { | |
'use strict' | |
const alert = document.getElementById('alert') | |
const confirm = document.getElementById('confirm') | |
const prompt = document.getElementById('prompt') | |
window.RDCL = {} | |
window.RDCL.alert = (msg = '') => new Promise(resolve => { | |
alert.querySelector('h1').innerHTML = msg | |
alert.showModal() | |
alert.addEventListener('close', () => resolve(), { once: true }) | |
}) | |
window.RDCL.confirm = (msg = '') => new Promise(resolve => { | |
confirm.querySelector('h1').innerHTML = msg | |
confirm.showModal() | |
confirm.addEventListener('close', () => { | |
resolve(confirm.returnValue === 'ok') | |
}, { once: true }) | |
}) | |
window.RDCL.prompt = (msg = '', value = '') => new Promise(resolve => { | |
const input = prompt.querySelector('input') | |
prompt.querySelector('h1').innerHTML = msg | |
input.value = value | |
prompt.showModal() | |
input.select() | |
prompt.addEventListener('close', () => { | |
if (prompt.returnValue === 'ok') { | |
resolve(input.value) | |
} else { | |
resolve(null) | |
} | |
}, { once: true }) | |
}) | |
async function main() { | |
const name = await RDCL.prompt('What is your name?', 'John Doe') | |
if (name && await RDCL.confirm('Are you sure?')) { | |
await RDCL.alert(`Your name is "${name}"`) | |
} | |
console.log('--- procedure done ---') | |
} | |
main() | |
})() | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment