MediaWiki:Gadget-CollapseAllButton.js

/** Class name of an element that holds a collapse all button. */
const collapseAllButtonContainerClass = "collapsible-toggle-container";

/** Class name of an actual collapse all button. */
const collapseAllButtonClass = "mw-collapsible-toggle";

/** Data attribute on the collapse all button container element, 
 * that specifies a class name for a collapsable elements container that the collapse all button shall target. */
const collapsibleContainerDataAttr = "data-target-class";

/** The initial part of a custom toggle class name. */
const customToggleClassPrefix = "mw-customtoggle";

/** Class name for collapsible elements. */
const collapsibleClass = "mw-collapsible";

/** Class name for collapsed elements. */
const collapsedClass = "mw-collapsed";

const logPrefix = "Gadget-ExpandAllReagents"

// ===========

mw.hook('wikipage.content').add((content) => {
    /** @type {HTMLElement} */
    const contentEl = content[0];

    // small timeout to prevent race condition with underlying jquery
    // that works the collapsible magic.
    setTimeout(() => {
        for (const collapseAllButtonContainerEl of contentEl.getElementsByClassName(collapseAllButtonContainerClass)) {
            const collapseAllButton = collapseAllButtonContainerEl.getElementsByClassName(collapseAllButtonClass)[0];
            if (!collapseAllButton) {
                logWarn("failed to find a collapse all button inside a collapse all button container element");
                console.warn({
                    collapseAllButtonContainerEl
                })
                continue;
            }

            const collapsibleContainerClass = collapseAllButtonContainerEl.getAttribute(collapsibleContainerDataAttr);
            if (!collapsibleContainerClass) {
                logWarn("collapsible container data attribute not found on the collapse all button container element");
                console.warn({
                    collapseAllButtonContainerEl
                })
                continue;
            }

            let toggleEls = new Set();
            /** Whether the initial querying of the toggle elements has been done. */
            let initialized = false;

            collapseAllButton.addEventListener('click', () => {
                if (!initialized) {
                    const collapsibleContainerEls = contentEl.getElementsByClassName(collapsibleContainerClass);

                    for (const collapsibleContainerEl of collapsibleContainerEls) {
                        for (const toggleEl of collapsibleContainerEl.querySelectorAll(`[class*='${customToggleClassPrefix}']`)) {
                            toggleEls.add(toggleEl);
                        }
                    }

                    initialized = true;
                }

                toggleEls.forEach(el => el.click());
            });
        }
    }, 250)
});

// ===========

function joinLogPrefixWithMessage(msg) {
    return logPrefix + " " + msg;
}

function logWarn(msg) {
    console.warn(joinLogPrefixWithMessage(msg));
}

function throwErr(msg) {
    throw new Error(joinLogPrefixWithMessage(msg));
}