commit 243217334ac7d91ed7a52ea28441d566ecd90be9 Author: Patrick Elmer Date: Tue Feb 1 18:34:44 2022 +0900 Basic router functionality diff --git a/index.html b/index.html new file mode 100644 index 0000000..9f0c04e --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + + + + + Router + + + + \ No newline at end of file diff --git a/pages/index.html b/pages/index.html new file mode 100644 index 0000000..a9ca1f0 --- /dev/null +++ b/pages/index.html @@ -0,0 +1 @@ +

Index

\ No newline at end of file diff --git a/router.js b/router.js new file mode 100644 index 0000000..045840f --- /dev/null +++ b/router.js @@ -0,0 +1,152 @@ +const router = document.querySelector("#router") +const path = typeof router.getAttribute('dir') === 'string' ? router.getAttribute('dir') : 'pages' + +const page_404 = ` +

404

Page not found

+ ` + +window.addEventListener("DOMContentLoaded", onRouteChange) +window.addEventListener("hashchange", onRouteChange) + +async function checkPath(link) { + let response = await fetch(link) + return !(response.status === 404) +} + +function getPathname() { + let pathname = window.location.pathname + if (pathname.endsWith("index.html")) { + pathname = pathname.substring(0, pathname.length - 10) + } + return pathname +} + +function onRouteChange() { + let hashLocation + if (window.location.hash.substring(1, 2) == "/") { + hashLocation = window.location.hash.substring(2) + } else { + hashLocation = window.location.hash.substring(1) + } + if (!hashLocation) { + hashLocation = "index" + } + loadContent(hashLocation) +} + +async function loadContent(uri) { + if (!(await fetchData(`${path}/${uri}.html`))) { + updatePage(page_404) + } +} + +async function fetchData(link) { + let response = await fetch(link) + if (!response.ok) { return false } + + let content = await response.text() + + // Get ", styleStart + 8) + styleText = content.substring(styleStart + 8, styleEnd) + content = content.replace("", "") + } + + // Get ", scriptStart + 9) + scriptText = content.substring(scriptStart + 9, scriptEnd) + content = content.replace("", "") + } + + // Get all linked stylesheets + const links = content.match(/]+>/g) || "" + if (links) { + links.forEach((link) => { + let href = link.match(/href=".*"/g) + if (href.length === 0) { + return + } + href = href[0] + if (href.length === 7) { + return + } + const newLink = document.createElement("link") + newLink.href = href.substring(6, href.length - 1) + newLink.rel = "stylesheet" + router.appendChild(newLink) + content.replace(link, "") + }) + } + + // Get all script tags with src attribute + const scripts = content.match(/]+>[^>]*>/g) || "" + if (scripts) { + scripts.forEach((script) => { + const src = script.match(/src=".*"/g)[0] + if (src.length === 6) { + return + } + const newScript = document.createElement("script") + newScript.src = src.substring(5, src.length - 1) + router.appendChild(newScript) + content.replace(script, "") + }) + } + + updatePage(content, styleText, scriptText) + return true +} + +function updatePage(content, styleText='', scriptText='') { + removeStyle() + removeScript() + router.innerHTML = "" + router.insertAdjacentHTML("afterbegin", content) + if (styleText.length != 0) { injectStyle(styleText) } + if (scriptText.length != 0) { injectScript(scriptText) } +} + +// Dynamically inject