source ⟩ hypertext ⟩ public ⟩ garden ⟩ themer.js

function laySidenotes() {
	let supNotes = $$("sup.note");
	let bodyNotes = $$("#primary aside.note");
	let asideNotes = $$("#secondary aside.note");
	let noteBox = [];

	/* Reset stuff */
	for (el of asideNotes) {
		el.remove();
	}
	for (el of bodyNotes) {
		el.style.display = "grid";
		el.innerHTML = el.innerHTML.replace(/\<p\>\<\/p\>/g, "");
	}

	for (i = 0; i < Math.min(bodyNotes.length, supNotes.length); i++) {
		$$("sup.note")[i].setAttribute("note-index", i);
		$$("#primary aside.note")[i].setAttribute("note-index", i);
	}

	function regenerateNoteBox() {
		noteBox = [];
		for (el of $$("#secondary > *")) {
			noteBox.push({
				top: window.scrollY + el.getBoundingClientRect().top,
				bottom: window.scrollY + el.getBoundingClientRect().bottom
			});
		}
	}

	for (
		noteIndex = 0;
		noteIndex < Math.min(bodyNotes.length, supNotes.length);
		noteIndex++
	) {
		regenerateNoteBox();

		const sup =
			$(`#secondary sup.note[note-index="${noteIndex}"]`) ??
			$(`sup.note[note-index="${noteIndex}"]`);
		const bod = $(`#primary aside.note[note-index="${noteIndex}"]`);

		for (i = 0; i < noteBox.length; i++) {
			const el = noteBox[i];
			const supTop = window.scrollY + sup.getBoundingClientRect().top;
			if (supTop <= el.bottom) {
				if ($$("#secondary > *")?.[i + 1]?.matches("aside.note")) {
					$$("#secondary > *")[i + 1].insertAdjacentHTML(
						"afterend",
						bod.outerHTML
					);
				} else {
					$$("#secondary > *")[i].insertAdjacentHTML(
						"afterend",
						bod.outerHTML
					);
				}

				if (
					window
						.getComputedStyle($("#body-container"))
						.getPropertyValue("grid-template-columns")
						.includes(" ")
				) {
					bod.style.display = "none";
				}
				break;
			} else if (i + 1 == noteBox.length) {
				$("#secondary").insertAdjacentHTML("beforeend", bod.outerHTML);
				if (
					window
						.getComputedStyle($("#body-container"))
						.getPropertyValue("grid-template-columns")
						.includes(" ")
				) {
					bod.style.display = "none";
				}
				$("#secondary > *:last-child").style.marginTop =
					(supTop - el.bottom).toString() + "px";
			}
		}
	}

	console.log("Finished laying sidenotes");
}

function changeTheme(themeName) {
	// Change the theme of the HTML document
	$("html").className = themeName;
	// Change the buttons so the selected theme is marked as enabled
	$("button.theme.enabled").classList.remove("enabled");
	$(`#button-${themeName}`).classList.add("enabled");

	localStorage.setItem("theme", themeName);
}

function changeSidenotes(noteStyle) {
	localStorage.setItem("notestyle", noteStyle);
	$("html").setAttribute("notestyle", noteStyle);

	$("button.notestyle.enabled").classList.remove("enabled");
	$(`#button-${noteStyle}`).classList.add("enabled");

	const sidenoteNumbers = {
		alphabetic: [
			"a",
			"b",
			"c",
			"d",
			"e",
			"f",
			"g",
			"h",
			"i",
			"j",
			"k",
			"l",
			"m",
			"n",
			"o",
			"p",
			"q",
			"r",
			"s",
			"t",
			"u",
			"v",
			"w",
			"x",
			"y",
			"z"
		],
		footnotes: [
			"*",
			"†",
			"⁑",
			"‡",
			"⁂",
			"§",
			"¶",
			"※",
			"♯",
			"Δ",
			"◊",
			"↓\uFE0E",
			"☞\uFE0E"
		],
		hellenic: [
			"α",
			"β",
			"γ",
			"δ",
			"ε",
			"ϛ",
			"ζ",
			"η",
			"θ",
			"ι",
			"ια",
			"ιβ",
			"ιγ",
			"ιδ",
			"ιε",
			"ιϛ",
			"ιζ",
			"ιη",
			"ιθ",
			"κ",
			"κα",
			"κβ",
			"κγ",
			"κδ",
			"κε",
			"κϛ",
			"κζ",
			"κη",
			"κθ",
			"λ",
			"λα",
			"λβ",
			"λγ",
			"λδ",
			"λε",
			"λϛ",
			"λζ",
			"λη",
			"λθ"
		],
		roman: [
			"i",
			"ii",
			"iii",
			"iv",
			"v",
			"vi",
			"vii",
			"viii",
			"ix",
			"x",
			"xi",
			"xii",
			"xiii",
			"xiv",
			"xv",
			"xvi",
			"xvii",
			"xviii",
			"xix",
			"xx",
			"xxi",
			"xxii",
			"xxiii",
			"xxiv",
			"xxv",
			"xxvi",
			"xxvii",
			"xxviii",
			"xxix",
			"xxx"
		]
	};

	let sni = 0;
	for (el of $$("sup.note")) {
		if (noteStyle == "numerals") {
			el.innerHTML = (sni + 1).toString();
		} else {
			el.innerHTML = sidenoteNumbers[noteStyle][sni];
		}
		sni++;
	}

	let snj = 0;
	for (el of $$("#primary .note-number")) {
		if (noteStyle == "numerals") {
			el.innerHTML = (snj + 1).toString();
		} else {
			el.innerHTML =
				sidenoteNumbers[noteStyle][
					snj % sidenoteNumbers[noteStyle].length
				];
		}
		snj++;
	}

	laySidenotes();
}

// Switch themes if someone's set a preference

document.on("DOMContentLoaded", function () {
	if (localStorage.theme) {
		changeTheme(localStorage.theme);
	}
	if (localStorage.notestyle) {
		changeSidenotes(localStorage.notestyle);
	} else {
		changeSidenotes("hellenic");
	}

	for (const button of $$("button.theme")) {
		button.on("click", () => changeTheme(button.id.replace("button-", "")));
	}

	for (const button of $$("button.notestyle")) {
		button.on("click", () =>
			changeSidenotes(button.id.replace("button-", ""))
		);
	}

	for (const media of [...$$("iframe, img, video, audio")]) {
		media.on("load", laySidenotes);
	}
});