use mutationobserver

https://debianforum.de/forum/viewtopic.php?t=167909&start=25#p1356205

diff --git a/hide-stuff.user.js b/hide-stuff.user.js
index bec7e9530e05a01b36c0a57fee74640d41ccca36..64106a4adf417cf9c9cac5e14de270106f06a8f6 100644 (file)
--- a/hide-stuff.user.js
+++ b/hide-stuff.user.js
@@ -4,7 +4,7 @@
 // @namespace     org.free.for.all
 // @match         https://debianforum.de/*
 // @author        Thorsten Sperber
 // @namespace     org.free.for.all
 // @match         https://debianforum.de/*
 // @author        Thorsten Sperber

-// @version       0.3.3
+// @version       0.4.0

 // @downloadURL   https://git.aero2k.de/?p=dfde/hide-stuff.git;a=blob_plain;f=hide-stuff.user.js
 // @updateURL     https://git.aero2k.de/?p=dfde/hide-stuff.git;a=blob_plain;f=hide-stuff.user.js
 // ==/UserScript==
 // @downloadURL   https://git.aero2k.de/?p=dfde/hide-stuff.git;a=blob_plain;f=hide-stuff.user.js
 // @updateURL     https://git.aero2k.de/?p=dfde/hide-stuff.git;a=blob_plain;f=hide-stuff.user.js
 // ==/UserScript==


@@ -14,219 +14,251 @@
  TODO: code cleanup a lot.
  */
 
  TODO: code cleanup a lot.
  */
 

