MediaWiki:Common.js: Difference between revisions

From Realm Of Thrones
Jump to navigation Jump to search
SitX (talk | contribs)
No edit summary
SitX (talk | contribs)
No edit summary
Line 4: Line 4:
         if (!toc) return;
         if (!toc) return;


        // Create Floating ToC Box
         var floatingToc = document.createElement("div");
         var floatingToc = document.createElement("div");
         floatingToc.id = "floating-toc";
         floatingToc.id = "floating-toc";
Line 14: Line 15:
         if (hideButton) {
         if (hideButton) {
             hideButton.addEventListener("click", function (event) {
             hideButton.addEventListener("click", function (event) {
                 event.preventDefault();
                 event.preventDefault();  
                 floatingToc.classList.toggle("collapsed");
                 floatingToc.classList.toggle("collapsed");
                event.stopPropagation();
             });
             });
         }
         }
        toc.addEventListener("click", function (event) {
            event.stopPropagation();
        });


         floatingToc.addEventListener("click", function (event) {
         floatingToc.addEventListener("click", function (event) {
             if (floatingToc.classList.contains("collapsed")) {
             if (floatingToc.classList.contains("collapsed") && event.target === floatingToc) {
                 floatingToc.classList.remove("collapsed");
                 floatingToc.classList.remove("collapsed");
                event.stopPropagation();
             }
             }
         });
         });
     }, 500);
     }, 500);
});
});

Revision as of 03:12, 25 March 2025

document.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
        var toc = document.querySelector("#mw-content-text #toc");
        if (!toc) return;

        // Create Floating ToC Box
        var floatingToc = document.createElement("div");
        floatingToc.id = "floating-toc";
        toc.parentNode.removeChild(toc);
        floatingToc.appendChild(toc);
        document.body.appendChild(floatingToc);

        var hideButton = floatingToc.querySelector(".toctogglelabel");

        if (hideButton) {
            hideButton.addEventListener("click", function (event) {
                event.preventDefault(); 
                floatingToc.classList.toggle("collapsed");
                event.stopPropagation(); 
            });
        }

        toc.addEventListener("click", function (event) {
            event.stopPropagation();
        });

        floatingToc.addEventListener("click", function (event) {
            if (floatingToc.classList.contains("collapsed") && event.target === floatingToc) {
                floatingToc.classList.remove("collapsed");
            }
        });

    }, 500);
});