dumb/static/script.js

const description = document.querySelector("#description > #full");
const summary = document.querySelector("#description > #summary");

function showDescription() {
	summary.classList.toggle("hidden");
	description.classList.toggle("hidden");
}

description &&
	[description, summary].forEach(
		(item) => (item.onclick = showDescription)
	);

window.addEventListener("load", () => {
	document.querySelectorAll("#lyrics a").forEach((item) => {
		item.addEventListener("click", getAnnotation);
	});

	const linkedAnnotationId = window.location.pathname.match(
		new RegExp("/(\\d+)")
	)?.[1];
	if (linkedAnnotationId) {
		const target = document.querySelector(
			`a[href^="/${linkedAnnotationId}"][class^="ReferentFragmentdesktop__ClickTarget"] > span`
		);
		target?.click();
		target?.scrollIntoView();
	}
});

function getAnnotation(e) {
	e.preventDefault();
	//document.querySelector('.annotation')?.remove()
	const unreviewedAnnotation =
		'<p id="unreviewed-annotation">This annotation is unreviewed</p>';
	const link = e.currentTarget;
	const uri = link.getAttribute("href");
	const presentAnnotation =
		link.nextElementSibling.matches(".annotation") &&
		link.nextElementSibling;
	if (presentAnnotation) {
		presentAnnotation.remove();
		return;
	}

	xhr = new XMLHttpRequest();
	xhr.open("GET", uri + "/annotations");
	xhr.send();
	xhr.onreadystatechange = function () {
		if (this.readyState == 4 && this.status == 200) {
			const parsedReponse = JSON.parse(this.responseText);
			const annotationDiv = document.createElement("div");
			annotationDiv.innerHTML = parsedReponse.body.html;
			annotationDiv.id = uri;
			annotationDiv.className = "annotation";

			if (parsedReponse.state !== "accepted") {
				annotationDiv.insertAdjacentHTML(
					"afterbegin",
					unreviewedAnnotation
				);
			}

			if (!link.nextElementSibling.matches(".annotation")) {
				link.insertAdjacentElement(
					"afterend",
					annotationDiv
				);
			}
		}
	};
}