markdownr 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03b8c1c4665231a3fb1ead89abea54e0630131743216938a1c293945c942e710
-  data.tar.gz: 004d43321fcda1b894c6481eed4b755f29a9fae14c6e0f6bbb5c1f9d82b6afd9
+  metadata.gz: cf955ffcbe5dfc1e1f5070b3fa36a6d2d15a092e7be6ca7f8ac5dcd4b863162a
+  data.tar.gz: 3ea514cfed258bc71a8a3e82f6ef883e1ed619fc63b46e9217eb4745c455fdd5
 SHA512:
-  metadata.gz: 0d44c7b65617670e54d450d5d958294bd78914407cf925087f1547b551b5b91dd3b556820009aa197491bdd14bff9fc6e205a47bf6662fb5b5a495d8e5d8c71d
-  data.tar.gz: 07f03bc67cc2b668c90c1c9467eb7eafe60f2c58c4030553adbec8af4309bdbf3943c9ffdd454cdde0283619f702c6a7ef75992ed679e84983557c5ed5fc3675
+  metadata.gz: 19f44c77aab4f8a5a2978c85f8fd900f6a0cc45d9399897a26acae80d5809ce57669716a1a5e488c276a4b53e0b2e5d5e3bc13d8b6463a5c8d9c76342eb39e4f
+  data.tar.gz: b8adb9e49b1def08d6d3f4061de5048d3cf14232d4ce0c3b9fde51f605f52fb9338a9b39ad49f569d9663fdf9e718e1396f37674e55c7c3f025ffa7a271d3548

data/lib/markdown_server/version.rb

@@ -1,3 +1,3 @@
 module MarkdownServer
-  VERSION = "0.5.0"
+  VERSION = "0.5.1"
 end

data/views/layout.erb

@@ -678,7 +678,7 @@
     /* Footnote list — hide numeric markers; labels are inline via <strong> */
     .footnotes ol { list-style: none; padding-left: 1.2em; }
 
-    /* Right-click / long-press link context popup */
+    /* Left-click / tap link context popup */
     .link-ctx-popup {
       position: fixed;
       z-index: 500;
@@ -705,6 +705,13 @@
       background: #faf8f4;
       z-index: 1;
     }
