feat: re-highlighting with debounced MutationObserver

This commit is contained in:
ae 2024-09-07 17:01:13 +03:00
parent 43abe66003
commit 230c20f649
Signed by: ae
GPG Key ID: 995EFD5C1B532B3E

View File

@ -22,33 +22,71 @@ const highlightCodes = {
}
const findSportsItems = () => {
let rawItems = []
let sportsItems = []
channelTags.forEach((tag) => {
const query = `${tag} .op`
const channelItems = document.querySelectorAll(query)
rawItems.push(...channelItems)
})
let sportsItems = []
rawItems.forEach((item) => {
channelItems.forEach((item) => {
const afterStyle = window.getComputedStyle(item, "::after")
if (afterStyle.content !== "none" && afterStyle.content !== '""') {
sportsItems.push(item)
}
})
})
return sportsItems
}
window.addEventListener("load", () => {
const applyHighlight = () => {
const sportsItems = findSportsItems()
sportsItems.forEach((item) => {
if (item.parentElement.style.backgroundColor !== highlightCodes["sport"]) {
item.parentElement.style.backgroundColor = highlightCodes["sport"]
}
})
console.log("ip-highlight.js: All sports events highlighted successfully!")
})
}
const createUpdateObserver = () => {
let debounceTimer
const callback = (mutationsList, _observer) => {
clearTimeout(debounceTimer)
debounceTimer = setTimeout(() => {
for (let mutation of mutationsList) {
if (mutation.type === "childList") {
console.log(
"ip-highlight.js: Re-applying highlighting due to changes in the catalog"
)
applyHighlight()
break
}
}
}, 100) // Debounce for 100ms
}
return new MutationObserver(callback)
}
const initializeHighlighter = () => {
const targetNode = document.getElementById("programtable")
if (targetNode) {
applyHighlight()
const observer = createUpdateObserver()
observer.observe(targetNode, { childList: true, subtree: true })
} else {
console.log("ip-highlight.js: Program table not found, retrying in 100ms")
setTimeout(initializeHighlighter, 100)
}
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initializeHighlighter)
} else {
initializeHighlighter()
}