MediaWiki:Common.js: Difference between revisions

Latest revision as of 10:41, 20 September 2026

/* Any JavaScript here will be loaded for all users on every page load. */

/* ==========================================================================
   DEV VANIMEDIA - VECTOR 2022 COMMON.JS
   ========================================================================== */

// SIDEBAR ACCORDION - STRICT LEFT-COLUMN ISOLATION & TRUE ACCORDION
(function() {
    function tagSidebarMenus() {
        var allMenus = document.querySelectorAll('.vector-menu');

        for (var i = 0; i < allMenus.length; i++) {
            var menu = allMenus[i];

            if (menu.closest('#vector-main-menu, #mw-panel, #mw-navigation')) {
                menu.classList.add('vanipedia-sidebar-menu');

                if (
                    menu.querySelector('.vector-menu-heading') &&
                    !menu.classList.contains('vanipedia-collapsed')
                ) {
                    menu.classList.add('vanipedia-collapsed');
                }
            }
        }
    }

    tagSidebarMenus();

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', tagSidebarMenus);
    }

    var style = document.createElement('style');

    style.textContent =
        '.vanipedia-sidebar-menu { width: 185px !important; } ' +
        '.vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-content { display: none !important; } ' +

        '.vanipedia-sidebar-menu .vector-menu-heading { ' +
        'cursor: pointer !important; ' +
        'background-color: #a36a00 !important; ' +
        'border: 1px solid #7a4d00 !important; ' +
        'border-radius: 4px !important; ' +
        'margin-bottom: 4px !important; ' +
        'padding: 10px 12px !important; ' +
        'font-weight: 600 !important; ' +
        'color: #ffffff !important; ' +
        'display: flex !important; ' +
        'justify-content: space-between !important; ' +
        'align-items: center !important; ' +
        'gap: 10px !important; ' +
        'transition: all 0.2s ease; ' +
        '} ' +

        '.vanipedia-sidebar-menu:not(.vanipedia-collapsed) .vector-menu-heading { ' +
        'border-radius: 4px 4px 0 0 !important; ' +
        'margin-bottom: 0 !important; ' +
        '} ' +

        '.vanipedia-sidebar-menu .vector-menu-heading:hover { ' +
        'background-color: #7a4d00 !important; ' +
        '} ' +

        '.vanipedia-sidebar-menu .vector-menu-heading::after { ' +
        'content: "▼"; ' +
        'font-size: 0.75em; ' +
        'color: #ffffff !important; ' +
        'transition: transform 0.2s ease; ' +
        '} ' +

        '.vanipedia-sidebar-menu.vanipedia-collapsed .vector-menu-heading::after { ' +
        'transform: rotate(-90deg); ' +
        '} ' +

        '.vanipedia-sidebar-menu .vector-menu-content { ' +
        'background-color: #fff3e3 !important; ' +
        'border: 1px solid #a36a00 !important; ' +
        'border-top: none !important; ' +
        'border-radius: 0 0 4px 4px !important; ' +
        'padding: 0 0 4px 0 !important; ' +
        'margin-bottom: 6px !important; ' +
        'box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important; ' +
        '} ' +

        '.vanipedia-sidebar-menu .vector-menu-content ul { ' +
        'list-style: none !important; ' +
        'margin: 0 !important; ' +
        'padding: 0 !important; ' +
        '} ' +

        '.vanipedia-sidebar-menu .vector-menu-content li a { ' +
        'display: block !important; ' +
        'padding: 8px 12px 8px 16px !important; ' +
        'color: #7a4d00 !important; ' +
        'text-decoration: none !important; ' +
        'border-left: 3px solid transparent !important; ' +
        'border-bottom: 1px solid rgba(163,106,0,0.12) !important; ' +
        'transition: all 0.15s ease !important; ' +
        '} ' +

        '.vanipedia-sidebar-menu .vector-menu-content li:last-child a { ' +
        'border-bottom: none !important; ' +
        '} ' +

        '.vanipedia-sidebar-menu .vector-menu-content li a:hover { ' +
        'background-color: #f3d19f !important; ' +
        'border-left: 3px solid #a36a00 !important; ' +
        'color: #000000 !important; ' +
        '} ';

    document.head.appendChild(style);

    function collapseAllSidebarMenus() {
        var menus = document.querySelectorAll('.vanipedia-sidebar-menu');

        for (var i = 0; i < menus.length; i++) {
            menus[i].classList.add('vanipedia-collapsed');
        }
    }

    document.addEventListener('click', function(e) {
        var heading = e.target.closest('.vector-menu-heading');

        if (!heading) {
            return;
        }

        var navContainer = heading.closest('.vanipedia-sidebar-menu');

        if (navContainer) {
            var isAlreadyOpen =
                !navContainer.classList.contains('vanipedia-collapsed');

            collapseAllSidebarMenus();

            if (!isAlreadyOpen) {
                navContainer.classList.remove('vanipedia-collapsed');
            }

            e.stopPropagation();
            e.preventDefault();
        }
    }, true);
})();


