add zoom lock/unlock in image viewer

Author: jacobwhall

assets/js/components/image_viewer.js

@@ -48,7 +48,7 @@ function initOSDViewer(el) {
     maxZoomPixelRatio: 4,
     minZoomLevel: 0.5,
     defaultZoomLevel: 0,
-    gestureSettingsMouse: { scrollToZoom: true },
+    gestureSettingsMouse: { scrollToZoom: false },
     tileSources: [iiifUrl],
     drawer: "canvas",
   });

assets/js/components/osd_buttons.js

@@ -1,64 +1,87 @@
-const buttons = [
+const zoomButtons = [
   { icon: "fa-plus", title: "Zoom in", action: (v) => v.viewport.zoomBy(1.5) },
-  { icon: "fa-minus", title: "Zoom out", action: (v) => v.viewport.zoomBy(0.667) },
+  {
+    icon: "fa-minus",
+    title: "Zoom out",
+    action: (v) => v.viewport.zoomBy(0.667),
+  },
   { icon: "fa-home", title: "Reset view", action: (v) => v.viewport.goHome() },
-  { icon: "fa-expand", title: "Full screen", action: (v) => v.setFullScreen(!v.isFullPage()) },
+  {
+    icon: "fa-expand",
+    title: "Full screen",
+    action: (v) => v.setFullScreen(!v.isFullPage()),
+  },
 ];
 
+function makeButton({ icon, title, onClick }) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "osd-btn";
+  btn.title = title;
+  btn.innerHTML = `<i class="fas ${icon}"></i>`;
+  btn.addEventListener("click", onClick);
+  return btn;
+}
+
+function setViewerInteractive(viewer, enabled) {
+  const settings = {
+    scrollToZoom: enabled,
+    clickToZoom: enabled,
+    dblClickToZoom: enabled,
+    pinchToZoom: enabled,
+    flickEnabled: enabled,
+  };
+  Object.assign(viewer.gestureSettingsMouse, settings);
+  Object.assign(viewer.gestureSettingsTouch, settings);
+  viewer.panHorizontal = enabled;
+  viewer.panVertical = enabled;
+}
+
 export function addViewerButtons(viewer, container) {
-  const group = document.createElement("div");
-  Object.assign(group.style, {
-    position: "absolute",
-    top: "10px",
-    right: "10px",
-    zIndex: "10",
-    borderRadius: "0.375rem",
-    border: "1px solid rgba(0, 0, 0, 0.125)",
-    overflow: "hidden",
-    display: "flex",
-    flexDirection: "column",
-  });
+  container.style.position = "relative";
 
-  for (const { icon, title, action } of buttons) {
-    const btn = document.createElement("button");
-    btn.type = "button";
-    btn.title = title;
-    btn.innerHTML = `<i class="fas ${icon}"></i>`;
-    Object.assign(btn.style, {
-      backgroundColor: "#fff",
-      border: "none",
-      borderBottom: "1px solid rgba(0, 0, 0, 0.125)",
-      color: "#495057",
-      fontSize: "0.875rem",
-      width: "32px",
-      height: "32px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      cursor: "pointer",
-      transition: "all 0.15s ease-in-out",
-    });
-    btn.addEventListener("mouseenter", () => {
-      btn.style.backgroundColor = "#f8f9fa";
-      btn.style.color = "#212529";
-    });
-    btn.addEventListener("mouseleave", () => {
-      btn.style.backgroundColor = "#fff";
-      btn.style.color = "#495057";
-    });
-    btn.addEventListener("mousedown", () => {
-      btn.style.backgroundColor = "#e9ecef";
-    });
-    btn.addEventListener("mouseup", () => {
-      btn.style.backgroundColor = "#f8f9fa";
-    });
-    btn.addEventListener("click", () => action(viewer));
-    group.appendChild(btn);
+  // Start locked
+  setViewerInteractive(viewer, false);
+
+  // --- Locked state: single unlock button ---
+  const lockedGroup = document.createElement("div");
+  lockedGroup.className = "osd-btn-group";
+  lockedGroup.appendChild(
+    makeButton({
+      icon: "fa-search-plus",
+      title: "Enable zoom",
+      onClick: () => {
+        setViewerInteractive(viewer, true);
+        lockedGroup.style.display = "none";
+        unlockedGroup.style.display = "flex";
+      },
+    }),
+  );
+  container.appendChild(lockedGroup);
+
+  // --- Unlocked state: zoom controls + lock button ---
+  const unlockedGroup = document.createElement("div");
+  unlockedGroup.className = "osd-btn-group";
+  unlockedGroup.style.display = "none";
+
+  for (const { icon, title, action } of zoomButtons) {
+    unlockedGroup.appendChild(
+      makeButton({ icon, title, onClick: () => action(viewer) }),
+    );
   }
 
-  // Remove border-bottom from last button
-  group.lastElementChild.style.borderBottom = "none";
+  unlockedGroup.appendChild(
+    makeButton({
+      icon: "fa-lock",
+      title: "Lock view",
+      onClick: () => {
+        viewer.viewport.goHome();
+        setViewerInteractive(viewer, false);
+        unlockedGroup.style.display = "none";
+        lockedGroup.style.display = "flex";
+      },
+    }),
+  );
 
-  container.style.position = "relative";
-  container.appendChild(group);
+  container.appendChild(unlockedGroup);
 }

assets/styles/components/image-viewer.css

@@ -13,3 +13,43 @@
 #osd-viewer[style*="aspect-ratio"] {
     height: auto;
 }
+
+.osd-btn-group {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 10;
+    border-radius: 0.375rem;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.osd-btn {
+    background-color: #fff;
+    border: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    color: #495057;
+    font-size: 0.875rem;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.15s ease-in-out;
+}
+
+.osd-btn:last-child {
+    border-bottom: none;
+}
+
+.osd-btn:hover {
+    background-color: #f8f9fa;
+    color: #212529;
+}
+
+.osd-btn:active {
+    background-color: #e9ecef;
+}