Docs docs docs

docs/static/js/extra.js

@@ -29,3 +29,71 @@ for (const tab of tabs) {
         tab.checked = true
     }
 }
+
+// Lightbox for screenshot
+
+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);
+};
+
+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 nextScreenshot = (e) => {
+    return showScreenshot(e, currentScreenshotGroup, currentScreenshotIndex+1);
+};
+
+const previousScreenshot = (e) => {
+    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;
+};
+
+const hideScreenshotOverlay = (e) => {
+    lightbox.classList.remove('show');
+    document.removeEventListener('keydown', nextScreenshotKeyboardListener);
+};
+
+const nextScreenshotKeyboardListener = (e) => {
+    switch (e.keyCode) {
+        case 37:
+            previousScreenshot(e);
+            break;
+        case 39:
+            nextScreenshot(e);
+            break;
+    }
+};
+
+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); };
+    });
+});
+
+lightbox.onclick = hideScreenshotOverlay;