jekyll-image-links 0.1.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19b54b99566ef68cb4781a9ac97bbf0244aecdc8df97de25842b379916d5ffb6
-  data.tar.gz: f8398c0bbfabd847e30639200b95b11bccee7e205938f440eb0d96a1b6da83ab
+  metadata.gz: a9d85919e65b8d1b2cf32c8d1ffccc9b149f8d84e7950020f5d291e0262dee60
+  data.tar.gz: f933adffe5a1970b78669ae40edd0f5595342c01e43e7f1f53c50072a1f5236b
 SHA512:
-  metadata.gz: 67dc7db67ce397dd3c9df03c8c84681a7fb60731a717520e5d30d6b5c57ab3a8f3be1fbdddcd564ccecad632941982d4d7311e79a67487b4f72020b9fa7025d2
-  data.tar.gz: 84f6ddb951f954fcf32d8af81fcef097104c16d987824abc95766654e64d9895f4728669c321cfb2f9de250d601b3ff86d1e1e9f8c87a18dc5753fc9b23d6559
+  metadata.gz: 4454cc915358b308486232099c78a6db594d6c86318e4608cf490ba9a2b6de954a76f276c0e2b91a61127115535ca1eb550ab901a2218cd42be86acd5b7ac83d
+  data.tar.gz: 59a5bbac2e96705896e0ddbcedefe36b215f3fc6fbe541c562b4e3a3b91f8f604df03fd0570daf86bcc0898059715eae29a22fb95c7c489457c27a603ff6e76f

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

@@ -17,42 +17,140 @@
     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")})`
+      );
+    });
+
+    document.querySelectorAll("[data-jil-map]").forEach((host) => {
+      try {
+        initMapHost(host);
+      } catch (error) {
+        logError(`Failed to init ${host.id || "image map"}`, error);
+      }
+    });
   }
 
   function initMapHost(host) {
     if (host.dataset.jilReady === "true") return;
     host.dataset.jilReady = "true";
 
-    const mapData = JSON.parse(host.dataset.jilMap);
+    let mapData;
+    try {
+      mapData = JSON.parse(host.dataset.jilMap);
+    } catch (error) {
+      logError(`Invalid map JSON on ${host.id || "image map"}`, error);
+      return;
+    }
+
     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);
   }
 
+  function bindOverlayGeometry(overlay, host, mapData, img) {
+    const update = () => {
+      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) {
     const overlay = document.createElement("div");
     overlay.className = "jil-label-layer";
     host.appendChild(overlay);
+    bindOverlayGeometry(overlay, host, mapData, img);
 
     const update = () => {
       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;
@@ -248,7 +346,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 +369,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 +393,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());
@@ -299,6 +427,9 @@
       state.image = image;
       fitZoom();
     };
+    image.onerror = () => {
+      logError(`${mapData.src || "viewer image"}: viewer image failed to load`);
+    };
     image.src = mapData.src;
 
     return {
@@ -324,13 +455,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;
     }
 
@@ -448,7 +588,10 @@
   }
 
   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();
 

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.1.2"
+    VERSION = "0.3.0"
   end
 end

metadata

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