MediaWiki:Common.js

mw.loader.using('mediawiki.util', function () {
    $(document).ready(function () {
        // Prevent reinjection
        if ($('#drg-navbar').length) return;

        // 1) Grab Vector’s built-in logo icon
        const logoSrc = $('.mw-logo-icon').attr('src')
            || '/images/3/3f/Myriad_logo_icon_transparent.png';

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

        // 3) Manual search form
        const searchForm = `
            <form class="drg-search"
                  action="${mw.util.getUrl('Special:Search')}"
                  method="get">
                <input type="search" name="search"
                       placeholder="Search Disaster Risk Gateway">
                <input type="submit" value="Search">
            </form>`;

        // 4) 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 navbar
        $('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}
                    ${searchForm}
                    <div class="drg-navbar-actions">
                        ${userArea}
                    </div>
                </div>
            </div>
        `);

        // 6) Restore your original footer
        function insertFooter() {
            const icons = document.getElementById('footer-icons');
            if (!icons) return setTimeout(insertFooter, 100);
            icons.insertAdjacentHTML('beforebegin', `
                <div id="drg-footer">
                    <div class="drg-columns">
                        <div class="drg-column drg-column-left">
                            <a href="/index.php/Disaster_Risk_Gateway">About</a>
                            <a href="/index.php/Disaster_Risk_Gateway:Privacy_Notice">Privacy Notice</a>
                            <a href="/index.php/Disaster_Risk_Gateway:Terms_of_Use">Terms of Use</a>
                            <a href="mailto:DisasterRiskGateway@bgs.ac.uk">
                                <strong>Contact Us</strong>
                            </a>
                        </div>
                        <div class="drg-divider"></div>
                        <div class="drg-column drg-column-center">
                            <div class="drg-eu-flag">
                                <img src="/images/e/e3/Normal-reproduction-high-resolution_2.jpg"
                                     alt="EU logo">
                            </div>
                            <div class="drg-eu-text">
                                MYRIAD-EU project has received funding from
                                the European Union’s Horizon 2020 Research and
                                Innovation Programme under Grant Agreement No. 101003276.
                            </div>
                        </div>
                        <div class="drg-divider"></div>
                        <div class="drg-column drg-column-right">
                            <a href="https://www.myriadproject.eu"
                               target="_blank" rel="noopener">MYRIAD-EU</a>
                            <a href="https://be.linkedin.com/company/myriad-eu-project?trk=public_post_feed-actor-name"
                               target="_blank" rel="noopener">LinkedIn</a>
                            <a href="#" target="_blank" rel="noopener">MYRIAD-EU dashboard</a>
                        </div>
                    </div>
                    <div class="drg-disclaimer">
                        This site is hosted by the British Geological Survey but
                        responsibility for the content of the site lies with the
                        MYRIAD-EU project, not with the British Geological Survey.
                        Questions, suggestions, or comments regarding the contents
                        of this site should be directed to
                        <a href="mailto:DisasterRiskGateway@bgs.ac.uk">
                            DisasterRiskGateway@bgs.ac.uk
                        </a>.
                    </div>
                </div>
            `);
        }
        insertFooter();
    });
});