MediaWiki:Common.js: Difference between revisions

From Disaster Risk Gateway
← Older edit
No edit summary
No edit summary
 
Line 1: Line 1:
mw.loader.using('mediawiki.util', function () {
mw.loader.using(['mediawiki.util', 'mediawiki.searchSuggest'], function () {
   $(document).ready(function () {
   $(function () {
     if ($('#drg-navbar').length) return;
     if ($('#drg-navbar').length) return;
    // ===== Helpers =====
    function htmlFromPortlet(selector) {
      // Return array of <li>...</li> HTML for all anchors in a portlet list (if present)
      return $(selector).find('li a').map(function () {
        return '<li>' + $(this).prop('outerHTML') + '</li>';
      }).get();
    }
    function setBodyTopPaddingToNavbar() {
      var h = $('#drg-navbar').outerHeight() || 60;
      $('body').css('padding-top', h + 'px');
    }


     // ===== Logo =====
     // ===== Logo =====
Line 10: Line 23:
       </a>`;
       </a>`;


     // ===== Navigation Dropdown =====
     // ===== Build left-side links in order: About, Navigation, Contribute =====
    const aboutHtml = `<a href="${mw.util.getUrl('Disaster_Risk_Gateway')}" class="flat-link">About</a>`;
 
     const navItems = [
     const navItems = [
       { title: 'Catalogue',  url: mw.util.getUrl('Catalogue') },
       { title: 'Catalogue',  url: mw.util.getUrl('Catalogue') },
Line 24: Line 39:
       </div>`;
       </div>`;


    // ===== Flat Links =====
     const contributeHtml = `<a href="${mw.util.getUrl('Contribute')}" class="flat-link">Contribute</a>`;
     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) =====
     // ===== Search (with autocomplete) =====
     const searchDropdownHtml = `
     const searchDropdownHtml = `
       <div id="drg-search-dropdown" class="drg-search-dropdown-wrapper" style="position: relative; display: inline-block;">
       <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>
         <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;">
         <form class="drg-search" id="drg-search-form" action="${mw.util.getUrl('Special:Search')}" method="get"
           <input type="search" name="search" placeholder="Search..." style="width: 200px;">
              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..." class="mw-searchInput" autocapitalize="off" autocomplete="off">
           <input type="submit" value="Search">
           <input type="submit" value="Search">
         </form>
         </form>
       </div>`;
       </div>`;


     // ===== User Account Dropdown =====
     // ===== User dropdown =====
    // We restore Echo (alerts/notices) + Watchlist inside the dropdown.
     let userHtml;
     let userHtml;
     if (mw.config.get('wgUserName')) {
     if (mw.config.get('wgUserName')) {
       const items = [];
       const items = [];
      // Echo notifications (if present)
      const alertA  = $('#pt-notifications-alert a').first();
      const noticeA = $('#pt-notifications-notice a').first();
      if (alertA.length)  items.push(`<li>${alertA.prop('outerHTML')}</li>`);
      if (noticeA.length) items.push(`<li>${noticeA.prop('outerHTML')}</li>`);
      // Personal tools (except duplicate logout at the end)
       $('#p-personal ul li').each(function () {
       $('#p-personal ul li').each(function () {
         const a = $(this).find('a');
         const $a = $(this).find('a');
         if (a.attr('href').includes('Watchlist')) return;
         const href = ($a.attr('href') || '');
         items.push(`<li>${a.prop('outerHTML')}</li>`);
        const titleText = ($a.text() || '').trim();
 
        // Skip Echo items we already copied
        if (href.includes('Notifications') || href.includes('Echo')) return;
 
        // Keep Watchlist (EU reviewers wanted it)
        if (href.match(/Watchlist/i)) {
          items.push(`<li>${$a.prop('outerHTML')}</li>`);
          return;
        }
 
        // Skip Logout (we add a clean one at the end)
        if (titleText.match(/^log ?out$/i)) return;
 
        // Include everyone else (Preferences, Contributions, etc.)
         items.push(`<li>${$a.prop('outerHTML')}</li>`);
       });
       });
      // Add a divider then Logout
      items.push('<li class="drg-menu-divider"></li>');
       items.push(`<li><a href="${mw.util.getUrl('Special:UserLogout')}">Logout</a></li>`);
       items.push(`<li><a href="${mw.util.getUrl('Special:UserLogout')}">Logout</a></li>`);
       userHtml = `
       userHtml = `
         <div class="drg-user">
         <div class="drg-user">
Line 58: Line 99:
     }
     }


     // ===== Tools Dropdown =====
     // ===== Tools dropdown (merge Actions + General like production) =====
     const toolsItems = $('#p-cactions ul li').map(function () {
    // Actions: #p-cactions; General: #p-tb (Toolbox + extensions)
      return `<li>${$(this).find('a').prop('outerHTML')}</li>`;
     const actionsLis = htmlFromPortlet('#p-cactions');  // Actions
     }).get().join('');
    let  generalLis = htmlFromPortlet('#p-tb');        // General (What links here, Upload, Special pages, etc.)
 
    // Fallback: also look for toolbox under Vector-2022 portlet structure if needed
     if (generalLis.length === 0) {
      generalLis = htmlFromPortlet('#vector-page-tools, #p-tb-list, .vector-page-tools .vector-menu-content');
    }
 
     const toolsHtml = `
     const toolsHtml = `
       <div class="drg-tools">
       <div class="drg-tools">
         <span>Tools</span>
         <span>Tools</span>
         <ul class="drg-tools-dropdown">${toolsItems}</ul>
         <ul class="drg-tools-dropdown">
          ${actionsLis.length ? `<li class="drg-menu-header">Actions</li>${actionsLis.join('')}` : ''}
          ${actionsLis.length && generalLis.length ? '<li class="drg-menu-divider"></li>' : ''}
          ${generalLis.length ? `<li class="drg-menu-header">General</li>${generalLis.join('')}` : ''}
        </ul>
       </div>`;
       </div>`;


Line 73: Line 124:
         <div class="drg-navbar-container">
         <div class="drg-navbar-container">
           ${logoHtml}
           ${logoHtml}
          ${aboutHtml}
           ${navHtml}
           ${navHtml}
           ${flatHtml}
           ${contributeHtml}
           ${searchDropdownHtml}
           ${searchDropdownHtml}
           <div class="drg-navbar-actions">
           <div class="drg-navbar-actions">
Line 84: Line 136:
     `);
     `);


     // ===== Toggle search input visibility =====
     // ===== Toggle search input visibility + autocomplete focus =====
     $('#drg-search-toggle').on('click', function (e) {
     $('#drg-search-toggle').on('click', function (e) {
       e.preventDefault();
       e.preventDefault();
       e.stopPropagation();
       e.stopPropagation();
       $('#drg-search-form').toggle();
       $('#drg-search-form').toggle();
       $('#drg-search-form input[type="search"]').focus();
       $('#drg-search-form input[type="search"]').trigger('focus');
     });
     });


     // Close search dropdown when clicking outside
     // Close search dropdown when clicking outside
     $(document).on('click', function () {
     $(document).on('click', function () { $('#drg-search-form').hide(); });
      $('#drg-search-form').hide();
     $('#drg-search-form').on('click', function (e) { e.stopPropagation(); });
     });


     // Prevent clicks inside the form from closing it
     // Make sure body top padding matches navbar height (since it can wrap)
     $('#drg-search-form').on('click', function (e) {
    setBodyTopPaddingToNavbar();
      e.stopPropagation();
     $(window).on('load resize', setBodyTopPaddingToNavbar);
    });


     // ===== Inject Footer =====
     // ===== Footer =====
     function insertFooter() {
     function insertFooter() {
       const icons = document.getElementById('footer-icons');
       const icons = document.getElementById('footer-icons');
Line 142: Line 192:
       `);
       `);
     }
     }
     insertFooter();
     insertFooter();
   });
   });
});
});

