jekyll-image-links 0.1.0

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

@@ -0,0 +1,468 @@
+(function () {
+  "use strict";
+
+  const ROOT_SELECTOR = '[data-jil-root="true"]';
+  const config = window.__JIL_CONFIG__ || {};
+
+  function getHoverPopup() {
+    const api = window.JekyllHoverPopup;
+    if (!api || typeof api.openLink !== "function" || typeof api.openContent !== "function") {
+      return null;
+    }
+    return api;
+  }
+
+  function useHoverPopup() {
+    if (config.useHoverPopup === false) return false;
+    return !!getHoverPopup();
+  }
+
+  function init() {
+    document.querySelectorAll("[data-jil-map]").forEach(initMapHost);
+  }
+
+  function initMapHost(host) {
+    if (host.dataset.jilReady === "true") return;
+    host.dataset.jilReady = "true";
+
+    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 (labels) renderLabels(host, mapData, img);
+    if (inline) bindInlineClicks(host, mapData, img);
+    if (viewer) addViewerButton(host, mapData);
+  }
+
+  function renderLabels(host, mapData, img) {
+    const overlay = document.createElement("div");
+    overlay.className = "jil-label-layer";
+    host.appendChild(overlay);
+
+    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;
+
+        const left = (center[0] / mapData.width) * 100;
+        const top = (center[1] / mapData.height) * 100;
+        const label = region.label || region.title || "";
+        if (!label) return;
+
+        const link = document.createElement("a");
+        link.className = "jil-label";
+        link.href = region.href;
+        link.textContent = label;
+        link.style.left = `${left}%`;
+        link.style.top = `${top}%`;
+        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) {
+    host.classList.add("jil-inline");
+    img.addEventListener("click", (event) => {
+      const point = imagePointFromEvent(img, mapData, event);
+      const region = firstIntersectedRegion(mapData.regions, point);
+      if (!region) return;
+
+      event.preventDefault();
+      openRegion(region, event);
+    });
+
+    img.addEventListener("mousemove", (event) => {
+      const point = imagePointFromEvent(img, mapData, event);
+      const region = firstIntersectedRegion(mapData.regions, point);
+      img.style.cursor = region ? "pointer" : "";
+    });
+  }
+
+  function addViewerButton(host, mapData) {
+    const figure = host.closest(".jil-figure");
+    if (!figure) return;
+
+    const caption = figure.querySelector(".jil-caption");
+    const toolbar = document.createElement("div");
+    toolbar.className = "jil-toolbar";
+
+    const button = document.createElement("button");
+    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));
+    toolbar.appendChild(button);
+
+    if (caption) {
+      caption.insertAdjacentElement("afterend", toolbar);
+    } else {
+      host.insertAdjacentElement("afterend", toolbar);
+    }
+  }
+
+  function openViewer(mapData, event) {
+    const panel = buildViewerPanel(mapData);
+    const jhp = useHoverPopup() ? getHoverPopup() : null;
+
+    if (jhp) {
+      jhp.openContent({
+        title: mapData.title || "Map viewer",
+        pageUrl: mapData.src,
+        content: panel.root,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        isPermanent: true,
+        maxWidth: "min(96vw, 1200px)",
+      });
+      return;
+    }
+
+    const backdrop = document.createElement("div");
+    backdrop.className = "jil-viewer-backdrop";
+    backdrop.setAttribute("role", "dialog");
+    backdrop.setAttribute("aria-modal", "true");
+    backdrop.setAttribute("aria-label", mapData.title || "Map viewer");
+    backdrop.appendChild(panel.root);
+    document.body.appendChild(backdrop);
+    panel.focusClose();
+    backdrop.addEventListener("click", (evt) => {
+      if (evt.target === backdrop) backdrop.remove();
+    });
+    backdrop.addEventListener("keydown", (evt) => {
+      if (evt.key === "Escape") backdrop.remove();
+    });
+  }
+
+  function buildViewerPanel(mapData) {
+    const root = document.createElement("div");
+    root.className = "jil-viewer-panel jil-viewer-in-popup";
+
+    const header = document.createElement("div");
+    header.className = "jil-viewer-header";
+
+    const title = document.createElement("div");
+    title.className = "jil-viewer-title";
+    title.textContent = mapData.title || "Map viewer";
+
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "jil-viewer-close btn btn-outline";
+    closeBtn.textContent = "Close";
+    closeBtn.hidden = true;
+
+    header.append(title, closeBtn);
+
+    const controls = document.createElement("div");
+    controls.className = "jil-viewer-controls";
+
+    const zoomOut = makeButton("Zoom out");
+    const zoomIn = makeButton("Zoom in");
+    const zoomReset = makeButton("Reset zoom");
+    const zoomFit = makeButton("Zoom to fit");
+    controls.append(zoomOut, zoomIn, zoomReset, zoomFit);
+
+    const scroll = document.createElement("div");
+    scroll.className = "jil-viewer-scroll";
+
+    const canvas = document.createElement("canvas");
+    canvas.className = "jil-viewer-canvas";
+    scroll.appendChild(canvas);
+
+    root.append(header, controls, scroll);
+
+    const state = {
+      zoom: 1,
+      image: null,
+    };
+
+    const paint = () => {
+      if (!state.image) return;
+      const width = Math.round(mapData.width * state.zoom);
+      const height = Math.round(mapData.height * state.zoom);
+      canvas.width = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext("2d");
+      ctx.clearRect(0, 0, width, height);
+      ctx.drawImage(state.image, 0, 0, width, height);
+
+      mapData.regions.forEach((region) => {
+        ctx.beginPath();
+        region.points.forEach((point, index) => {
+          const x = point[0] * state.zoom;
+          const y = point[1] * state.zoom;
+          if (index === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        });
+        ctx.closePath();
+        ctx.fillStyle = "rgba(51, 122, 183, 0.35)";
+        ctx.strokeStyle = "rgba(51, 122, 183, 0.95)";
+        ctx.lineWidth = 2;
+        ctx.fill();
+        ctx.stroke();
+      });
+    };
+
+    const setZoom = (value) => {
+      state.zoom = clamp(value, 0.1, 8);
+      paint();
+    };
+
+    const fitZoom = () => {
+      const maxWidth = scroll.clientWidth || mapData.width;
+      const maxHeight = scroll.clientHeight || mapData.height;
+      setZoom(Math.min(maxWidth / mapData.width, maxHeight / mapData.height, 1));
+      scroll.scrollTop = 0;
+      scroll.scrollLeft = 0;
+    };
+
+    zoomOut.addEventListener("click", () => setZoom(state.zoom / 1.25));
+    zoomIn.addEventListener("click", () => setZoom(state.zoom * 1.25));
+    zoomReset.addEventListener("click", () => {
+      setZoom(1);
+      scroll.scrollTop = 0;
+      scroll.scrollLeft = 0;
+    });
+    zoomFit.addEventListener("click", fitZoom);
+
+    canvas.addEventListener("click", (event) => {
+      const point = canvasPointFromEvent(canvas, state.zoom, event);
+      const region = firstIntersectedRegion(mapData.regions, point);
+      if (!region) return;
+      event.preventDefault();
+      openRegion(region, event);
+    });
+
+    canvas.addEventListener("mousemove", (event) => {
+      const point = canvasPointFromEvent(canvas, state.zoom, event);
+      const region = firstIntersectedRegion(mapData.regions, point);
+      canvas.style.cursor = region ? "pointer" : "grab";
+    });
+
+    let dragStart = null;
+    canvas.addEventListener("mousedown", (event) => {
+      if (event.button !== 2) return;
+      event.preventDefault();
+      dragStart = {
+        x: event.clientX,
+        y: event.clientY,
+        scrollLeft: scroll.scrollLeft,
+        scrollTop: scroll.scrollTop,
+      };
+      canvas.style.cursor = "grabbing";
+    });
+
+    window.addEventListener("mouseup", () => {
+      dragStart = null;
+      canvas.style.cursor = "grab";
+    });
+
+    window.addEventListener("mousemove", (event) => {
+      if (!dragStart) return;
+      scroll.scrollLeft = dragStart.scrollLeft + (dragStart.x - event.clientX);
+      scroll.scrollTop = dragStart.scrollTop + (dragStart.y - event.clientY);
+    });
+
+    canvas.addEventListener("contextmenu", (event) => event.preventDefault());
+
+    scroll.addEventListener("wheel", (event) => {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      setZoom(state.zoom * (event.deltaY < 0 ? 1.1 : 0.9));
+    }, { passive: false });
+
+    const image = new Image();
+    image.onload = () => {
+      state.image = image;
+      fitZoom();
+    };
+    image.src = mapData.src;
+
+    return {
+      root,
+      focusClose: () => closeBtn.focus(),
+    };
+  }
+
+  function makeButton(label) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "btn btn-outline";
+    button.textContent = label;
+    return button;
+  }
+
+  async function openRegion(region, event) {
+    if (event.shiftKey) {
+      window.open(region.href, "_blank", "noopener,noreferrer");
+      return;
+    }
+
+    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,
+      });
+      return;
+    }
+
+    window.location.href = region.href;
+  }
+
+  function imagePointFromEvent(img, mapData, event) {
+    const rect = img.getBoundingClientRect();
+    const geom = getMapGeometry(img, mapData);
+    if (!geom || !geom.width || !geom.height) {
+      return [0, 0];
+    }
+
+    const relX = (event.clientX - rect.left - geom.offsetX) / geom.width;
+    const relY = (event.clientY - rect.top - geom.offsetY) / geom.height;
+    return [
+      Math.round(relX * mapData.width),
+      Math.round(relY * mapData.height),
+    ];
+  }
+
+  function getMapGeometry(img, mapData) {
+    const rect = img.getBoundingClientRect();
+    const mapW = mapData.width;
+    const mapH = mapData.height;
+    if (!rect.width || !rect.height || !mapW || !mapH) {
+      return null;
+    }
+
+    const objectFit = window.getComputedStyle(img).objectFit || "fill";
+    const mapAspect = mapW / mapH;
+
+    if (objectFit === "fill") {
+      return {
+        offsetX: 0,
+        offsetY: 0,
+        width: rect.width,
+        height: rect.height,
+      };
+    }
+
+    const boxAspect = rect.width / rect.height;
+    let width;
+    let height;
+
+    if (objectFit === "cover") {
+      if (boxAspect > mapAspect) {
+        height = rect.height;
+        width = height * mapAspect;
+      } else {
+        width = rect.width;
+        height = width / mapAspect;
+      }
+    } else {
+      if (boxAspect > mapAspect) {
+        height = rect.height;
+        width = height * mapAspect;
+      } else {
+        width = rect.width;
+        height = width / mapAspect;
+      }
+    }
+
+    return {
+      offsetX: (rect.width - width) / 2,
+      offsetY: (rect.height - height) / 2,
+      width,
+      height,
+    };
+  }
+
+  function canvasPointFromEvent(canvas, zoom, event) {
+    const rect = canvas.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / zoom;
+    const y = (event.clientY - rect.top) / zoom;
+    return [Math.round(x), Math.round(y)];
+  }
+
+  function firstIntersectedRegion(regions, point) {
+    return regions.find((region) => pointInPolygon(region.points, point)) || null;
+  }
+
+  function pointInPolygon(points, point) {
+    const [x, y] = point;
+    let count = 0;
+    for (let i = 0; i < points.length; i += 1) {
+      const a = { x: points[i][0], y: points[i][1] };
+      const b = { x: points[(i + 1) % points.length][0], y: points[(i + 1) % points.length][1] };
+      if (isWest(a, b, x, y)) count += 1;
+    }
+    return count % 2 === 1;
+  }
+
+  function isWest(a, b, x, y) {
+    if (a.y <= b.y) {
+      if (y <= a.y || y > b.y || (x >= a.x && x >= b.x)) return false;
+      if (x < a.x && x < b.x) return true;
+      return (y - a.y) / (x - a.x) > (b.y - a.y) / (b.x - a.x);
+    }
+    return isWest(b, a, x, y);
+  }
+
+  function polygonCenter(points) {
+    let x = 0;
+    let y = 0;
+    points.forEach((point) => {
+      x += point[0];
+      y += point[1];
+    });
+    return [x / points.length, y / points.length];
+  }
+
+  function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+  }
+
+  function start() {
+    if (!document.querySelector(ROOT_SELECTOR)) return;
+
+    const run = () => init();
+
+    if (document.querySelector('[data-hover-popup-root="true"]') && !getHoverPopup()) {
+      window.setTimeout(run, 0);
+      return;
+    }
+
+    run();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", start);
+  } else {
+    start();
+  }
+})();

