dumb/static/script.js
Solomon Victorino f6487d86fd fix: don't error when clicks dispatch on annotation link child
reproducible by clicking on lyrics in <i> or <b> tags
2024-06-23 18:20:23 -06:00

84 lines
2.5 KiB
JavaScript

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", () => {
const geniusURL = "https://genius.com" + document.location.pathname + document.location.search
document.getElementById("goto-genius").setAttribute("href", geniusURL)
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 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.html
annotationDiv.id = uri
annotationDiv.className = "annotation"
if (!link.nextElementSibling.matches(".annotation")) {
link.insertAdjacentElement('afterend', annotationDiv)
}
}
}
}
window._currentTheme = localStorage.getItem("_theme") || "light"
setTheme(window._currentTheme)
const themeChooser = document.getElementById("choose-theme")
themeChooser.addEventListener("click", function() {
if (window._currentTheme === "dark") {
setTheme("light")
} else {
setTheme("dark")
}
})
function setTheme(theme) {
const toggler = document.getElementById("ic_fluent_dark_theme_24_regular")
switch (theme) {
case "dark":
toggler.setAttribute("fill", "#fff")
localStorage.setItem("_theme", "dark")
document.body.classList.add("dark")
window._currentTheme = "dark"
return
case "light":
toggler.setAttribute("fill", "#181d31")
localStorage.setItem("_theme", "light")
document.body.classList.remove("dark")
window._currentTheme = "light"
return
}
}