Latest revision as of 11:09, 30 September 2025

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

    // ===== Helpers =====
    function htmlFromPortlet(selector) {
      // Return array of <li>...</li> HTML for all anchors in a portlet list (if present)
      return $(selector).find('li a').map(function () {
        return '<li>' + $(this).prop('outerHTML') + '</li>';
      }).get();
    }

    function setBodyTopPaddingToNavbar() {
      var h = $('#drg-navbar').outerHeight() || 60;
      $('body').css('padding-top', h + 'px');
    }

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

    // ===== Build left-side links in order: About, Navigation, Contribute =====
    const aboutHtml = `<a href="${mw.util.getUrl('Disaster_Risk_Gateway')}" class="flat-link">About</a>`;

    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>`;

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

    // ===== Search (with autocomplete) =====
    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..." class="mw-searchInput" autocapitalize="off" autocomplete="off">
          <input type="submit" value="Search">
        </form>
      </div>`;

    // ===== User dropdown =====
    // We restore Echo (alerts/notices) + Watchlist inside the dropdown.
    let userHtml;
    if (mw.config.get('wgUserName')) {
      const items = [];

      // Echo notifications (if present)
      const alertA  = $('#pt-notifications-alert a').first();
      const noticeA = $('#pt-notifications-notice a').first();
      if (alertA.length)  items.push(`<li>${alertA.prop('outerHTML')}</li>`);
      if (noticeA.length) items.push(`<li>${noticeA.prop('outerHTML')}</li>`);

      // Personal tools (except duplicate logout at the end)
      $('#p-personal ul li').each(function () {
        const $a = $(this).find('a');
        const href = ($a.attr('href') || '');
        const titleText = ($a.text() || '').trim();

        // Skip Echo items we already copied
        if (href.includes('Notifications') || href.includes('Echo')) return;

        // Keep Watchlist (EU reviewers wanted it)
        if (href.match(/Watchlist/i)) {
          items.push(`<li>${$a.prop('outerHTML')}</li>`);
          return;
        }

        // Skip Logout (we add a clean one at the end)
        if (titleText.match(/^log ?out$/i)) return;

        // Include everyone else (Preferences, Contributions, etc.)
        items.push(`<li>${$a.prop('outerHTML')}</li>`);
      });

      // Add a divider then Logout
      items.push('<li class="drg-menu-divider"></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 (merge Actions + General like production) =====
    // Actions: #p-cactions; General: #p-tb (Toolbox + extensions)
    const actionsLis = htmlFromPortlet('#p-cactions');  // Actions
    let   generalLis = htmlFromPortlet('#p-tb');        // General (What links here, Upload, Special pages, etc.)

    // Fallback: also look for toolbox under Vector-2022 portlet structure if needed
    if (generalLis.length === 0) {
      generalLis = htmlFromPortlet('#vector-page-tools, #p-tb-list, .vector-page-tools .vector-menu-content');
    }

    const toolsHtml = `
      <div class="drg-tools">
        <span>Tools</span>
        <ul class="drg-tools-dropdown">
          ${actionsLis.length ? `<li class="drg-menu-header">Actions</li>${actionsLis.join('')}` : ''}
          ${actionsLis.length && generalLis.length ? '<li class="drg-menu-divider"></li>' : ''}
          ${generalLis.length ? `<li class="drg-menu-header">General</li>${generalLis.join('')}` : ''}
        </ul>
      </div>`;

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

    // ===== Toggle search input visibility + autocomplete focus =====
    $('#drg-search-toggle').on('click', function (e) {
      e.preventDefault();
      e.stopPropagation();
      $('#drg-search-form').toggle();
      $('#drg-search-form input[type="search"]').trigger('focus');
    });

    // Close search dropdown when clicking outside
    $(document).on('click', function () { $('#drg-search-form').hide(); });
    $('#drg-search-form').on('click', function (e) { e.stopPropagation(); });

    // Make sure body top padding matches navbar height (since it can wrap)
    setBodyTopPaddingToNavbar();
    $(window).on('load resize', setBodyTopPaddingToNavbar);

    // ===== 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-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-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>
        </footer>
      `);
    }
    insertFooter();
  });
});
Retrieved from "https://myriad-staging.bgs.ac.uk/index.php?title=MediaWiki:Common.js&oldid=3363"