jekyll-image-links 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e391437b6c74200eefcd0026a8f0dee1e707f1f0188e75d3c35fc8111ab81400
-  data.tar.gz: 5ef0710e6e06906de397ae632571d815869072d83ce1ef8cae59d410a91ed849
+  metadata.gz: 8c93aabbb9cd425deaacd65bb022a89262b8799957d6817e58cd1a3ada3d640c
+  data.tar.gz: fe69971d43751442a622ed8571760f0ed5ebce7f74aca6bfa13942e9ec6b4521
 SHA512:
-  metadata.gz: a961e536a871fb7130c8a9217864180879c6828f71ba9a059540e18ef03996ec7ab843273f963f05ae013b954d7deec071422c339a611dd66c6d2641f49055cb
-  data.tar.gz: 39b53f9b774e08f6f5ecf51ca809bff1c7b83377ccb983abd8a7422725529874575ebb9d9aaa5feab90a693380a6b4a34c2b95b70bebbe7ca82350e5e2df6349
+  metadata.gz: 6e741d3e37b158ee40f071ea3fe8a833427e4a7321df076e3ecedb68ed6b67e48449be4764c105179364dc15c0c6465617bbbaedf123d8dc3e54e5bd6959196a
+  data.tar.gz: a74db4de8774eea228b99baca8a3d237807bd7167aa5c1e242798a6c9ec693e29905eba853563c2711c09ed78f3d15bcb97673abe1e2dc3e86306849003214fb

data/README.md

