jekyll-image-links 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9d85919e65b8d1b2cf32c8d1ffccc9b149f8d84e7950020f5d291e0262dee60
-  data.tar.gz: f933adffe5a1970b78669ae40edd0f5595342c01e43e7f1f53c50072a1f5236b
+  metadata.gz: bdf6ba05c3bcb44228b8870062fbb9f63d2109ddb90f77d619be852393d68498
+  data.tar.gz: 00dbc1cad4345d24f0524cb94b824e7fbc49175d97332e9271ff765dabb67d25
 SHA512:
-  metadata.gz: 4454cc915358b308486232099c78a6db594d6c86318e4608cf490ba9a2b6de954a76f276c0e2b91a61127115535ca1eb550ab901a2218cd42be86acd5b7ac83d
-  data.tar.gz: 59a5bbac2e96705896e0ddbcedefe36b215f3fc6fbe541c562b4e3a3b91f8f604df03fd0570daf86bcc0898059715eae29a22fb95c7c489457c27a603ff6e76f
+  metadata.gz: 6a968dfeb35aeac174223c9f1403ccce199be670a940bc00da656e864b5b7ff09de4f7b25f92f7ca2677094afea3b05a8218308d428f33c5a87169f45d90b710
+  data.tar.gz: cabf1ad7e11d7f455d86f6b82f152451c0e122f3416fe24d66b89e66ca118136e93b06dcc1a08c1f5c573a81f6bb21315d4b73b65840bcc0c60737b99a83d559

data/README.md

@@ -14,7 +14,7 @@ Inspired by the Dynamic Map Viewer in [5etools](https://github.com/5etools/5etoo
 - Optional region labels overlaid on the image
 - Integrates with [jekyll-hover-popup](https://github.com/sunflowermans/hover-popup) when both plugins are enabled: 
   - Map viewer opens inside a hover-popup window
-  - Region clicks open pinned hover-popup windows
+  - Region clicks open pinned hover-popup windows, unless the map sets `preview="false"`
 
 https://github.com/user-attachments/assets/9b2f123b-56a4-43f4-984f-2dbfa7b844f9
 
@@ -46,10 +46,11 @@ image_links:
   viewer_by_default: true
   inline_by_default: true
   labels_by_default: false
+  preview_by_default: true
   use_hover_popup: auto # auto | true | false
 ```
 
-When `jekyll-hover-popup` is also installed, image map region clicks open section previews in hover-popup windows instead of navigating the page. Set `use_hover_popup: false` to disable that integration.
+When `jekyll-hover-popup` is also installed, image map region clicks open section previews in hover-popup windows instead of navigating the page. Set `use_hover_popup: false` to disable that integration for the whole site. Set `preview_by_default: false`, or `preview="false"` on a single map, to keep the integration and still navigate the current page when a region is clicked.
 
 ## Usage
 
@@ -113,6 +114,7 @@ When `width` and `height` are in the YAML file, you can omit them from the tag a
 | `viewer="false"` | Disable the Dynamic Map Viewer button |
 | `inline="false"` | Disable direct click regions on the inline image |
 | `labels="true"` | Show region labels on the inline image |
+| `preview="false"` | Navigate the current page on region click instead of opening a preview window |
 
 ### Manual HTML (portable markup)
 
@@ -135,6 +137,7 @@ If the plugin is disabled or not installed, the image still renders normally and
   data-jil-viewer="true"
   data-jil-inline="true"
   data-jil-labels="true"
+  data-jil-preview="true"
 />
 {:/nomarkdown}
 ```
@@ -160,6 +163,7 @@ Qualified images are detected by `class="jil-map-image"` together with region da
 | `data-jil-viewer` | Enable/disable the Dynamic Map Viewer button |
 | `data-jil-inline` | Enable/disable direct click regions on the inline image |
 | `data-jil-labels` | Show region labels on the inline image |
+| `data-jil-preview` | Open a preview window on region click, or navigate the current page |
 
 ## Coordinate system
 

data/assets/jekyll-image-links/image_links.js

@@ -3,6 +3,12 @@
 
   const ROOT_SELECTOR = '[data-jil-root="true"]';
   const config = window.__JIL_CONFIG__ || {};
+  // Hosts that already have listeners on this element instance.
+  // data-jil-ready is not enough: a hover-popup preview clones the live map,
+  // so the attribute is copied, but click listeners are not. A WeakSet tracks
+  // the actual element. Clones are absent from it and get set up again, and
+  // entries disappear when the preview window is discarded.
+  const readyHosts = new WeakSet();
 
   function getHoverPopup() {
     const api = window.JekyllHoverPopup;
@@ -83,7 +89,23 @@
       );
     });
 
