|
1 | | -document.addEventListener('DOMContentLoaded', function () { |
| 1 | +document.addEventListener("DOMContentLoaded", function () { |
2 | 2 |
|
3 | 3 | // Make tables responsive by wrapping them in a div and making them scrollable |
4 | | - const tables = document.querySelectorAll('table.docutils') |
| 4 | + const tables = document.querySelectorAll("table.docutils") |
5 | 5 | tables.forEach(function(table){ |
6 | | - table.outerHTML = '<div class="responsive-table__container">' + table.outerHTML + '</div>' |
| 6 | + table.outerHTML = '<div class="responsive-table__container">' + table.outerHTML + "</div>" |
7 | 7 | }) |
8 | 8 |
|
9 | | - const togglerInput = document.querySelector('.toggler__input') |
10 | | - const togglerLabel = document.querySelector('.toggler__label') |
11 | | - const sideMenu = document.querySelector('.menu-wrapper') |
12 | | - const menuItems = document.querySelectorAll('.menu') |
13 | | - const doc = document.querySelector('.document') |
14 | | - const body = document.querySelector('body') |
| 9 | + const togglerInput = document.querySelector(".toggler__input") |
| 10 | + const togglerLabel = document.querySelector(".toggler__label") |
| 11 | + const sideMenu = document.querySelector(".menu-wrapper") |
| 12 | + const menuItems = document.querySelectorAll(".menu") |
| 13 | + const doc = document.querySelector(".document") |
| 14 | + const body = document.querySelector("body") |
15 | 15 |
|
16 | 16 | function closeMenu() { |
17 | 17 | togglerInput.checked = false |
18 | | - sideMenu.setAttribute("aria-expanded", 'false') |
19 | | - sideMenu.setAttribute('aria-hidden', 'true') |
20 | | - togglerLabel.setAttribute('aria-pressed', 'false') |
21 | | - body.style.overflow = 'visible' |
| 18 | + sideMenu.setAttribute("aria-expanded", "false") |
| 19 | + sideMenu.setAttribute("aria-hidden", "true") |
| 20 | + togglerLabel.setAttribute("aria-pressed", "false") |
| 21 | + body.style.overflow = "visible" |
22 | 22 | } |
23 | 23 | function openMenu() { |
24 | 24 | togglerInput.checked = true |
25 | | - sideMenu.setAttribute("aria-expanded", 'true') |
26 | | - sideMenu.setAttribute('aria-hidden', 'false') |
27 | | - togglerLabel.setAttribute('aria-pressed', 'true') |
28 | | - body.style.overflow = 'hidden' |
| 25 | + sideMenu.setAttribute("aria-expanded", "true") |
| 26 | + sideMenu.setAttribute("aria-hidden", "false") |
| 27 | + togglerLabel.setAttribute("aria-pressed", "true") |
| 28 | + body.style.overflow = "hidden" |
29 | 29 | } |
30 | 30 |
|
31 | 31 | // Close menu when link on the sideMenu is clicked |
32 | | - sideMenu.addEventListener('click', function (event) { |
| 32 | + sideMenu.addEventListener("click", function (event) { |
33 | 33 | let target = event.target |
34 | | - if (target.tagName.toLowerCase() !== 'a') { |
| 34 | + if (target.tagName.toLowerCase() !== "a") { |
35 | 35 | return |
36 | 36 | } |
37 | 37 | closeMenu() |
38 | 38 | }) |
39 | 39 | // Add accessibility data when sideMenu is opened/closed |
40 | | - togglerInput.addEventListener('change', function (e) { |
| 40 | + togglerInput.addEventListener("change", function (e) { |
41 | 41 | togglerInput.checked ? openMenu() : closeMenu() |
42 | 42 | }) |
43 | 43 | // Make sideMenu links tabbable only when visible |
44 | 44 | for(let menuItem of menuItems) { |
45 | 45 | if(togglerInput.checked) { |
46 | | - menuItem.setAttribute('tabindex', '0') |
| 46 | + menuItem.setAttribute("tabindex", "0") |
47 | 47 | } else { |
48 | | - menuItem.setAttribute('tabindex', '-1') |
| 48 | + menuItem.setAttribute("tabindex", "-1") |
49 | 49 | } |
50 | 50 | } |
51 | 51 | // Close sideMenu when document body is clicked |
52 | | - doc.addEventListener('click', function () { |
| 52 | + doc.addEventListener("click", function () { |
53 | 53 | if (togglerInput.checked) { |
54 | 54 | closeMenu() |
55 | 55 | } |
|
0 commit comments