jekyll-hover-popup 0.1.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d3879f84fe0d069980162be1c9fd4f17487b8fc5042cc66fc79b21275846df9b
-  data.tar.gz: e4b68417074e6323c07116488f023716a02e64bf0c8e15f6433ab1f380256349
+  metadata.gz: cdae0cb64015858986ffe6c6dc11d44947b4e172dee08bccd68d191230416b26
+  data.tar.gz: af148150f8a1890b082adbccc2c4665a56dacbad3eea581608dd02c0cbee8f36
 SHA512:
-  metadata.gz: 8dc8ec185e717401dc9d995e20e88f25f59d59e4a08e0dd95e09938ca6c689bef253a30bf5df656e173379054fe5265375c6969747307dd2ab1b5d8afbf826db
-  data.tar.gz: 005116b6f088deb3f00ebbae788e8db22aee7074393f7232dd5e451e7e03e5d82d9e156b448f2e55e6fffc5bde7bd2bc34528240395c03729d77132a82e8fb92
+  metadata.gz: a3192b0edd3563b6b267740ca86eff70b040b269d30aff9005366902be46d6f11026644757ea3f010296aa610f91f4969426e82c0bb1860ed473b7ed0cd07f44
+  data.tar.gz: 203ad982a1a4dd62680ee9798179a224835fca23322b2744e1239d09dfcce0ac8a63e63e574f90a58acf893a43cd69204015160ba37d229b2d5d1a9f40076d30

data/README.md

