Merge pull request #123 from aidenybai/fix-popover

assets/js/popover.js

@@ -1,5 +1,5 @@
 function htmlToElement(html) {
-  const template = document.createElement('template')
+  const template = document.createElement("template")
   html = html.trim()
   template.innerHTML = html
   return template.content.firstChild
@@ -7,29 +7,27 @@ function htmlToElement(html) {
 
 function initPopover(baseURL) {
   const basePath = baseURL.replace(window.location.origin, "")
-  document.addEventListener("DOMContentLoaded", () => {
+  fetchData.then(({ content }) => {
-    fetchData.then(({ content }) => {
+    const links = [...document.getElementsByClassName("internal-link")]
-      const links = [...document.getElementsByClassName("internal-link")]
+    links
-      links
+      .filter((li) => li.dataset.src)
-        .filter(li => li.dataset.src)
+      .forEach((li) => {
-        .forEach(li => {
+        const linkDest = content[li.dataset.src.replace(/\/$/g, "").replace(basePath, "")]
-          const linkDest = content[li.dataset.src.replace(/\/$/g, "").replace(basePath, "")]
+        if (linkDest) {
-          if (linkDest) {
+          const popoverElement = `<div class="popover">
-            const popoverElement = `<div class="popover">
     <h3>${linkDest.title}</h3>
     <p>${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...</p>
     <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
 </div>`
-            const el = htmlToElement(popoverElement)
+          const el = htmlToElement(popoverElement)
-            li.appendChild(el)
+          li.appendChild(el)
-            li.addEventListener("mouseover", () => {
+          li.addEventListener("mouseover", () => {
-              el.classList.add("visible")
+            el.classList.add("visible")
-            })
+          })
-            li.addEventListener("mouseout", () => {
+          li.addEventListener("mouseout", () => {
-              el.classList.remove("visible")
+            el.classList.remove("visible")
-            })
+          })
-          }
+        }
-        })
+      })
-    })
   })
 }

assets/js/router.js

@@ -0,0 +1,12 @@
+import { router, navigate } from "https://unpkg.com/million@1.8.9-0/dist/router.mjs"
+
+export const attachSPARouting = (draw) => {
+  // SPA navigation for access later
+  window.navigate = navigate
+  // We only mutate document.title and content within .singlePage element
+  router(".singlePage")
+  // We need on initial load, then subsequent redirs
+  // requestAnimationFrame() delays graph draw until SPA routing is finished
+  window.addEventListener("million:navigate", () => requestAnimationFrame(draw))
+  window.addEventListener("DOMContentLoaded", () => requestAnimationFrame(draw))
+}

layouts/_default/section.html

@@ -19,7 +19,6 @@
     </article>
     {{partial "contact.html" .}}
 </div>
-{{partial "popover.html" .}}
 </body>
 
 </html>

layouts/_default/single.html

@@ -26,7 +26,6 @@
       {{partial "textprocessing.html" . }}
     </article>
     {{partial "footer.html" .}}
-    {{partial "popover.html" .}}
 </div>
 </body>
 

layouts/_default/taxonomy.html

@@ -28,7 +28,6 @@
     </article>
     {{partial "contact.html" .}}
 </div>
-{{partial "popover.html" .}}
 </body>
 
 </html>

layouts/_default/term.html

@@ -19,7 +19,6 @@
     </article>
     {{partial "contact.html" .}}
 </div>
-{{partial "popover.html" .}}
 </body>
 
 </html>

layouts/index.html

@@ -17,8 +17,6 @@
         {{partial "textprocessing.html" . }}
     </article>
     {{partial "footer.html" .}}
-    {{partial "popover.html" .}}
 </div>
 </body>
 </html>
-

layouts/partials/head.html

@@ -35,6 +35,10 @@
   <script src="{{$darkMode.Permalink}}"></script>
   {{partial "katex.html" .}}
 
+  {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
+  resources.Minify }}
+  <script src="{{$popover.Permalink}}"></script>
+
   <!--  Preload page vars  -->
   {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
   "md5" | resources.Minify | }} {{$contentIndex := resources.Get
@@ -59,35 +63,32 @@
         }))
   </script>
   {{if $.Site.Data.config.enableSPA}}
+  {{ $router := resources.Get "js/router.js" | resources.Fingerprint "md5" |
+  resources.Minify }}
   <script type="module">
-    import { router, navigate } from "https://unpkg.com/million/dist/router.mjs";
+    import { attachSPARouting } from '{{$router.Permalink}}';
-    // SPA navigation for access later
+    // NOTE: everything within this callback will be executed for every page navigation. This is a good place to put JavaScript that loads or modifies data on the page.
-    window.navigate = navigate;
+    const draw = () => {
-    // We only mutate document.title and content within .singlePage element
+      const container = document.getElementById("graph-container")
-    router(".singlePage");
+      // retry if the graph is not ready
-    const callback = () => {
+      if (!container) return requestAnimationFrame(draw)
-      // requestAnimationFrame() delays graph draw until SPA routing is finished
+      // clear the graph in case there is anything within it
-      const draw = () => {
+      container.textContent = ""
-        const container = document.getElementById("graph-container");
-        // retry if the graph is not ready
-        if (!container) return requestAnimationFrame(draw);
-        // clear the graph in case there is anything within it
-        container.textContent = "";
 
-        drawGraph(
+      drawGraph(
-          {{strings.TrimRight "/" .Site.BaseURL}},
+        {{strings.TrimRight "/" .Site.BaseURL}},
-          {{$.Site.Data.graphConfig.paths}},
+        {{$.Site.Data.graphConfig.paths}},
-          {{$.Site.Data.graphConfig.depth}},
+        {{$.Site.Data.graphConfig.depth}},
-          {{$.Site.Data.graphConfig.enableDrag}},
+        {{$.Site.Data.graphConfig.enableDrag}},
-          {{$.Site.Data.graphConfig.enableLegend}},
+        {{$.Site.Data.graphConfig.enableLegend}},
-          {{$.Site.Data.graphConfig.enableZoom}}
+        {{$.Site.Data.graphConfig.enableZoom}}
-        );
+      );
-      };
+
-      requestAnimationFrame(draw);
+      {{if $.Site.Data.config.enableLinkPreview}}
+        initPopover({{strings.TrimRight "/" .Site.BaseURL }})
+      {{end}}
     };
-    // We need on initial load, then subsequent redirs
+    attachSPARouting(draw);
-    window.addEventListener("million:navigate", callback);
-    window.addEventListener("DOMContentLoaded", callback);
   </script>
   {{else}}
   <script>window.navigate = (url) => window.location.href = url</script>

layouts/partials/popover.html

@@ -1,7 +0,0 @@
-{{if $.Site.Data.config.enableLinkPreview}}
-{{ $js := resources.Get "js/popover.js" |  resources.Fingerprint "md5" | resources.Minify }}
-<script src="{{ $js.Permalink }}"></script>
-<script>
-  initPopover({{strings.TrimRight "/" .Site.BaseURL }})
-</script>
-{{end}}