MediaWiki:Common.js

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

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

    // 2) Build “Myriad-admin” dropdown (personal + page actions)
    const userName = mw.config.get('wgUserName');
    let userArea = '';
    if (userName) {
      // personal links
      const personalLis = [];
      $('#p-personal ul li').each(function() {
        personalLis.push($(this).find('a').prop('outerHTML'));
      });
      // page actions
      const pageLis = [];
      $('#p-views ul li').each(function() {
        pageLis.push($(this).find('a').prop('outerHTML'));
      });
      const userItems = [...personalLis, ...pageLis]
        .map(html => `<li>${html}</li>`).join('');
      userArea = `<div class="drg-user">
        <span>Welcome, ${userName}</span>
        <ul class="drg-user-dropdown">
          ${userItems}
        </ul>
      </div>`;
    } else {
      userArea = `<a class="drg-button"
        href="${mw.util.getUrl('Special:UserLogin')}">Login</a>`;
    }

    // 3) Build “Tools” dropdown
    const toolsLis = [];
    $('#p-cactions ul li').each(function() {
      toolsLis.push($(this).find('a').prop('outerHTML'));
    });
    const toolsItems = toolsLis.map(html => `<li>${html}</li>`).join('');
    const toolsArea = `<div class="drg-tools">
      <span>Tools</span>
      <ul class="drg-tools-dropdown">
        ${toolsItems}
      </ul>
    </div>`;

    // 4) 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>`;

    // 5) 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>`;

    // 6) Inject the custom 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}
            ${toolsArea}
          </div>
        </div>
      </div>
    `);

    // 7) Reinsert original footer
    function insertFooter() {
      const icons = document.getElementById('footer-icons');
      if (!icons) return setTimeout(insertFooter, 100);
      icons.insertAdjacentHTML('beforebegin', `
        <div id="drg-footer">
          <!-- your existing footer markup -->
          <div class="drg-columns">
            <!-- left, center, right columns -->
          </div>
          <div class="drg-disclaimer">
            <!-- disclaimer text -->
          </div>
        </div>
      `);
    }
    insertFooter();
  });
});