MediaWiki:Common.js: Difference between revisions

From Disaster Risk Gateway
← Older edit
No edit summary
Tag: Reverted
Undo revision 3068 by Myriad-admin (talk)
Tag: Undo
 
Line 1: Line 1:
mw.loader.using('mediawiki.util', function () {
mw.loader.using('mediawiki.util').then(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">
      </a>`;
 
    // ===== Navigation Dropdown =====
    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 Dropdown (toggle + form) =====
    const searchDropdownHtml = `
      <div id="drg-search-dropdown" class="drg-search-dropdown-wrapper" style="position: relative; display: inline-block;">
        <span id="drg-search-toggle" class="flat-link" style="cursor:pointer;">Search</span>
        <form class="drg-search" id="drg-search-form" action="${mw.util.getUrl('Special:Search')}" method="get" style="display:none; position: absolute; top: 100%; left: 0; background: white; padding: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 100;">
          <input type="search" name="search" placeholder="Search..." style="width: 200px;">
          <input type="submit" value="Search">
        </form>
      </div>`;
 
    // ===== User Account 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>`;
 
    // ===== Inject Navbar =====
    $('body').prepend(`
      <div id="drg-navbar">
        <div class="drg-navbar-container">
          ${logoHtml}
          ${navHtml}
          ${flatHtml}
          ${searchDropdownHtml}
          <div class="drg-navbar-actions">
            ${userHtml}
            ${toolsHtml}
          </div>
        </div>
      </div>
    `);
 
    // ===== Toggle search input visibility =====
    $('#drg-search-toggle').on('click', function (e) {
      e.preventDefault();
      e.stopPropagation();
      $('#drg-search-form').toggle();
      $('#drg-search-form input[type="search"]').focus();
    });
 
    // Close search dropdown when clicking outside
    $(document).on('click', function () {
      $('#drg-search-form').hide();
    });
 
    // Prevent clicks inside the form from closing it
    $('#drg-search-form').on('click', function (e) {
      e.stopPropagation();
    });
 
    // ===== Inject Footer =====
     function insertFooter() {
     function insertFooter() {
      const icons = document.getElementById('footer-icons');
        var $icons = $('#footer-icons');
      if (!icons) return setTimeout(insertFooter, 100);
        if (!$icons.length) return setTimeout(insertFooter, 100);
 
        $icons.before(`
      icons.insertAdjacentHTML('beforebegin', `
            <div id="drg-footer">
        <footer id="drg-footer">
                <div class="drg-columns">
          <div class="drg-footer-inner">
                    <div class="drg-column drg-column-left">
            <div class="drg-columns">
                        <a href="/index.php/Disaster_Risk_Gateway">About</a>
              <div class="drg-column drg-column-left">
                        <a href="/index.php/Disaster_Risk_Gateway:Privacy_Notice">Privacy Notice</a>
                <a href="/index.php/Disaster_Risk_Gateway">About</a>
                        <a href="/index.php/Disaster_Risk_Gateway:Terms_of_Use">Terms of Use</a>
                <a href="/index.php/Disaster_Risk_Gateway:Privacy_Notice">Privacy Notice</a>
                        <a href="mailto:DisasterRiskGateway@bgs.ac.uk"><strong>Contact Us</strong></a>
                <a href="/index.php/Disaster_Risk_Gateway:Terms_of_Use">Terms of Use</a>
                    </div>
                <a href="mailto:DisasterRiskGateway@bgs.ac.uk"><strong>Contact Us</strong></a>
                    <div class="drg-divider"></div>
              </div>
                    <div class="drg-column drg-column-center">
              <div class="drg-column drg-column-center">
                        <div class="drg-eu-flag">
                <div class="drg-eu-flag">
                            <img src="/images/e/e3/Normal-reproduction-high-resolution_2.jpg" alt="EU logo">
                  <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?trk=public_post_feed-actor-name" target="_blank" rel="noopener">LinkedIn</a>
                        <a href="#" target="_blank" rel="noopener">MYRIAD-EU dashboard</a>
                    </div>
                 </div>
                 </div>
                 <div class="drg-eu-text">
                 <div class="drg-disclaimer">
                  MYRIAD-EU project has received funding from the European Union’s Horizon 2020 Research and Innovation Programme under Grant Agreement No. 101003276.
                    This site is hosted by the British Geological Survey but responsibility for the content of the site lies with the
  <a href="https://www.myriadproject.eu" target="_blank" rel="noopener noreferrer">MYRIAD-EU</a> project. Questions or comments: <a href="mailto:DisasterRiskGateway@bgs.ac.uk">DisasterRiskGateway@bgs.ac.uk</a>
                 </div>
                 </div>
              </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 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
                <a href="https://www.myriadproject.eu" target="_blank" rel="noopener noreferrer">MYRIAD-EU project</a>.<br>
                Questions or comments: <a href="mailto:DisasterRiskGateway@bgs.ac.uk">DisasterRiskGateway@bgs.ac.uk</a>
              </div>
             </div>
             </div>
          </div>
         `);
         </footer>
      `);
     }
     }
     insertFooter();
     insertFooter();
  });
});
});

Latest revision as of 12:31, 3 September 2025

mw.loader.using('mediawiki.util').then(function () {
    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?trk=public_post_feed-actor-name" 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 
  <a href="https://www.myriadproject.eu" target="_blank" rel="noopener noreferrer">MYRIAD-EU</a> project. Questions or comments: <a href="mailto:DisasterRiskGateway@bgs.ac.uk">DisasterRiskGateway@bgs.ac.uk</a>
                </div>
            </div>
        `);
    }
    insertFooter();
});
Retrieved from "https://disasterriskgateway.net/index.php?title=MediaWiki:Common.js&oldid=3071"