1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 | <title>zui-bundle</title>
|
5 | <link rel="stylesheet" href="./dist/css/zui-bundle.fouc.css" />
|
6 | <link rel="stylesheet" href="./dist/css/zui-bundle.app.css" />
|
7 |
|
8 | <style>
|
9 | .tabbed-page:not(.is-visible) {
|
10 | display: none;
|
11 | }
|
12 | </style>
|
13 | </head>
|
14 |
|
15 | <body>
|
16 | <zui-shell app-name="Test">
|
17 | <zui-shell-topbar>
|
18 | <zui-logo slot="logo"></zui-logo>
|
19 | <zui-button slot="modules">
|
20 | <a href="#">Logout</a>
|
21 | </zui-button>
|
22 | <zui-shell-user
|
23 | slot="user"
|
24 | given-name="John"
|
25 | family-name="Cruikshank"
|
26 | profile-name="Zywave"
|
27 | username="john.cruikshank@zywave.com"
|
28 | profile-detail="Milwaukee, WI"
|
29 | logout-user-url="#"
|
30 | manage-user-url="#"
|
31 | manage-profile-url="#"
|
32 | switch-profile-url="#"
|
33 | notification-count="6"
|
34 | view-notifications-url="https://google.com"
|
35 | impersonating-profile-name="jxiong1337"
|
36 | impersonating-given-name="Julie"
|
37 | impersonating-family-name="Xiong"
|
38 | impersonating
|
39 | ></zui-shell-user>
|
40 | </zui-shell-topbar>
|
41 |
|
42 | <zui-shell-nav>
|
43 | <zui-shell-context-switcher context-title="ABC Company" context-label="Viewing as" action-text="switch">
|
44 | </zui-shell-context-switcher>
|
45 | <zui-shell-nav-item>
|
46 | <zui-icon icon="zui-nav-company" slot="icon"></zui-icon>
|
47 | <a href="#">Overview</a>
|
48 | </zui-shell-nav-item>
|
49 | <zui-shell-nav-item>
|
50 | <zui-icon icon="zui-nav-administrators" slot="icon"></zui-icon>
|
51 | <a href="#">Administrators</a>
|
52 | </zui-shell-nav-item>
|
53 | </zui-shell-nav>
|
54 |
|
55 | <zui-shell-content>
|
56 | <div class="zui shell-content-wrapper">
|
57 | <zui-tabs>
|
58 | <zui-tab>Form fields</zui-tab>
|
59 | <zui-tab>Buttons</zui-tab>
|
60 | <zui-tab>Wells</zui-tab>
|
61 | <zui-tab>Table</zui-tab>
|
62 | <zui-tab>Dialog</zui-tab>
|
63 | </zui-tabs>
|
64 |
|
65 | <section class="tabbed-page-container">
|
66 | <div class="tabbed-page">
|
67 | <h2>Form fields</h2>
|
68 | <div class="zui row">
|
69 | <div class="zui column vanilla">
|
70 | <zui-formfield label="Vanilla select">
|
71 | <select name="vanilla-select">
|
72 | <option>Vanilla1</option>
|
73 | <option>Vanilla2</option>
|
74 | </select>
|
75 | </zui-formfield>
|
76 | <zui-formfield label="Vanilla multiselect">
|
77 | <select id="multiple" name="vanilla-multiselect" multiple>
|
78 | <option>VanillaM1</option>
|
79 | <option selected>VanillaM2</option>
|
80 | </select>
|
81 | </zui-formfield>
|
82 | <zui-formfield class="part-demo" label="Vanilla input">
|
83 | <input type="text" name="vanilla-input" />
|
84 | </zui-formfield>
|
85 | <zui-formfield label="Vanilla checkbox">
|
86 | <input type="checkbox" name="vanilla-checkbox" />
|
87 | </zui-formfield>
|
88 | <zui-formfield label="Vanilla radio">
|
89 | <input type="radio" name="vanilla-radio" />
|
90 | </zui-formfield>
|
91 | <zui-formfield label="Vanilla radio2">
|
92 | <input type="radio" name="vanilla-radio2" value="vanilla-radio2" />
|
93 | </zui-formfield>
|
94 | </div>
|
95 | <div class="zui column boujie">
|
96 | <zui-formfield label="ZUI Multiselect Dropdown">
|
97 | <zui-select-dropdown
|
98 | id="zuiSelectDropdown"
|
99 | name="zui-select-dropdown"
|
100 | multiple
|
101 | placeholder="Select multiple values..."
|
102 | >
|
103 | <zui-option value="test-1">Test1</zui-option>
|
104 | <zui-option value="test-2">Test2</zui-option>
|
105 | <zui-option value="test-3">Test3</zui-option>
|
106 | <zui-option value="test-4">Test4</zui-option>
|
107 | <zui-option value="test-5">Test5</zui-option>
|
108 | </zui-select-dropdown>
|
109 | </zui-formfield>
|
110 | <zui-formfield label="ZUI MultiSelect">
|
111 | <zui-select id="zuiSelect" name="zui-select" placeholder="Select multiple values..." multiple>
|
112 | <zui-option value="test-1">Test1</zui-option>
|
113 | <zui-option value="test-2">Test2</zui-option>
|
114 | <zui-option value="test-3">Test3</zui-option>
|
115 | <zui-option value="test-4">Test4</zui-option>
|
116 | <zui-option value="test-5">Test5</zui-option>
|
117 | </zui-select>
|
118 | </zui-formfield>
|
119 | <zui-formfield label="ZUI Select">
|
120 | <zui-select id="zuiSelect2" name="zui-select2">
|
121 | <zui-option value="test-1">Test1</zui-option>
|
122 | <zui-option value="test-2">Test2</zui-option>
|
123 | <zui-option value="test-3">Test3</zui-option>
|
124 | <zui-option value="test-4">Test4</zui-option>
|
125 | <zui-option value="test-5">Test5</zui-option>
|
126 | </zui-select>
|
127 | </zui-formfield>
|
128 | <zui-formfield class="part-demo" label="ZUI input">
|
129 | <zui-input name="zui-input"></zui-input>
|
130 | </zui-formfield>
|
131 | <zui-formfield label="ZUI Checkbox">
|
132 | <zui-checkbox name="zui-checkbox"></zui-checkbox>
|
133 | </zui-formfield>
|
134 | <zui-formfield label="ZUI Toggle">
|
135 | <zui-toggle name="zui-toggle"></zui-toggle>
|
136 | </zui-formfield>
|
137 | <zui-formfield label="ZUI radio">
|
138 | <zui-radio name="zui-radio"></zui-radio>
|
139 | </zui-formfield>
|
140 | <zui-formfield label="ZUI radio2">
|
141 | <zui-radio name="zui-radio2" value="zui-radio2-value"></zui-radio>
|
142 | </zui-formfield>
|
143 | </div>
|
144 | </div>
|
145 | </div>
|
146 | <div class="tabbed-page">
|
147 | <h2>Buttons</h2>
|
148 | <h3>Primary & Secondary</h3>
|
149 | <zui-button-group style="margin-bottom: 10px;">
|
150 | <zui-button>One</zui-button>
|
151 | <zui-button id="dialogOpen">Two (open dialog)</zui-button>
|
152 | <zui-button>Three</zui-button>
|
153 | <zui-button-dropdown icon>
|
154 | <zui-icon icon="zui-more"></zui-icon>
|
155 | <button slot="option">Update</button>
|
156 | <button slot="option">Print</button>
|
157 | <button slot="option">Email</button>
|
158 | <a href="#" slot="option" style="color: red;">Delete</a>
|
159 | </zui-button-dropdown>
|
160 | </zui-button-group>
|
161 | <zui-button-group>
|
162 | <zui-button type="secondary">One</zui-button>
|
163 | <zui-button type="secondary">Two</zui-button>
|
164 | <zui-button type="secondary">Three</zui-button>
|
165 | <zui-button-dropdown type="secondary" icon>
|
166 | <zui-icon icon="zui-more"></zui-icon>
|
167 | <button slot="option">Update</button>
|
168 | <button slot="option">Print</button>
|
169 | <button slot="option">Email</button>
|
170 | <a href="#" slot="option" style="color: red;">Delete</a>
|
171 | </zui-button-dropdown>
|
172 | </zui-button-group>
|
173 |
|
174 | <hr />
|
175 |
|
176 | <h3>Disabled</h3>
|
177 | <zui-button-group style="margin-bottom: 10px;">
|
178 | <zui-button disabled>One</zui-button>
|
179 | <zui-button>Two</zui-button>
|
180 | <zui-button>Three</zui-button>
|
181 | <zui-button disabled>Four</zui-button>
|
182 | <zui-button>Five</zui-button>
|
183 | </zui-button-group>
|
184 | <zui-button-group style="margin-bottom: 10px;">
|
185 | <zui-button type="secondary">One</zui-button>
|
186 | <zui-button disabled class="secondary">Two</zui-button>
|
187 | <zui-button type="secondary">Three</zui-button>
|
188 | </zui-button-group>
|
189 |
|
190 | <hr />
|
191 |
|
192 | <h3>Slotted variations</h3>
|
193 | <zui-button-group>
|
194 | <zui-button>
|
195 | <zui-icon icon="zui-download"></zui-icon>
|
196 | Download
|
197 | </zui-button>
|
198 | <zui-button>
|
199 | <zui-icon icon="zui-mail"></zui-icon>
|
200 | Email
|
201 | </zui-button>
|
202 | <zui-button-dropdown>
|
203 | <zui-icon icon="zui-share"></zui-icon>
|
204 | <span>Share</span>
|
205 | <button slot="option">Facebook</button>
|
206 | <button slot="option">LinkedIn</button>
|
207 | <button slot="option">Portal</button>
|
208 | </zui-button-dropdown>
|
209 | <zui-button-dropdown icon>
|
210 | <zui-icon icon="zui-more"></zui-icon>
|
211 | <button slot="option">Update</button>
|
212 | <button slot="option">Print</button>
|
213 | <button slot="option">Email</button>
|
214 | <a href="#" slot="option" style="color: red;">Delete</a>
|
215 | </zui-button-dropdown>
|
216 | </zui-button-group>
|
217 |
|
218 | <div style="margin-top: 6px;">
|
219 | <zui-button-group>
|
220 | <zui-button icon>
|
221 | <zui-icon icon="zui-download"></zui-icon>
|
222 | </zui-button>
|
223 | <zui-button icon>
|
224 | <zui-icon icon="zui-mail"></zui-icon>
|
225 | </zui-button>
|
226 | <zui-button-dropdown icon>
|
227 | <zui-icon icon="zui-share"></zui-icon>
|
228 | <a href="http://www.facebook.com" slot="option">Facebook</a>
|
229 | <button slot="option">LinkedIn</button>
|
230 | <button slot="option">Portal</button>
|
231 | </zui-button-dropdown>
|
232 | <zui-button-dropdown>
|
233 | <zui-icon icon="zui-share"></zui-icon>
|
234 | <span>Share</span>
|
235 | <button slot="option">Facebook</button>
|
236 | <button slot="option">LinkedIn</button>
|
237 | <button slot="option">Portal</button>
|
238 | </zui-button-dropdown>
|
239 | <zui-button-dropdown icon>
|
240 | <zui-icon icon="zui-more"></zui-icon>
|
241 | <button slot="option">Update</button>
|
242 | <button slot="option">Print</button>
|
243 | <button slot="option">Email</button>
|
244 | <a href="#" slot="option" style="color: red;">Delete</a>
|
245 | </zui-button-dropdown>
|
246 | </zui-button-group>
|
247 | </div>
|
248 |
|
249 |
|
250 | <h1>ZUI Buttons</h1>
|
251 | <zui-button-group style="margin-bottom: 10px;">
|
252 | <zui-button disabled>One</zui-button>
|
253 | <zui-button>Two</zui-button>
|
254 | <zui-button>Three</zui-button>
|
255 | <zui-button disabled>Four</zui-button>
|
256 | <zui-button>Five</zui-button>
|
257 | </zui-button-group>
|
258 | <zui-button-group style="margin-bottom: 10px;">
|
259 | <zui-button type="secondary">One</zui-button>
|
260 | <zui-button disabled class="secondary">Two</zui-button>
|
261 | <zui-button type="secondary">Three</zui-button>
|
262 | </zui-button-group>
|
263 | <zui-button-group style="margin-bottom: 10px;">
|
264 | <zui-button>One</zui-button>
|
265 | <zui-button>Two</zui-button>
|
266 | <zui-button>Three</zui-button>
|
267 | <zui-button-dropdown icon>
|
268 | <zui-icon icon="zui-more"></zui-icon>
|
269 | <button slot="option">Update</button>
|
270 | <button slot="option">Print</button>
|
271 | <button slot="option">Email</button>
|
272 | <a href="#" slot="option" style="color: red;">Delete</a>
|
273 | </zui-button-dropdown>
|
274 | </zui-button-group>
|
275 | <zui-button-group>
|
276 | <zui-button type="secondary">One</zui-button>
|
277 | <zui-button type="secondary">Two</zui-button>
|
278 | <zui-button type="secondary">Three</zui-button>
|
279 | <zui-button-dropdown type="secondary" icon>
|
280 | <zui-icon icon="zui-more"></zui-icon>
|
281 | <button slot="option">Update</button>
|
282 | <button slot="option">Print</button>
|
283 | <button slot="option">Email</button>
|
284 | <a href="#" slot="option" style="color: red;">Delete</a>
|
285 | </zui-button-dropdown>
|
286 | </zui-button-group>
|
287 |
|
288 | <hr />
|
289 |
|
290 | <zui-button-group>
|
291 | <zui-button>
|
292 | <zui-icon icon="zui-download"></zui-icon>
|
293 | Download
|
294 | </zui-button>
|
295 | <zui-button>
|
296 | <zui-icon icon="zui-mail"></zui-icon>
|
297 | Email
|
298 | </zui-button>
|
299 | <zui-button-dropdown>
|
300 | <zui-icon icon="zui-share" style="margin-right: 5px;"></zui-icon>
|
301 | <span>Share</span>
|
302 | <button slot="option">Facebook</button>
|
303 | <button slot="option">LinkedIn</button>
|
304 | <button slot="option">Portal</button>
|
305 | </zui-button-dropdown>
|
306 | <zui-button-dropdown icon>
|
307 | <zui-icon icon="zui-more"></zui-icon>
|
308 | <button slot="option">Update</button>
|
309 | <button slot="option">Print</button>
|
310 | <button slot="option">Email</button>
|
311 | <a href="#" slot="option" style="color: red;">Delete</a>
|
312 | </zui-button-dropdown>
|
313 | </zui-button-group>
|
314 | <script>
|
315 | document.getElementById("dialogOpen").addEventListener("click", () => {
|
316 | const dialog = document.getElementById("dialog");
|
317 | dialog.open();
|
318 | });
|
319 | </script>
|
320 | </div>
|
321 | <div class="tabbed-page">
|
322 | <h2>Wells</h2>
|
323 | <zui-well type="info">Employees must sign their own enrollment forms.</zui-well>
|
324 | <zui-well type="warning"
|
325 | >Make sure you review your enrollment form for accuracy before signing and sending to your
|
326 | administrator.</zui-well
|
327 | >
|
328 | <zui-well type="error"
|
329 | >Please edit the statement details to not match another carrier statement.
|
330 | </zui-well>
|
331 | </div>
|
332 | <div class="tabbed-page">
|
333 | <h2>Table</h2>
|
334 | <zui-table columns="6">
|
335 | <zui-table-row header>
|
336 | <zui-table-cell>Name</zui-table-cell>
|
337 | <zui-table-cell>Title</zui-table-cell>
|
338 | <zui-table-cell>Born</zui-table-cell>
|
339 | <zui-table-cell>Died</zui-table-cell>
|
340 | <zui-table-cell>Age</zui-table-cell>
|
341 | <zui-table-cell>Action</zui-table-cell>
|
342 | </zui-table-row>
|
343 | <zui-table-row>
|
344 | <zui-table-cell>Paulus Atreides</zui-table-cell>
|
345 | <zui-table-cell>Old Duke</zui-table-cell>
|
346 | <zui-table-cell>10,089 A.G.</zui-table-cell>
|
347 | <zui-table-cell>10,156 A.G.</zui-table-cell>
|
348 | <zui-table-cell>67 years old</zui-table-cell>
|
349 | <zui-table-cell action>
|
350 | <zui-button type="secondary">Betray</zui-button>
|
351 | </zui-table-cell>
|
352 | </zui-table-row>
|
353 | <zui-table-row>
|
354 | <zui-table-cell>Leto Atreides I</zui-table-cell>
|
355 | <zui-table-cell>Red Duke</zui-table-cell>
|
356 | <zui-table-cell>10,140 A.G.</zui-table-cell>
|
357 | <zui-table-cell>10,191 A.G.</zui-table-cell>
|
358 | <zui-table-cell>51 years old</zui-table-cell>
|
359 | <zui-table-cell action>
|
360 | <zui-button type="secondary">Betray</zui-button>
|
361 | </zui-table-cell>
|
362 | </zui-table-row>
|
363 | <zui-table-row>
|
364 | <zui-table-cell>Paul Atreides</zui-table-cell>
|
365 | <zui-table-cell>Padishah Emperor</zui-table-cell>
|
366 | <zui-table-cell>10,176 A.G.</zui-table-cell>
|
367 | <zui-table-cell>10,219 A.G.</zui-table-cell>
|
368 | <zui-table-cell>43 years old</zui-table-cell>
|
369 | <zui-table-cell action>
|
370 | <zui-button type="secondary">Betray</zui-button>
|
371 | </zui-table-cell>
|
372 | </zui-table-row>
|
373 | <zui-table-row>
|
374 | <zui-table-cell>Alia Atreides</zui-table-cell>
|
375 | <zui-table-cell>Imperial Regent</zui-table-cell>
|
376 | <zui-table-cell>10,191 A.G.</zui-table-cell>
|
377 | <zui-table-cell>10,219 A.G.</zui-table-cell>
|
378 | <zui-table-cell>28 years old</zui-table-cell>
|
379 | <zui-table-cell action>
|
380 | <zui-button type="secondary">Betray</zui-button>
|
381 | </zui-table-cell>
|
382 | </zui-table-row>
|
383 | <zui-table-row>
|
384 | <zui-table-cell>Leto Atreides II</zui-table-cell>
|
385 | <zui-table-cell>God Emperor</zui-table-cell>
|
386 | <zui-table-cell>10,207 A.G.</zui-table-cell>
|
387 | <zui-table-cell>13,728 A.G.</zui-table-cell>
|
388 | <zui-table-cell>3,521 years old</zui-table-cell>
|
389 | <zui-table-cell action>
|
390 | <zui-button type="secondary">Betray</zui-button>
|
391 | </zui-table-cell>
|
392 | </zui-table-row>
|
393 | <zui-table-row summary>
|
394 | <zui-table-cell span="6" style="text-align: right;">
|
395 | Average lifespan: 742 years
|
396 | </zui-table-cell>
|
397 | </zui-table-row>
|
398 | </zui-table>
|
399 | </div>
|
400 | <div class="tabbed-page">
|
401 | <h2>Dialog</h2>
|
402 | <zui-button id="openDialogBtn">Open dialog</zui-button>
|
403 | <zui-button id="openGiantDialogBtn">Open giant dialog</zui-button>
|
404 | </div>
|
405 | </section>
|
406 | </div>
|
407 | </zui-shell-content>
|
408 | <zui-shell-footer></zui-shell-footer>
|
409 | </zui-shell>
|
410 |
|
411 | <zui-dialog id="dialog">
|
412 | <h1 slot="header">Default dialog (max-width: 100%)</h1>
|
413 | <div slot="content">
|
414 | <p>I saw what you did to my stylized modal Julie, stop hiding the secrets from everyone.</p>
|
415 | This is a default dialog.
|
416 | <p>Content size determines width but it does not automatically span full width.</p>
|
417 | </div>
|
418 | <div slot="footer">
|
419 | <zui-button dialog-confirm>
|
420 | Ok
|
421 | </zui-button>
|
422 | <zui-button type="link" dialog-close>
|
423 | Cancel
|
424 | </zui-button>
|
425 | </div>
|
426 | </zui-dialog>
|
427 |
|
428 | <zui-dialog id="giantDialog">
|
429 | <h1 slot="header">Big boi scrolling modal, Baby.</h1>
|
430 | <div slot="content">
|
431 | <p><b>We should put the cool scroll bar in here.</b></p>
|
432 | <p>
|
433 | Yo, VIP, let's kick it!<br />
|
434 | Ice ice baby<br />
|
435 | Ice ice baby<br />
|
436 | All right stop<br />
|
437 | Collaborate and listen<br />
|
438 | Ice is back with my brand new invention<br />
|
439 | Something grabs a hold of me tightly<br />
|
440 | Then I flow that a harpoon daily and nightly<br />
|
441 | Will it ever stop?<br />
|
442 | Yo, I don't know<br />
|
443 | Turn off the lights and I'll glow<br />
|
444 | To the extreme, I rock a mic like a vandal<br />
|
445 | Light up a stage and wax a chump like a candle<br />
|
446 | Dance <br />
|
447 | Bum rush the speaker that booms<br />
|
448 | I'm killin' your brain like a poisonous mushroom<br />
|
449 | Deadly, when I play a dope melody<br />
|
450 | Anything less that the best is a felony<br />
|
451 | Love it or leave it<br />
|
452 | You better gain way<br />
|
453 | You better hit bull's eye<br />
|
454 | The kid don't play<br />
|
455 | If there was a problem<br />
|
456 | Yo, I'll solve it<br />
|
457 | Check out the hook while my DJ revolves it<br />
|
458 | Ice ice baby Vanilla<br />
|
459 | Ice ice baby Vanilla<br />
|
460 | Ice ice baby Vanilla<br />
|
461 | Ice ice baby Vanilla<br />
|
462 | Now that the party is jumping<br />
|
463 | With the bass kicked in, the fingers are pumpin'<br />
|
464 | Quick to the point, to the point no faking<br />
|
465 | I'm cooking MC's like a pound of bacon<br />
|
466 | Burning them if they're not quick and nimble<br />
|
467 | I go crazy when I hear a cymbal<br />
|
468 | And a hi hat with a souped up tempo<br />
|
469 | I'm on a roll and it's time to go solo<br />
|
470 | Rollin in my 5.0<br />
|
471 | With my ragtop down so my hair can blow<br />
|
472 | The girlies on standby<br />
|
473 | Waving just to say hi<br />
|
474 | Did you stop?<br />
|
475 | No, I just drove by<br />
|
476 | Kept on pursuing to the next stop<br />
|
477 | I busted a left and I'm heading to the next block<br />
|
478 | That block was dead<br />
|
479 | Yo so I continued to a1a Beachfront Ave<br />
|
480 | Girls were hot wearing less than bikinis<br />
|
481 | Rock man lovers driving Lamborghini<br />
|
482 | Jealous 'cause I'm out getting mine<br />
|
483 | Shay with a gauge and Vanilla with a nine<br />
|
484 | Ready for the chumps on the wall<br />
|
485 | The chumps are acting ill because they're so full of eight balls<br />
|
486 | Gunshots ranged out like a bell<br />
|
487 | I grabbed my nine<br />
|
488 | All I heard were shells<br />
|
489 | Fallin' on the concrete real fast<br />
|
490 | Jumped in my car, slammed on the gas<br />
|
491 | Bumper to bumper the avenue's packed<br />
|
492 | I'm tryin' to get away before the jackers jack<br />
|
493 | Police on the scene<br />
|
494 | You know what I mean<br />
|
495 | They passed me up, confronted all the dope fiends<br />
|
496 | If there was a problem<br />
|
497 | Yo, I'll solve it<br />
|
498 | Check out the hook while my DJ revolves it
|
499 | </p>
|
500 | </div>
|
501 | <zui-button slot="footer" type="link" dialog-close>Cancel</zui-button>
|
502 | <zui-button slot="footer" dialog-confirm>Ok</zui-button>
|
503 | </zui-dialog>
|
504 |
|
505 | <script type="module" src="./dist/bundle.js"></script>
|
506 | <script type="module" src="./dist/components/table.js"></script>
|
507 | <script>
|
508 | const tabEls = document.querySelectorAll("zui-tab");
|
509 |
|
510 | function setSelectedTabVisible() {
|
511 | const selectedTabEl = document.querySelector("zui-tabs");
|
512 | const selectedTabVal = selectedTabEl.getAttribute("selected");
|
513 | const pageTabs = Array.from(document.querySelectorAll('.tabbed-page-container > .tabbed-page'));
|
514 | pageTabs[Number(selectedTabVal)].classList.add('is-visible');
|
515 | }
|
516 |
|
517 | function handleTabClick() {
|
518 | setTimeout(() => {
|
519 | const selectedPageTab = document.querySelector('.tabbed-page-container .tabbed-page.is-visible');
|
520 | selectedPageTab && selectedPageTab.classList.remove('is-visible');
|
521 | setSelectedTabVisible();
|
522 | }, 1);
|
523 | }
|
524 |
|
525 | setSelectedTabVisible();
|
526 |
|
527 | tabEls.forEach((tab) => {
|
528 | tab.addEventListener("click", handleTabClick);
|
529 | });
|
530 | </script>
|
531 | <script defer>
|
532 | setTimeout(() => {
|
533 | const btn = document.querySelector('#openDialogBtn');
|
534 | const btnGiant = document.querySelector('#openGiantDialogBtn');
|
535 | btn.addEventListener('click', () => {
|
536 | document.querySelector('#dialog').open();
|
537 | });
|
538 | btnGiant.addEventListener('click', () => {
|
539 | document.querySelector('#giantDialog').open();
|
540 | });
|
541 | }, 200);
|
542 | </script>
|
543 | </body>
|
544 | </html>
|