+    .link-ctx-popup-title-wrap {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
     .link-ctx-popup-title {
       font-family: Georgia, "Times New Roman", serif;
       font-weight: 700;
@@ -712,7 +719,9 @@
       color: #3a3a3a;
       min-width: 0;
       word-break: break-word;
+      text-decoration: none;
     }
+    a.link-ctx-popup-title:hover { color: #8b6914; }
     .link-ctx-popup-close {
       background: none;
       border: none;
@@ -724,6 +733,26 @@
       flex-shrink: 0;
     }
     .link-ctx-popup-close:hover { color: #2c2c2c; }
+    .link-ctx-popup-newtab {
+      color: #666;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      padding: 0 0.2rem;
+    }
+    .link-ctx-popup-newtab:hover { color: #8b6914; }
+    .link-ctx-popup-back {
+      background: none;
+      border: none;
+      font-size: 1rem;
+      line-height: 1;
+      color: #888;
+      cursor: pointer;
+      padding: 0 0.3rem 0 0;
+      flex-shrink: 0;
+    }
+    .link-ctx-popup-back:hover { color: #2c2c2c; }
     .link-ctx-popup-body {
       padding: 0.75rem 1rem;
     }
@@ -1383,14 +1412,13 @@
       }, { passive: true });
     })();
 
-    // Right-click / long-press popup for all links
+    // Left-click / tap popup for all links
     (function() {
       var cache = Object.create(null);
       var popup = null;
-      var longPressTimer = null;
       var touchMoved = false;
-      var pendingTouch = null;
-      var longPressHandled = false;
+      var historyStack = [];
+      var currentPopupPos = { x: 0, y: 0 };
 
       function escHtml(s) {
         return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
@@ -1416,19 +1444,91 @@
         return '/preview/' + resolved.pathname.replace(/^\/browse\//, '');
       }
 
-      function showPopup(x, y, title, bodyHtml) {
-        hidePopup();
+      var extLinkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;flex-shrink:0"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>';
+
+      function showPopup(x, y, title, bodyHtml, href) {
+        // Remove old popup without clearing historyStack
+        if (popup && popup.parentNode) popup.parentNode.removeChild(popup);
+        popup = null;
+        currentPopupPos = { x: x, y: y };
+
         popup = document.createElement('div');
         popup.className = 'link-ctx-popup';
+        var backBtn = historyStack.length > 0 ? '<button class="link-ctx-popup-back" aria-label="Back">\u2190</button>' : '';
+        var titleHtml = href
+          ? '<div class="link-ctx-popup-title-wrap">' +
+              '<a class="link-ctx-popup-title" href="' + escHtml(href) + '"><span>' + escHtml(title) + '</span></a>' +
+              '<a class="link-ctx-popup-newtab" href="' + escHtml(href) + '" target="_blank" rel="noopener" title="Open in new tab">' + extLinkIcon + '</a>' +
+            '</div>'
+          : '<span class="link-ctx-popup-title-wrap"><span class="link-ctx-popup-title"><span>' + escHtml(title) + '</span></span></span>';
         popup.innerHTML =
           '<div class="link-ctx-popup-header">' +
-            '<span class="link-ctx-popup-title">' + escHtml(title) + '</span>' +
+            backBtn + titleHtml +
             '<button class="link-ctx-popup-close" aria-label="Close">\u00d7</button>' +
           '</div>' +
           '<div class="link-ctx-popup-body">' + bodyHtml + '</div>';
         document.body.appendChild(popup);
 
-        // Position near pointer, clamped to viewport
+        repositionPopup();
+
+        var backBtnEl = popup.querySelector('.link-ctx-popup-back');
+        if (backBtnEl) {
+          backBtnEl.addEventListener('click', function(e) {
+            e.stopPropagation();
+            var prev = historyStack.pop();
+            if (prev) showPopup(prev.x, prev.y, prev.title, prev.bodyHtml, prev.href);
+          });
+        }
+        popup.querySelector('.link-ctx-popup-close').addEventListener('click', hidePopup);
+        popup.addEventListener('click', function(e) { e.stopPropagation(); });
+
+        // Links in the popup body push current state to history, then open a new popup
+        // at the same screen position as the current popup
+        var body = popup.querySelector('.link-ctx-popup-body');
+        body.addEventListener('click', function(e) {
+          var anchor = findLink(e.target);
+          if (!anchor) return;
+          var linkHref = anchor.getAttribute('href');
+          if (!linkHref || isAnchorOnly(linkHref)) return;
+          e.stopPropagation();
+          e.preventDefault();
+          var savedPos = { x: currentPopupPos.x, y: currentPopupPos.y };
+          var titleEl = popup.querySelector('.link-ctx-popup-title');
+          historyStack.push({
+            x: savedPos.x, y: savedPos.y,
+            title: titleEl ? titleEl.querySelector('span').textContent : '',
+            bodyHtml: body.innerHTML,
+            href: titleEl ? (titleEl.getAttribute('href') || '') : ''
+          });
+          handleLink(anchor, savedPos.x, savedPos.y, true);
+        });
+        body.addEventListener('touchend', function(e) {
+          if (touchMoved) return;
+          var anchor = findLink(e.target);
+          if (!anchor) return;
+          var linkHref = anchor.getAttribute('href');
+          if (!linkHref || isAnchorOnly(linkHref)) return;
+          e.stopPropagation();
+          e.preventDefault();
+          var savedPos = { x: currentPopupPos.x, y: currentPopupPos.y };
+          var titleEl = popup.querySelector('.link-ctx-popup-title');
+          historyStack.push({
+            x: savedPos.x, y: savedPos.y,
+            title: titleEl ? titleEl.querySelector('span').textContent : '',
+            bodyHtml: body.innerHTML,
+            href: titleEl ? (titleEl.getAttribute('href') || '') : ''
+          });
+          handleLink(anchor, savedPos.x, savedPos.y, true);
+        }, { passive: false });
+
+        ['touchstart','touchmove','touchend'].forEach(function(ev) {
+          popup.addEventListener(ev, function(e) { e.stopPropagation(); }, { passive: true });
+        });
+      }
+
+      function repositionPopup() {
+        if (!popup) return;
+        var x = currentPopupPos.x, y = currentPopupPos.y;
         var vw = Math.min(window.innerWidth, document.documentElement.clientWidth);
         var vh = window.innerHeight;
         var left = x + 12;
@@ -1438,29 +1538,25 @@
         if (top < 8) top = 8;
         popup.style.left = left + 'px';
         popup.style.top = top + 'px';
-
-        popup.querySelector('.link-ctx-popup-close').addEventListener('click', hidePopup);
-        popup.addEventListener('click', function(e) { e.stopPropagation(); });
-        popup.addEventListener('contextmenu', function(e) { e.preventDefault(); e.stopPropagation(); });
-        ['touchstart','touchmove','touchend'].forEach(function(ev) {
-          popup.addEventListener(ev, function(e) { e.stopPropagation(); }, { passive: true });
-        });
       }
 
       function updatePopup(bodyHtml, title) {
         if (!popup) return;
         var body = popup.querySelector('.link-ctx-popup-body');
-        var titleEl = popup.querySelector('.link-ctx-popup-title');
+        var titleTextEl = popup.querySelector('.link-ctx-popup-title span');
         if (body) body.innerHTML = bodyHtml;
-        if (title && titleEl) titleEl.textContent = title;
+        if (title && titleTextEl) titleTextEl.textContent = title;
+        repositionPopup();
       }
 
       function hidePopup() {
         if (popup && popup.parentNode) popup.parentNode.removeChild(popup);
         popup = null;
+        historyStack = [];
       }
 
-      function handleLink(anchor, x, y) {
+      function handleLink(anchor, x, y, chained) {
+        if (!chained) historyStack = [];
         var href = anchor.getAttribute('href');
         if (!href || isAnchorOnly(href)) return;
         var label = anchor.textContent.trim() || href;
@@ -1469,13 +1565,13 @@
           var path = previewPath(href);
           var cached = cache[path];
           if (cached && typeof cached === 'object') {
-            showPopup(x, y, cached.title || label, cached.html);
+            showPopup(x, y, cached.title || label, cached.html, href);
           } else if (cached === false) {
             showPopup(x, y, label,
               '<div class="link-ctx-popup-url">' + escHtml(href) + '</div>' +
-              '<p style="margin:0;color:#888;font-family:sans-serif;font-size:0.82rem">Preview not available</p>');
+              '<p style="margin:0;color:#888;font-family:sans-serif;font-size:0.82rem">Preview not available</p>', href);
           } else {
-            showPopup(x, y, label, '<p style="opacity:0.5;margin:0;font-family:sans-serif">Loading\u2026</p>');
+            showPopup(x, y, label, '<p style="opacity:0.5;margin:0;font-family:sans-serif">Loading\u2026</p>', href);
             if (cached === undefined) {
               cache[path] = null;
               fetch(path)
@@ -1495,13 +1591,13 @@
           var extKey = 'ext:' + href;
           var extCached = cache[extKey];
           if (extCached && typeof extCached === 'object') {
-            showPopup(x, y, extCached.title || label, extCached.html);
+            showPopup(x, y, extCached.title || label, extCached.html, href);
           } else if (extCached === false) {
             showPopup(x, y, label,
               '<div class="link-ctx-popup-url">' + escHtml(href) + '</div>' +
-              '<p style="margin:0.5rem 0 0;color:#888;font-family:sans-serif;font-size:0.82rem">Could not fetch page content.</p>');
+              '<p style="margin:0.5rem 0 0;color:#888;font-family:sans-serif;font-size:0.82rem">Could not fetch page content.</p>', href);
           } else {
-            showPopup(x, y, label, '<p style="opacity:0.5;margin:0;font-family:sans-serif">Loading\u2026</p>');
+            showPopup(x, y, label, '<p style="opacity:0.5;margin:0;font-family:sans-serif">Loading\u2026</p>', href);
             if (extCached === undefined) {
               cache[extKey] = null;
               fetch('/fetch?url=' + encodeURIComponent(href))
@@ -1526,246 +1622,76 @@
             }
           }
         } else {
-          showPopup(x, y, label, '<div class="link-ctx-popup-url">' + escHtml(href) + '</div>');
+          showPopup(x, y, label, '<div class="link-ctx-popup-url">' + escHtml(href) + '</div>', href);
         }
       }
 
-      // Right-click (desktop + most mobile browsers fire contextmenu on long-press)
-      document.addEventListener('contextmenu', function(e) {
-        if (popup && popup.contains(e.target)) { e.preventDefault(); return; }
+      // Left-click on desktop
+      document.addEventListener('click', function(e) {
+        if (popup && popup.contains(e.target)) return;
         var anchor = findLink(e.target);
-        if (!anchor) return;
+        if (!anchor) { hidePopup(); return; }
         var href = anchor.getAttribute('href');
-        if (!href || isAnchorOnly(href)) return;
+        if (!href || isAnchorOnly(href)) { hidePopup(); return; }
+        if (!anchor.closest('.md-content')) { hidePopup(); return; }
         e.preventDefault();
-        clearTimeout(longPressTimer);
-        pendingTouch = null;
-        if (!longPressHandled) handleLink(anchor, e.clientX, e.clientY);
-        longPressHandled = false;
+        handleLink(anchor, e.clientX, e.clientY);
       });
 
-      // Long-press fallback for touch devices that don't fire contextmenu
+      // Touch tap
       document.addEventListener('touchstart', function(e) {
         if (e.touches.length !== 1) return;
-        if (popup && popup.contains(e.target)) return;
-        var anchor = findLink(e.target);
-        if (!anchor) return;
-        var href = anchor.getAttribute('href');
-        if (!href || isAnchorOnly(href)) return;
         touchMoved = false;
-        longPressHandled = false;
-        var t = e.touches[0];
-        pendingTouch = { anchor: anchor, x: t.clientX, y: t.clientY };
-        clearTimeout(longPressTimer);
-        longPressTimer = setTimeout(function() {
-          if (!touchMoved && pendingTouch) {
-            longPressHandled = true;
-            handleLink(pendingTouch.anchor, pendingTouch.x, pendingTouch.y);
-            pendingTouch = null;
-            setTimeout(function() { longPressHandled = false; }, 400);
-          }
-        }, 600);
       }, { passive: true });
 
       document.addEventListener('touchmove', function() {
         touchMoved = true;
-        clearTimeout(longPressTimer);
-        pendingTouch = null;
-      }, { passive: true });
-
-      document.addEventListener('touchend', function() {
-        clearTimeout(longPressTimer);
-        pendingTouch = null;
       }, { passive: true });
 
-      document.addEventListener('touchcancel', function() {
-        clearTimeout(longPressTimer);
-        pendingTouch = null;
-        longPressHandled = false;
-      }, { passive: true });
+      document.addEventListener('touchend', function(e) {
+        if (touchMoved) return;
+        if (popup && popup.contains(e.target)) return;
+        var anchor = findLink(e.target);
+        if (!anchor) { hidePopup(); return; }
+        var href = anchor.getAttribute('href');
+        if (!href || isAnchorOnly(href)) { hidePopup(); return; }
+        if (!anchor.closest('.md-content')) { hidePopup(); return; }
+        e.preventDefault();
+        var touch = e.changedTouches[0];
+        handleLink(anchor, touch.clientX, touch.clientY);
+      }, { passive: false });
 
-      document.addEventListener('click', function(e) {
-        if (popup && !popup.contains(e.target)) hidePopup();
-      });
       document.addEventListener('keydown', function(e) {
         if (e.key === 'Escape' && popup) hidePopup();
       });
 
-    })();
-
     <% if settings.link_tooltips %>
-    // Link preview popup for local markdown links and external links
-    (function() {
-      var content = document.querySelector('.md-content');
-      if (!content) return;
-
-      var cache = Object.create(null);
-      var activePopup = null;
-      var activeAnchor = null;
-      var hideTimer = null;
-
-      function escHtml(s) {
-        return String(s)
-          .replace(/&/g, '&amp;').replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-      }
-
-      function isLocalMdLink(a) {
-        if (a.classList.contains('broken')) return false;
-        var href = a.getAttribute('href');
-        if (!href) return false;
-        if (/^https?:\/\//i.test(href)) return false;
-        var path = href.split('?')[0].split('#')[0];
-        return /\.md$/i.test(path);
-      }
-
-      function isExternalLink(a) {
-        var href = a.getAttribute('href');
-        return href && /^https?:\/\//i.test(href);
-      }
-
-      function previewUrl(a) {
-        var resolved = new URL(a.getAttribute('href'), location.href);
-        return '/preview/' + resolved.pathname.replace(/^\/browse\//, '');
-      }
-
-      // Returns true if el has an ancestor that clips overflow (prevents absolute children escaping)
-      function hasOverflowClip(el) {
-        var parent = el.parentElement;
-        while (parent && parent !== document.body) {
-          var s = window.getComputedStyle(parent);
-          if (s.overflow !== 'visible' || s.overflowX !== 'visible' || s.overflowY !== 'visible') return true;
-          parent = parent.parentElement;
-        }
-        return false;
-      }
-
-      function showPopup(anchor, html) {
-        hidePopup();
-        var pop = document.createElement('div');
-        pop.className = 'link-preview-popup';
-        pop.innerHTML = html;
-        activePopup = pop;
-        activeAnchor = anchor;
-
-        var vw = Math.min(window.innerWidth, document.documentElement.clientWidth);
-        var vh = window.innerHeight;
-
-        if (hasOverflowClip(anchor)) {
-          // Anchor is inside an overflow container — use fixed positioning to escape clipping
-          pop.style.position = 'fixed';
-          pop.style.bottom = 'auto';  // override the CSS class's bottom: 100%
-          document.body.appendChild(pop);
-          var aRect = anchor.getBoundingClientRect();
-          var popH = pop.offsetHeight;
-          var popW = pop.offsetWidth;
-          // Prefer above the link, fall back to below
-          var top = aRect.top - popH - 4;
-          if (top < 8) top = aRect.bottom + 4;
-          if (top + popH > vh - 8) top = Math.max(8, vh - popH - 8);
-          var left = aRect.left;
-          if (left + popW > vw - 8) left = Math.max(8, vw - popW - 8);
-          pop.style.top = top + 'px';
-          pop.style.left = left + 'px';
-        } else {
-          // Normal anchor-attached positioning
-          anchor.appendChild(pop);
-          var rect = pop.getBoundingClientRect();
-          var shift = 0;
-          if (rect.right > vw - 8) shift = (vw - 8) - rect.right;
-          if (rect.left + shift < 8) shift = 8 - rect.left;
-          if (shift !== 0) pop.style.left = (parseFloat(pop.style.left || 0) + shift) + 'px';
-          // If top goes off screen, flip below the link instead
-          rect = pop.getBoundingClientRect();
-          if (rect.top < 8) {
-            pop.style.bottom = 'auto';
-            pop.style.top = '100%';
-          }
-        }
-
-        // Keep popup open while hovering over it
-        pop.addEventListener('mouseenter', function() { clearTimeout(hideTimer); });
-        pop.addEventListener('mouseleave', function() { hideTimer = setTimeout(hidePopup, 10); });
-
-        // Stop clicks inside the popup from triggering the outer link
-        pop.addEventListener('click', function(e) {
-          e.stopPropagation();
-          if (!e.target.closest('a')) e.preventDefault();
-        });
-      }
-
-      function hidePopup() {
-        if (activePopup && activePopup.parentNode) activePopup.parentNode.removeChild(activePopup);
-        activePopup = null;
-        activeAnchor = null;
-      }
-
-      function fetchAndShow(anchor) {
-        var url = previewUrl(anchor);
-        var cached = cache[url];
-        if (cached === undefined) {
-          cache[url] = null; // in-flight
-          showPopup(anchor, '<p style="opacity:0.5;margin:0">Loading\u2026</p>');
-          fetch(url)
-            .then(function(r) { return r.ok ? r.json() : null; })
-            .then(function(data) {
-              if (!data) { cache[url] = false; if (activeAnchor === anchor) hidePopup(); return; }
-              var html = '<div class="link-preview-popup-title">' + escHtml(data.title) + '</div>' + data.html;
-              cache[url] = html;
-              if (activeAnchor === anchor) showPopup(anchor, html);
-            })
-            .catch(function() { cache[url] = false; if (activeAnchor === anchor) hidePopup(); });
-        } else if (typeof cached === 'string') {
-          showPopup(anchor, cached);
-        }
-      }
-
-      function fetchExternalAndShow(anchor) {
-        var href = anchor.getAttribute('href');
-        var key = 'ext:' + href;
-        var cached = cache[key];
-        if (cached === undefined) {
-          cache[key] = null; // in-flight
-          showPopup(anchor, '<p style="opacity:0.5;margin:0">Loading\u2026</p>');
-          fetch('/fetch?url=' + encodeURIComponent(href))
-            .then(function(r) { return r.ok ? r.json() : null; })
-            .then(function(data) {
-              if (!data || data.error) { cache[key] = false; if (activeAnchor === anchor) hidePopup(); return; }
-              var html = '<div class="link-preview-popup-title">' + escHtml(data.title) + '</div>' + data.html;
-              cache[key] = html;
-              if (activeAnchor === anchor) showPopup(anchor, html);
-            })
-            .catch(function() { cache[key] = false; if (activeAnchor === anchor) hidePopup(); });
-        } else if (typeof cached === 'string') {
-          showPopup(anchor, cached);
-        }
-      }
-
-      content.querySelectorAll('a').forEach(function(a) {
-        var localMd = isLocalMdLink(a);
-        var external = isExternalLink(a);
-        if (!localMd && !external) return;
-        a.classList.add('link-tooltip-anchor');
-
+      // Hover — same popup as click, triggered after a short delay when no popup is active
+      (function() {
+        var content = document.querySelector('.md-content');
+        if (!content) return;
         var hoverTimer = null;
-        a.addEventListener('click', hidePopup);
-        a.addEventListener('mouseenter', function() {
-          hoverTimer = setTimeout(function() {
-            if (localMd) fetchAndShow(a);
-            else fetchExternalAndShow(a);
-          }, 300);
-        });
-        a.addEventListener('mouseleave', function() {
-          clearTimeout(hoverTimer);
-          hideTimer = setTimeout(hidePopup, 150);
+        content.querySelectorAll('a').forEach(function(a) {
+          var href = a.getAttribute('href');
+          if (!href || isAnchorOnly(href)) return;
+          if (!isLocalMd(href) && !isExternal(href)) return;
+          a.addEventListener('mouseenter', function(e) {
+            clearTimeout(hoverTimer);
+            if (popup) return;
+            var x = e.clientX, y = e.clientY;
+            hoverTimer = setTimeout(function() {
+              if (!popup) handleLink(a, x, y, false);
+            }, 300);
+          });
+          a.addEventListener('mouseleave', function() {
+            clearTimeout(hoverTimer);
+          });
         });
-      });
+      })();
+    <% end %>
 
-      document.addEventListener('click', function(e) {
-        if (activePopup && !activePopup.contains(e.target) && activeAnchor && !activeAnchor.contains(e.target)) hidePopup();
-      });
     })();
-    <% end %>
+
 
   </script>
 </body>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: markdownr
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.5.1
 platform: ruby
 authors:
 - Brian Dunn