|
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