add demos
This commit is contained in:
Sam Thorogood
Родитель
ee55b3d9f0
Коммит
e02c85df4a
|
|
@ -0,0 +1,210 @@
|
||||||
|
<!--
|
||||||
|
Copyright 2020 Google LLC.
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Dialog and polyfill demos</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<script src="dist/dialog-polyfill.js"></script>
|
||||||
|
<link rel="stylesheet" href="dist/dialog-polyfill.css" />
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.demo {
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
padding-top: 16px;
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo button {
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none !important; /* in case we're loaded in an ancient browser */
|
||||||
|
}
|
||||||
|
|
||||||
|
*[hidden] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 240px;
|
||||||
|
bottom: 0;
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>HTML Dialog Demos</h1>
|
||||||
|
|
||||||
|
<p>This page demonstrates HTML's <code><dialog></code> element. If your browser does not have native support, then support is provided by the <a href="https://github.com/GoogleChrome/dialog-polyfill">polyfill</a>.</p>
|
||||||
|
|
||||||
|
<p hidden style="color: red;" id="error"></p>
|
||||||
|
|
||||||
|
<p><strong>Native support: <span id="support"></span></strong></p>
|
||||||
|
|
||||||
|
<template id="demo-modal">
|
||||||
|
<p>I'm a modal dialog! This blocks the page from being accessed behind me, and is a core reason <code><dialog></code> is useful.</p>
|
||||||
|
<p>You can also hit the <code>ESC</code> on your keyboard to close the top-most modal dialog.</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template id="demo-nonmodal">
|
||||||
|
<p>This dialog opens but does not block the page from being accessed. It was opened with <code>dialog.show()</code>.</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template id="demo-form">
|
||||||
|
<p>Dialog adds a new HTML form type: <code><form method="dialog"></code>.</p>
|
||||||
|
<p>Submitting the form doesn't submit to a new page, but rather, closes the dialog by default.</p>
|
||||||
|
<p>(It generates a <code>submit</code> event, which if not prevented, closes the dialog.)</p>
|
||||||
|
<p>Try clicking on one of the buttons below!</p>
|
||||||
|
|
||||||
|
<form method="dialog">
|
||||||
|
<label>Enter an ice-cream flavor: <input type="text" name="icecream" placeholder="ice-cream name" /></label>
|
||||||
|
<input type="submit" value="Vote for it" />
|
||||||
|
<input type="submit" value="Vote against it" />
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template id="demo-noesc">
|
||||||
|
<p>This dialog adds a handler on its <code>cancel</code> event, preventing it. This stops the <code>ESC</code> key from closing the dialog.</p>
|
||||||
|
<p>You have to click the button below (or you could not have a button, and only close the dialog some other way).</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template id="demo-multiple">
|
||||||
|
<p>This shows opening multiple modal dialogs.</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template id="demo-sidebar">
|
||||||
|
<p>This repurposes a <code>dialog</code> as a sidebar!</p>
|
||||||
|
<p>While the dialog, by default, shows centered where it was opened, it's easy to place it in fixed positions on your page.</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener('error', function(event) {
|
||||||
|
var errorNode = document.getElementById('error');
|
||||||
|
errorNode.textContent = event.error.toString();
|
||||||
|
errorNode.removeAttribute('hidden');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
const supportNode = document.getElementById('support');
|
||||||
|
const testDialog = document.createElement('dialog');
|
||||||
|
if (testDialog.showModal) {
|
||||||
|
supportNode.style.color = 'blue';
|
||||||
|
supportNode.textContent = 'YES';
|
||||||
|
} else {
|
||||||
|
supportNode.style.color = 'red';
|
||||||
|
supportNode.textContent = 'NO';
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDemo(title, content, options) {
|
||||||
|
options = Object.assign({
|
||||||
|
modal: true,
|
||||||
|
close: true,
|
||||||
|
className: '',
|
||||||
|
}, options);
|
||||||
|
|
||||||
|
const dialog = document.createElement('dialog');
|
||||||
|
dialogPolyfill.registerDialog(dialog);
|
||||||
|
if (typeof content === 'string') {
|
||||||
|
dialog.innerHTML = content;
|
||||||
|
} else {
|
||||||
|
dialog.append(content);
|
||||||
|
}
|
||||||
|
if (options.className) {
|
||||||
|
dialog.className = options.className;
|
||||||
|
}
|
||||||
|
|
||||||
|
const button = createButton('Show', options.modal ? () => dialog.showModal() : () => dialog.show());
|
||||||
|
const description = Object.assign(document.createElement('span'), {textContent: title});
|
||||||
|
|
||||||
|
const holder = Object.assign(document.createElement('div'), {className: 'demo'});
|
||||||
|
holder.append(dialog, button, description);
|
||||||
|
|
||||||
|
if (options.close) {
|
||||||
|
dialog.append(createButton('Close', () => dialog.close()));
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.append(holder);
|
||||||
|
return dialog;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createButton(title, handler) {
|
||||||
|
const button = document.createElement('button');
|
||||||
|
button.textContent = title;
|
||||||
|
button.addEventListener('click', handler);
|
||||||
|
return button;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fromTemplate(id) {
|
||||||
|
const template = document.getElementById(id);
|
||||||
|
return template.content.cloneNode(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Demos below.
|
||||||
|
|
||||||
|
createDemo('Basic modal', fromTemplate('demo-modal'));
|
||||||
|
createDemo('Basic non-modal', fromTemplate('demo-nonmodal'), {modal: false});
|
||||||
|
|
||||||
|
const demoFormDialog = createDemo('Dialog form', fromTemplate('demo-form'), {close: false});
|
||||||
|
const parentDemo = demoFormDialog.parentNode;
|
||||||
|
const resultNode = document.createElement('span');
|
||||||
|
parentDemo.append(resultNode);
|
||||||
|
demoFormDialog.addEventListener('close', (ev) => {
|
||||||
|
if (demoFormDialog.returnValue) {
|
||||||
|
resultNode.textContent = `, closed with return value: ${demoFormDialog.returnValue}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const demoNoEscape = createDemo('Prevent ESC key', fromTemplate('demo-noesc'));
|
||||||
|
demoNoEscape.addEventListener('cancel', (ev) => {
|
||||||
|
ev.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
const demoMultiple = createDemo('Multiple modals', fromTemplate('demo-multiple'));
|
||||||
|
const createAnotherModal = (count = 1) => {
|
||||||
|
const dialog = document.createElement('dialog');
|
||||||
|
dialogPolyfill.registerDialog(dialog);
|
||||||
|
|
||||||
|
const notes = Object.assign(document.createElement('p'), {textContent: `Modal ${count}`});
|
||||||
|
const buttonMore = createButton(`Open Another Modal (${count})`, createAnotherModal.bind(null, count + 1));
|
||||||
|
const buttonClose = createButton('Close', () => dialog.close());
|
||||||
|
|
||||||
|
dialog.append(notes, buttonMore, buttonClose);
|
||||||
|
|
||||||
|
document.body.append(dialog);
|
||||||
|
dialog.showModal();
|
||||||
|
};
|
||||||
|
demoMultiple.prepend(createButton('Open Another Modal', () => createAnotherModal()))
|
||||||
|
|
||||||
|
createDemo('Dialog as sidebar', fromTemplate('demo-sidebar'), {className: 'sidebar'});
|
||||||
|
|
||||||
|
}());
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Загрузка…
Ссылка в новой задаче