MediaWiki:Common.js

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

    // Logo
    const logoSrc = $('.mw-logo-icon').attr('src') || '/images/3/3f/Myriad_logo_icon_transparent.png';
    const logoHtml = `
      <a href="${mw.util.getUrl('Main_Page')}" class="drg-navbar-logo">
        <img src="${logoSrc}" alt="MYRIAD Logo">
        <span class="drg-logo-text">DRG</span>
      </a>`;

    // Navigation
    const navItems = [
      { title: 'Catalogue',   url: mw.util.getUrl('Catalogue') },
      { title: 'Definitions', url: mw.util.getUrl('Definitions') },
      { title: 'Resources',   url: mw.util.getUrl('Resources') }
    ];
    const navHtml = `
      <div class="drg-nav">
        <span>Navigation</span>
        <ul class="drg-nav-dropdown">
          ${navItems.map(i => `<li><a href="${i.url}">${i.title}</a></li>`).join('')}
        </ul>
      </div>`;

    // Flat links
    const flatHtml = `
      <a href="${mw.util.getUrl('Contribute')}" class="flat-link">Contribute</a>
      <a href="${mw.util.getUrl('Disaster_Risk_Gateway')}" class="flat-link">About</a>`;

    // Search
    const searchHtml = `
      <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>`;

    // User dropdown
    let userHtml;
    if (mw.config.get('wgUserName')) {
      const items = [];
      $('#p-personal ul li').each(function () {
        const a = $(this).find('a');
        if (a.attr('href').includes('Watchlist')) return;
        items.push(`<li>${a.prop('outerHTML')}</li>`);
      });
      items.push(`<li><a href="${mw.util.getUrl('Special:UserLogout')}">Logout</a></li>`);
      userHtml = `
        <div class="drg-user">
          <span>Welcome, ${mw.config.get('wgUserName')}</span>
          <ul class="drg-user-dropdown">${items.join('')}</ul>
        </div>`;
    } else {
      userHtml = `<a class="drg-button" href="${mw.util.getUrl('Special:UserLogin')}">Login</a>`;
    }

    // Tools dropdown
    const toolsItems = $('#p-cactions ul li').map(function () {
      return `<li>${$(this).find('a').prop('outerHTML')}</li>`;
    }).get().join('');
    const toolsHtml = `
      <div class="drg-tools">
        <span>Tools</span>
        <ul class="drg-tools-dropdown">${toolsItems}</ul>
      </div>`;

    // Navbar inject
    $('body').prepend(`
      <div id="drg-navbar">
        <div class="drg-navbar-container">
          ${logoHtml}
          ${navHtml}
          ${flatHtml}
          ${searchHtml}
          <div class="drg-navbar-actions">
            ${userHtml}
            ${toolsHtml}
          </div>
        </div>
      </div>
    `);

    // Footer
    function insertFooter() {
      const icons = document.getElementById('footer-icons');
      if (!icons) return setTimeout(insertFooter, 100);

      icons.insertAdjacentHTML('beforebegin', `
        <footer id="drg-footer">
          <div class="drg-footer-inner">
            <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">MYRIAD-EU</a>
                <a href="https://be.linkedin.com/company/myriad-eu-project" target="_blank">LinkedIn</a>
                <a href="#" target="_blank">MYRIAD-EU dashboard</a>
              </div>
            </div>
          </div>
          <div class="drg-disclaimer-wrapper">
            <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 should be directed to 
              <a href="mailto:DisasterRiskGateway@bgs.ac.uk">DisasterRiskGateway@bgs.ac.uk</a>.
            </div>
          </div>
        </footer>
      `);
    }

    insertFooter();
  });
});