From 77485b754dbb3d08e437b4157f3eafb5871624b9 Mon Sep 17 00:00:00 2001 From: Aiden Bai Date: Tue, 3 May 2022 08:47:42 -0700 Subject: [PATCH] Fix popover --- assets/js/popover.js | 40 +++++++++++++-------------- assets/js/router.js | 25 +++++++++++++++++ layouts/_default/section.html | 1 - layouts/_default/single.html | 3 +-- layouts/_default/taxonomy.html | 1 - layouts/_default/term.html | 1 - layouts/index.html | 4 +-- layouts/partials/head.html | 49 +++++++++++++++------------------- layouts/partials/popover.html | 7 ----- 9 files changed, 67 insertions(+), 64 deletions(-) create mode 100644 assets/js/router.js delete mode 100644 layouts/partials/popover.html diff --git a/assets/js/popover.js b/assets/js/popover.js index ee0477ef..460c245f 100644 --- a/assets/js/popover.js +++ b/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 }) => { - const links = [...document.getElementsByClassName("internal-link")] - links - .filter(li => li.dataset.src) - .forEach(li => { - const linkDest = content[li.dataset.src.replace(/\/$/g, "").replace(basePath, "")] - if (linkDest) { - const popoverElement = `
+ fetchData.then(({ content }) => { + const links = [...document.getElementsByClassName("internal-link")] + links + .filter((li) => li.dataset.src) + .forEach((li) => { + const linkDest = content[li.dataset.src.replace(/\/$/g, "").replace(basePath, "")] + if (linkDest) { + const popoverElement = `

${linkDest.title}

${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...

${new Date(linkDest.lastmodified).toLocaleDateString()}

` - const el = htmlToElement(popoverElement) - li.appendChild(el) - li.addEventListener("mouseover", () => { - el.classList.add("visible") - }) - li.addEventListener("mouseout", () => { - el.classList.remove("visible") - }) - } - }) - }) + const el = htmlToElement(popoverElement) + li.appendChild(el) + li.addEventListener("mouseover", () => { + el.classList.add("visible") + }) + li.addEventListener("mouseout", () => { + el.classList.remove("visible") + }) + } + }) }) } diff --git a/assets/js/router.js b/assets/js/router.js new file mode 100644 index 00000000..5c874eee --- /dev/null +++ b/assets/js/router.js @@ -0,0 +1,25 @@ +import { router, navigate } from "https://unpkg.com/million/dist/router.mjs" + +export const init = (loader) => { + // 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 + window.addEventListener("million:navigate", () => callback(loader)) + window.addEventListener("DOMContentLoaded", () => callback(loader)) +} + +export const callback = (loader) => { + // requestAnimationFrame() delays graph draw until SPA routing is finished + const draw = () => { + 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 = "" + + loader() + } + requestAnimationFrame(draw) +} diff --git a/layouts/_default/section.html b/layouts/_default/section.html index 1a4aae05..abdf0b05 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -19,7 +19,6 @@ {{partial "contact.html" .}}
-{{partial "popover.html" .}} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 88a859c3..91eda290 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -22,11 +22,10 @@
  • {{ .LinkTitle | humanize }}
    • {{ end }} - {{partial "toc.html" .}} + {{partial "toc.html" .}} {{partial "textprocessing.html" . }} {{partial "footer.html" .}} - {{partial "popover.html" .}} diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html index b7a45b10..e0a1e876 100644 --- a/layouts/_default/taxonomy.html +++ b/layouts/_default/taxonomy.html @@ -28,7 +28,6 @@ {{partial "contact.html" .}} -{{partial "popover.html" .}} diff --git a/layouts/_default/term.html b/layouts/_default/term.html index 16ea85cf..58f024bc 100644 --- a/layouts/_default/term.html +++ b/layouts/_default/term.html @@ -19,7 +19,6 @@ {{partial "contact.html" .}} -{{partial "popover.html" .}} diff --git a/layouts/index.html b/layouts/index.html index ee33d7cc..224c9978 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -13,12 +13,10 @@ {{partial "darkmode.html" .}}
    - {{partial "toc.html" .}} + {{partial "toc.html" .}} {{partial "textprocessing.html" . }}
    {{partial "footer.html" .}} - {{partial "popover.html" .}} - diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 37938a55..60ff7827 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -35,6 +35,10 @@ {{partial "katex.html" .}} + {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" | + resources.Minify }} + + {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint "md5" | resources.Minify | }} {{$contentIndex := resources.Get @@ -59,36 +63,25 @@ })) {{if $.Site.Data.config.enableSPA}} + {{ $router := resources.Get "js/router.js" | resources.Fingerprint "md5" | + resources.Minify }} {{else}} diff --git a/layouts/partials/popover.html b/layouts/partials/popover.html deleted file mode 100644 index 1d166228..00000000 --- a/layouts/partials/popover.html +++ /dev/null @@ -1,7 +0,0 @@ -{{if $.Site.Data.config.enableLinkPreview}} -{{ $js := resources.Get "js/popover.js" | resources.Fingerprint "md5" | resources.Minify }} - - -{{end}} \ No newline at end of file