jekyll-hover-popup 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d3879f84fe0d069980162be1c9fd4f17487b8fc5042cc66fc79b21275846df9b
-  data.tar.gz: e4b68417074e6323c07116488f023716a02e64bf0c8e15f6433ab1f380256349
+  metadata.gz: '093a8fdc8081648557c5767ccda5e569f65755d513df938c8c96b02bf8653348'
+  data.tar.gz: 293393bc00ed5a9e096fb670b6c1468cf83450403db44f1cdd74258e1e1684c5
 SHA512:
-  metadata.gz: 8dc8ec185e717401dc9d995e20e88f25f59d59e4a08e0dd95e09938ca6c689bef253a30bf5df656e173379054fe5265375c6969747307dd2ab1b5d8afbf826db
-  data.tar.gz: 005116b6f088deb3f00ebbae788e8db22aee7074393f7232dd5e451e7e03e5d82d9e156b448f2e55e6fffc5bde7bd2bc34528240395c03729d77132a82e8fb92
+  metadata.gz: 258b38b8e03cdb86f0f1c1ac7c62dc3b56e6046463a28128dd3c7049c0681bd1f0bc609e4a8f357cf3d66c4ca1c8312a6cbc4b72f019fe8392f56ac8c27ff2e6
+  data.tar.gz: '09ab116eea32d0d8f310ea74b75466a19dc6c279ea4b551d22f4cedb8c8574f30c139305433c54283cd131b5291dafa10aea3458abe4165fd8a36ca21ac5dedf'

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

@@ -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/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
   module HoverPopup
-    VERSION = "0.1.1"
+    VERSION = "0.2.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.2.0
 platform: ruby
 authors:
 - directsun