|
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