-    document.querySelectorAll("[data-jil-map]").forEach((host) => {
+    // Maps already in the page. Maps that appear later, such as inside a
+    // preview window, are handled by watchInsertedMaps.
+    initWithin(document);
+  }
+
+  // Set up every map host inside root. root may be the document (first load)
+  // or a node just inserted into a preview window.
+  function initWithin(root) {
+    if (!root || !root.querySelectorAll) return;
+
+    const hosts = [];
+    // The inserted node can be the host itself. querySelectorAll only looks
+    // at descendants, so include root when it is a map host.
+    if (root.nodeType === 1 && root.matches("[data-jil-map]")) hosts.push(root);
+    root.querySelectorAll("[data-jil-map]").forEach((host) => hosts.push(host));
+
+    hosts.forEach((host) => {
       try {
         initMapHost(host);
       } catch (error) {
@@ -92,9 +114,45 @@
     });
   }
 
+  // Page load only sees maps in the original document. Preview windows fetch
+  // or clone section HTML later, so watch for those nodes and set them up then.
+  function watchInsertedMaps() {
+    if (!document.body || typeof MutationObserver === "undefined") return;
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          // Text nodes cannot contain a map host.
+          if (node.nodeType !== 1) return;
+          initWithin(node);
+        });
+      });
+    });
+
+    // subtree covers maps nested inside the preview's section wrapper,
+    // not only nodes appended directly to body.
+    observer.observe(document.body, { childList: true, subtree: true });
+  }
+
+  // Drop UI that was copied from an already-initialized map. Labels and the
+  // viewer button are created in JS, so a clone includes the elements but not
+  // their listeners. Removing them lets init add a fresh, working copy.
+  // Server-rendered markup has neither, so this is a no-op on first setup.
+  function stripGeneratedUi(host) {
+    host.querySelectorAll(".jil-label-layer").forEach((node) => node.remove());
+    const figure = host.closest(".jil-figure");
+    if (!figure) return;
+    // The toolbar is a sibling of the host, inserted after the caption.
+    figure.querySelectorAll(":scope > .jil-toolbar").forEach((node) => node.remove());
+  }
+
   function initMapHost(host) {
-    if (host.dataset.jilReady === "true") return;
+    // Skip hosts already bound in this document. Clones are different elements
+    // and fall through even when they carry data-jil-ready from the original.
+    if (readyHosts.has(host)) return;
+    readyHosts.add(host);
     host.dataset.jilReady = "true";
+    stripGeneratedUi(host);
 
     let mapData;
     try {
@@ -107,6 +165,8 @@
     const inline = host.dataset.jilInline !== "false";
     const viewer = host.dataset.jilViewer !== "false";
     const labels = host.dataset.jilLabels === "true";
+    // Absent means preview, so maps rendered before this flag still open one.
+    const preview = host.dataset.jilPreview !== "false";
     const img = host.querySelector(".jil-map-image");
 
     if (!img) {
@@ -116,28 +176,61 @@
 
     reportMapProblems(img, mapData);
     if (labels) renderLabels(host, mapData, img);
-    if (inline) bindInlineClicks(host, mapData, img);
-    if (viewer) addViewerButton(host, mapData);
+    if (inline) bindInlineClicks(host, mapData, img, preview);
+    if (viewer) addViewerButton(host, mapData, preview);
+  }
+
+  // Keep overlay geometry in sync with the image, including inside a preview
+  // that is opened, resized, and then closed.
+  function bindLiveUpdates(host, img, update) {
+    const onLoad = () => update();
+    img.addEventListener("load", onLoad);
+
+    // Window listeners and a ResizeObserver would keep a closed preview's
+    // nodes alive. Drop them once the host has left the document.
+    const detach = () => {
+      window.removeEventListener("resize", onResize);
+      if (observer) observer.disconnect();
+    };
+
+    const onResize = () => {
+      if (!host.isConnected) {
+        detach();
+        return;
+      }
+      update();
+    };
+
+    let observer = null;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(() => {
+        // Closing a preview disconnects the host and fires this observer.
+        if (!host.isConnected) {
+          detach();
+          return;
+        }
+        update();
+      });
+      // Watch both: the host size follows the preview window, and the image
+      // size follows its own load and CSS.
+      observer.observe(host);
+      observer.observe(img);
+    }
+
+    window.addEventListener("resize", onResize);
+    // A cached image may already be complete, so the load event never fires.
+    if (img.complete) update();
   }
 
   function bindOverlayGeometry(overlay, host, mapData, img) {
-    const update = () => {
+    bindLiveUpdates(host, img, () => {
       const geom = getMapGeometry(img, mapData);
       if (!geom || !geom.width || !geom.height) return;
       overlay.style.left = `${geom.offsetX}px`;
       overlay.style.top = `${geom.offsetY}px`;
       overlay.style.width = `${geom.width}px`;
       overlay.style.height = `${geom.height}px`;
-    };
-
-    if (img.complete) update();
-    img.addEventListener("load", update);
-    window.addEventListener("resize", update);
-    if (typeof ResizeObserver !== "undefined") {
-      const observer = new ResizeObserver(update);
-      observer.observe(host);
-      observer.observe(img);
-    }
+    });
   }
 
   function renderLabels(host, mapData, img) {
@@ -146,7 +239,7 @@
     host.appendChild(overlay);
     bindOverlayGeometry(overlay, host, mapData, img);
 
-    const update = () => {
+    bindLiveUpdates(host, img, () => {
       overlay.innerHTML = "";
       const geom = getMapGeometry(img, mapData);
       if (!geom || !geom.width || !geom.height) return;
@@ -169,19 +262,10 @@
         link.title = region.title || label;
         overlay.appendChild(link);
       });
-    };
-
-    if (img.complete) update();
-    img.addEventListener("load", update);
-    window.addEventListener("resize", update);
-    if (typeof ResizeObserver !== "undefined") {
-      const observer = new ResizeObserver(update);
-      observer.observe(host);
-      observer.observe(img);
-    }
+    });
   }
 
