jekyll-image-links 0.2.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8c93aabbb9cd425deaacd65bb022a89262b8799957d6817e58cd1a3ada3d640c
-  data.tar.gz: fe69971d43751442a622ed8571760f0ed5ebce7f74aca6bfa13942e9ec6b4521
+  metadata.gz: 1d2fc33af0a1cda25f029a7a72d68e32eefa8f1fa412fdd4f69281fdb8676a29
+  data.tar.gz: 174005c6a08c2f617d953ebe2d874f324c3bfd0107436e93ff23f490bc623606
 SHA512:
-  metadata.gz: 6e741d3e37b158ee40f071ea3fe8a833427e4a7321df076e3ecedb68ed6b67e48449be4764c105179364dc15c0c6465617bbbaedf123d8dc3e54e5bd6959196a
-  data.tar.gz: a74db4de8774eea228b99baca8a3d237807bd7167aa5c1e242798a6c9ec693e29905eba853563c2711c09ed78f3d15bcb97673abe1e2dc3e86306849003214fb
+  metadata.gz: 6cab285f59d4c32b302686e4995113c2b8ceaba8bbeaf29d9ec2a329ffd2ded5b8de487f6b26f62049c25c9fd155a7d64665d5cd5f807966d6aefae15618670f
+  data.tar.gz: 3be18ab75e132c7c7ad4b054879fac3ebb27d72efaedc7b34be916765b049b4c27cc8c45648f3c819ec8bd55fa1df6fe06895adfb380cec51087c14fd74ca526

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;
@@ -17,42 +23,225 @@
     return !!getHoverPopup();
   }
 
+  function logError(message, error) {
+    if (error) console.error(`[jil] ${message}`, error);
+    else console.error(`[jil] ${message}`);
+  }
+
+  function reportMapProblems(img, mapData) {
+    const src = mapData.src || img.getAttribute("src") || "image map";
+    const width = Number(mapData.width);
+    const height = Number(mapData.height);
+
+    if (!width || !height) {
+      logError(`${src}: map data is missing width or height`);
+    }
+
+    const regions = mapData.regions;
+    if (!Array.isArray(regions) || regions.length === 0) {
+      logError(`${src}: map data has no regions`);
+    }
+
+    const checkSize = () => {
+      const naturalWidth = img.naturalWidth;
+      const naturalHeight = img.naturalHeight;
+      if (!naturalWidth || !naturalHeight) {
+        logError(`${src}: image failed to load`);
+        return;
+      }
+      if (!width || !height) return;
+      if (naturalWidth === width && naturalHeight === height) return;
+      logError(`${src}: image is ${naturalWidth}×${naturalHeight} but map data is ${width}×${height}`);
+    };
+
+    img.addEventListener("error", () => {
+      logError(`${src}: image failed to load`);
+    });
+
+    if (img.complete) checkSize();
+    else img.addEventListener("load", checkSize);
+
+    (regions || []).forEach((region, index) => {
+      const name = region.title || region.href || `region ${index + 1}`;
+      const points = region.points;
+      if (!region.href) logError(`${src}: "${name}" is missing href`);
+      if (!Array.isArray(points) || points.length < 3) {
+        logError(`${src}: "${name}" needs at least 3 points`);
+        return;
+      }
+      if (!width || !height) return;
+
+      const xs = points.map((point) => point[0]);
+      const ys = points.map((point) => point[1]);
+      const outside = xs.some((x) => x < 0 || x > width) || ys.some((y) => y < 0 || y > height);
+      if (!outside) return;
+      logError(
+        `${src}: "${name}" is outside ${width}×${height} (x ${Math.min(...xs)}–${Math.max(...xs)}, y ${Math.min(...ys)}–${Math.max(...ys)})`
+      );
+    });
+  }
+
   function init() {
-    document.querySelectorAll("[data-jil-map]").forEach(initMapHost);
+    document.querySelectorAll("img.jil-map-image[data-jil-regions]").forEach((img) => {
+      if (img.closest("[data-jil-map]")) return;
+      logError(
+        `${img.getAttribute("src") || "image"} was not enhanced (${img.getAttribute("data-jil-regions")})`
+      );
+    });
+
+    // 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) {
+        logError(`Failed to init ${host.id || "image map"}`, error);
+      }
+    });
+  }
+
+  // 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 {
+      mapData = JSON.parse(host.dataset.jilMap);
+    } catch (error) {
+      logError(`Invalid map JSON on ${host.id || "image map"}`, error);
+      return;
+    }
 
