diff --git a/assets/js/router.js b/assets/js/router.js index bf7e3c8..81c25ac 100644 --- a/assets/js/router.js +++ b/assets/js/router.js @@ -1,25 +1,12 @@ import { router, navigate } from "https://unpkg.com/million@1.8.9-0/dist/router.mjs" -export const init = (loader) => { +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 - 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) + window.addEventListener("million:navigate", () => requestAnimationFrame(draw)) + window.addEventListener("DOMContentLoaded", () => requestAnimationFrame(draw)) } diff --git a/layouts/partials/head.html b/layouts/partials/head.html index a81c9ed..58ab82e 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -66,9 +66,15 @@ {{ $router := resources.Get "js/router.js" | resources.Fingerprint "md5" | resources.Minify }} <script type="module"> - import { init } from '{{$router.Permalink}}'; + import { attachSPARouting } from '{{$router.Permalink}}'; // 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. - init(() => { + 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 = "" + drawGraph( {{strings.TrimRight "/" .Page.Permalink}}, {{strings.TrimRight "/" .Site.BaseURL}}, @@ -82,7 +88,8 @@ {{if $.Site.Data.config.enableLinkPreview}} initPopover({{strings.TrimRight "/" .Site.BaseURL }}) {{end}} - }); + }; + attachSPARouting(draw); </script> {{else}} <script>window.navigate = (url) => window.location.href = url</script>