Tooltip Enhancements (#59)

* tooltip scroll to section

* reference highlight on focus and navigation

* removed irrelevant code

* added double-click to copy link styling

* Correctly place styling, and add new file to plugin-info

---------

Co-authored-by: Ole Eskild Steensen <oleeskild@users.noreply.github.com>

plugin-info.json

@@ -30,6 +30,7 @@
             "src/site/_includes/components/notegrowthhistory.njk",
             "src/site/_includes/components/pageheader.njk",
             "src/site/_includes/components/linkPreview.njk",
+            "src/site/_includes/components/references.njk",
             "src/site/_includes/components/sidebar.njk",
             "src/site/_includes/components/graphScript.njk",
             "src/site/_includes/components/filetree.njk",

src/site/_includes/components/linkPreview.njk

@@ -1,4 +1,4 @@
-<!-- All credit for the link preview implementation goes to https://github.com/maximevaillancourt/digital-garden-jekyll-template/blob/master/_includes/link-previews.html -->
+<!-- Credit for the link preview implementation goes to https://github.com/maximevaillancourt/digital-garden-jekyll-template/blob/master/_includes/link-previews.html -->
 <style>
 #tooltip-wrapper {
   background: var(--background-primary);
@@ -64,26 +64,45 @@
     var elem = event.target;
     var elem_props = elem.getClientRects()[elem.getClientRects().length - 1];
     var top = window.pageYOffset || document.documentElement.scrollTop;
-    if (event.target.getAttribute("href").indexOf("http") === -1 || event.target.getAttribute("href").indexOf(window.location.host) !== -1) {
-      if (!linkHistories[event.target.getAttribute("href")]) {
-        iframe.src = event.target.getAttribute("href")
+    var url = event.target.getAttribute("href");
+    if (url.indexOf("http") === -1 || url.indexOf(window.location.host) !== -1) {
+      let contentURL = url.split('#')[0]
+      if (!linkHistories[contentURL]) {
+        iframe.src = contentURL
         iframe.onload = function () {
           tooltipContentHtml = ''
           tooltipContentHtml += '<div style="font-weight: bold; unicode-bidi: plaintext;">' + iframe.contentWindow.document.querySelector('h1').innerHTML + '</div>'
           tooltipContentHtml += iframe.contentWindow.document.querySelector('.content').innerHTML
           tooltipContent.innerHTML = tooltipContentHtml
-          linkHistories[event.target.getAttribute("href")] = tooltipContentHtml
+          linkHistories[contentURL] = tooltipContentHtml
           tooltipWrapper.style.display = 'block';
           tooltipWrapper.scrollTop = 0;
           setTimeout(function () {
             tooltipWrapper.style.opacity = 1;
+            if (url.indexOf("#") != -1) {
+              let id = url.split('#')[1];
+              const focus = tooltipWrapper.querySelector(`[id='${id}']`);
+              focus.classList.add('referred');
+              console.log(focus);
+              focus.scrollIntoView({behavior: 'smooth'}, true)
+            } else {
+              tooltipWrapper.scroll(0, 0);
+            }
           }, 1)
         }
       } else {
-        tooltipContent.innerHTML = linkHistories[event.target.getAttribute("href")]
+        tooltipContent.innerHTML = linkHistories[contentURL]
         tooltipWrapper.style.display = 'block';
         setTimeout(function () {
           tooltipWrapper.style.opacity = 1;
+          if (url.indexOf("#") != -1) {
+              let id = url.split('#')[1];
+              const focus = tooltipWrapper.querySelector(`[id='${id}']`);
+              focus.classList.add('referred');
+              focus.scrollIntoView({behavior: 'smooth'}, true)
+          } else {
+              tooltipWrapper.scroll(0, 0);
+          }
         }, 1)
       }
 

src/site/_includes/components/references.njk

@@ -0,0 +1,26 @@
+    <script>
+      if (window.location.hash) {
+        document.getElementById(window.location.hash.slice(1)).classList.add('referred');
+      }
+      window.addEventListener('hashchange', (evt) => {
+        const oldParts = evt.oldURL.split("#");
+        if (oldParts[1]) {
+          document.getElementById(oldParts[1]).classList.remove('referred');
+        }
+        const newParts = evt.newURL.split("#");
+        if (newParts[1]) {
+          document.getElementById(newParts[1]).classList.add('referred');
+        }
+      }, false);
+      const url_parts = window.location.href.split("#")
+      const url = url_parts[0];
+      const referrence = url_parts[1];
+      document.querySelectorAll(".cm-s-obsidian > *[id]").forEach(function (el) {
+        el.ondblclick = function(evt) {
+          const ref_url = url + '#' + evt.target.id
+          navigator.clipboard.writeText(ref_url);
+      }
+      });
+
+      
+    </script>

src/site/_includes/layouts/note.njk

@@ -49,5 +49,6 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
     {% if settings.dgLinkPreview === true %}
       {%include "components/linkPreview.njk"%}
     {% endif %}
+    {% include "components/references.njk" %}
   </body>
 </html>

src/site/styles/digital-garden-base.scss

@@ -521,6 +521,38 @@ ul.task-list {
     transition: transform 100ms ease-in-out;
 }
 
+.cm-s-obsidian > *[id] {
+    position: relative;
+    cursor: pointer;
+    &:hover {
+        border: 1px dotted;
+        border-color: var(--text-accent);
+        margin-left: -10px;
+        margin-right: -10px;
+        padding: 10px;
+    }
+    &:hover::before {
+        content: "Double-click to copy link";
+        position: absolute;
+        right: 0;
+        top: -1.55em;
+        font-weight: normal;
+        font-size: 12px;
+        color: var(--text-accent);
+        font-variant: initial;
+        letter-spacing: 0.24px;
+        line-height: 14px;
+        
+    }
+}
+
+.referred {
+    border: 1px dashed;
+    border-color: var(--text-accent);
+    padding: 10px;  
+    margin-left: -10px;
+    margin-right: -10px; 
+}