|
|
@@ -1,99 +1,103 @@
|
|
|
// Link tabs, as per https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#linked-tabs
|
|
|
|
|
|
-const savedCodeTab = localStorage.getItem('savedTab')
|
|
|
-const codeTabs = document.querySelectorAll(".tabbed-set > input")
|
|
|
+const savedCodeTab = localStorage.getItem("savedTab");
|
|
|
+const codeTabs = document.querySelectorAll(".tabbed-set > input");
|
|
|
for (const tab of codeTabs) {
|
|
|
- tab.addEventListener("click", () => {
|
|
|
- const current = document.querySelector(`label[for=${tab.id}]`)
|
|
|
- const pos = current.getBoundingClientRect().top
|
|
|
- const labelContent = current.innerHTML
|
|
|
- const labels = document.querySelectorAll('.tabbed-set > label, .tabbed-alternate > .tabbed-labels > label')
|
|
|
- for (const label of labels) {
|
|
|
- if (label.innerHTML === labelContent) {
|
|
|
- document.querySelector(`input[id=${label.getAttribute('for')}]`).checked = true
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // Preserve scroll position
|
|
|
- const delta = (current.getBoundingClientRect().top) - pos
|
|
|
- window.scrollBy(0, delta)
|
|
|
+ tab.addEventListener("click", () => {
|
|
|
+ const current = document.querySelector(`label[for=${tab.id}]`);
|
|
|
+ const pos = current.getBoundingClientRect().top;
|
|
|
+ const labelContent = current.innerHTML;
|
|
|
+ const labels = document.querySelectorAll(".tabbed-set > label, .tabbed-alternate > .tabbed-labels > label");
|
|
|
+ for (const label of labels) {
|
|
|
+ if (label.innerHTML === labelContent) {
|
|
|
+ document.querySelector(`input[id=${label.getAttribute("for")}]`).checked = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Preserve scroll position
|
|
|
+ const delta = (current.getBoundingClientRect().top) - pos;
|
|
|
+ window.scrollBy(0, delta);
|
|
|
|
|
|
- // Save
|
|
|
- localStorage.setItem('savedTab', labelContent)
|
|
|
- })
|
|
|
+ // Save
|
|
|
+ localStorage.setItem("savedTab", labelContent);
|
|
|
+ });
|
|
|
|
|
|
- // Select saved tab
|
|
|
- const current = document.querySelector(`label[for=${tab.id}]`)
|
|
|
- const labelContent = current.innerHTML
|
|
|
- if (savedCodeTab === labelContent) {
|
|
|
- tab.checked = true
|
|
|
- }
|
|
|
+ // Select saved tab
|
|
|
+ const current = document.querySelector(`label[for=${tab.id}]`);
|
|
|
+ const labelContent = current.innerHTML;
|
|
|
+ if (savedCodeTab === labelContent) {
|
|
|
+ tab.checked = true;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// Lightbox for screenshot
|
|
|
|
|
|
-const lightbox = document.createElement('div');
|
|
|
-lightbox.classList.add('lightbox');
|
|
|
+const lightbox = document.createElement("div");
|
|
|
+lightbox.classList.add("lightbox");
|
|
|
document.body.appendChild(lightbox);
|
|
|
|
|
|
const showScreenshotOverlay = (e, el, group, index) => {
|
|
|
- lightbox.classList.add('show');
|
|
|
- document.addEventListener('keydown', nextScreenshotKeyboardListener);
|
|
|
- return showScreenshot(e, group, index);
|
|
|
+ lightbox.classList.add("show");
|
|
|
+ document.addEventListener("keydown", nextScreenshotKeyboardListener);
|
|
|
+ return showScreenshot(e, group, index);
|
|
|
};
|
|
|
|
|
|
const showScreenshot = (e, group, index) => {
|
|
|
- const actualIndex = resolveScreenshotIndex(group, index);
|
|
|
- lightbox.innerHTML = '<div class="close-lightbox"></div>' + screenshots[group][actualIndex].innerHTML;
|
|
|
- lightbox.querySelector('img').onclick = (e) => { return showScreenshot(e, group, actualIndex+1); };
|
|
|
- currentScreenshotGroup = group;
|
|
|
- currentScreenshotIndex = actualIndex;
|
|
|
- e.stopPropagation();
|
|
|
- return false;
|
|
|
+ const actualIndex = resolveScreenshotIndex(group, index);
|
|
|
+ lightbox.innerHTML = "<div class=\"close-lightbox\"></div>" + screenshots[group][actualIndex].innerHTML;
|
|
|
+ lightbox.querySelector("img").onclick = (e) => {
|
|
|
+ return showScreenshot(e, group, actualIndex + 1);
|
|
|
+ };
|
|
|
+ currentScreenshotGroup = group;
|
|
|
+ currentScreenshotIndex = actualIndex;
|
|
|
+ e.stopPropagation();
|
|
|
+ return false;
|
|
|
};
|
|
|
|
|
|
const nextScreenshot = (e) => {
|
|
|
- return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex+1);
|
|
|
+ return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex + 1);
|
|
|
};
|
|
|
|
|
|
const previousScreenshot = (e) => {
|
|
|
- return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex-1);
|
|
|
+ return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex - 1);
|
|
|
};
|
|
|
|
|
|
const resolveScreenshotIndex = (group, index) => {
|
|
|
- if (index < 0) {
|
|
|
- return screenshots[group].length - 1;
|
|
|
- } else if (index > screenshots[group].length - 1) {
|
|
|
- return 0;
|
|
|
- }
|
|
|
- return index;
|
|
|
+ if (index < 0) {
|
|
|
+ return screenshots[group].length - 1;
|
|
|
+ } else if (index > screenshots[group].length - 1) {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ return index;
|
|
|
};
|
|
|
|
|
|
const hideScreenshotOverlay = (e) => {
|
|
|
- lightbox.classList.remove('show');
|
|
|
- document.removeEventListener('keydown', nextScreenshotKeyboardListener);
|
|
|
+ lightbox.classList.remove("show");
|
|
|
+ document.removeEventListener("keydown", nextScreenshotKeyboardListener);
|
|
|
};
|
|
|
|
|
|
const nextScreenshotKeyboardListener = (e) => {
|
|
|
- switch (e.keyCode) {
|
|
|
- case 37:
|
|
|
- previousScreenshot(e);
|
|
|
- break;
|
|
|
- case 39:
|
|
|
- nextScreenshot(e);
|
|
|
- break;
|
|
|
- }
|
|
|
+ switch (e.keyCode) {
|
|
|
+ case 37:
|
|
|
+ previousScreenshot(e);
|
|
|
+ break;
|
|
|
+ case 39:
|
|
|
+ nextScreenshot(e);
|
|
|
+ break;
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
-let currentScreenshotGroup = '';
|
|
|
+let currentScreenshotGroup = "";
|
|
|
let currentScreenshotIndex = 0;
|
|
|
let screenshots = {};
|
|
|
-Array.from(document.getElementsByClassName('screenshots')).forEach((sg) => {
|
|
|
- const group = sg.id;
|
|
|
- screenshots[group] = [...sg.querySelectorAll('a')];
|
|
|
- screenshots[group].forEach((el, index) => {
|
|
|
- el.onclick = (e) => { return showScreenshotOverlay(e, el, group, index); };
|
|
|
- });
|
|
|
+Array.from(document.getElementsByClassName("screenshots")).forEach((sg) => {
|
|
|
+ const group = sg.id;
|
|
|
+ screenshots[group] = [...sg.querySelectorAll("a")];
|
|
|
+ screenshots[group].forEach((el, index) => {
|
|
|
+ el.onclick = (e) => {
|
|
|
+ return showScreenshotOverlay(e, el, group, index);
|
|
|
+ };
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
lightbox.onclick = hideScreenshotOverlay;
|
binwiederhier