MediaWiki:Common.js: Difference between revisions

From UO Renaissance Wiki
Jump to navigation Jump to search
Add The World and Skills dropdowns in Compendium sidebar
Update Compendium sidebar dropdowns to hover-over flyout submenus
Line 1: Line 1:
/* UO Renaissance Wiki Common.js */
/* UO Renaissance Wiki Common.js */
(function() {
(function() {
   function initCompendiumDropdowns() {
   // Add Hover Flyout Submenus for The World & Skills inside Compendium
    var compendiumPortal = document.getElementById('p-Compendium');
  var compendiumPortal = document.getElementById('p-Compendium');
     if (!compendiumPortal) return;
  if (compendiumPortal) {
     function attachSidebarSubmenu(liSelector, titleMatch, items) {
      var li = compendiumPortal.querySelector(liSelector) ||
              compendiumPortal.querySelector('a[href*="' + titleMatch + '"]')?.closest('li');
      if (!li || li.querySelector('.uor-sidebar-submenu')) return;


    // 1. The World Dropdown
      li.classList.add('uor-sidebar-has-submenu');
    var worldLi = compendiumPortal.querySelector('li#n-The-World') ||
                  compendiumPortal.querySelector('a[href*="/wiki/index.php/The_World"]')?.closest('li');
    if (worldLi && !worldLi.querySelector('.uor-world-dropdown-wrap')) {
      var worldWrap = document.createElement('div');
      worldWrap.className = 'uor-world-dropdown-wrap';
      worldWrap.innerHTML = '<select class="uor-world-dropdown-select" aria-label="Select World Section">' +
        '<option value="/wiki/index.php/The_World">World Sections...</option>' +
        '<option value="/wiki/index.php/The_World#Towns">Towns</option>' +
        '<option value="/wiki/index.php/The_World#Dungeons">Dungeons</option>' +
        '<option value="/wiki/index.php/The_World#Points_of_Interest">Points of Interest</option>' +
      '</select>';


       var worldSelect = worldWrap.querySelector('select');
       var link = li.querySelector(':scope > a');
       var currentPath = window.location.pathname + window.location.hash;
       if (link && !link.querySelector('.uor-submenu-arrow')) {
      for (var i = 0; i < worldSelect.options.length; i++) {
        var arrow = document.createElement('span');
        if (worldSelect.options[i].value && currentPath.indexOf(worldSelect.options[i].value) !== -1) {
        arrow.className = 'uor-submenu-arrow';
           worldSelect.selectedIndex = i;
        arrow.innerHTML = '&#9656;';
           break;
        arrow.title = 'View Sections';
         }
        arrow.addEventListener('click', function(e) {
          e.preventDefault();
           e.stopPropagation();
           li.classList.toggle('is-open');
         });
        link.appendChild(arrow);
       }
       }


       worldSelect.addEventListener('change', function() {
       var submenu = document.createElement('ul');
        if (this.value) {
      submenu.className = 'uor-sidebar-submenu';
          window.location.href = this.value;
      var html = '';
        }
      for (var i = 0; i < items.length; i++) {
       });
        html += '<li><a href="' + items[i].href + '">' + items[i].label + '</a></li>';
      }
       submenu.innerHTML = html;
      li.appendChild(submenu);
    }


       worldLi.appendChild(worldWrap);
    // 1. The World Submenu
    }
    attachSidebarSubmenu('li#n-The-World', '/wiki/index.php/The_World', [
      { label: 'Towns', href: '/wiki/index.php/The_World#Towns' },
      { label: 'Dungeons', href: '/wiki/index.php/The_World#Dungeons' },
       { label: 'Points of Interest', href: '/wiki/index.php/The_World#Points_of_Interest' }
    ]);


     // 2. Skills Dropdown
     // 2. Skills Submenu
     var skillsLi = compendiumPortal.querySelector('li#n-Skills') ||
     attachSidebarSubmenu('li#n-Skills', '/wiki/index.php/Skills', [
                  compendiumPortal.querySelector('li#n-Skills-Overview') ||
      { label: 'Combat', href: '/wiki/index.php/Skills#Combat' },
                  compendiumPortal.querySelector('a[href*="/wiki/index.php/Skills"]')?.closest('li');
      { label: 'Crafting', href: '/wiki/index.php/Skills#Crafting' },
    if (skillsLi && !skillsLi.querySelector('.uor-skills-dropdown-wrap')) {
      { label: 'Creatures', href: '/wiki/index.php/Skills#Creatures' },
      var wrap = document.createElement('div');
      { label: 'Lore & Knowledge', href: '/wiki/index.php/Skills#Lore_&_Knowledge' },
      wrap.className = 'uor-skills-dropdown-wrap';
      { label: 'Miscellaneous', href: '/wiki/index.php/Skills#Miscellaneous' },
      wrap.innerHTML = '<select class="uor-skills-dropdown-select" aria-label="Select Skill Section">' +
      { label: 'Rogue', href: '/wiki/index.php/Skills#Rogue' },
        '<option value="/wiki/index.php/Skills">Skill Sections...</option>' +
      { label: 'Spells & Magic', href: '/wiki/index.php/Spells' }
        '<option value="/wiki/index.php/Skills#Combat">Combat</option>' +
    ]);
        '<option value="/wiki/index.php/Skills#Crafting">Crafting</option>' +
        '<option value="/wiki/index.php/Skills#Creatures">Creatures</option>' +
        '<option value="/wiki/index.php/Skills#Lore_&_Knowledge">Lore & Knowledge</option>' +
        '<option value="/wiki/index.php/Skills#Miscellaneous">Miscellaneous</option>' +
        '<option value="/wiki/index.php/Skills#Rogue">Rogue</option>' +
        '<option value="/wiki/index.php/Spells">Spells & Magic</option>' +
      '</select>';


       var select = wrap.querySelector('select');
    document.addEventListener('click', function(e) {
      var currentPath = window.location.pathname + window.location.hash;
       if (!e.target.closest('.uor-sidebar-has-submenu')) {
      for (var i = 0; i < select.options.length; i++) {
        var openMenus = document.querySelectorAll('.uor-sidebar-has-submenu.is-open');
        if (select.options[i].value && currentPath.indexOf(select.options[i].value) !== -1) {
        for (var i = 0; i < openMenus.length; i++) {
          select.selectedIndex = i;
          openMenus[i].classList.remove('is-open');
          break;
         }
         }
       }
       }
 
     });
      select.addEventListener('change', function() {
        if (this.value) {
          window.location.href = this.value;
        }
      });
 
      skillsLi.appendChild(wrap);
    }
  }
 
  if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', initCompendiumDropdowns);
  } else {
    initCompendiumDropdowns();
   }
   }
})();
})();