@@ -6,14 +6,15 @@ Inspired by the hover window behavior in [5etools](https://github.com/5etools/5e
 
 ## Features
 
-- Hover an internal link to preview its target content in a floating window
-- Hold **Shift** while hovering (or when leaving the link) to pin the preview
-- Pinned windows show **Follow link** and **Close** (Ctrl/Cmd+click Close to close all)
-- Pinned links do not open additional previews on further hovers
-- Section links (`#heading-id`) show only that section; page links show the full page content
-- External links and non-page links are ignored
-- Popup windows are resizable (8 drag handles) and styled from the host page's computed theme
-- Exposes `window.JekyllHoverPopup` for other plugins (for example, image map region clicks)
+- Hover over an internal link to see a reference preview
+- Persist windows by holding the SHIFT key
+- Close all windows by holding CTRL while closing one
+- Minimize windows by double clicking the title bar
+- Navigate to an entry later by clicking the link in the title bar
+- Eight point window resize
+- Exposes `window.JekyllHoverPopup` for other plugins
+
+<img width="640" height="360" alt="window-preview-demo-2" src="https://github.com/user-attachments/assets/1f8f60ad-ad2a-4418-ad0f-0494f4e43faf" />
 
 ## Install
 
@@ -41,10 +42,12 @@ hover_popup:
   enabled: true
   assets_path: /assets/jekyll-hover-popup
   hover_delay_ms: 0
-  nav_hover_preview: true
+  nav_hover_preview: false
 ```
 
-Set `nav_hover_preview: false` to disable hover previews for links inside navigation elements (`.site-nav`, `nav`, `[role="navigation"]`, etc.).
+Add a `hover_delay_ms` to delay the preview window creation
+
+Set `nav_hover_preview: true` to enable hover previews for links inside navigation elements (`.site-nav`, `nav`, `[role="navigation"]`, etc.).
 
 ## JavaScript API
 
@@ -72,4 +75,4 @@ window.JekyllHoverPopup.openContent({
 
 ## License
 
-MIT
+[MIT](LICENSE)

data/assets/jekyll-hover-popup/hover_popup.css

@@ -72,6 +72,26 @@
   cursor: move;
 }
 
+.jhp-hwin__rollup {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 220ms ease;
+  min-height: 0;
+}
+
+.jhp-hwin--rolled-up .jhp-hwin__rollup {
+  grid-template-rows: 0fr;
+}
+
+.jhp-hwin__rollup-inner {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.jhp-hwin--rolled-up .jhp-resize {
+  display: none;
+}
+
 .jhp-border--bottom {
   min-height: 3px;
   border-top: 1px solid var(--jhp-border-color);

data/assets/jekyll-hover-popup/hover_popup.js

@@ -3,7 +3,7 @@
 
   const config = window.__JHP_CONFIG__ || {};
   const HOVER_DELAY_MS = Number(config.hoverDelayMs) || 0;
-  const NAV_HOVER_PREVIEW = config.navHoverPreview !== false;
+  const NAV_HOVER_PREVIEW = config.navHoverPreview === true;
   const TRANSIENT_TITLE_HINT = "SHIFT to persist";
   const MAX_VIEWPORT_WIDTH = 0.92;
   const MAX_VIEWPORT_HEIGHT = 0.92;
@@ -103,11 +103,17 @@
     return new URL(href, base);
   }
 
+  function isDiceTrayLink(anchor) {
+    if (!anchor) return false;
+    return anchor.classList.contains("dice-tray-roll") || anchor.hasAttribute("data-dice");
+  }
+
   function rewriteContentLinks(content, basePageUrl) {
     if (!content || !basePageUrl) return;
 
     content.querySelectorAll("a[href]").forEach((anchor) => {
       if (anchor.closest(".jhp-hwin__actions")) return;
+      if (isDiceTrayLink(anchor)) return;
 
       const href = anchor.getAttribute("href");
       if (!href || href.startsWith("mailto:") || href.startsWith("javascript:")) return;
@@ -165,6 +171,7 @@
 
   function isInternalPageLink(anchor) {
     if (!anchor || anchor.closest(".jhp-hwin__actions")) return false;
+    if (isDiceTrayLink(anchor)) return false;
     if (isHeadingPermalink(anchor)) return false;
     if (!NAV_HOVER_PREVIEW && isNavLink(anchor)) return false;
 
@@ -419,7 +426,12 @@
       winEl.style.top = `${Math.max(0, screenH - rect.height - 8)}px`;
     }
 
-    if (position && position.isPreventFlicker && position.bcr) {
+    if (
+      !winEl.classList.contains("jhp-hwin--rolled-up") &&
+      position &&
+      position.isPreventFlicker &&
+      position.bcr
+    ) {
       rect = winEl.getBoundingClientRect();
       const overlap =
         rect.left < position.bcr.right &&
@@ -475,6 +487,8 @@
   }
 
   function setupWindowInteraction(winEl, header, contentEl, windowMeta) {
+    let suppressDragUntil = 0;
+
     const drag = {
       type: DRAG_NONE,
       startX: 0,
@@ -486,6 +500,8 @@
     };
 
     function beginInteraction(evt, type) {
+      if (winEl.classList.contains("jhp-hwin--rolled-up") && type !== DRAG_MOVE) return;
+
       drag.type = type;
       drag.startX = getClientX(evt);
       drag.startY = getClientY(evt);
@@ -601,10 +617,21 @@
       if (winEl.dataset.perm !== "true") return;
       if (evt.button !== 0) return;
       if (evt.target.closest(".jhp-hwin__btn")) return;
+      if (Date.now() < suppressDragUntil) return;
       evt.preventDefault();
       beginInteraction(evt, DRAG_MOVE);
     });
 
+    header.addEventListener("dblclick", (evt) => {
+      if (winEl.dataset.perm !== "true") return;
+      if (evt.target.closest(".jhp-hwin__btn")) return;
+      evt.preventDefault();
+      evt.stopPropagation();
+      suppressDragUntil = Date.now() + 300;
+      if (windowMeta.endInteraction) windowMeta.endInteraction();
+      windowMeta.toggleRollup();
+    });
+
     addResizeHandle(winEl, "jhp-resize-n", DRAG_N, beginInteraction);
     addResizeHandle(winEl, "jhp-resize-ne", DRAG_NE, beginInteraction);
     addResizeHandle(winEl, "jhp-resize-e", DRAG_E, beginInteraction);
@@ -644,6 +671,7 @@
     }
 
     updateTitleDisplay();
+    if (isPermanent) topBorder.title = "Double-click to roll up or down";
 
     const actions = document.createElement("div");
     actions.className = "jhp-hwin__actions";
@@ -673,20 +701,72 @@
     const bottomBorder = document.createElement("div");
     bottomBorder.className = "jhp-border jhp-border--bottom";
 
+    const rollupInner = document.createElement("div");
+    rollupInner.className = "jhp-hwin__rollup-inner";
+    rollupInner.appendChild(contentEl);
+    rollupInner.appendChild(bottomBorder);
+
+    const rollupEl = document.createElement("div");
+    rollupEl.className = "jhp-hwin__rollup";
+    rollupEl.appendChild(rollupInner);
+
     winEl.appendChild(topBorder);
-    winEl.appendChild(contentEl);
-    winEl.appendChild(bottomBorder);
+    winEl.appendChild(rollupEl);
     document.body.appendChild(winEl);
 
+    let rolledUp = false;
+    let savedRollupStyles = null;
+
+    function captureRollupStyles() {
+      return {
+        contentHeight: contentEl.style.height,
+        contentMaxHeight: contentEl.style.maxHeight,
+        winWidth: winEl.style.width,
+        winMaxWidth: winEl.style.maxWidth,
+      };
+    }
+
+    function restoreRollupStyles() {
+      if (!savedRollupStyles) return;
+      contentEl.style.height = savedRollupStyles.contentHeight;
+      contentEl.style.maxHeight = savedRollupStyles.contentMaxHeight;
+      winEl.style.width = savedRollupStyles.winWidth;
+      winEl.style.maxWidth = savedRollupStyles.winMaxWidth;
+    }
+
+    function setRolledUp(value) {
+      rolledUp = value;
+      winEl.classList.toggle("jhp-hwin--rolled-up", rolledUp);
+      winEl.dataset.rolledUp = rolledUp ? "true" : "false";
+    }
+
+    function toggleRollup() {
+      if (winEl.dataset.perm !== "true") return;
+
+      if (!rolledUp) {
+        savedRollupStyles = captureRollupStyles();
+        setRolledUp(true);
+        return;
+      }
+
+      setRolledUp(false);
+      restoreRollupStyles();
+      adjustWindowToViewport(winEl, contentEl, null);
+    }
+
     const windowMeta = {
       id,
       el: winEl,
       contentEl,
       endInteraction: null,
+      toggleRollup,
+      isRolledUp() {
+        return rolledUp;
+      },
       setContent(node) {
         contentEl.innerHTML = "";
         contentEl.appendChild(node);
-        fitWindowToContent(winEl, contentEl);
+        if (!rolledUp) fitWindowToContent(winEl, contentEl);
       },
       setLoading() {
         contentEl.innerHTML = '<div class="jhp-hwin__loading">Loading…</div>';
@@ -700,6 +780,11 @@
       setPermanent(value) {
         winEl.dataset.perm = value ? "true" : "false";
         updateTitleDisplay();
+        topBorder.title = value ? "Double-click to roll up or down" : "";
+        if (!value && rolledUp) {
+          setRolledUp(false);
+          restoreRollupStyles();
+        }
       },
       setPageTitle(value) {
         pageTitle = value;

data/lib/jekyll/hover_popup/hooks.rb

@@ -11,7 +11,7 @@ module Jekyll
           assets_path = cfg["assets_path"] || "/assets/jekyll-hover-popup"
           assets_path = "/#{assets_path}" unless assets_path.start_with?("/")
           hover_delay_ms = cfg["hover_delay_ms"] || 0
-          nav_hover_preview = cfg.fetch("nav_hover_preview", true)
+          nav_hover_preview = cfg.fetch("nav_hover_preview", false)
 
           begin
             doc.output = inject_assets(doc.output.to_s, assets_path: assets_path, hover_delay_ms: hover_delay_ms, nav_hover_preview: nav_hover_preview)
@@ -21,7 +21,7 @@ module Jekyll
         end
       end
 
-      def self.inject_assets(html, assets_path:, hover_delay_ms:, nav_hover_preview: true)
+      def self.inject_assets(html, assets_path:, hover_delay_ms:, nav_hover_preview: false)
         return html if html.include?('data-hover-popup-root="true"')
 
         tags = <<~HTML

data/lib/jekyll/hover_popup/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
   module HoverPopup
-    VERSION = "0.1.1"
+    VERSION = "0.3.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-hover-popup
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.3.0
 platform: ruby
 authors:
 - directsun