Screenshots

server/static/css/app.css

@@ -95,6 +95,83 @@ code {
     color: #666;
 }
 
+/* Screenshots */
+
+#screenshots {
+    text-align: center;
+}
+
+#screenshots img {
+    height: 190px;
+    margin: 3px;
+    border-radius: 5px;
+    filter: drop-shadow(2px 2px 2px #ddd);
+}
+
+#screenshots .nowrap {
+    white-space: nowrap;
+}
+
+/* Lightbox; thanks to https://yossiabramov.com/blog/vanilla-js-lightbox */
+
+.lightbox {
+    opacity: 0;
+    visibility: hidden;
+    position: fixed;
+    left:0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: -1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease-in;
+}
+
+.lightbox.show {
+    background-color: rgba(0,0,0, 0.75);
+    opacity: 1;
+    visibility: visible;
+    z-index: 1000;
+}
+
+.lightbox img {
+    max-width: 90%;
+    max-height: 90%;
+    filter: drop-shadow(5px 5px 10px #222);
+    border-radius: 5px;
+}
+
+.lightbox .close-lightbox {
+    cursor: pointer;
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    width: 20px;
+    height: 20px;
+}
+
+.lightbox .close-lightbox::after,
+.lightbox .close-lightbox::before {
+    content: '';
+    width: 3px;
+    height: 20px;
+    background-color: #ddd;
+    position: absolute;
+    border-radius: 5px;
+    transform: rotate(45deg);
+}
+
+.lightbox .close-lightbox::before {
+    transform: rotate(-45deg);
+}
+
+.lightbox .close-lightbox:hover::after,
+.lightbox .close-lightbox:hover::before {
+    background-color: #fff;
+}
+
 /* Subscribe box */
 
 button {

server/static/js/app.js

@@ -32,6 +32,9 @@ const detailNoNotifications = document.getElementById("detailNoNotifications");
 const detailCloseButton = document.getElementById("detailCloseButton");
 const detailNotificationsDisallowed = document.getElementById("detailNotificationsDisallowed");
 
+/* Screenshots */
+const lightbox = document.getElementById("lightbox");
+
 const subscribe = (topic) => {
     if (Notification.permission !== "granted") {
         Notification.requestPermission().then((permission) => {
@@ -203,6 +206,54 @@ const showNotificationDeniedError = () => {
     showError("You have blocked desktop notifications for this website. Please unblock them and refresh to use the web-based desktop notifications.");
 };
 
+const showScreenshotOverlay = (e, el, index) => {
+    lightbox.classList.add('show');
+    document.addEventListener('keydown', nextScreenshotKeyboardListener);
+    return showScreenshot(e, index);
+};
+
+const showScreenshot = (e, index) => {
+    const actualIndex = resolveScreenshotIndex(index);
+    lightbox.innerHTML = '<div class="close-lightbox"></div>' + screenshots[actualIndex].innerHTML;
+    lightbox.querySelector('img').onclick = (e) => { return showScreenshot(e,actualIndex+1); };
+    currentScreenshotIndex = actualIndex;
+    e.stopPropagation();
+    return false;
+};
+
+const nextScreenshot = (e) => {
+    return showScreenshot(e, currentScreenshotIndex+1);
+};
+
+const previousScreenshot = (e) => {
+    return showScreenshot(e, currentScreenshotIndex-1);
+};
+
+const resolveScreenshotIndex = (index) => {
+    if (index < 0) {
+        return screenshots.length - 1;
+    } else if (index > screenshots.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;
+    }
+};
+
 // From: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
 async function* makeTextFileLineIterator(fileURL) {
     const utf8Decoder = new TextDecoder('utf-8');
@@ -248,6 +299,14 @@ detailCloseButton.onclick = () => {
     hideDetailView();
 };
 
+let currentScreenshotIndex = 0;
+const screenshots = [...document.querySelectorAll("#screenshots a")];
+screenshots.forEach((el, index) => {
+    el.onclick = (e) => { return showScreenshotOverlay(e, el, index); };
+});
+
+lightbox.onclick = hideScreenshotOverlay;
+
 // Disable Web UI if notifications of EventSource are not available
 if (!window["Notification"] || !window["EventSource"]) {
     showBrowserIncompatibleError();