Skip to content

Instantly share code, notes, and snippets.

@rjvdw rjvdw/dialogs.html
Created Dec 7, 2018

Embed
What would you like to do?
Some fun with <dialog>, async functions, and display:grid
<!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
You can’t perform that action at this time.