Allow magnifying images

Author: petrutlucian94

source/_static/lightbox.css

@@ -0,0 +1,33 @@
+.rst-content img.lightbox-enabled {
+  cursor: zoom-in;
+}
+
+body.image-lightbox-open {
+  overflow: hidden;
+}
+
+.image-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  background: rgba(0, 0, 0, 0.88);
+  cursor: zoom-out;
+}
+
+.image-lightbox[hidden] {
+  display: none;
+}
+
+.image-lightbox img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  margin: 0;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+  cursor: zoom-out;
+}

source/_static/lightbox.js

@@ -0,0 +1,84 @@
+(function () {
+  var skip =
+    ".platform, .platform-vendors, .partner-logos, .video-preview, .video-previews, table.docutils";
+
+  function eligible(img) {
+    return img.closest(".rst-content") && !img.closest(skip) && !img.closest("a");
+  }
+
+  function init() {
+    var images = document.querySelectorAll(".rst-content img");
+    var targets = [];
+    images.forEach(function (img) {
+      if (eligible(img)) {
+        targets.push(img);
+      }
+    });
+    if (!targets.length) {
+      return;
+    }
+
+    var overlay = document.createElement("div");
+    overlay.className = "image-lightbox";
+    overlay.hidden = true;
+    overlay.setAttribute("role", "dialog");
+    overlay.setAttribute("aria-modal", "true");
+    overlay.setAttribute("aria-label", "Enlarged image");
+
+    var enlarged = document.createElement("img");
+    enlarged.alt = "";
+    overlay.appendChild(enlarged);
+    document.body.appendChild(overlay);
+
+    var lastFocus = null;
+
+    function open(img) {
+      lastFocus = document.activeElement;
+      enlarged.src = img.currentSrc || img.src;
+      enlarged.alt = img.alt || "";
+      overlay.hidden = false;
+      document.body.classList.add("image-lightbox-open");
+      overlay.focus();
+    }
+
+    function close() {
+      overlay.hidden = true;
+      enlarged.removeAttribute("src");
+      enlarged.alt = "";
+      document.body.classList.remove("image-lightbox-open");
+      if (lastFocus && lastFocus.focus) {
+        lastFocus.focus();
+      }
+    }
+
+    overlay.tabIndex = -1;
+    overlay.addEventListener("click", close);
+    document.addEventListener("keydown", function (event) {
+      if (event.key === "Escape" && !overlay.hidden) {
+        close();
+      }
+    });
+
+    targets.forEach(function (img) {
+      img.classList.add("lightbox-enabled");
+      img.tabIndex = 0;
+      img.setAttribute("role", "button");
+      img.setAttribute("aria-haspopup", "dialog");
+      img.addEventListener("click", function () {
+        open(img);
+      });
+      img.addEventListener("keydown", function (event) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          open(img);
+        }
+      });
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();

source/conf.py

@@ -33,7 +33,8 @@
 
 html_theme = "sphinx_rtd_theme"
 html_static_path = ["_static"]
-html_css_files = ["overview-logos.css"]
+html_css_files = ["overview-logos.css", "lightbox.css"]
+html_js_files = ["lightbox.js"]
 html_title = "Coriolis Documentation"
 html_logo = "_static/images/coriolis-logo.svg"
 html_favicon = "_static/images/coriolis-logo.svg"