MediaWiki:Common.js: Difference between revisions

From Disaster Risk Gateway
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
mw.loader.using(['mediawiki.util','mediawiki.user'], function () {
// Ensure mediawiki.util is available, then run on DOM ready
  function insertNavbar() {
mw.loader.using('mediawiki.util', function () {
    // 1. If we've already injected, bail
    $(document).ready(function () {
    if ( document.getElementById('drg-navbar') ) return;
        // Avoid double-injection
        if ($('#drg-navbar').length) return;


    // 2. Grab your real logo SRC before we remove headers
        // 1) pull your current logo (fallback to a known path)
    const logoSrc = document.querySelector('#p-logo img')?.src ||
        const logoSrc = $('#p-logo img').attr('src')
                    '/images/3/3f/Myriad_logo_icon_transparent.png';
            || '/images/3/3f/Myriad_logo_icon_transparent.png';


    // 3. Remove every Vector / MobileFrontend header element
        // 2) Build the user-dropdown or Login button
    //    - body > header (Vector 2022)
        const userName = mw.config.get('wgUserName');
    //    - header.vector-header, header#mw-header, nav.vector-header
        let userArea;
    //    - MobileFrontend wrappers (#mw-mf-page-header, id^="mw-mf-")
        if (userName) {
    document.querySelectorAll('body > header').forEach(el => el.remove());
            const menu = $('#p-personal ul').clone()
    [
                .addClass('drg-user-dropdown')
      'header.vector-header',
                .find('li').css('border', 'none').end();
      'header#mw-header',
            userArea = `<div class="drg-user">
      'nav.vector-header',
                <span>Welcome, ${userName}</span>
      '#mw-mf-page-header',
                ${menu.prop('outerHTML')}
      '[id^="mw-mf-"]'
            </div>`;
    ].forEach(sel =>
        } else {
      document.querySelectorAll(sel).forEach(el => el.remove())
            userArea = `<a class="drg-button" href="${mw.util.getUrl('Special:UserLogin')}">Login</a>`;
    );
        }


    // 4. Build user area: dropdown if logged in, else Login button
        // 3) Clone the built-in search form
    const userName = mw.config.get('wgUserName');
        const searchClone = $('#p-search form').clone()
    let userArea;
            .wrap('<div class="drg-search"></div>')
    if ( userName ) {
            .parent()[0].outerHTML;
      const personalMenu = $('#p-personal ul').clone();
      personalMenu.addClass('drg-user-dropdown');
      personalMenu.find('li').css('border','none');
      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>`;
    }


    // 5. Build search form
        // 4) Build your nav links
    const searchForm = `
        const links = `
      <form class="drg-search" action="${
            <nav class="drg-navbar-links">
        mw.util.getUrl('Special:Search')
                <a href="${mw.util.getUrl('Catalogue')}">Catalogue</a>
      }" method="get">
                <a href="${mw.util.getUrl('Definitions')}">Definitions</a>
        <input type="search" name="search"
                <a href="${mw.util.getUrl('Resources')}">Resources</a>
              placeholder="Search Disaster Risk Gateway">
                <a href="${mw.util.getUrl('Contribute')}">Contribute</a>
        <input type="submit" value="Search">
            </nav>`;
      </form>`;


    // 6. Inject navbar into body
        // 5) Inject the navbar at top of <body>
    $('body').prepend(`
        $('body').prepend(`
      <div id="drg-navbar">
            <div id="drg-navbar">
        <div class="drg-navbar-container">
                <div class="drg-navbar-container">
          <a href="${mw.util.getUrl('Main_Page')}"
                    <a href="${mw.util.getUrl('Main_Page')}" class="drg-navbar-logo">
            class="drg-navbar-logo">
                        <img src="${logoSrc}" alt="MYRIAD Logo">
            <img src="${logoSrc}" alt="MYRIAD Logo">
                    </a>
          </a>
                    ${links}
          <nav class="drg-navbar-links">
                    ${searchClone}
            <a href="${mw.util.getUrl('Catalogue')}">Catalogue</a>
                    <div class="drg-navbar-actions">
            <a href="${mw.util.getUrl('Definitions')}">Definitions</a>
                        ${userArea}
            <a href="${mw.util.getUrl('Resources')}">Resources</a>
                    </div>
            <a href="${mw.util.getUrl('Contribute')}">Contribute</a>
                </div>
          </nav>
            </div>
          ${searchForm}
        `);
          <div class="drg-navbar-actions">
            ${userArea}
          </div>
        </div>
      </div>
    `);
  }


  function insertFooter() {
        // 6) Footer injection (unchanged)
    const icons = document.getElementById('footer-icons');
        function insertFooter() {
    if ( !icons ) return setTimeout(insertFooter, 100);
            const icons = $('#footer-icons');
    $(icons).before(`
            if (!icons.length) return setTimeout(insertFooter, 100);
      <div id="drg-footer">
            icons.before(`
        <!-- (your existing footer markup here) -->
                <div id="drg-footer">
      </div>
                    <!-- your existing footer markup here -->
    `);
                </div>
  }
            `);
 
        }
  // Run on DOM ready
        insertFooter();
  $(insertNavbar);
    });
  $(insertFooter);
});
});

Revision as of 14:20, 24 June 2025

// Ensure mediawiki.util is available, then run on DOM ready
mw.loader.using('mediawiki.util', function () {
    $(document).ready(function () {
        // Avoid double-injection
        if ($('#drg-navbar').length) return;

        // 1) pull your current logo (fallback to a known path)
        const logoSrc = $('#p-logo img').attr('src')
            || '/images/3/3f/Myriad_logo_icon_transparent.png';

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

        // 3) Clone the built-in search form
        const searchClone = $('#p-search form').clone()
            .wrap('<div class="drg-search"></div>')
            .parent()[0].outerHTML;

        // 4) Build your 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 the navbar at top of <body>
        $('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}
                    ${searchClone}
                    <div class="drg-navbar-actions">
                        ${userArea}
                    </div>
                </div>
            </div>
        `);

        // 6) Footer injection (unchanged)
        function insertFooter() {
            const icons = $('#footer-icons');
            if (!icons.length) return setTimeout(insertFooter, 100);
            icons.before(`
                <div id="drg-footer">
                    <!-- your existing footer markup here -->
                </div>
            `);
        }
        insertFooter();
    });
});
Retrieved from "https://myriad-staging.bgs.ac.uk/index.php?title=MediaWiki:Common.js&oldid=2990"