jekyll-image-links 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d2fc33af0a1cda25f029a7a72d68e32eefa8f1fa412fdd4f69281fdb8676a29
-  data.tar.gz: 174005c6a08c2f617d953ebe2d874f324c3bfd0107436e93ff23f490bc623606
+  metadata.gz: bdf6ba05c3bcb44228b8870062fbb9f63d2109ddb90f77d619be852393d68498
+  data.tar.gz: 00dbc1cad4345d24f0524cb94b824e7fbc49175d97332e9271ff765dabb67d25
 SHA512:
-  metadata.gz: 6cab285f59d4c32b302686e4995113c2b8ceaba8bbeaf29d9ec2a329ffd2ded5b8de487f6b26f62049c25c9fd155a7d64665d5cd5f807966d6aefae15618670f
-  data.tar.gz: 3be18ab75e132c7c7ad4b054879fac3ebb27d72efaedc7b34be916765b049b4c27cc8c45648f3c819ec8bd55fa1df6fe06895adfb380cec51087c14fd74ca526
+  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

@@ -165,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) {
@@ -174,8 +176,8 @@
 
     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
@@ -263,7 +265,7 @@
     });
   }
 
-  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);
@@ -271,7 +273,7 @@
       if (!region) return;
 
       event.preventDefault();
-      openRegion(region, event);
+      openRegion(region, event, preview);
     });
 
     img.addEventListener("mousemove", (event) => {
@@ -281,7 +283,7 @@
     });
   }
 
-  function addViewerButton(host, mapData) {
+  function addViewerButton(host, mapData, preview) {
     const figure = host.closest(".jil-figure");
     if (!figure) return;
 
@@ -293,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) {
@@ -303,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) {
@@ -336,7 +338,7 @@
     });
   }
 
-  function buildViewerPanel(mapData) {
+  function buildViewerPanel(mapData, preview) {
     const root = document.createElement("div");
     root.className = "jil-viewer-panel jil-viewer-in-popup";
 
@@ -447,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) => {
@@ -528,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 {

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.1"
+    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.1
+  version: 0.4.0
 platform: ruby
 authors:
 - directsun