MediaWiki:Common.js

mw.loader.using(['mediawiki.util', 'mediawiki.user']).then(function () {
    function insertNavbar() {
        if (document.getElementById('drg-navbar')) return;

        const isLoggedIn = mw.config.get('wgUserName') !== null;
        const userButton = isLoggedIn
            ? `<span style="margin-left:1em;">Welcome, ${mw.config.get('wgUserName')}</span>`
            : `<a class="drg-button" href="/index.php/Special:UserLogin">Login</a>`;

        const searchClone = $('#p-search form').clone().wrap('<div class="drg-search"></div>').parent().html();

        $('body').prepend(`
            <div id="drg-navbar">
                <div class="drg-navbar-container">
                    <a href="/index.php/Main_Page" class="drg-navbar-logo">
                        <img src="/images/e/e3/Normal-reproduction-high-resolution_2.jpg" alt="MYRIAD-EU Logo" class="drg-logo-img">
                    </a>
                    <div class="drg-navbar-links">
                        <a href="/index.php/Catalogue">Catalogue</a>
                        <a href="/index.php/Definitions">Definitions</a>
                        <a href="/index.php/Resources">Resources</a>
                        <a href="/index.php/Contribute">Contribute</a>
                    </div>
                    ${searchClone}
                    <div class="drg-navbar-actions">
                        ${userButton}
                    </div>
                </div>
            </div>
        `);
    }

    function insertFooter() {
        var $icons = $('#footer-icons');
        if (!$icons.length) return setTimeout(insertFooter, 100);
        $icons.before(`
            <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" 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>
        `);
    }

    insertNavbar();
    insertFooter();
});