1 files changed, 130 insertions, 3 deletions
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);
+	}
+}