summaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/getTheme.ts13
-rw-r--r--js/init.ts13
-rw-r--r--js/initImages.ts29
-rw-r--r--js/loadPage.ts32
-rw-r--r--js/navigation.ts18
-rw-r--r--js/page.ts116
-rw-r--r--js/setNavBarState.ts14
-rw-r--r--js/setTheme.ts24
-rw-r--r--js/theme.ts51
-rw-r--r--js/toggleNavBar.ts15
-rw-r--r--js/toggleTheme.ts14
11 files changed, 198 insertions, 141 deletions
diff --git a/js/getTheme.ts b/js/getTheme.ts
deleted file mode 100644
index 769ea3c..0000000
--- a/js/getTheme.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/// <reference path="setTheme.ts" />
-
-function getTheme(): Theme {
- let theme = Theme.Dark;
-
- try {
- theme = JSON.parse(localStorage.getItem("theme")!);
- } catch (e: any) {
- console.log("invalid theme, using dark");
- }
-
- return theme;
-}
diff --git a/js/init.ts b/js/init.ts
new file mode 100644
index 0000000..c306191
--- /dev/null
+++ b/js/init.ts
@@ -0,0 +1,13 @@
+/// <reference path="navigation.ts" />
+/// <reference path="page.ts" />
+/// <reference path="theme.ts" />
+
+function init() {
+ window.addEventListener("popstate", (_e) => {
+ location.reload();
+ });
+
+ loadTheme();
+
+ initImages();
+}
diff --git a/js/initImages.ts b/js/initImages.ts
deleted file mode 100644
index 3e6a175..0000000
--- a/js/initImages.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-function initImages() {
- let page = document.getElementById("page")!;
-
- let image_list = Array.from(page.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 = "/image/source/" + file + ".webp";
- let thumbnail_url = "/image/thumbnail/" + file + ".avif";
-
- let blur_element = document.createElement("img");
- blur_element.setAttribute("class", "blur");
- blur_element.setAttribute("src", thumbnail_url);
-
- image.appendChild(blur_element);
-
- let image_element = document.createElement("img");
- image_element.setAttribute("src", thumbnail_url);
-
- let hyperlink_element = document.createElement("a");
- hyperlink_element.setAttribute("href", source_url);
- hyperlink_element.setAttribute("rel", "noopener noreferrer");
- hyperlink_element.setAttribute("target", "_blank");
- hyperlink_element.appendChild(image_element);
-
- image.appendChild(hyperlink_element);
- }
-}
diff --git a/js/loadPage.ts b/js/loadPage.ts
deleted file mode 100644
index ebf1f62..0000000
--- a/js/loadPage.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/// <reference path="initImages.ts" />
-
-async function loadPage(name: string) {
- console.log("loading page `" + name + "`")
-
- let url = `/html/${name}.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 page = document.getElementById("page")!;
-
- let new_title = dom.getElementById("title")!;
- let new_page = dom.getElementById("page")!;
-
- title.replaceWith(new_title);
- body.setAttribute("data-page", name);
- page.replaceWith(new_page);
-
- initImages();
-}
diff --git a/js/navigation.ts b/js/navigation.ts
new file mode 100644
index 0000000..1e9ec81
--- /dev/null
+++ b/js/navigation.ts
@@ -0,0 +1,18 @@
+function toggleSideMenu() {
+ let navBar = document.getElementById("navBar");
+ let sideMenu = document.getElementById("sideMenu");
+
+ if (!navBar) {
+ throw new Error("unable to find navigation bar");
+ }
+
+ if (!sideMenu) {
+ throw new Error("unable to find side menu");
+ }
+
+ sideMenu.classList.toggle("visible");
+
+ for (let link of navBar.getElementsByTagName("a")) {
+ link.classList.toggle("hidden");
+ }
+}
diff --git a/js/page.ts b/js/page.ts
new file mode 100644
index 0000000..5a98d13
--- /dev/null
+++ b/js/page.ts
@@ -0,0 +1,116 @@
+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);
+ }
+}
diff --git a/js/setNavBarState.ts b/js/setNavBarState.ts
deleted file mode 100644
index cfcc509..0000000
--- a/js/setNavBarState.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index 25debba..0000000
--- a/js/setTheme.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-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[theme]);
-
- localStorage.setItem("theme", JSON.stringify(theme));
-}
diff --git a/js/theme.ts b/js/theme.ts
new file mode 100644
index 0000000..36959bc
--- /dev/null
+++ b/js/theme.ts
@@ -0,0 +1,51 @@
+const DEFAULT_THEME = "dark";
+
+function toggleTheme() {
+ let bodies = document.getElementsByTagName("body");
+
+ if (!bodies) {
+ throw new Error("unable to find body");
+ }
+
+ let theme = "light";
+
+ if (bodies[0x0].classList.contains("light")) {
+ theme = "dark";
+ }
+
+ console.log("setting theme to `" + theme + "`");
+
+ bodies[0x0].classList.toggle("light");
+ localStorage.setItem("theme", theme);
+}
+
+function loadTheme() {
+ let theme = localStorage.getItem("theme");
+
+ if (!theme) {
+ console.log("theme not set, using default");
+ theme = DEFAULT_THEME;
+ }
+
+ switch (theme) {
+ case "dark":
+ // We assume this theme in our stylesheets.
+ break;
+
+ case "light":
+ let bodies = document.getElementsByTagName("body");
+
+ if (!bodies) {
+ throw new Error("unable to find body");
+ }
+
+ bodies[0x0].classList.add("light");
+ break;
+
+ default:
+ console.log(`invalid theme \"${theme}\", using default`);
+ //theme = DEFAULT_THEME; // Redundant now.
+
+ break;
+ }
+}
diff --git a/js/toggleNavBar.ts b/js/toggleNavBar.ts
deleted file mode 100644
index 329a223..0000000
--- a/js/toggleNavBar.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/// <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
deleted file mode 100644
index b5514d2..0000000
--- a/js/toggleTheme.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/// <reference path="getTheme.ts" />
-/// <reference path="setTheme.ts" />
-
-function toggleTheme() {
- let theme = getTheme();
-
- if (theme == Theme.Light) {
- theme = Theme.Dark;
- } else if (Theme.Dark) {
- theme = Theme.Light;
- }
-
- setTheme(theme);
-}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 21:26:28 +0100