@@ -2,17 +2,21 @@
 
 A Jekyll plugin for [Just the Docs](https://github.com/just-the-docs/just-the-docs) sites that adds clickable polygon regions on images.
 
-Inspired by the Dynamic Map Viewer in [5etools](https://github.com/5etools/5etools-src), which uses custom JavaScript (not HTML `<map>` tags) to define polygon click areas on large map images.
+Inspired by the Dynamic Map Viewer in [5etools](https://github.com/5etools/5etools-src).
 
 ## Features
 
-- Define polygon click regions in Markdown using a Liquid tag
+- Define polygon click regions in Markdown using a Liquid tag inline or using an external YAML file
 - Click a region to navigate to an internal or external link
+- Automatic point rescaling for variable image dimensions (i.e. `width: 50%`)
 - Hold **Shift** while clicking to open the link in a new tab
-- Integrates with [jekyll-hover-popup](https://github.com/directsun/jekyll-hover-popup) when both plugins are enabled: region clicks open pinned hover-popup windows (no page darkening), and the map viewer opens inside a hover-popup window too
 - Optional **Dynamic Map Viewer** button with zoom, pan, and region highlighting
 - Optional region labels overlaid on the image
-- Load region data inline or from a YAML file
+- 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
+
+https://github.com/user-attachments/assets/9b2f123b-56a4-43f4-984f-2dbfa7b844f9
 
 ## Install
 
@@ -95,13 +99,6 @@ When `width` and `height` are in the YAML file, you can omit them from the tag a
 {% endimage_map %}
 ```
 
-Legacy form still works — numeric `width`/`height` on the tag or `<img>` define the native coordinate system when the YAML file does not include them:
-
-```liquid
-{% image_map src="/assets/maps/example.webp" width="1200" height="800" file="assets/maps/example-map.yml" %}
-{% endimage_map %}
-```
-
 ### Tag options
 
 | Attribute | Description |
@@ -119,7 +116,7 @@ Legacy form still works — numeric `width`/`height` on the tag or `<img>` defin
 
 ### Manual HTML (portable markup)
 
-You can also write image maps directly in Markdown using `{::nomarkdown}` blocks. Only an `<img>` tag is required — no `<figure>` wrapper. Put configuration on the image itself using `data-jil-*` attributes.
+You can also write image maps directly in Markdown using `{::nomarkdown}` blocks. Only an `<img>` tag is required. Put configuration on the image itself using `data-jil-*` attributes.
 
 Store the **native** image dimensions in the YAML file. Region `points` use that coordinate system. Use CSS on the `<img>` for **display** size (percentages, max width/height, and so on). At build time those display styles are moved to the surrounding `.jil-map-host` wrapper so percentage sizes resolve against the page layout correctly.
 
@@ -153,16 +150,7 @@ regions:
     points: [[120, 80], [420, 80], [420, 320], [120, 320]]
 ```
 
-Display sizing alternatives on the `<img>`:
-
-| Attribute | Example | Description |
-|-----------|---------|-------------|
-| `style` | `width:100%;max-width:900px;height:auto` | Full CSS control (recommended) |
-| `width` / `height` | `width="100%"` or `width="800"` | Display size when YAML provides native dimensions |
-| `data-jil-max-width` | `900px` or `80%` | Shorthand for `max-width` |
-| `data-jil-max-height` | `600px` | Shorthand for `max-height` |
-
-Portable images are detected by `class="jil-map-image"` together with region data (`data-jil-regions`, an adjacent `<script class="jil-regions-data">` block, or legacy `data-jil-map="true"`). Legacy `<figure data-jil-map="true">` markup is still supported.
+Qualified images are detected by `class="jil-map-image"` together with region data (`data-jil-regions`)
 
 | Attribute | Description |
 |-----------|-------------|
@@ -175,21 +163,10 @@ Portable images are detected by `class="jil-map-image"` together with region dat
 
 ## Coordinate system
 
-Region `points` use the image's native pixel coordinates, matching the 5etools `mapRegions` format. Define the native size once in the YAML file (`width` and `height`) or on the tag/image when not using YAML dimensions. For example, a 4937×3439 map uses coordinates in that range.
+Region `points` use the image's native pixel coordinates. Define the native size once in the YAML file (`width` and `height`) or on the tag/image when not using YAML dimensions. For example, a 4937×3439 map uses coordinates in that range.
 
 The plugin scales clicks from whatever size the image is displayed at back into that native coordinate system. Changing display size with CSS, percentages, or max width/height does not require editing region points.
 
-## How this relates to 5etools
-
-5etools stores regions as `mapRegions` on image entries in JSON data, then renders them with a custom `RenderMap` class (`js/render-map.js`) that:
-
-- draws the image on a `<canvas>`
-- overlays clickable polygons
-- uses a ray-casting algorithm for hit detection
-- opens linked adventure content in hover windows
-
-This plugin uses the same polygon coordinate model and the same hit-detection approach, adapted for Jekyll pages with normal `href` links instead of 5etools' internal book area IDs.
-
 ## License
 
-MIT
+[MIT](LICENSE)

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

@@ -248,7 +248,21 @@
     });
     zoomFit.addEventListener("click", fitZoom);
 
+    let dragStart = null;
+    let didPan = false;
+
+    const cursorForPoint = (event) => {
+      const point = canvasPointFromEvent(canvas, state.zoom, event);
+      const region = firstIntersectedRegion(mapData.regions, point);
+      return region ? "pointer" : "grab";
+    };
+
     canvas.addEventListener("click", (event) => {
+      if (didPan) {
+        didPan = false;
+        event.preventDefault();
+        return;
+      }
       const point = canvasPointFromEvent(canvas, state.zoom, event);
       const region = firstIntersectedRegion(mapData.regions, point);
       if (!region) return;
@@ -257,15 +271,21 @@
     });
 
     canvas.addEventListener("mousemove", (event) => {
-      const point = canvasPointFromEvent(canvas, state.zoom, event);
-      const region = firstIntersectedRegion(mapData.regions, point);
-      canvas.style.cursor = region ? "pointer" : "grab";
+      if (dragStart) return;
+      canvas.style.cursor = cursorForPoint(event);
     });
 
-    let dragStart = null;
     canvas.addEventListener("mousedown", (event) => {
-      if (event.button !== 2) return;
+      // Left-drag empty areas to pan; right-drag pans from anywhere.
+      if (event.button === 0) {
+        const point = canvasPointFromEvent(canvas, state.zoom, event);
+        if (firstIntersectedRegion(mapData.regions, point)) return;
+      } else if (event.button !== 2) {
+        return;
+      }
+
       event.preventDefault();
+      didPan = false;
       dragStart = {
         x: event.clientX,
         y: event.clientY,
@@ -275,15 +295,25 @@
       canvas.style.cursor = "grabbing";
     });
 
-    window.addEventListener("mouseup", () => {
+    window.addEventListener("mouseup", (event) => {
+      if (!dragStart) return;
       dragStart = null;
-      canvas.style.cursor = "grab";
+      canvas.style.cursor = cursorForPoint(event);
+      // Clear after the trailing click so a pan doesn't open a region.
+      if (didPan) {
+        setTimeout(() => {
+          didPan = false;
+        }, 0);
+      }
     });
 
     window.addEventListener("mousemove", (event) => {
       if (!dragStart) return;
-      scroll.scrollLeft = dragStart.scrollLeft + (dragStart.x - event.clientX);
-      scroll.scrollTop = dragStart.scrollTop + (dragStart.y - event.clientY);
+      const dx = dragStart.x - event.clientX;
+      const dy = dragStart.y - event.clientY;
+      if (Math.abs(dx) > 2 || Math.abs(dy) > 2) didPan = true;
+      scroll.scrollLeft = dragStart.scrollLeft + dx;
+      scroll.scrollTop = dragStart.scrollTop + dy;
     });
 
     canvas.addEventListener("contextmenu", (event) => event.preventDefault());

data/lib/jekyll/image_links/hooks.rb

@@ -11,8 +11,7 @@ module Jekyll
           html = doc.output.to_s
           next unless html.include?('data-jil-image-map="true"') || MapRenderer.portable_markup?(html)
 
-          assets_path = cfg["assets_path"] || "/assets/jekyll-image-links"
-          assets_path = "/#{assets_path}" unless assets_path.start_with?("/")
+          assets_path = resolve_assets_path(site, cfg)
 
           begin
             html = MapRenderer.enhance_html(html, site: site, page: doc, cfg: cfg)
@@ -23,6 +22,21 @@ module Jekyll
         end
       end
 
+      # Site-root path (e.g. "/assets/jekyll-image-links"), with site.baseurl prepended.
+      def self.resolve_assets_path(site, cfg)
+        assets_path = cfg["assets_path"] || "/assets/jekyll-image-links"
+        assets_path = "/#{assets_path}" unless assets_path.start_with?("/")
+
+        baseurl = site.config["baseurl"].to_s
+        baseurl = "" if baseurl == "/"
+        baseurl = baseurl.chomp("/")
+
+        return assets_path if baseurl.empty?
+        return assets_path if assets_path == baseurl || assets_path.start_with?("#{baseurl}/")
+
+        "#{baseurl}#{assets_path}"
+      end
+
       def self.build_jil_config(site, cfg)
         return { useHoverPopup: false } if cfg["use_hover_popup"] == false
         return { useHoverPopup: true } if cfg["use_hover_popup"] == true

data/lib/jekyll/image_links/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
   module ImageLinks
-    VERSION = "0.1.1"
+    VERSION = "0.2.0"
   end
 end

metadata

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