// VANIMEDIA LIVE-SITE FUNCTIONALITY
// Detect and transform links to URLs ending with a question mark.
$.getScript("/js/question-mark-link-detect.js");


// RESTRICT ADMINISTRATIVE UI BY USER GROUP
mw.loader.using('mediawiki.user').then(function() {
    var userGroups = mw.config.get('wgUserGroups') || [];

    var isAuthorized =
        userGroups.includes('sysop') ||
        userGroups.includes('interface-admin') ||
        userGroups.includes('Editor');

    if (!isAuthorized) {
        document.body.classList.add('restricted-ui');
    }
});


// STICKY BURGER MENU - PURE FLOATING DROPDOWN
(function() {
    var isMenuOpen = false;

    function forceUnpinSidebar() {
        document.documentElement.classList.remove(
            'vector-feature-main-menu-pinned-enabled',
            'vector-feature-main-menu-pinned-clientpref-1'
        );

        document.documentElement.classList.add(
            'vector-feature-main-menu-pinned-disabled',
            'vector-feature-main-menu-pinned-clientpref-0'
        );

        if (document.body) {
            document.body.classList.remove(
                'vector-feature-main-menu-pinned-enabled',
                'vector-feature-main-menu-pinned-clientpref-1'
            );

            document.body.classList.add(
                'vector-feature-main-menu-pinned-disabled',
                'vector-feature-main-menu-pinned-clientpref-0'
            );
        }

        document.cookie =
            'vector-feature-main-menu-pinned=0; path=/; max-age=31536000';

        try {
            localStorage.setItem(
                'vector-feature-main-menu-pinned',
                '0'
            );
        } catch (e) {}

        var mainMenu =
            document.getElementById('vector-main-menu');

        var unpinnedContainer =
            document.getElementById(
                'vector-main-menu-unpinned-container'
            ) ||
            document.querySelector(
                '#vector-main-menu-dropdown .vector-dropdown-content'
            );

        var pinnedContainer =
            document.getElementById(
                'vector-main-menu-pinned-container'
            );

        if (
            mainMenu &&
            unpinnedContainer &&
            pinnedContainer &&
            pinnedContainer.contains(mainMenu)
        ) {
            unpinnedContainer.appendChild(mainMenu);
        }
    }

    function getDropdownElement() {
        return (
            document.querySelector(
                '#vector-main-menu-dropdown .vector-dropdown-content'
            ) ||
            document.getElementById(
                'vector-main-menu-dropdown-content'
            ) ||
            document.getElementById(
                'vector-main-menu-unpinned-container'
            ) ||
            document.getElementById('vector-main-menu')
        );
    }

    function openMenu(menuBtn) {
        forceUnpinSidebar();

        var checkbox =
            document.getElementById(
                'vector-main-menu-dropdown-checkbox'
            );

        var dropdown = getDropdownElement();

        if (!dropdown) {
            return;
        }

        if (checkbox) {
            checkbox.checked = true;

            checkbox.dispatchEvent(
                new Event('change', {
                    bubbles: true
                })
            );
        }

        var rect = menuBtn.getBoundingClientRect();

        dropdown.style.setProperty(
            'position',
            'fixed',
            'important'
        );

        dropdown.style.setProperty(
            'top',
            rect.bottom + 'px',
            'important'
        );

        dropdown.style.setProperty(
            'left',
            rect.left + 'px',
            'important'
        );

        dropdown.style.setProperty(
            'z-index',
            '99999',
            'important'
        );

        dropdown.style.setProperty(
            'max-height',
            (window.innerHeight - rect.bottom - 16) + 'px',
            'important'
        );

        dropdown.style.setProperty(
            'overflow-y',
            'auto',
            'important'
        );

        dropdown.style.setProperty(
            'display',
            'block',
            'important'
        );

        dropdown.style.setProperty(
            'visibility',
            'visible',
            'important'
        );

        dropdown.style.setProperty(
            'opacity',
            '1',
            'important'
        );

        dropdown.style.setProperty(
            'background-color',
            'var(--background-color-base, #fdc88a)',
            'important'
        );

        dropdown.style.setProperty(
            'box-shadow',
            '0 4px 16px rgba(0,0,0,0.2)',
            'important'
        );

        dropdown.style.setProperty(
            'border-radius',
            '4px',
            'important'
        );

        isMenuOpen = true;
    }

    function closeMenu() {
        var checkbox =
            document.getElementById(
                'vector-main-menu-dropdown-checkbox'
            );

        var dropdown = getDropdownElement();

        if (!dropdown) {
            return;
        }

        if (checkbox) {
            checkbox.checked = false;

            checkbox.dispatchEvent(
                new Event('change', {
                    bubbles: true
                })
            );
        }

        dropdown.style.removeProperty('position');
        dropdown.style.removeProperty('top');
        dropdown.style.removeProperty('left');
        dropdown.style.removeProperty('z-index');
        dropdown.style.removeProperty('max-height');
        dropdown.style.removeProperty('overflow-y');
        dropdown.style.removeProperty('background-color');
        dropdown.style.removeProperty('box-shadow');
        dropdown.style.removeProperty('border-radius');

        dropdown.style.setProperty(
            'display',
            'none',
            'important'
        );

        dropdown.style.setProperty(
            'visibility',
            'hidden',
            'important'
        );

        dropdown.style.setProperty(
            'opacity',
            '0',
            'important'
        );

        isMenuOpen = false;
    }

    function initStickyBurger() {
        forceUnpinSidebar();

        var stickyHeader =
            document.getElementById('vector-sticky-header');

        if (!stickyHeader) {
            return false;
        }

        if (
            document.getElementById(
                'vanipedia-sticky-main-menu'
            )
        ) {
            return true;
        }

        var menuBtn = document.createElement('div');

        menuBtn.id = 'vanipedia-sticky-main-menu';
        menuBtn.title = 'Main menu';
        menuBtn.style.cursor = 'pointer';

        menuBtn.className =
            'vector-dropdown-label ' +
            'cdx-button ' +
            'cdx-button--fake-button ' +
            'cdx-button--icon-only';

        var iconSpan = document.createElement('span');

        iconSpan.className =
            'vector-icon ' +
            'mw-ui-icon-menu ' +
            'mw-ui-icon-wikimedia-menu';

        menuBtn.appendChild(iconSpan);

        menuBtn.addEventListener(
            'click',
            function(e) {
                e.preventDefault();
                e.stopPropagation();

                if (isMenuOpen) {
                    closeMenu();
                } else {
                    openMenu(menuBtn);
                }
            }
        );

        var startContainer =
            stickyHeader.querySelector(
                '.vector-sticky-header-start'
            );

        if (!startContainer) {
            startContainer =
                document.createElement('div');

            startContainer.className =
                'vector-sticky-header-start';

            stickyHeader.insertBefore(
                startContainer,
                stickyHeader.firstChild
            );
        }

        startContainer.insertBefore(
            menuBtn,
            startContainer.firstChild
        );

        return true;
    }

    document.addEventListener(
        'click',
        function(e) {
            if (!isMenuOpen) {
                return;
            }

            var menuBtn =
                document.getElementById(
                    'vanipedia-sticky-main-menu'
                );

            var dropdown = getDropdownElement();

            if (
                dropdown &&
                menuBtn &&
                !menuBtn.contains(e.target) &&
                !dropdown.contains(e.target)
            ) {
                closeMenu();
            }
        }
    );

    if (!initStickyBurger()) {
        var checkTimer =
            setInterval(
                function() {
                    if (initStickyBurger()) {
                        clearInterval(checkTimer);
                    }
                },
                100
            );

        setTimeout(
            function() {
                clearInterval(checkTimer);
            },
            4000
        );
    }

    mw.hook('wikipage.content').add(
        initStickyBurger
    );

    $(initStickyBurger);
})();


