Jump to content

User:The wub/tocExpandAll.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/* 
Add an expand/collapse all button to the top of the Vector 2022 table of contents
See also https://phabricator.wikimedia.org/T302426

To install add this line:
importScript('User:The wub/tocExpandAllSandbox.js');

to https://en.wikipedia.org/wiki/Special:MyPage/vector-2022.js
*/

$( document ).ready(function () {

    if ( 
        mw.config.get('skin') === 'vector-2022' &&
        document.querySelector('.vector-toc-level-1 ul li') // any subsections?
    ) {
        const expandButton = document.createElement('button');
        expandButton.innerText = 'expand all';
        expandButton.classList.add('vector-pinnable-header-toggle-button', 'vector-toc-expand-all');
        expandButton.addEventListener( 'click', e => {
            document.querySelectorAll('.vector-toc-contents .vector-toc-level-1').forEach( 
                node => node.classList.add('vector-toc-list-item-expanded')
            );
            document.querySelectorAll('.vector-toc-contents [aria-expanded="false"]').forEach(
                node => node.setAttribute('aria-expanded', 'true')
            );
            expandButton.style.display = 'none';
            collapseButton.style.display = 'inline-block';
            collapseButton.focus({ preventScroll: true });
        });
        
        const collapseButton = document.createElement('button');
        collapseButton.innerText = 'collapse all';
        collapseButton.classList.add('vector-pinnable-header-toggle-button', 'vector-toc-collapse-all');
        collapseButton.addEventListener( 'click', e => {
            document.querySelectorAll('.vector-toc-contents .vector-toc-level-1').forEach(
                node => node.classList.remove('vector-toc-list-item-expanded')
            );
            document.querySelectorAll('.vector-toc-contents [aria-expanded="true"]').forEach(
                node => node.setAttribute('aria-expanded', 'false')
            );
            collapseButton.style.display = 'none';
            expandButton.style.display = 'inline-block';
            expandButton.focus({ preventScroll: true });
        });

        // Any already expanded sections?
        if ( document.querySelector('.vector-toc-list-item-expanded ul li') ) {
            expandButton.style.display = 'none';
            collapseButton.style.display = 'inline-block';
        } else {
            expandButton.style.display = 'inline-block';
            collapseButton.style.display = 'none';
        }

        const tocHeader = document.querySelector('.vector-toc-pinnable-header');
        tocHeader.appendChild( expandButton );
        tocHeader.appendChild( collapseButton );

    }
});