diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/init.ts | 1 | ||||
| -rw-r--r-- | js/navigation.ts | 133 | ||||
| -rw-r--r-- | js/page.ts | 116 |
3 files changed, 130 insertions, 120 deletions
@@ -1,5 +1,4 @@ /// <reference path="navigation.ts" /> -/// <reference path="page.ts" /> /// <reference path="theme.ts" /> function init() { diff --git a/js/navigation.ts b/js/navigation.ts index 1e9ec81..4a83be6 100644 --- a/js/navigation.ts +++ b/js/navigation.ts @@ -1,18 +1,145 @@ +async function loadPage(page_name: string, anchor?: string) { + console.log(`loading page \`${page_name}\``); + + let url = `/html/${page_name}.html`; + console.log(`note: page is at "${url}"`); + + window.history.pushState(page_name, "", url); + + let response = await fetch(url); + + if (!response.ok) { + throw new Error(`unable to load page: \"${response.status}\"`); + } + + let markup = await response.text(); + + let parser = new DOMParser(); + let dom = parser.parseFromString(markup, "text/html"); + + let titles = document.getElementsByTagName("title"); + let bodies = document.getElementsByTagName("body"); + let page = document.getElementById("page")!; + + if (titles.length < 0x1) { + throw new Error("unable to find title"); + } + + if (bodies.length < 0x1) { + throw new Error("unable to find body"); + } + + if (!page) { + throw new Error("unable to find page element"); + } + + let newTitles = dom.getElementsByTagName("title"); + let newPage = dom.getElementById("page"); + + if (newTitles.length < 0x1) { + throw new Error("unable to find new title"); + } + + if (!newPage) { + throw new Error("unable to find new page element"); + } + + titles[0x0].replaceWith(newTitles[0x0]); + bodies[0x0].setAttribute("data-page", page_name); + page.replaceWith(newPage); + + initImages(); + + if (anchor) { + console.log(`going to anchor \`${anchor}\``); + + anchor = `anchor.${anchor}`; + + console.log(`note: anchor has id "${anchor}"`); + + let anchor_element = document.getElementById(anchor); + + if (!anchor_element) { + throw new Error(`unable to find anchor "${anchor}"`); + } + + anchor_element.scrollIntoView({ + behavior: "smooth", + }); + } +} + function toggleSideMenu() { - let navBar = document.getElementById("navBar"); + scrollToTop(); + let sideMenu = document.getElementById("sideMenu"); + let navBar = document.getElementById("navBar"); + let glyph = document.getElementById("glyph"); + + if (!sideMenu) { + throw new Error("unable to find sideMenu"); + } if (!navBar) { throw new Error("unable to find navigation bar"); } - if (!sideMenu) { - throw new Error("unable to find side menu"); + if (!glyph) { + throw new Error("unable to find glyph"); } sideMenu.classList.toggle("visible"); + glyph.classList.toggle("hidden"); for (let link of navBar.getElementsByTagName("a")) { link.classList.toggle("hidden"); } } + +async function scrollToTop() { + window.scroll({ + top: 0, + left: 0, + behavior: "smooth", + }); +} + +function initImages() { + let page = document.getElementById("page"); + + if (!page) { + throw new Error("unable to find page"); + } + + let imageList = Array.from(page.getElementsByTagName("x-image")); + + for (let image of imageList) { + let file = image.getAttribute("data-file"); + + if (!file) { + throw new Error("file not set for image element") + } + + console.log("initialising image that links to \"" + file + "\""); + + let sourceUrl = "/image/source/" + file + ".webp"; + let thumbnailUrl = "/image/thumbnail/" + file + ".avif"; + + let blurElement = document.createElement("img"); + blurElement.setAttribute("class", "blur"); + blurElement.setAttribute("src", thumbnailUrl); + + let hyperlinkElement = document.createElement("a"); + hyperlinkElement.setAttribute("href", sourceUrl); + hyperlinkElement.setAttribute("rel", "noopener noreferrer"); + hyperlinkElement.setAttribute("target", "_blank"); + + let image_element = document.createElement("img"); + image_element.setAttribute("src", thumbnailUrl); + + hyperlinkElement.appendChild(image_element); + + image.appendChild(blurElement); + image.appendChild(hyperlinkElement); + } +} diff --git a/js/page.ts b/js/page.ts deleted file mode 100644 index 5a98d13..0000000 --- a/js/page.ts +++ /dev/null @@ -1,116 +0,0 @@ -async function loadPage(page_name: string, anchor?: string) { - window.scroll({ - top: 0, - left: 0, - behavior: "smooth", - }); - - console.log(`loading page \`${page_name}\``); - - let url = `/html/${page_name}.html`; - console.log(`note: page is at "${url}"`); - - window.history.pushState(page_name, "", url); - - let response = await fetch(url); - - if (!response.ok) { - throw new Error(`unable to load page: \"${response.status}\"`); - } - - let markup = await response.text(); - - let parser = new DOMParser(); - let dom = parser.parseFromString(markup, "text/html"); - - let titles = document.getElementsByTagName("title"); - let bodies = document.getElementsByTagName("body"); - let page = document.getElementById("page")!; - - if (titles.length < 0x1) { - throw new Error("unable to find title"); - } - - if (bodies.length < 0x1) { - throw new Error("unable to find body"); - } - - if (!page) { - throw new Error("unable to find page element"); - } - - let newTitles = dom.getElementsByTagName("title"); - let newPage = dom.getElementById("page"); - - if (newTitles.length < 0x1) { - throw new Error("unable to find new title"); - } - - if (!newPage) { - throw new Error("unable to find new page element"); - } - - titles[0x0].replaceWith(newTitles[0x0]); - bodies[0x0].setAttribute("data-page", page_name); - page.replaceWith(newPage); - - initImages(); - - if (anchor) { - console.log(`going to anchor \`${anchor}\``); - - anchor = `anchor.${anchor}`; - - console.log(`note: anchor has id "${anchor}"`); - - let anchor_element = document.getElementById(anchor); - - if (!anchor_element) { - throw new Error(`unable to find anchor "${anchor}"`); - } - - anchor_element.scrollIntoView({ - behavior: "smooth", - }); - } -} - -function initImages() { - let page = document.getElementById("page"); - - if (!page) { - throw new Error("unable to find page"); - } - - let imageList = Array.from(page.getElementsByTagName("x-image")); - - for (let image of imageList) { - let file = image.getAttribute("data-file"); - - if (!file) { - throw new Error("file not set for image element") - } - - console.log("initialising image that links to \"" + file + "\""); - - let sourceUrl = "/image/source/" + file + ".webp"; - let thumbnailUrl = "/image/thumbnail/" + file + ".avif"; - - let blurElement = document.createElement("img"); - blurElement.setAttribute("class", "blur"); - blurElement.setAttribute("src", thumbnailUrl); - - let hyperlinkElement = document.createElement("a"); - hyperlinkElement.setAttribute("href", sourceUrl); - hyperlinkElement.setAttribute("rel", "noopener noreferrer"); - hyperlinkElement.setAttribute("target", "_blank"); - - let image_element = document.createElement("img"); - image_element.setAttribute("src", thumbnailUrl); - - hyperlinkElement.appendChild(image_element); - - image.appendChild(blurElement); - image.appendChild(hyperlinkElement); - } -} |