diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/initImages.ts | 9 | ||||
| -rw-r--r-- | js/loadPage.ts | 32 | ||||
| -rw-r--r-- | js/setNavBarState.ts | 14 | ||||
| -rw-r--r-- | js/setTheme.ts | 24 | ||||
| -rw-r--r-- | js/toggleNavBar.ts | 15 | ||||
| -rw-r--r-- | js/toggleTheme.ts | 15 |
6 files changed, 88 insertions, 21 deletions
diff --git a/js/initImages.ts b/js/initImages.ts index db81c2c..7bff4b5 100644 --- a/js/initImages.ts +++ b/js/initImages.ts @@ -1,14 +1,13 @@ function initImages() { let content = document.getElementById("content")!; - let image_count = 0x0; let image_list = Array.from(content.getElementsByTagName("x-image")); for (let image of image_list) { let file = image.getAttribute("data-file")!; console.log("initialising image that links to \"" + file + "\""); - let source_url = "/webp/source/" + file + ".webp"; - let thumbnail_url = "/webp/thumbnail/" + file + ".webp"; + let source_url = "/image/source/" + file + ".webp"; + let thumbnail_url = "/image/thumbnail/" + file + ".avif"; let blur_element = document.createElement("img"); blur_element.setAttribute("class", "blur"); @@ -26,9 +25,5 @@ function initImages() { hyperlink_element.appendChild(image_element); image.appendChild(hyperlink_element); - - ++image_count; } - - console.log("initialised (" + image_count + ") image(s)"); } diff --git a/js/loadPage.ts b/js/loadPage.ts new file mode 100644 index 0000000..72bb124 --- /dev/null +++ b/js/loadPage.ts @@ -0,0 +1,32 @@ +/// <reference path="initImages.ts" /> + +async function loadPage(page: string) { + console.log("loading page `" + page + "`") + + let url = `/html/${page}.html`; + window.history.pushState("", "", 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 title = document.getElementById("title")!; + let body = document.getElementById("body")!; + let content = document.getElementById("content")!; + + let new_title = dom.getElementById("title")!; + let new_content = dom.getElementById("content")!; + + title.replaceWith(new_title); + body.setAttribute("data-page", page); + content.replaceWith(new_content); + + initImages(); +} diff --git a/js/setNavBarState.ts b/js/setNavBarState.ts new file mode 100644 index 0000000..04058f7 --- /dev/null +++ b/js/setNavBarState.ts @@ -0,0 +1,14 @@ +enum NavBarState { + Visible, + Hidden, +} + +function setNavBarState(state: NavBarState) { + console.log("setting navigation bar to `" + NavBarState[state] + "`"); + + let nav_bar = document.getElementById("navBar")!; + let hamburger = document.getElementById("hamburger")! + + nav_bar.setAttribute("data-state", NavBarState[state]); + hamburger.setAttribute("data-navBarState", NavBarState[state]); +} diff --git a/js/setTheme.ts b/js/setTheme.ts index d9a6cf8..25debba 100644 --- a/js/setTheme.ts +++ b/js/setTheme.ts @@ -1,8 +1,24 @@ -function setTheme(theme: string) { - console.log("setting theme to `" + theme + "`"); +enum Theme { + Light, + Dark, +} + +function setTheme(theme: Theme) { + let is_valid_theme = + theme == Theme.Light + || theme == Theme.Dark; + + if (!is_valid_theme) { + console.log("invalid theme \"" + theme + "\""); + + // Use default: + theme = Theme.Dark; + } + + console.log("setting theme to `" + Theme[theme] + "`"); let body = document.getElementById("body")!; - body.setAttribute("data-theme", theme); + body.setAttribute("data-theme", Theme[theme]); - localStorage.setItem("theme", theme); + localStorage.setItem("theme", JSON.stringify(theme)); } diff --git a/js/toggleNavBar.ts b/js/toggleNavBar.ts new file mode 100644 index 0000000..329a223 --- /dev/null +++ b/js/toggleNavBar.ts @@ -0,0 +1,15 @@ +/// <reference path="setNavBarState.ts" /> + +function toggleNavBar() { + let nav_bar = document.getElementById("navBar")!; + + let state = NavBarState[nav_bar?.getAttribute("data-state")!]; + + if (state == NavBarState.Visible) { + state = NavBarState.Hidden; + } else if (state == NavBarState.Hidden) { + state = NavBarState.Visible; + }; + + setNavBarState(state); +} diff --git a/js/toggleTheme.ts b/js/toggleTheme.ts index fd15dae..733a0f3 100644 --- a/js/toggleTheme.ts +++ b/js/toggleTheme.ts @@ -1,17 +1,12 @@ /// <reference path="setTheme.ts" /> function toggleTheme() { - let theme = localStorage.getItem("theme"); + let theme: Theme = JSON.parse(localStorage.getItem("theme")!); - if (theme == "light") { - theme = "dark"; - } else if (theme == "dark") { - theme = "light"; - } else { - console.log!("invalid theme `" + theme + "`"); - - // Use default: - theme = "dark"; + if (theme == Theme.Light) { + theme = Theme.Dark; + } else if (Theme.Dark) { + theme = Theme.Light; } setTheme(theme); |