MediaWiki:InfinityBar.js

(()=>{
    class InfinityBar
    {
        constructor(selector)
        {
            this.selector = selector;
            this.elements = [];
            this.activeElements = [];

            mw.hook( 'wikipage.content' ).add( this.applyToDom.bind(this) );
        }

        applyToDom()
        {
            this.elements = document.querySelectorAll(this.selector);
            this.elements.forEach(this.onTitleClick.bind(this));
            window.addEventListener("scroll", this.scrollHandler.bind(this));
        }

        scrollHandler()
        {
            this.elements.forEach((barElement) => {
                const warpper = barElement.querySelector(".wrapper");
                if ((window.pageYOffset + this.calculateBarHeight(barElement)) <= (barElement.getBoundingClientRect().top - document.body.getBoundingClientRect().top)) {
                    if (warpper.classList.contains("sticky")) {
                        this.activeElements.splice(this.activeElements.indexOf(barElement), 1);
                        barElement.style.minWidth = "";
                        warpper.style.minWidth = "";
                        barElement.style.minHeight = barElement.clientHeight + "px";
                        warpper.style.top = "";
                        warpper.classList.remove("sticky");
                    }
                }
                if ((window.pageYOffset + this.calculateBarHeight(barElement)) > (barElement.getBoundingClientRect().top - document.body.getBoundingClientRect().top)) {
                    if (!warpper.classList.contains("sticky")) {
                        barElement.style.minWidth = barElement.clientWidth + "px";
                        warpper.style.minWidth = barElement.clientWidth + "px";
                        barElement.style.width = barElement.clientWidth + "px";
                        warpper.style.width = barElement.clientWidth + "px";
                        barElement.style.minHeight = barElement.clientHeight + "px";
                        warpper.style.top = this.calculateBarHeight(barElement) + "px";
                        this.activeElements.push(barElement);
                        warpper.classList.add("sticky");
                    }
                }
            });
        }

        onTitleClick(bar)
        {
            bar.querySelectorAll(".categoryListTitle").forEach((title) => {
                title.addEventListener("click", function(mouseEvent) {
                    const wrapper = mouseEvent.target.parentNode.parentNode.parentNode;
                    wrapper.parentNode.style.minHeight = wrapper.clientHeight + "px";
                    this.elements.forEach((bar)=>{bar.querySelector(".wrapper").style.top = this.calculateBarHeight(bar) + "px";});
                }.bind(this));
            });
        }

        calculateBarHeight(elementToStop)
        {
            let currentHeight = 0;
            for (let i = 0; i < this.activeElements.length; i++)
            {  
                if (this.activeElements[i] == elementToStop)
                {
                    return currentHeight;
                }
                currentHeight += this.activeElements[i].clientHeight - 1;
            }
            return currentHeight;
        }
    }

    const infinityBar = new InfinityBar(".fixed-header");
})();