Compare commits

..

2 Commits

Author SHA1 Message Date
ae
230c20f649
feat: re-highlighting with debounced MutationObserver 2024-09-07 17:01:13 +03:00
ae
43abe66003
feat: consistent linter & formatter config 2024-09-07 16:58:19 +03:00
2 changed files with 58 additions and 19 deletions

View File

@ -9,7 +9,8 @@
"rules": { "rules": {
"quotes": ["warn", "double"], "quotes": ["warn", "double"],
"semi": ["warn", "never"], "semi": ["warn", "never"],
"indent": ["warn", 4], "indent": ["warn", 2],
"prettier/prettier": 0 "prettier/prettier": 0,
"no-unused-vars": ["warn", { "argsIgnorePAttern": "^_" }]
} }
} }

View File

@ -22,33 +22,71 @@ const highlightCodes = {
} }
const findSportsItems = () => { const findSportsItems = () => {
let rawItems = [] let sportsItems = []
channelTags.forEach((tag) => { channelTags.forEach((tag) => {
const query = `${tag} .op` const query = `${tag} .op`
const channelItems = document.querySelectorAll(query) const channelItems = document.querySelectorAll(query)
rawItems.push(...channelItems)
})
let sportsItems = [] channelItems.forEach((item) => {
rawItems.forEach((item) => {
const afterStyle = window.getComputedStyle(item, "::after") const afterStyle = window.getComputedStyle(item, "::after")
if (afterStyle.content !== "none" && afterStyle.content !== '""') { if (afterStyle.content !== "none" && afterStyle.content !== '""') {
sportsItems.push(item) sportsItems.push(item)
} }
}) })
})
return sportsItems return sportsItems
} }
window.addEventListener("load", () => { const applyHighlight = () => {
const sportsItems = findSportsItems() const sportsItems = findSportsItems()
sportsItems.forEach((item) => { sportsItems.forEach((item) => {
if (item.parentElement.style.backgroundColor !== highlightCodes["sport"]) {
item.parentElement.style.backgroundColor = highlightCodes["sport"] item.parentElement.style.backgroundColor = highlightCodes["sport"]
}
}) })
console.log("ip-highlight.js: All sports events highlighted successfully!") 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()
}