Rename API and generalize router API
This commit is contained in:
parent
8bfd982d4c
commit
b218ce4c56
@ -1,25 +1,12 @@
|
|||||||
import { router, navigate } from "https://unpkg.com/million@1.8.9-0/dist/router.mjs"
|
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
|
// SPA navigation for access later
|
||||||
window.navigate = navigate
|
window.navigate = navigate
|
||||||
// We only mutate document.title and content within .singlePage element
|
// We only mutate document.title and content within .singlePage element
|
||||||
router(".singlePage")
|
router(".singlePage")
|
||||||
// We need on initial load, then subsequent redirs
|
// 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
|
// requestAnimationFrame() delays graph draw until SPA routing is finished
|
||||||
const draw = () => {
|
window.addEventListener("million:navigate", () => requestAnimationFrame(draw))
|
||||||
const container = document.getElementById("graph-container")
|
window.addEventListener("DOMContentLoaded", () => requestAnimationFrame(draw))
|
||||||
// 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)
|
|
||||||
}
|
}
|
||||||
|
@ -66,9 +66,15 @@
|
|||||||
{{ $router := resources.Get "js/router.js" | resources.Fingerprint "md5" |
|
{{ $router := resources.Get "js/router.js" | resources.Fingerprint "md5" |
|
||||||
resources.Minify }}
|
resources.Minify }}
|
||||||
<script type="module">
|
<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.
|
// 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(
|
drawGraph(
|
||||||
{{strings.TrimRight "/" .Page.Permalink}},
|
{{strings.TrimRight "/" .Page.Permalink}},
|
||||||
{{strings.TrimRight "/" .Site.BaseURL}},
|
{{strings.TrimRight "/" .Site.BaseURL}},
|
||||||
@ -82,7 +88,8 @@
|
|||||||
{{if $.Site.Data.config.enableLinkPreview}}
|
{{if $.Site.Data.config.enableLinkPreview}}
|
||||||
initPopover({{strings.TrimRight "/" .Site.BaseURL }})
|
initPopover({{strings.TrimRight "/" .Site.BaseURL }})
|
||||||
{{end}}
|
{{end}}
|
||||||
});
|
};
|
||||||
|
attachSPARouting(draw);
|
||||||
</script>
|
</script>
|
||||||
{{else}}
|
{{else}}
|
||||||
<script>window.navigate = (url) => window.location.href = url</script>
|
<script>window.navigate = (url) => window.location.href = url</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user