-
Notifications
You must be signed in to change notification settings - Fork 0
/
example-usage.html
87 lines (76 loc) · 3 KB
/
example-usage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dialogic polyfill - html example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/example.css" crossorigin="anonymous" integrity="sha256-3dujCJSgkpcb6zbg2ZUAG6wT3b9AOQe/QqHgqWP6Jzo=">
</head>
<body>
<button data-on="tap:my-lightbox">Toggle dialog</button>
<p>To show dialog press this button.</p>
<br>
<p>For more info:</p>
<ul>
<li>Readme in standalone file <a href="/README.md">/README.md</a></li>
<li>Repo on <a href="https://github.com/iiic/dialogic-polyfill">Github</a></li>
<li>Webpage about polyfill <a href="https://iiic.dev/dialogic-polyfill">https://iiic.dev/dialogic-polyfill</a></li>
</ul>
<dialog id="my-lightbox" role="alertdialog" aria-labelledby="add-delivery-address" aria-describedby="delivery-address-description">
<div role="document" tabindex="0">
<h3 id="add-delivery-address">Insert your Delivery address</h3>
<p id="delivery-address-description">
… imagine some form in here :)
<br><br>
<i>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
Aliquam erat volutpat. Suspendisse sagittis ultrices augue.<br>
Integer malesuada. Aliquam ornare wisi eu metus. Integer pellentesque quam vel velit.<br>
Nunc dapibus tortor vel mi dapibus sollicitudin.
</i>
</p>
<button onclick="alert('yes')">yes</button> / <button onclick="alert('no')">no</button>
</div>
<button data-on="tap:my-lightbox.close" title="close dialog">x</button>
</dialog>
<script type="module" src="/dialogicPolyfill.mjs" crossorigin="anonymous" integrity="sha256-tcuKQ/zHdgYxhMhX4ouXfqnqtOMXek83f//3owjsOe0="></script>
<script type="module">
( () => {
const TOGGLER_ATTRIBUTE = 'data-on';
const TAP_ACTION = 'tap:';
const CLOSE_ACTION = 'close';
const KEYCODE_ESC = 27;
document.querySelectorAll( '[' + TOGGLER_ATTRIBUTE + ']' ).forEach( (/** @type {HTMLElement} */ element ) => {
if ( element.getAttribute( TOGGLER_ATTRIBUTE ).substr( 0, TAP_ACTION.length ) === TAP_ACTION )
{
const tapAction = element.getAttribute( TOGGLER_ATTRIBUTE ).substr( TAP_ACTION.length ).split( '.' );
/** @type {HTMLDialogElement} */
let dialog = ( document.getElementById( tapAction[ 0 ] ) );
if ( !dialog )
{
/** @type {HTMLDialogElement} */
dialog = ( element.parentElement );
}
if ( tapAction[ 1 ] && tapAction[ 1 ] === CLOSE_ACTION )
{
element.addEventListener( 'click', ( /** @type {MouseEvent} */ ) => {
dialog.close();
}, false );
} else
{
element.addEventListener( 'click', ( /** @type {MouseEvent} */ ) => {
dialog.show();
}, false );
}
}
} );
document.querySelectorAll( 'dialog' ).forEach( ( /** @type {HTMLDialogElement} */ dialog ) => {
dialog.addEventListener( 'keyup', ( /** @type {KeyboardEvent} */ event ) => {
if ( event.keyCode === KEYCODE_ESC )
{
dialog.close();
}
}, false );
} );
} )();
</script>