falsycat/ar.falsy.cat
1
0
Fork 0
mirror of https://github.com/falsycat/ar.falsy.cat.git synced 2024-12-26 16:34:51 +00:00
Code Issues Projects Releases Wiki Activity

Rename API and generalize router API

Browse Source
This commit is contained in:
Aiden Bai 2022-05-03 10:16:09 -07:00
parent 771ebd8031
commit d38f9bec70
No known key found for this signature in database
GPG Key ID: D37584388675FF3A
2 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/js/router.js
View File

@ -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)
} }

13
layouts/partials/head.html
View File

@ -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>