-    const mapData = JSON.parse(host.dataset.jilMap);
     const inline = host.dataset.jilInline !== "false";
     const viewer = host.dataset.jilViewer !== "false";
     const labels = host.dataset.jilLabels === "true";
     const img = host.querySelector(".jil-map-image");
 
-    if (!img) return;
+    if (!img) {
+      logError(`${mapData.src || host.id || "image map"}: missing .jil-map-image`);
+      return;
+    }
 
+    reportMapProblems(img, mapData);
     if (labels) renderLabels(host, mapData, img);
     if (inline) bindInlineClicks(host, mapData, img);
     if (viewer) addViewerButton(host, mapData);
   }
 
+  // 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) {
+    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`;
+    });
+  }
+
   function renderLabels(host, mapData, img) {
     const overlay = document.createElement("div");
     overlay.className = "jil-label-layer";
     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;
 
-      overlay.style.left = `${geom.offsetX}px`;
-      overlay.style.top = `${geom.offsetY}px`;
-      overlay.style.width = `${geom.width}px`;
-      overlay.style.height = `${geom.height}px`;
-
       mapData.regions.forEach((region) => {
         const center = polygonCenter(region.points);
         if (!center) return;
@@ -71,16 +260,7 @@
         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) {
@@ -329,6 +509,9 @@
       state.image = image;
       fitZoom();
     };
+    image.onerror = () => {
+      logError(`${mapData.src || "viewer image"}: viewer image failed to load`);
+    };
     image.src = mapData.src;
 
     return {
@@ -354,13 +537,22 @@
     const jhp = useHoverPopup() ? getHoverPopup() : null;
     if (jhp) {
       event.preventDefault();
-      await jhp.openLink({
-        href: region.href,
-        title: region.title || region.label || region.href,
-        clientX: event.clientX,
-        clientY: event.clientY,
-        isPermanent: true,
-      });
+      try {
+        await jhp.openLink({
+          href: region.href,
+          title: region.title || region.label || region.href,
+          clientX: event.clientX,
+          clientY: event.clientY,
+          isPermanent: true,
+        });
+      } catch (error) {
+        logError(`Failed to open ${region.href}`, error);
+      }
+      return;
+    }
+
+    if (!region.href) {
+      logError("Region is missing href");
       return;
     }
 
@@ -478,9 +670,18 @@
   }
 
   function start() {
-    if (!document.querySelector(ROOT_SELECTOR)) return;
+    if (!document.querySelector(ROOT_SELECTOR)) {
+      logError("image_links.js loaded without data-jil-root");
+      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/hooks.rb

@@ -17,7 +17,10 @@ module Jekyll
             html = MapRenderer.enhance_html(html, site: site, page: doc, cfg: cfg)
             doc.output = inject_assets(html, assets_path: assets_path, site: site, cfg: cfg)
           rescue StandardError => e
-            Jekyll.logger.warn("jekyll-image-links:", "Failed to process #{doc.relative_path}: #{e.class}: #{e.message}")
+            Jekyll.logger.error(
+              "jekyll-image-links:",
+              "Failed to process #{doc.relative_path}: #{e.class}: #{e.message}"
+            )
           end
         end
       end

data/lib/jekyll/image_links/map_renderer.rb

@@ -23,7 +23,7 @@ module Jekyll
           html = html.gsub(PORTABLE_FIGURE) do |figure_html|
             enhance_portable_markup(figure_html, site: site, page: page, cfg: cfg)
           rescue StandardError => e
-            Jekyll.logger.warn("jekyll-image-links:", "Failed to enhance portable figure: #{e.message}")
+            log_error("#{page_label(page)} #{markup_context(figure_html)}: #{e.class}: #{e.message}")
             figure_html
           end
 
@@ -32,7 +32,7 @@ module Jekyll
 
             enhance_portable_markup(image_html, site: site, page: page, cfg: cfg)
           rescue StandardError => e
-            Jekyll.logger.warn("jekyll-image-links:", "Failed to enhance portable image map: #{e.message}")
+            log_error("#{page_label(page)} #{markup_context(image_html)}: #{e.class}: #{e.message}")
             image_html
           end
         end
@@ -170,6 +170,8 @@ module Jekyll
             "title" => title,
             "regions" => normalize_regions(regions, site: site, page: page, liquid_context: liquid_context),
           }
+          warn_if_regions_out_of_bounds!(map_data["regions"], width, height, src)
+          warn_if_image_dimensions_differ!(site, page, attrs["src"], width, height)
 
           render_interactive(
             map_data,
@@ -300,6 +302,170 @@ module Jekyll
           end
         end
 
+        def warn_if_regions_out_of_bounds!(regions, width, height, src)
+          regions.each do |region|
+            points = region["points"] || []
+            next if points.empty?
+
+            xs = points.map { |point| point[0] }
+            ys = points.map { |point| point[1] }
+            outside = xs.any? { |x| x.negative? || x > width } || ys.any? { |y| y.negative? || y > height }
+            next unless outside
+
+            name = region["title"] || region["href"]
+            log_error(
+              "#{src}: region \"#{name}\" is outside #{width}×#{height} (x #{xs.min}–#{xs.max}, y #{ys.min}–#{ys.max})"
+            )
+          end
+        end
+
+        def warn_if_image_dimensions_differ!(site, page, src, width, height)
+          path = local_image_path(site, page, src)
+          if path.nil?
+            log_error("#{src}: image file not found") unless remote_url?(src)
+            return
+          end
+
+          actual = read_image_size(path)
+          return unless actual
+
+          actual_width, actual_height = actual
+          return if actual_width == width && actual_height == height
+
+          log_error("#{src}: image file is #{actual_width}×#{actual_height} but map data is #{width}×#{height}")
+        end
+
+        def local_image_path(site, page, src)
+          return nil if src.to_s.strip.empty? || remote_url?(src)
+
+          path = src.to_s
+          baseurl = site.baseurl.to_s
+          baseurl = "" if baseurl == "/"
+          path = path.delete_prefix(baseurl) if !baseurl.empty? && (path == baseurl || path.start_with?("#{baseurl}/"))
+
+          candidates = [path]
+          if !path.start_with?("/") && page&.respond_to?(:relative_path) && page.relative_path
+            candidates << File.join(File.dirname(page.relative_path), path)
+          end
+
+          candidates.each do |candidate|
+            full_path = Jekyll.sanitized_path(site.source, candidate)
+            return full_path if File.file?(full_path)
+          end
+          nil
+        end
+
+        def remote_url?(src)
+          src.to_s.start_with?("http://", "https://", "data:")
+        end
+
+        def read_image_size(path)
+          File.open(path, "rb") do |file|
+            header = file.read(32)
+            return nil unless header && header.bytesize >= 24
+
+            header = header.b
+            if header.start_with?("\x89PNG\r\n\x1A\n".b)
+              return [header[16, 4].unpack1("N"), header[20, 4].unpack1("N")]
+            end
+            if header.start_with?("GIF87a".b, "GIF89a".b)
+              return header[6, 4].unpack("v2")
+            end
+            if header.start_with?("RIFF".b) && header[8, 4] == "WEBP".b
+              return read_webp_size(file, header)
+            end
+            return read_jpeg_size(file) if header.start_with?("\xFF\xD8".b)
+          end
+          nil
+        rescue StandardError => e
+          log_error("#{path}: could not read image dimensions: #{e.class}: #{e.message}")
+          nil
+        end
+
+        def read_webp_size(file, header)
+          format = header[12, 4]
+          if format == "VP8X".b
+            file.seek(24)
+            data = file.read(6)
+            return nil unless data&.bytesize == 6
+
+            bytes = data.bytes
+            width = 1 + (bytes[0] | (bytes[1] << 8) | (bytes[2] << 16))
+            height = 1 + (bytes[3] | (bytes[4] << 8) | (bytes[5] << 16))
+            [width, height]
+          elsif format == "VP8 ".b
+            file.seek(26)
+            data = file.read(4)
+            return nil unless data&.bytesize == 4
+
+            width = data[0, 2].unpack1("v") & 0x3fff
+            height = data[2, 2].unpack1("v") & 0x3fff
+            [width, height]
+          elsif format == "VP8L".b
+            file.seek(21)
+            data = file.read(4)
+            return nil unless data&.bytesize == 4
+
+            b0, b1, b2, b3 = data.bytes
+            width = 1 + (((b1 & 0x3F) << 8) | b0)
+            height = 1 + (((b3 & 0x0F) << 10) | (b2 << 2) | ((b1 & 0xC0) >> 6))
+            [width, height]
+          end
+        end
+
+        def read_jpeg_size(file)
+          file.seek(2)
+          loop do
+            byte = file.read(1)
+            return nil unless byte == "\xFF".b
+
+            marker = nil
+            loop do
+              byte = file.read(1)
+              return nil unless byte
+              next if byte == "\xFF".b
+
+              marker = byte.ord
+              break
+            end
+            next if marker == 0xD8 || marker == 0xD9
+            return nil if marker == 0xDA
+
+            length_bytes = file.read(2)
+            return nil unless length_bytes&.bytesize == 2
+
+            length = length_bytes.unpack1("n")
+            return nil if length < 2
+
+            if [0xC0, 0xC1, 0xC2, 0xC3, 0xC5, 0xC6, 0xC7, 0xC9, 0xCA, 0xCB, 0xCD, 0xCE, 0xCF].include?(marker)
+              data = file.read(5)
+              return nil unless data&.bytesize == 5
+
+              _precision, height, width = data.unpack("Cnn")
+              return [width, height]
+            end
+
+            file.seek(length - 2, IO::SEEK_CUR)
+          end
+        end
+
+        def page_label(page)
+          return page.relative_path if page.respond_to?(:relative_path) && page.relative_path
+          return page.path if page.respond_to?(:path) && page.path
+
+          "page"
+        end
+
+        def markup_context(markup)
+          src = markup[/src="([^"]*)"/, 1]
+          regions = markup[/data-jil-regions="([^"]*)"/, 1]
+          [regions, src].compact.reject(&:empty?).join(" ")
+        end
+
+        def log_error(message)
+          Jekyll.logger.error("jekyll-image-links:", message)
+        end
+
         def validate_dimensions!(width, height, src)
           unless width.positive? && height.positive?
             raise ArgumentError, "image_map requires native width and height in the YAML file or numeric width/height attributes"

data/lib/jekyll/image_links/tags.rb

@@ -15,14 +15,22 @@ module Jekyll
         cfg = (site.config["image_links"] || {})
         regions_body = @attrs["file"] ? nil : super
 
-        figure = MapRenderer.render_portable_figure(
-          @attrs,
-          site: site,
-          page: context.registers[:page],
-          liquid_context: context,
-          cfg: cfg,
-          regions_body: regions_body
-        )
+        begin
+          figure = MapRenderer.render_portable_figure(
+            @attrs,
+            site: site,
+            page: context.registers[:page],
+            liquid_context: context,
+            cfg: cfg,
+            regions_body: regions_body
+          )
+        rescue StandardError => e
+          page = context.registers[:page]
+          page_label = page.respond_to?(:relative_path) ? page.relative_path : "page"
+          src = @attrs["src"] || @attrs["file"]
+          Jekyll.logger.error("jekyll-image-links:", "#{page_label} #{src}: #{e.class}: #{e.message}")
+          raise
+        end
 
         <<~HTML
           {::nomarkdown}

data/lib/jekyll/image_links/version.rb

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

metadata

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