data/lib/jekyll/image_links/asset_file.rb

@@ -0,0 +1,17 @@
+module Jekyll
+  module ImageLinks
+    class AssetFile < Jekyll::StaticFile
+      def initialize(site, base, dir, name, source_path:)
+        super(site, base, dir, name)
+        @source_path = source_path
+      end
+
+      def write(dest)
+        dest_path = destination(dest)
+        FileUtils.mkdir_p(File.dirname(dest_path))
+        FileUtils.cp(@source_path, dest_path)
+        true
+      end
+    end
+  end
+end

data/lib/jekyll/image_links/generator.rb

@@ -0,0 +1,34 @@
+module Jekyll
+  module ImageLinks
+    class Generator < Jekyll::Generator
+      safe true
+      priority :low
+
+      def generate(site)
+        cfg = (site.config["image_links"] || {})
+        return if cfg["enabled"] == false
+
+        assets_path = cfg["assets_path"] || "/assets/jekyll-image-links"
+        assets_path = "/#{assets_path}" unless assets_path.start_with?("/")
+
+        asset_dir = File.expand_path("../../../assets/jekyll-image-links", __dir__)
+
+        files = {
+          "image_links.js" => File.join(asset_dir, "image_links.js"),
+          "image_links.css" => File.join(asset_dir, "image_links.css"),
+        }
+
+        files.each do |name, source_path|
+          next unless File.file?(source_path)
+          site.static_files << AssetFile.new(
+            site,
+            site.source,
+            assets_path.sub(%r{\A/}, ""),
+            name,
+            source_path: source_path
+          )
+        end
+      end
+    end
+  end
+end