- (function() {
+(function () {

     'use strict';
 
     'use strict';
 

-    const opacity_default = 0.2;
-    const opacity_highlight = 1.0;
+    // TODO looks fugly.
+    function node_wrap(node) {

 
 

-    function get_hidden_threads() {
-        const storage = localStorage.getItem('hidden_threads') || "[]";
-        return JSON.parse(storage);
-    }
+        const opacity_default = 0.2;
+        const opacity_highlight = 1.0;

 
 

-    function get_hidden_users() {
-        const storage = localStorage.getItem('hidden_users') || "[]";
-        return JSON.parse(storage);
-    }
+        function get_hidden_threads() {
+            const storage = localStorage.getItem('hidden_threads') || "[]";
+            return JSON.parse(storage);
+        }

 
 

-    function set_thread_visibility(visible) {
-        const hidden_threads = get_hidden_threads();
+        function get_hidden_users() {
+            const storage = localStorage.getItem('hidden_users') || "[]";
+            return JSON.parse(storage);
+        }

 
 

-        hidden_threads.forEach(function(val) {
-            const thread = document.querySelector(`ul.topiclist a[href$='t=${val}']`);
-            if (thread) {
-                thread.closest('li').style.display = visible ? "none" : "block";
-            }
-        });
-        update_info_buttons();
-    }
+        function set_thread_visibility(visible) {
+            const hidden_threads = get_hidden_threads();

 
 

-    function hide_thread(thread_id) {
-        let hidden_threads = get_hidden_threads();
-        if (hidden_threads.indexOf(thread_id) < 0) { // and hidden_threads is a list
-            if (!Array.isArray(hidden_threads)) {hidden_threads = [];}
-            hidden_threads.push(thread_id);
-            console.log("Thread %s is now ignored", thread_id);
-            localStorage.setItem("hidden_threads", JSON.stringify(hidden_threads));
-        } else {
-            console.log("Thread %s already in %s",thread_id, hidden_threads);
+            hidden_threads.forEach(function (val) {
+                const thread = node.querySelector(`ul.topiclist a[href$='t=${val}']`);
+                if (thread) {
+                    thread.closest('li').style.display = visible ? "none" : "block";
+                }
+            });
+            update_info_buttons();

         }
         }

-        hide_threads();
-    }

 
 

-    function unhide_thread(thread_id) {
-        let hidden_threads = get_hidden_threads();
-        const idx = hidden_threads.indexOf(thread_id);
-        if (idx >= 0) {
-            console.debug("unhide thread", thread_id)
-            hidden_threads.splice(idx, 1)
-            localStorage.setItem("hidden_threads", JSON.stringify(hidden_threads));
+        function hide_thread(thread_id) {
+            let hidden_threads = get_hidden_threads();
+            if (hidden_threads.indexOf(thread_id) < 0) { // and hidden_threads is a list
+                if (!Array.isArray(hidden_threads)) {
+                    hidden_threads = [];
+                }
+                hidden_threads.push(thread_id);
+                console.log("Thread %s is now ignored", thread_id);
+                localStorage.setItem("hidden_threads", JSON.stringify(hidden_threads));
+            } else {
+                console.log("Thread %s already in %s", thread_id, hidden_threads);
+            }
+            hide_threads();

         }
         }

-    }

 
 

-    function hide_user(user_id) {
-        let hidden_users = get_hidden_users();
-        if (hidden_users.indexOf(user_id) < 0) {
-            if (!Array.isArray(hidden_users)) {hidden_users = [];}
-            hidden_users.push(user_id);
-            localStorage.setItem("hidden_users", JSON.stringify(hidden_users));
-        } else {
-            console.log("User %s already in %s",user_id, hidden_users);
+        function unhide_thread(thread_id) {
+            let hidden_threads = get_hidden_threads();
+            const idx = hidden_threads.indexOf(thread_id);
+            if (idx >= 0) {
+                console.debug("unhide thread", thread_id)
+                hidden_threads.splice(idx, 1)
+                localStorage.setItem("hidden_threads", JSON.stringify(hidden_threads));
+            }

         }
         }

-        hide_users();
-    }

 
 

-    function hide_threads() {
-        set_thread_visibility(true);
-    }
+        function hide_user(user_id) {
+            let hidden_users = get_hidden_users();
+            if (hidden_users.indexOf(user_id) < 0) {
+                if (!Array.isArray(hidden_users)) {
+                    hidden_users = [];
+                }
+                hidden_users.push(user_id);
+                localStorage.setItem("hidden_users", JSON.stringify(hidden_users));
+            } else {
+                console.log("User %s already in %s", user_id, hidden_users);
+            }
+            hide_users();
+        }

 
 

-    function hide_users() {
-        const hidden_users = get_hidden_users();
+        function hide_threads() {
+            set_thread_visibility(true);
+        }

 
 

-        hidden_users.forEach(function(val) {
-            const threads = document.querySelectorAll(`ul.topiclist .responsive-hide a[href$='u=${val}']`);
-            threads.forEach(function(thread) {
-                console.debug(`hide user ${val}: thread ${thread}`);
-                thread.closest('li').style.display = "none";
+        function hide_users() {
+            const hidden_users = get_hidden_users();
+
+            hidden_users.forEach(function (val) {
+                const threads = node.querySelectorAll(`ul.topiclist .responsive-hide a[href$='u=${val}']`);
+                threads.forEach(function (thread) {
+                    console.debug(`hide user ${val}: thread ${thread}`);
+                    thread.closest('li').style.display = "none";
+                });

             });
             });

-        });
-        update_info_buttons();
-    }
+            update_info_buttons();
+        }

 
 

-    function unhide_threads() {
-        set_thread_visibility(false);
-    }
+        function unhide_threads() {
+            set_thread_visibility(false);
+        }

 
 

-    function unhide_users() {
-        const hidden_users = get_hidden_users();
+        function unhide_users() {
+            const hidden_users = get_hidden_users();

 
 

-        hidden_users.forEach(function(val) {
-            const threads = document.querySelectorAll(`ul.topiclist .responsive-hide a[href$='u=${val}']`);
-            threads.forEach(function(thread) {
-                console.debug(`unhide user ${val}: thread ${thread}`);
-                thread.closest('li').style.display = "block";
+            hidden_users.forEach(function (val) {
+                const threads = node.querySelectorAll(`ul.topiclist .responsive-hide a[href$='u=${val}']`);
+                threads.forEach(function (thread) {
+                    console.debug(`unhide user ${val}: thread ${thread}`);
+                    thread.closest('li').style.display = "block";
+                });

             });
             });

-        });
-        update_info_buttons();
-    }
-
-    function add_control_buttons() {
-        const hidden_threads = get_hidden_threads();
-        const hidden_users = get_hidden_users();
-        const button_bar = document.querySelector("#page-body div.search-box fieldset");
-        const btn_base_classes = "button button-search-start dfde-hide-stuff";
-        if (!button_bar) { return; }
-
-        // TODO toggle state
-        function get_button(id, label) {
-            const btn = document.createElement("a");
-            btn.title = "Doppelklick zum Reset"
-            btn.className = btn_base_classes;
-            btn.innerHTML = `<span id='${id}'>${label}</span>`;
-            btn.style.fontWeight = "bold";
-            btn.style.color = "#8f8f8f";
-            return btn;
+            update_info_buttons();

         }
 
         }
 

-        const thread_button = get_button('hidden_threads_btn', `T (${hidden_threads.length})`);
-        thread_button.addEventListener("click", () => {
-            if (!thread_button.classList.contains("show_hidden")) {
-                thread_button.className = `${btn_base_classes} show_hidden`;
-                thread_button.style.backgroundImage = "linear-gradient(to bottom, #fff 0%,#bbb 100%)";
-                unhide_threads();
-            } else {
-                thread_button.className = btn_base_classes;
-                thread_button.style.backgroundImage = null;
-                hide_threads();
+        function add_control_buttons() {
+            const hidden_threads = get_hidden_threads();
+            const hidden_users = get_hidden_users();
+            const button_bar = node.querySelector("#page-body div.search-box fieldset");
+            const btn_base_classes = "button button-search-start dfde-hide-stuff";
+            if (!button_bar) {
+                return;

             }
             }

-        });
-        thread_button.addEventListener("dblclick", function() {
-            unhide_threads();
-            localStorage.setItem("hidden_threads", JSON.stringify([]));
-            update_info_buttons();
-        });
-        button_bar.append(thread_button);
-
-        const user_button = get_button('hidden_users_btn', `U (${hidden_users.length})`);
-        user_button.addEventListener("click", () => {
-            if (!user_button.classList.contains("show_hidden")) {
-                user_button.className = `${btn_base_classes} show_hidden`;
-                user_button.style.backgroundImage = "linear-gradient(to bottom, #fff 0%,#bbb 100%)";
-                unhide_users();
-            } else {
-                user_button.className = btn_base_classes;
-                user_button.style.backgroundImage = null;
-                hide_users();
+
+            // TODO toggle state
+            function get_button(id, label) {
+                const btn = document.createElement("a");
+                btn.title = "Doppelklick zum Reset"
+                btn.className = btn_base_classes;
+                btn.innerHTML = `<span id='${id}'>${label}</span>`;
+                btn.style.fontWeight = "bold";
+                btn.style.color = "#8f8f8f";
+                return btn;

             }
             }

-        });
-        user_button.addEventListener("dblclick", function() {
-            unhide_users();
-            localStorage.setItem("hidden_users", JSON.stringify([]));
-            update_info_buttons();
-        });
-        button_bar.append(user_button);
-    }

 
 

-    function add_user_icons() {
-        const profile = document.querySelector('#viewprofile');
-        if (!profile) { return; }
+            const thread_button = get_button('hidden_threads_btn', `T (${hidden_threads.length})`);
+            thread_button.addEventListener("click", () => {
+                if (!thread_button.classList.contains("show_hidden")) {
+                    thread_button.className = `${btn_base_classes} show_hidden`;
+                    thread_button.style.backgroundImage = "linear-gradient(to bottom, #fff 0%,#bbb 100%)";
+                    unhide_threads();
+                } else {
+                    thread_button.className = btn_base_classes;
+                    thread_button.style.backgroundImage = null;
+                    hide_threads();
+                }
+            });
+            thread_button.addEventListener("dblclick", function () {
+                unhide_threads();
+                localStorage.setItem("hidden_threads", JSON.stringify([]));
+                update_info_buttons();
+            });
+            button_bar.append(thread_button);

 
 

-        const trash = document.createElement('a');
-        trash.innerHTML = '<i class="icon fa-trash fa-fw icon-gray icon-xl"></i>';
+            const user_button = get_button('hidden_users_btn', `U (${hidden_users.length})`);
+            user_button.addEventListener("click", () => {
+                if (!user_button.classList.contains("show_hidden")) {
+                    user_button.className = `${btn_base_classes} show_hidden`;
+                    user_button.style.backgroundImage = "linear-gradient(to bottom, #fff 0%,#bbb 100%)";
+                    unhide_users();
+                } else {
+                    user_button.className = btn_base_classes;
+                    user_button.style.backgroundImage = null;
+                    hide_users();
+                }
+            });
+            user_button.addEventListener("dblclick", function () {
+                unhide_users();
+                localStorage.setItem("hidden_users", JSON.stringify([]));
+                update_info_buttons();
+            });
+            button_bar.append(user_button);
+        }

 
 

-        trash.addEventListener("mouseenter", function() { trash.style.opacity = 1; });
-        trash.addEventListener("mouseleave", function() { trash.style.opacity = 0.2; });
-        trash.addEventListener("click", function() {
-            const user_id = profile.querySelector("a[href*='author_id']").getAttribute("href").match(/author_id=([0-9]+)/)[1];
-            hide_user(parseInt(user_id));
-            update_info_buttons();
-        });
-        // TODO: mach rot wenn geblockt
-        profile.querySelector('.inner').append(trash);
-    }
+        function add_user_icons() {
+            const profile = node.querySelector('#viewprofile');
+            if (!profile) {
+                return;
+            }

 
 

-    function add_thread_icons() {
-        const hidden_threads = get_hidden_threads();
-        // TODO hide/unhide buttons
-        document.querySelectorAll(".topics .row").forEach(function(el) {
-            const thread_link = el.querySelector("a.topictitle[href^='./view']");
-            const thread_id = parseInt(thread_link.getAttribute("href").match(/t=([0-9]+)/)[1]);
-
-            const btn = document.createElement('a');
-            btn.className = "dfde-hide-stuff-btn"
-            btn.style.float = "right";
-            btn.style.opacity = opacity_default;
-            let icon = hidden_threads.indexOf(thread_id) >= 0 ? "fa-eye" : "fa-eye-slash";
-            btn.innerHTML = `<i class="icon ${icon} fa-fw icon-lightgrey icon-xl"></i>`;
-
-            btn.addEventListener("mouseenter", function() { btn.style.opacity = opacity_highlight; });
-            btn.addEventListener("mouseleave", function() { btn.style.opacity = opacity_default; });
-            btn.addEventListener("click", function() {
-                hidden_threads.indexOf(thread_id) >= 0 ? unhide_thread(thread_id) : hide_thread(thread_id);
+            const trash = document.createElement('a');
+            trash.innerHTML = '<i class="icon fa-trash fa-fw icon-gray icon-xl"></i>';
+
+            trash.addEventListener("mouseenter", function () {
+                trash.style.opacity = 1;
+            });
+            trash.addEventListener("mouseleave", function () {
+                trash.style.opacity = 0.2;
+            });
+            trash.addEventListener("click", function () {
+                const user_id = profile.querySelector("a[href*='author_id']").getAttribute("href").match(/author_id=([0-9]+)/)[1];
+                hide_user(parseInt(user_id));

                 update_info_buttons();
                 update_info_buttons();

-                // just re-add icons
-                add_thread_icons();

             });
             });

-            el.querySelectorAll(".lastpost span .dfde-hide-stuff-btn").forEach(btn => btn.remove())
-            el.querySelector(".lastpost span").append(btn);
-        });
-    }
+            // TODO: mach rot wenn geblockt
+            profile.querySelector('.inner').append(trash);
+        }

 
 

-    function update_info_buttons() {
-        try {
+        function add_thread_icons() {

             const hidden_threads = get_hidden_threads();
             const hidden_threads = get_hidden_threads();

-            const hidden_users = get_hidden_users();
-            document.querySelector('#hidden_threads_btn').innerHTML = `T (${hidden_threads.length})`;
-            document.querySelector('#hidden_users_btn').innerHTML = `U (${hidden_users.length})`;
-        } catch(e) {
-            // just on the wrong page, I guess
+            // TODO hide/unhide buttons
+            node.querySelectorAll(".topics .row").forEach(function (el) {
+                const thread_link = el.querySelector("a.topictitle[href^='./view']");
+                const thread_id = parseInt(thread_link.getAttribute("href").match(/t=([0-9]+)/)[1]);
+
+                const btn = document.createElement('a');
+                btn.className = "dfde-hide-stuff-btn"
+                btn.style.float = "right";
+                btn.style.opacity = opacity_default;
+                let icon = hidden_threads.indexOf(thread_id) >= 0 ? "fa-eye" : "fa-eye-slash";
+                btn.innerHTML = `<i class="icon ${icon} fa-fw icon-lightgrey icon-xl"></i>`;
+
+                btn.addEventListener("mouseenter", function () {
+                    btn.style.opacity = opacity_highlight;
+                });
+                btn.addEventListener("mouseleave", function () {
+                    btn.style.opacity = opacity_default;
+                });
+                btn.addEventListener("click", function () {
+                    hidden_threads.indexOf(thread_id) >= 0 ? unhide_thread(thread_id) : hide_thread(thread_id);
+                    update_info_buttons();
+                    // just re-add icons
+                    add_thread_icons();
+                });
+                el.querySelectorAll(".lastpost span .dfde-hide-stuff-btn").forEach(btn => btn.remove())
+                el.querySelector(".lastpost span").append(btn);
+            });
+        }
+
+        function update_info_buttons() {
+            try {
+                const hidden_threads = get_hidden_threads();
+                const hidden_users = get_hidden_users();
+                node.querySelector('#hidden_threads_btn').innerHTML = `T (${hidden_threads.length})`;
+                node.querySelector('#hidden_users_btn').innerHTML = `U (${hidden_users.length})`;
+            } catch (e) {
+                // just on the wrong page, I guess
+            }
+        }
+
+        add_control_buttons(node);
+        add_thread_icons(node);
+        add_user_icons(node);
+        hide_threads(node);
+        hide_users(node);
+    }
+
+    function init(mutations, observer) {
+        for (const mutation of mutations) {
+            for (const node of mutation.addedNodes) {
+                node_wrap(node)
+            }

         }
     }
 
         }
     }
 

-    add_control_buttons();
-    add_thread_icons();
-    add_user_icons();
-    hide_threads();
-    hide_users();
+    const observer = new MutationObserver(init);
+    observer.observe(document.documentElement, {childList: true, subtree: true});
+    addEventListener("load", observer.disconnect);

 })();
 })();