|
1 | | -'use strict'; |
2 | | - |
3 | 1 | function openMenu(menu) { |
4 | | - menu.style.maxHeight = menu.scrollHeight + 'px'; |
5 | | - setTimeout(function () { |
6 | | - menu.style.maxHeight = 'none'; |
| 2 | + menu.style.maxHeight = `${menu.scrollHeight}px`; |
| 3 | + setTimeout(() => { |
| 4 | + menu.style.maxHeight = "none"; |
7 | 5 | }, 600); |
8 | 6 | } |
9 | 7 |
|
10 | 8 | function closeMenu(menu) { |
11 | | - menu.style.maxHeight = menu.scrollHeight + 'px'; |
12 | | - setTimeout(function () { |
13 | | - menu.style.maxHeight = ''; |
| 9 | + menu.style.maxHeight = `${menu.scrollHeight}px`; |
| 10 | + setTimeout(() => { |
| 11 | + menu.style.maxHeight = ""; |
14 | 12 | }, 0); |
15 | 13 | } |
16 | 14 |
|
17 | | -function toggleMenu(menu) { |
18 | | - menu = menu || document.querySelector('#menu'); |
19 | | - var maxHeight = menu.style.maxHeight; |
| 15 | +function toggleMenu(menu = document.querySelector("#menu")) { |
| 16 | + const maxHeight = menu.style.maxHeight; |
20 | 17 | maxHeight ? closeMenu(menu) : openMenu(menu); |
21 | | - menu.classList.toggle('open'); |
| 18 | + menu.classList.toggle("open"); |
22 | 19 | } |
23 | 20 |
|
24 | 21 | function toggleProposal(item) { |
25 | | - var content = item.querySelector('.featurelist__item__info'); |
26 | | - var maxHeight = content.style.maxHeight; |
27 | | - content.style.maxHeight = maxHeight ? '' : content.scrollHeight + 'px'; |
28 | | - content.setAttribute('aria-hidden', !!maxHeight); |
| 22 | + const content = item.querySelector(".featurelist__item__info"); |
| 23 | + const maxHeight = content.style.maxHeight; |
| 24 | + content.style.maxHeight = maxHeight ? "" : `${content.scrollHeight}px`; |
| 25 | + content.setAttribute("aria-hidden", !!maxHeight); |
29 | 26 | if (maxHeight) { |
30 | | - content.setAttribute('tabindex', '-1'); |
| 27 | + content.setAttribute("tabindex", "-1"); |
31 | 28 | } else { |
32 | | - content.removeAttribute('tabindex'); |
| 29 | + content.removeAttribute("tabindex"); |
33 | 30 | } |
34 | | - item.classList.toggle('open'); |
| 31 | + item.classList.toggle("open"); |
35 | 32 | } |
36 | 33 |
|
37 | 34 | /** |
38 | 35 | * Represents the start of this application |
39 | 36 | */ |
40 | 37 | function start() { |
41 | | - var items = document.querySelectorAll( |
42 | | - '.featurelist__item .featurelist__item__example' |
| 38 | + const items = document.querySelectorAll( |
| 39 | + ".featurelist__item .featurelist__item__example", |
43 | 40 | ); |
44 | 41 |
|
45 | | - document.body.classList.remove('no-js'); |
| 42 | + document.body.classList.remove("no-js"); |
46 | 43 |
|
47 | | - items.forEach(function (v) { |
48 | | - v.addEventListener('click', function () { |
| 44 | + for (const item of items) { |
| 45 | + item.addEventListener("click", () => { |
49 | 46 | toggleProposal(this.parentNode); |
50 | 47 | }); |
51 | | - v.addEventListener('keypress', function (ev) { |
52 | | - if (ev.key === 'Enter' || ev.key === ' ') { |
| 48 | + item.addEventListener("keypress", (ev) => { |
| 49 | + if (ev.key === "Enter" || ev.key === " ") { |
53 | 50 | ev.preventDefault(); |
54 | 51 | toggleProposal(this.parentNode); |
55 | 52 | } |
56 | 53 | }); |
57 | | - }); |
| 54 | + } |
58 | 55 |
|
59 | | - document |
60 | | - .querySelector('.menu-toggle') |
61 | | - .addEventListener('click', function (ev) { |
62 | | - ev.preventDefault(); |
63 | | - toggleMenu(); |
64 | | - }); |
| 56 | + document.querySelector(".menu-toggle").addEventListener("click", (ev) => { |
| 57 | + ev.preventDefault(); |
| 58 | + toggleMenu(); |
| 59 | + }); |
65 | 60 |
|
66 | | - document.querySelectorAll('.menu-link').forEach(function (link) { |
67 | | - var submenu = link.parentNode.querySelector('.submenu'); |
| 61 | + for (const link of document.querySelectorAll(".menu-link")) { |
| 62 | + const submenu = link.parentNode.querySelector(".submenu"); |
68 | 63 | if (submenu) { |
69 | | - link.addEventListener('click', function (ev) { |
70 | | - var t = link.parentNode.querySelector('.submenu-toggle'); |
| 64 | + link.addEventListener("click", (ev) => { |
| 65 | + const t = link.parentNode.querySelector(".submenu-toggle"); |
71 | 66 | ev.preventDefault(); |
72 | 67 | toggleMenu(submenu); |
73 | | - t.classList.toggle('open'); |
| 68 | + t.classList.toggle("open"); |
74 | 69 | }); |
75 | 70 | } |
76 | | - }); |
| 71 | + } |
77 | 72 |
|
78 | | - document.querySelectorAll('.submenu-toggle').forEach(function (toggle) { |
79 | | - toggle.addEventListener('click', function (ev) { |
80 | | - var t = ev.target; |
81 | | - var submenu = t.parentNode.querySelector('.submenu'); |
| 73 | + for (const toggle of document.querySelectorAll(".submenu-toggle")) { |
| 74 | + toggle.addEventListener("click", (ev) => { |
| 75 | + const t = ev.target; |
| 76 | + const submenu = t.parentNode.querySelector(".submenu"); |
82 | 77 | toggleMenu(submenu); |
83 | | - t.classList.toggle('open'); |
| 78 | + t.classList.toggle("open"); |
84 | 79 | }); |
85 | | - }); |
| 80 | + } |
86 | 81 | } |
87 | 82 |
|
88 | 83 | start(); |
0 commit comments