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