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.

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

    // 2) Force-logo: drop in your actual path here!
    const logoSrc = '/path/to/your/logo.png';

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

    // 4) Manual search form (no overlap)
    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) Prepend 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>
    `);

    // 7) Restore original footer JS
    function insertFooter() {
      const icons = $('#footer-icons');
      if (!icons.length) return setTimeout(insertFooter, 100);
      icons.before(`
        <div id="drg-footer">
          <!-- your original footer HTML here -->
        </div>
      `);
    }
    insertFooter();
  });
});