rjvdw/dialogs.html

## dialogs.html
<!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>
	<!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>