|
1 | 1 | // Link tabs, as per https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#linked-tabs |
2 | 2 |
|
3 | | -const savedCodeTab = localStorage.getItem('savedTab') |
4 | | -const codeTabs = document.querySelectorAll(".tabbed-set > input") |
| 3 | +const savedCodeTab = localStorage.getItem("savedTab"); |
| 4 | +const codeTabs = document.querySelectorAll(".tabbed-set > input"); |
5 | 5 | for (const tab of codeTabs) { |
6 | | - tab.addEventListener("click", () => { |
7 | | - const current = document.querySelector(`label[for=${tab.id}]`) |
8 | | - const pos = current.getBoundingClientRect().top |
9 | | - const labelContent = current.innerHTML |
10 | | - const labels = document.querySelectorAll('.tabbed-set > label, .tabbed-alternate > .tabbed-labels > label') |
11 | | - for (const label of labels) { |
12 | | - if (label.innerHTML === labelContent) { |
13 | | - document.querySelector(`input[id=${label.getAttribute('for')}]`).checked = true |
14 | | - } |
15 | | - } |
16 | | - |
17 | | - // Preserve scroll position |
18 | | - const delta = (current.getBoundingClientRect().top) - pos |
19 | | - window.scrollBy(0, delta) |
| 6 | + tab.addEventListener("click", () => { |
| 7 | + const current = document.querySelector(`label[for=${tab.id}]`); |
| 8 | + const pos = current.getBoundingClientRect().top; |
| 9 | + const labelContent = current.innerHTML; |
| 10 | + const labels = document.querySelectorAll(".tabbed-set > label, .tabbed-alternate > .tabbed-labels > label"); |
| 11 | + for (const label of labels) { |
| 12 | + if (label.innerHTML === labelContent) { |
| 13 | + document.querySelector(`input[id=${label.getAttribute("for")}]`).checked = true; |
| 14 | + } |
| 15 | + } |
| 16 | + |
| 17 | + // Preserve scroll position |
| 18 | + const delta = (current.getBoundingClientRect().top) - pos; |
| 19 | + window.scrollBy(0, delta); |
20 | 20 |
|
21 | | - // Save |
22 | | - localStorage.setItem('savedTab', labelContent) |
23 | | - }) |
| 21 | + // Save |
| 22 | + localStorage.setItem("savedTab", labelContent); |
| 23 | + }); |
24 | 24 |
|
25 | | - // Select saved tab |
26 | | - const current = document.querySelector(`label[for=${tab.id}]`) |
27 | | - const labelContent = current.innerHTML |
28 | | - if (savedCodeTab === labelContent) { |
29 | | - tab.checked = true |
30 | | - } |
| 25 | + // Select saved tab |
| 26 | + const current = document.querySelector(`label[for=${tab.id}]`); |
| 27 | + const labelContent = current.innerHTML; |
| 28 | + if (savedCodeTab === labelContent) { |
| 29 | + tab.checked = true; |
| 30 | + } |
31 | 31 | } |
32 | 32 |
|
33 | 33 | // Lightbox for screenshot |
34 | 34 |
|
35 | | -const lightbox = document.createElement('div'); |
36 | | -lightbox.classList.add('lightbox'); |
| 35 | +const lightbox = document.createElement("div"); |
| 36 | +lightbox.classList.add("lightbox"); |
37 | 37 | document.body.appendChild(lightbox); |
38 | 38 |
|
39 | 39 | const showScreenshotOverlay = (e, el, group, index) => { |
40 | | - lightbox.classList.add('show'); |
41 | | - document.addEventListener('keydown', nextScreenshotKeyboardListener); |
42 | | - return showScreenshot(e, group, index); |
| 40 | + lightbox.classList.add("show"); |
| 41 | + document.addEventListener("keydown", nextScreenshotKeyboardListener); |
| 42 | + return showScreenshot(e, group, index); |
43 | 43 | }; |
44 | 44 |
|
45 | 45 | const showScreenshot = (e, group, index) => { |
46 | | - const actualIndex = resolveScreenshotIndex(group, index); |
47 | | - lightbox.innerHTML = '<div class="close-lightbox"></div>' + screenshots[group][actualIndex].innerHTML; |
48 | | - lightbox.querySelector('img').onclick = (e) => { return showScreenshot(e, group, actualIndex+1); }; |
49 | | - currentScreenshotGroup = group; |
50 | | - currentScreenshotIndex = actualIndex; |
51 | | - e.stopPropagation(); |
52 | | - return false; |
| 46 | + const actualIndex = resolveScreenshotIndex(group, index); |
| 47 | + lightbox.innerHTML = "<div class=\"close-lightbox\"></div>" + screenshots[group][actualIndex].innerHTML; |
| 48 | + lightbox.querySelector("img").onclick = (e) => { |
| 49 | + return showScreenshot(e, group, actualIndex + 1); |
| 50 | + }; |
| 51 | + currentScreenshotGroup = group; |
| 52 | + currentScreenshotIndex = actualIndex; |
| 53 | + e.stopPropagation(); |
| 54 | + return false; |
53 | 55 | }; |
54 | 56 |
|
55 | 57 | const nextScreenshot = (e) => { |
56 | | - return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex+1); |
| 58 | + return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex + 1); |
57 | 59 | }; |
58 | 60 |
|
59 | 61 | const previousScreenshot = (e) => { |
60 | | - return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex-1); |
| 62 | + return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex - 1); |
61 | 63 | }; |
62 | 64 |
|
63 | 65 | const resolveScreenshotIndex = (group, index) => { |
64 | | - if (index < 0) { |
65 | | - return screenshots[group].length - 1; |
66 | | - } else if (index > screenshots[group].length - 1) { |
67 | | - return 0; |
68 | | - } |
69 | | - return index; |
| 66 | + if (index < 0) { |
| 67 | + return screenshots[group].length - 1; |
| 68 | + } else if (index > screenshots[group].length - 1) { |
| 69 | + return 0; |
| 70 | + } |
| 71 | + return index; |
70 | 72 | }; |
71 | 73 |
|
72 | 74 | const hideScreenshotOverlay = (e) => { |
73 | | - lightbox.classList.remove('show'); |
74 | | - document.removeEventListener('keydown', nextScreenshotKeyboardListener); |
| 75 | + lightbox.classList.remove("show"); |
| 76 | + document.removeEventListener("keydown", nextScreenshotKeyboardListener); |
75 | 77 | }; |
76 | 78 |
|
77 | 79 | const nextScreenshotKeyboardListener = (e) => { |
78 | | - switch (e.keyCode) { |
79 | | - case 37: |
80 | | - previousScreenshot(e); |
81 | | - break; |
82 | | - case 39: |
83 | | - nextScreenshot(e); |
84 | | - break; |
85 | | - } |
| 80 | + switch (e.keyCode) { |
| 81 | + case 37: |
| 82 | + previousScreenshot(e); |
| 83 | + break; |
| 84 | + case 39: |
| 85 | + nextScreenshot(e); |
| 86 | + break; |
| 87 | + } |
86 | 88 | }; |
87 | 89 |
|
88 | | -let currentScreenshotGroup = ''; |
| 90 | +let currentScreenshotGroup = ""; |
89 | 91 | let currentScreenshotIndex = 0; |
90 | 92 | let screenshots = {}; |
91 | | -Array.from(document.getElementsByClassName('screenshots')).forEach((sg) => { |
92 | | - const group = sg.id; |
93 | | - screenshots[group] = [...sg.querySelectorAll('a')]; |
94 | | - screenshots[group].forEach((el, index) => { |
95 | | - el.onclick = (e) => { return showScreenshotOverlay(e, el, group, index); }; |
96 | | - }); |
| 93 | +Array.from(document.getElementsByClassName("screenshots")).forEach((sg) => { |
| 94 | + const group = sg.id; |
| 95 | + screenshots[group] = [...sg.querySelectorAll("a")]; |
| 96 | + screenshots[group].forEach((el, index) => { |
| 97 | + el.onclick = (e) => { |
| 98 | + return showScreenshotOverlay(e, el, group, index); |
| 99 | + }; |
| 100 | + }); |
97 | 101 | }); |
98 | 102 |
|
99 | 103 | lightbox.onclick = hideScreenshotOverlay; |
0 commit comments