blob: 3e10740488d72d67cfb3b2745f587e143ad9d9c4 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001<!DOCTYPE html>
2<html>
3<head>
4<script src="../dist/dialog-polyfill.js"></script>
5<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
6<style>
7#close-button {
8 position: absolute;
9 top: 7px;
10 right: 7px;
11 height: 14px;
12 width: 14px;
13 margin: 0;
14 background-image: url('resources/close_dialog.png');
15}
16
17#close-button:hover {
18 background-image: url('resources/close_dialog_hover.png');
19}
20
21dialog {
22/* width: 50%;
23 border-radius: 3px;
24 opacity: 0;
25 background: white;
26 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
27 color: #333;
28 min-width: 400px;
29 padding: 0;
30 z-index: 100;
31 border: 0;
32 padding: 15px;
33*/}
34
35dialog + .backdrop {
36 position: fixed;
37 top: 0;
38 bottom: 0;
39 left: 0;
40 right: 0;
41}
42
43dialog.no-backdrop + .backdrop {
44 display: none;
45}
46
47.dialog-setting {
48 margin: 30px;
49}
50
51/* keyframes used to pulse the overlay */
52@-webkit-keyframes pulse {
53 0% {
54 -webkit-transform: scale(1);
55 }
56 40% {
57 -webkit-transform: scale(1.05);
58 }
59 60% {
60 -webkit-transform: scale(1.05);
61 }
62 100% {
63 -webkit-transform: scale(1);
64 }
65}
66
67.pulse {
68 -webkit-animation-duration: 180ms;
69 -webkit-animation-iteration-count: 1;
70 -webkit-animation-name: pulse;
71 -webkit-animation-timing-function: ease-in-out;
72}
73#messages {
74 background-color: red;
75}
76body {
77 font-family: sans-serif;
78}
79
80#open-button {
81 position: fixed;
82 bottom: 0;
83 left: 0;
84 background-color: lightgray;
85 border: 1px solid;
86 margin: 10px;
87 padding: 15px;
88}
89
90#open-button:active {
91 background-color: lime;
92 margin: 9px;
93}
94
95#backdrop {
96 display: none;
97 position: fixed;
98 top:0;
99 right:0;
100 bottom:0;
101 left:0;
102 background: rgba(0,0,0,0.5);
103 z-index: 10;
104}
105.post {
106 margin: 10px;
107 padding: 5px;
108 border: 2px solid;
109}
110
111.post-buttons {
112 margin: 5px;
113 text-align: right;
114}
115.post-button:hover {
116 color: green;
117 font-weight: bold;
118}
119</style>
120<body>
121<div id="messages"></div>
122<dialog id="dialog" class="_dialog_fixed">
123 <h3>Reshare</h3>
124 <input type="text" style="width: 75%" value="I am resharing this."><br>
125 <div class="dialog-setting">
126 <input id="click-outside-to-close" type="checkbox">
127 <label for="click-outside-to-close">Close dialog upon clicking outside</label>
128 </div>
129 <div class="dialog-setting">
130 <input id="enable-backdrop" type="checkbox" checked>
131 <label for="enable-backdrop">Enable ::backdrop</label>
132 </div>
133 <div id="close-button"></div>
134</dialog>
135<div id="post-container"></div>
136<script>
137var dialog = document.getElementById('dialog');
138dialogPolyfill.registerDialog(dialog);
139
140function createPostButton(container, text) {
141 var link = document.createElement('a');
142 link.href = 'javascript:void(0)';
143 link.textContent = text;
144 link.className = 'post-button';
145 container.appendChild(link);
146 var span = document.createElement('span');
147 span.textContent = ' ';
148 container.appendChild(span);
149 return link;
150}
151
152SampleText = 'From this spot I rise not, valiant knight, until your ' +
153 'courtesy grants me the boon I seek, one that will redound ' +
154 'to your praise and the benefit of the human race.';
155
156function createPost(container) {
157 var post = document.createElement('div');
158 post.className = 'post';
159 var postContent = document.createElement('div');
160 postContent.className = 'post-content';
161 postContent.textContent = SampleText;
162 post.appendChild(postContent);
163 var postButtons = document.createElement('div');
164 postButtons.className = 'post-buttons';
165 post.appendChild(postButtons);
166 var reshare = createPostButton(postButtons, 'Reshare');
167 reshare.addEventListener('click', openDialog);
168 var reply = createPostButton(postButtons, 'Reply');
169 reply.addEventListener('click', openDialog);
170 createPostButton(postButtons, 'Enjoyed this post');
171
172 container.appendChild(post);
173 return post;
174}
175
176function initPosts() {
177 var container = document.getElementById('post-container');
178 for (var i = 0; i < 25; ++i) {
179 var post = createPost(container);
180 }
181}
182
183function shouldCloseDialogOnClickOutside() {
184 return document.getElementById('click-outside-to-close').checked;
185}
186
187function closeDialog() {
188 if (dialog.open)
189 dialog.close();
190}
191
192function computeCenteredTop(dialog) {
193 dialog.style.transition = '';
194 dialog.showModal();
195 var computedTopPx = window.getComputedStyle(dialog).top;
196 var computedTop = parseInt(computedTopPx.substring(0, computedTopPx.length - 2), 10);
197 dialog.close();
198 return computedTop;
199}
200
201function openDialog() {
202 dialog.style.opacity = 0;
203 dialog.style.transition = 'all 250ms ease';
204
205 dialog.showModal();
206
207 dialog.style.opacity = 1;
208}
209
210function pulseDialog() {
211 if (!dialog.style.webkitAnimation) {
212 return;
213 }
214 // classList isn't supported in IE8, but it's safe to use here as this only
215 // runs inside WebKit/Chrome anyway.
216 dialog.classList.add('pulse');
217 dialog.addEventListener('webkitAnimationEnd', function(e) {
218 dialog.classList.remove('pulse');
219 });
220}
221
222function clickedInDialog(mouseEvent) {
223 var rect = dialog.getBoundingClientRect();
224 return rect.top <= mouseEvent.clientY && mouseEvent.clientY <= rect.top + rect.height
225 && rect.left <= mouseEvent.clientX && mouseEvent.clientX <= rect.left + rect.width;
226}
227
228function handleClickOutsideDialog() {
229 if (!shouldCloseDialogOnClickOutside()) {
230 pulseDialog();
231 return
232 }
233 closeDialog();
234}
235
236document.body.addEventListener('keydown', function(e) {
237 if (e.keyCode == 27)
238 closeDialog();
239});
240
241var enableBackdrop = document.getElementById('enable-backdrop');
242enableBackdrop.addEventListener('change', function(e) {
243 if (this.checked) {
244 dialog.className = '';
245 } else {
246 dialog.className = 'no-backdrop';
247 }
248});
249
250var closeButton = document.getElementById('close-button');
251closeButton.addEventListener('click', function(e) { closeDialog(); });
252
253document.body.addEventListener('click', function(e) {
254 console.info('document body click', e.target);
255 if (!dialog.open)
256 return;
257 if (e.target != document.body)
258 return;
259 handleClickOutsideDialog();
260});
261
262dialog.addEventListener('click', function(e) {
263 if (clickedInDialog(e))
264 return;
265 handleClickOutsideDialog();
266});
267initPosts();
268</script>
269</body>
270</html>