MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

// Ensure mediawiki.util is available, then run on DOM ready
mw.loader.using('mediawiki.util', function () {
    $(document).ready(function () {
        // Avoid double-injection
        if ($('#drg-navbar').length) return;

        // 1) pull your current logo (fallback to a known path)
        const logoSrc = $('#p-logo img').attr('src')
            || '/images/3/3f/Myriad_logo_icon_transparent.png';

        // 2) Build the user-dropdown or Login button
        const userName = mw.config.get('wgUserName');
        let userArea;
        if (userName) {
            const menu = $('#p-personal ul').clone()
                .addClass('drg-user-dropdown')
                .find('li').css('border', 'none').end();
            userArea = `<div class="drg-user">
                <span>Welcome, ${userName}</span>
                ${menu.prop('outerHTML')}
            </div>`;
        } else {
            userArea = `<a class="drg-button" href="${mw.util.getUrl('Special:UserLogin')}">Login</a>`;
        }

        // 3) Clone the built-in search form
        const searchClone = $('#p-search form').clone()
            .wrap('<div class="drg-search"></div>')
            .parent()[0].outerHTML;

        // 4) Build your nav links
        const links = `
            <nav class="drg-navbar-links">
                <a href="${mw.util.getUrl('Catalogue')}">Catalogue</a>
                <a href="${mw.util.getUrl('Definitions')}">Definitions</a>
                <a href="${mw.util.getUrl('Resources')}">Resources</a>
                <a href="${mw.util.getUrl('Contribute')}">Contribute</a>
            </nav>`;

        // 5) Inject the navbar at top of <body>
        $('body').prepend(`
            <div id="drg-navbar">
                <div class="drg-navbar-container">
                    <a href="${mw.util.getUrl('Main_Page')}" class="drg-navbar-logo">
                        <img src="${logoSrc}" alt="MYRIAD Logo">
                    </a>
                    ${links}
                    ${searchClone}
                    <div class="drg-navbar-actions">
                        ${userArea}
                    </div>
                </div>
            </div>
        `);

        // 6) Footer injection (unchanged)
        function insertFooter() {
            const icons = $('#footer-icons');
            if (!icons.length) return setTimeout(insertFooter, 100);
            icons.before(`
                <div id="drg-footer">
                    <!-- your existing footer markup here -->
                </div>
            `);
        }
        insertFooter();
    });
});