MediaWiki:Common.js: Difference between revisions

Revision as of 22:05, 16 August 2026

/* ========================================================================
   ERINDAL WIKI - COMMON.JS v5.0
   Target: MediaWiki 1.43.x, legacy Vector

   The topbar itself is now rendered by MediaWiki:Sidebar. JavaScript only
   adds dropdowns, the remembered sidebar toggle and dynamic homepage data.
   It deliberately does not load fonts or construct the navigation bar.
   ======================================================================== */

( function () {
    'use strict';

    var sidebarKey = 'erindal-sidebar';

    /* Apply the saved state again as a fallback. LocalSettings.php applies the
       same class in the document head, before first paint. */
    try {
        if ( window.localStorage.getItem( sidebarKey ) === 'collapsed' ) {
            document.documentElement.classList.add( 'ew-sidebar-collapsed' );
        }
    } catch ( error ) {
        /* localStorage can be unavailable in strict/private browser modes. */
    }

    function onReady( callback ) {
        if ( document.readyState === 'loading' ) {
            document.addEventListener( 'DOMContentLoaded', callback, { once: true } );
        } else {
            callback();
        }
    }

    function installSidebarToggle() {
        if ( !document.getElementById( 'mw-panel' ) || document.getElementById( 'ew-sidebar-toggle' ) ) {
            return;
        }

        var button = document.createElement( 'button' );
        button.id = 'ew-sidebar-toggle';
        button.type = 'button';

        function updateButton() {
            var collapsed = document.documentElement.classList.contains( 'ew-sidebar-collapsed' );
            button.textContent = collapsed ? '\u203a' : '\u2039';
            button.setAttribute( 'aria-expanded', collapsed ? 'false' : 'true' );
            button.setAttribute( 'aria-label', collapsed ? 'Open sidebar' : 'Close sidebar' );
            button.title = collapsed ? 'Open sidebar' : 'Close sidebar';
        }

        button.addEventListener( 'click', function () {
            var collapsed = document.documentElement.classList.toggle( 'ew-sidebar-collapsed' );

            try {
                window.localStorage.setItem( sidebarKey, collapsed ? 'collapsed' : 'open' );
            } catch ( error ) {
                /* The button still works for this page when storage is blocked. */
            }

            updateButton();
        } );

        updateButton();
        document.body.appendChild( button );
    }

    function installTopbarDropdowns() {
        var topbar = document.getElementById( 'p-erindal-topbar' );
        if ( !topbar || topbar.dataset.ewEnhanced === '1' ) {
            return;
        }

        topbar.dataset.ewEnhanced = '1';

        var menus = {
            'Explore': [
                [ 'Main Page', 'Main Page' ],
                [ 'Special:RecentChanges', 'Recent Changes' ],
                [ 'Special:AllPages', 'All Pages' ],
                [ 'Special:Categories', 'Categories' ]
            ],
            'World': [
                [ 'Category:Nations & Realms', 'Nations & Realms' ],
                [ 'Category:Races & Peoples', 'Races & Peoples' ],
                [ 'Category:Locations', 'Locations' ]
            ],
            'People': [
                [ 'Category:Characters', 'Characters' ],
                [ 'Category:Family Lines', 'Family Lines' ]
            ],
            'Organizations': [
                [ 'Category:Organizations', 'All Organizations' ],
                [ 'The Conclave', 'The Conclave' ],
                [ 'Order of the Holy Flame', 'Order of the Holy Flame' ],
                [ 'The Dominion', 'The Dominion' ]
            ],
            'Magic & Lore': [
                [ 'Category:Religion & Deities', 'Religion & Deities' ],
                [ 'Category:Magic & Cosmology', 'Magic & Cosmology' ]
            ],
            'History': [
                [ 'Category:History & Timeline', 'History & Timeline' ],
                [ 'Timeline', 'Timeline' ]
            ]
        };

        Array.prototype.forEach.call( topbar.querySelectorAll( '.mw-list-item' ), function ( item ) {
            var link = item.querySelector( ':scope > a' );
            if ( !link ) {
                return;
            }

            var label = link.textContent.trim();
            var entries = menus[ label ];
            if ( !entries ) {
                return;
            }

            item.classList.add( 'ew-has-dropdown' );

            var caret = document.createElement( 'button' );
            caret.type = 'button';
            caret.className = 'ew-topbar-caret';
            caret.textContent = '\u2304';
            caret.setAttribute( 'aria-label', 'Open ' + label + ' menu' );
            caret.setAttribute( 'aria-expanded', 'false' );

            var dropdown = document.createElement( 'div' );
            dropdown.className = 'ew-topbar-dropdown';

            entries.forEach( function ( entry ) {
                var menuLink = document.createElement( 'a' );
                menuLink.href = mw.util.getUrl( entry[ 0 ] );
                menuLink.textContent = entry[ 1 ];
                dropdown.appendChild( menuLink );
            } );

            caret.addEventListener( 'click', function ( event ) {
                event.preventDefault();
                event.stopPropagation();

                var willOpen = !item.classList.contains( 'ew-menu-open' );
                Array.prototype.forEach.call( topbar.querySelectorAll( '.ew-menu-open' ), function ( openItem ) {
                    openItem.classList.remove( 'ew-menu-open' );
                    var openCaret = openItem.querySelector( '.ew-topbar-caret' );
                    if ( openCaret ) {
                        openCaret.setAttribute( 'aria-expanded', 'false' );
                    }
                } );

                item.classList.toggle( 'ew-menu-open', willOpen );
                caret.setAttribute( 'aria-expanded', willOpen ? 'true' : 'false' );
            } );

            item.appendChild( caret );
            item.appendChild( dropdown );
        } );

        document.addEventListener( 'click', function () {
            Array.prototype.forEach.call( topbar.querySelectorAll( '.ew-menu-open' ), function ( item ) {
                item.classList.remove( 'ew-menu-open' );
                var caret = item.querySelector( '.ew-topbar-caret' );
                if ( caret ) {
                    caret.setAttribute( 'aria-expanded', 'false' );
                }
            } );
        } );

        document.addEventListener( 'keydown', function ( event ) {
            if ( event.key === 'Escape' ) {
                Array.prototype.forEach.call( topbar.querySelectorAll( '.ew-menu-open' ), function ( item ) {
                    item.classList.remove( 'ew-menu-open' );
                    var caret = item.querySelector( '.ew-topbar-caret' );
                    if ( caret ) {
                        caret.setAttribute( 'aria-expanded', 'false' );
                    }
                } );
            }
        } );
    }

    function makeHomepageCardsClickable() {
        Array.prototype.forEach.call( document.querySelectorAll( '.ew-card' ), function ( card ) {
            var link = card.querySelector( 'a[href]' );
            if ( !link ) {
                return;
            }

            card.setAttribute( 'tabindex', '0' );
            card.setAttribute( 'role', 'link' );

            card.addEventListener( 'click', function ( event ) {
                if ( !event.target.closest( 'a' ) ) {
                    window.location.href = link.href;
                }
            } );

            card.addEventListener( 'keydown', function ( event ) {
                if ( event.key === 'Enter' || event.key === ' ' ) {
                    event.preventDefault();
                    window.location.href = link.href;
                }
            } );
        } );
    }

    function loadRecentChanges() {
        var loading = document.querySelector( '.ew-recent-loading' );
        if ( !loading ) {
            return;
        }

        var api = new mw.Api();
        api.get( {
            action: 'query',
            list: 'recentchanges',
            rcnamespace: 0,
            rcshow: '!bot',
            rcprop: 'title|timestamp|user',
            rctype: 'edit|new',
            rclimit: 5,
            formatversion: 2
        } ).then( function ( data ) {
            var changes = data && data.query && data.query.recentchanges ? data.query.recentchanges : [];
            loading.textContent = '';

            if ( !changes.length ) {
                loading.textContent = 'No recent article changes.';
                return;
            }

            changes.forEach( function ( change ) {
                var row = document.createElement( 'div' );
                row.className = 'ew-recent-row';

                var icon = document.createElement( 'span' );
                icon.className = 'ew-recent-icon';
                icon.textContent = change.title.slice( 0, 2 ).toUpperCase();

                var copy = document.createElement( 'span' );
                var link = document.createElement( 'a' );
                link.href = mw.util.getUrl( change.title );
                link.textContent = change.title;

                var detail = document.createElement( 'small' );
                var date = new Date( change.timestamp );
                detail.textContent = date.toLocaleDateString() + ( change.user ? ' - ' + change.user : '' );

                copy.appendChild( link );
                copy.appendChild( detail );
                row.appendChild( icon );
                row.appendChild( copy );
                loading.appendChild( row );
            } );
        } ).catch( function () {
            loading.textContent = 'Recent changes could not be loaded.';
        } );
    }

    mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).then( function () {
        onReady( function () {
            installSidebarToggle();
            installTopbarDropdowns();
            makeHomepageCardsClickable();
            loadRecentChanges();
        } );
    } );
}() );