data/lib/jekyll/image_links/hooks.rb

@@ -0,0 +1,61 @@
+module Jekyll
+  module ImageLinks
+    module Hooks
+      def self.register!
+        Jekyll::Hooks.register(%i[pages documents], :post_render) do |doc|
+          site = doc.site
+          cfg = (site.config["image_links"] || {})
+          next if cfg["enabled"] == false
+          next unless doc.respond_to?(:output_ext) && doc.output_ext == ".html"
+
+          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?("/")
+
+          begin
+            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}")
+          end
+        end
+      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
+
+        hover_cfg = site.config["hover_popup"] || {}
+        return { useHoverPopup: false } if hover_cfg["enabled"] == false
+
+        # Auto: omit useHoverPopup and detect window.JekyllHoverPopup at runtime.
+        {}
+      end
+
+      def self.inject_assets(html, assets_path:, site:, cfg:)
+        return html unless html.include?('data-jil-image-map="true"')
+        return html if html.include?('data-jil-root="true"')
+
+        jil_config = build_jil_config(site, cfg)
+
+        tags = <<~HTML
+          <script>
+            window.__JIL_CONFIG__ = #{jil_config.to_json};
+          </script>
+          <link rel="stylesheet" href="#{assets_path}/image_links.css" />
+          <script defer src="#{assets_path}/image_links.js" data-jil-root="true"></script>
+        HTML
+
+        if html.include?("</body>")
+          html.sub("</body>", "#{tags}\n</body>")
+        else
+          "#{html}\n#{tags}\n"
+        end
+      end
+    end
+  end
+end
+
+Jekyll::ImageLinks::Hooks.register!