Revision as of 13:38, 8 September 2026

/* UO Renaissance Wiki Common.js */
(function() {
  // Add Hover Flyout Submenus for The World & Skills inside Compendium
  var compendiumPortal = document.getElementById('p-Compendium');
  if (compendiumPortal) {
    function attachSidebarSubmenu(liSelector, titleMatch, items) {
      var li = compendiumPortal.querySelector(liSelector) ||
               compendiumPortal.querySelector('a[href*="' + titleMatch + '"]')?.closest('li');
      if (!li || li.querySelector('.uor-sidebar-submenu')) return;

      li.classList.add('uor-sidebar-has-submenu');

      var link = li.querySelector(':scope > a');
      if (link && !link.querySelector('.uor-submenu-arrow')) {
        var arrow = document.createElement('span');
        arrow.className = 'uor-submenu-arrow';
        arrow.innerHTML = '&#9656;';
        arrow.title = 'View Sections';
        arrow.addEventListener('click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          li.classList.toggle('is-open');
        });
        link.appendChild(arrow);
      }

      var submenu = document.createElement('ul');
      submenu.className = 'uor-sidebar-submenu';
      var html = '';
      for (var i = 0; i < items.length; i++) {
        html += '<li><a href="' + items[i].href + '">' + items[i].label + '</a></li>';
      }
      submenu.innerHTML = html;
      li.appendChild(submenu);
    }

    // 1. The World Submenu
    attachSidebarSubmenu('li#n-The-World', '/wiki/index.php/The_World', [
      { label: 'Towns', href: '/wiki/index.php/The_World#Towns' },
      { label: 'Dungeons', href: '/wiki/index.php/The_World#Dungeons' },
      { label: 'Points of Interest', href: '/wiki/index.php/The_World#Points_of_Interest' }
    ]);

    // 2. Skills Submenu
    attachSidebarSubmenu('li#n-Skills', '/wiki/index.php/Skills', [
      { label: 'Combat', href: '/wiki/index.php/Skills#Combat' },
      { label: 'Crafting', href: '/wiki/index.php/Skills#Crafting' },
      { label: 'Creatures', href: '/wiki/index.php/Skills#Creatures' },
      { label: 'Lore & Knowledge', href: '/wiki/index.php/Skills#Lore_&_Knowledge' },
      { label: 'Miscellaneous', href: '/wiki/index.php/Skills#Miscellaneous' },
      { label: 'Rogue', href: '/wiki/index.php/Skills#Rogue' },
      { label: 'Spells & Magic', href: '/wiki/index.php/Spells' }
    ]);

    document.addEventListener('click', function(e) {
      if (!e.target.closest('.uor-sidebar-has-submenu')) {
        var openMenus = document.querySelectorAll('.uor-sidebar-has-submenu.is-open');
        for (var i = 0; i < openMenus.length; i++) {
          openMenus[i].classList.remove('is-open');
        }
      }
    });
  }
})();