-  function bindInlineClicks(host, mapData, img) {
+  function bindInlineClicks(host, mapData, img, preview) {
     host.classList.add("jil-inline");
     img.addEventListener("click", (event) => {
       const point = imagePointFromEvent(img, mapData, event);
@@ -189,7 +273,7 @@
       if (!region) return;
 
       event.preventDefault();
-      openRegion(region, event);
+      openRegion(region, event, preview);
     });
 
     img.addEventListener("mousemove", (event) => {
@@ -199,7 +283,7 @@
     });
   }
 
-  function addViewerButton(host, mapData) {
+  function addViewerButton(host, mapData, preview) {
     const figure = host.closest(".jil-figure");
     if (!figure) return;
 
@@ -211,7 +295,7 @@
     button.type = "button";
     button.className = "jil-viewer-button btn btn-outline";
     button.textContent = mapData.title ? `Open ${mapData.title}` : "Open map viewer";
-    button.addEventListener("click", (event) => openViewer(mapData, event));
+    button.addEventListener("click", (event) => openViewer(mapData, event, preview));
     toolbar.appendChild(button);
 
     if (caption) {
@@ -221,8 +305,8 @@
     }
   }
 
-  function openViewer(mapData, event) {
-    const panel = buildViewerPanel(mapData);
+  function openViewer(mapData, event, preview) {
+    const panel = buildViewerPanel(mapData, preview);
     const jhp = useHoverPopup() ? getHoverPopup() : null;
 
     if (jhp) {
@@ -254,7 +338,7 @@
     });
   }
 
-  function buildViewerPanel(mapData) {
+  function buildViewerPanel(mapData, preview) {
     const root = document.createElement("div");
     root.className = "jil-viewer-panel jil-viewer-in-popup";
 
@@ -365,7 +449,7 @@
       const region = firstIntersectedRegion(mapData.regions, point);
       if (!region) return;
       event.preventDefault();
-      openRegion(region, event);
+      openRegion(region, event, preview);
     });
 
     canvas.addEventListener("mousemove", (event) => {
@@ -446,13 +530,13 @@
     return button;
   }
 
-  async function openRegion(region, event) {
+  async function openRegion(region, event, preview) {
     if (event.shiftKey) {
       window.open(region.href, "_blank", "noopener,noreferrer");
       return;
     }
 
-    const jhp = useHoverPopup() ? getHoverPopup() : null;
+    const jhp = preview !== false && useHoverPopup() ? getHoverPopup() : null;
     if (jhp) {
       event.preventDefault();
       try {
@@ -593,7 +677,13 @@
       return;
     }
 
-    const run = () => init();
+    const run = () => {
+      // Observe before the first pass so a preview inserted during init is
+      // not missed. Init itself does not add map hosts, so this does not
+      // set the same map up twice.
+      watchInsertedMaps();
+      init();
+    };
 
     if (document.querySelector('[data-hover-popup-root="true"]') && !getHoverPopup()) {
       window.setTimeout(run, 0);

data/lib/jekyll/image_links/map_renderer.rb

@@ -45,6 +45,7 @@ module Jekyll
           viewer = attrs["viewer"]
           inline = attrs["inline"]
           labels = attrs["labels"]
+          preview = attrs["preview"]
 
           resolved_src = resolve_url(src, site: site, page: page, liquid_context: liquid_context)
           map_source = load_map_source(
@@ -59,6 +60,7 @@ module Jekyll
           viewer_attr = %( data-jil-viewer="#{viewer}") unless viewer.nil? || viewer.empty?
           inline_attr = %( data-jil-inline="#{inline}") unless inline.nil? || inline.empty?
           labels_attr = %( data-jil-labels="#{labels}") unless labels.nil? || labels.empty?
+          preview_attr = %( data-jil-preview="#{preview}") unless preview.nil? || preview.empty?
           title_attr = title ? %( data-jil-title="#{escape_attr(title)}") : ""
 
           regions_script = ""
@@ -78,12 +80,12 @@ module Jekyll
             <img
               class="jil-map-image"
               #{img_markup}#{style_attr}
-              loading="lazy"#{title_attr}#{regions_attr}#{viewer_attr}#{inline_attr}#{labels_attr}
+              loading="lazy"#{title_attr}#{regions_attr}#{viewer_attr}#{inline_attr}#{labels_attr}#{preview_attr}
             />#{regions_script}
           HTML
         end
 
-        def render_interactive(map_data, viewer:, inline:, labels:, alt:, display_style: nil)
+        def render_interactive(map_data, viewer:, inline:, labels:, preview:, alt:, display_style: nil)
           map_json = JSON.generate(map_data)
           id = "jil-map-#{Digest::MD5.hexdigest(map_json)[0, 8]}"
           title = map_data["title"]
@@ -99,7 +101,7 @@ module Jekyll
           host_style_attr = display_style.to_s.strip.empty? ? "" : %( style="#{escape_attr(display_style)}")
 
           <<~HTML.strip
-            <div class="jil-figure" data-jil-image-map="true"><div class="#{host_class}" id="#{id}" data-jil-map="#{escape_attr(map_json)}" data-jil-viewer="#{viewer}" data-jil-inline="#{inline}" data-jil-labels="#{labels}"#{host_style_attr.empty? ? "" : " #{host_style_attr}"}><img class="jil-map-image" #{img_attrs} loading="lazy" /></div>#{caption_html}</div>
+            <div class="jil-figure" data-jil-image-map="true"><div class="#{host_class}" id="#{id}" data-jil-map="#{escape_attr(map_json)}" data-jil-viewer="#{viewer}" data-jil-inline="#{inline}" data-jil-labels="#{labels}" data-jil-preview="#{preview}"#{host_style_attr.empty? ? "" : " #{host_style_attr}"}><img class="jil-map-image" #{img_attrs} loading="lazy" /></div>#{caption_html}</div>
           HTML
         end
 
@@ -125,6 +127,7 @@ module Jekyll
             "viewer" => container_attrs["data-jil-viewer"] || img_attrs["data-jil-viewer"],
             "inline" => container_attrs["data-jil-inline"] || img_attrs["data-jil-inline"],
             "labels" => container_attrs["data-jil-labels"] || img_attrs["data-jil-labels"],
+            "preview" => container_attrs["data-jil-preview"] || img_attrs["data-jil-preview"],
           }
 
           merged["title"] ||= img_attrs["data-jil-title"] || merged["alt"]
@@ -148,6 +151,7 @@ module Jekyll
           viewer = parse_bool(attrs["viewer"], default: cfg.fetch("viewer_by_default", true))
           inline = parse_bool(attrs["inline"], default: cfg.fetch("inline_by_default", true))
           labels = parse_bool(attrs["labels"], default: cfg.fetch("labels_by_default", false))
+          preview = parse_bool(attrs["preview"], default: cfg.fetch("preview_by_default", true))
 
           map_source = load_map_source(
             site: site,
@@ -178,6 +182,7 @@ module Jekyll
             viewer: viewer,
             inline: inline,
             labels: labels,
+            preview: preview,
             alt: alt,
             display_style: display_style
           )

data/lib/jekyll/image_links/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
   module ImageLinks
-    VERSION = "0.3.0"
+    VERSION = "0.4.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-image-links
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - directsun