// FLOATING "BACK TO TOP" BUTTON
(function() {
    function initBackToTop() {
        if (
            document.getElementById(
                'vanipedia-back-to-top'
            )
        ) {
            return;
        }

        var btn =
            document.createElement('button');

        btn.id = 'vanipedia-back-to-top';
        btn.title = 'Back to top';

        btn.setAttribute(
            'aria-label',
            'Back to top'
        );

        btn.innerHTML =
            '<svg xmlns="http://www.w3.org/2000/svg" ' +
            'width="22" height="22" ' +
            'viewBox="0 0 24 24" ' +
            'fill="none" ' +
            'stroke="currentColor" ' +
            'stroke-width="2.5" ' +
            'stroke-linecap="round" ' +
            'stroke-linejoin="round">' +
            '<polyline points="18 15 12 9 6 15"></polyline>' +
            '</svg>';

        btn.addEventListener(
            'click',
            function(e) {
                e.preventDefault();

                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }
        );

        function toggleVisibility() {
            if (window.scrollY > 300) {
                btn.classList.add('visible');
            } else {
                btn.classList.remove('visible');
            }
        }

        window.addEventListener(
            'scroll',
            toggleVisibility,
            {
                passive: true
            }
        );

        toggleVisibility();

        document.body.appendChild(btn);
    }

    $(initBackToTop);

    mw.hook('wikipage.content').add(
        initBackToTop
    );
})();