feat: re-highlighting with debounced MutationObserver

.eslintrc.json

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

iltapulu.fi/ip-highlight.js

@@ -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()
+}