MediaWiki:Common.js

// Final Radial Menu with Square Buttons and Home Icon
$(document).ready(function() {
  // Remove the "From Dune Awakening DB" tagline
  $('#tagline').remove();
  
  // Reduce spacing above the title
  $('h1.title, .mw-page-title-main, h1.firstHeading').css({
    'margin-top': '0',
    'padding-top': '5px',
    'line-height': '1.2'
  });
  
  // Define menu items with their subcategories
  const menuItems = [
    { 
      id: "resources", 
      name: "Resources", 
      shortname: "Resou",
      icon: "https://dunedb.com/images/0/08/ResourcesNavIcon.png", 
      position: "north",
      subcategories: [
        { name: "Metals", url: "https://dunedb.com/Resources/Metals" },
        { name: "Chemicals", url: "https://dunedb.com/Resources/Chemicals" }
      ]
    },
    { 
      id: "crafting", 
      name: "Crafting", 
      shortname: "Craft",
      icon: "https://dunedb.com/images/d/d7/CraftingNavIcon.png", 
      position: "northeast",
      subcategories: [
        { name: "Blueprints", url: "https://dunedb.com/Crafting/Blueprints" },
        { name: "Stations", url: "https://dunedb.com/Crafting/Stations" }
      ]
    },
    { 
      id: "refining", 
      name: "Refining", 
      shortname: "Refin",
      icon: "https://dunedb.com/images/5/5e/RefiningNavIcon.png", 
      position: "east",
      subcategories: [
        { name: "Refineries", url: "https://dunedb.com/Refining/Refineries" },
        { name: "Processes", url: "https://dunedb.com/Refining/Processes" }
      ]
    },
    { 
      id: "vehicles", 
      name: "Vehicles", 
      shortname: "Vehic",
      icon: "https://dunedb.com/images/0/06/VehiclesNavIcon.png", 
      position: "southeast",
      subcategories: [
        { name: "Land Vehicles", url: "https://dunedb.com/Vehicles/Land" },
        { name: "Aircraft", url: "https://dunedb.com/Vehicles/Aircraft" }
      ]
    },
    { 
      id: "armor", 
      name: "Armor", 
      shortname: "Armo",
      icon: "https://dunedb.com/images/a/ae/ArmorNavIcon.png", 
      position: "south",
      subcategories: [
        { name: "Light Armor", url: "https://dunedb.com/Armor/Light" },
        { name: "Heavy Armor", url: "https://dunedb.com/Armor/Heavy" }
      ]
    },
    { 
      id: "building", 
      name: "Building", 
      shortname: "Build",
      icon: "https://dunedb.com/images/5/58/BuildNavIcon.png", 
      position: "southwest",
      subcategories: [
        { name: "Bases", url: "https://dunedb.com/Building/Bases" },
        { name: "Structures", url: "https://dunedb.com/Building/Structures" }
      ]
    },
    { 
      id: "skills", 
      name: "Skills", 
      shortname: "Skills",
      icon: "https://dunedb.com/images/a/a8/SkillsNavIcon.png", 
      position: "west",
      subcategories: [
        { name: "Combat", url: "https://dunedb.com/Skills/Combat" },
        { name: "Survival", url: "https://dunedb.com/Skills/Survival" }
      ]
    },
    { 
      id: "technology", 
      name: "Technology", 
      shortname: "Techn",
      icon: "https://dunedb.com/images/0/05/TechnologyNavIcon.png", 
      position: "northwest",
      subcategories: [
        { name: "Research", url: "https://dunedb.com/Technology/Research" },
        { name: "Equipment", url: "https://dunedb.com/Technology/Equipment" }
      ]
    }
  ];
  
  // Create the center button HTML with the home icon
  const centerButtonHTML = `
    <a href="https://dunedb.com/Main_Page" class="dune-radial-center">
      <img src="https://dunedb.com/images/9/99/HomeNavIcon.png" alt="Home" class="dune-radial-icon">
      <span class="dune-radial-tooltip">Main Page</span>
    </a>
  `;
  
  // Create the radial menu items HTML with full URLs and icons
  let radialItemsHTML = '';
  menuItems.forEach(item => {
    radialItemsHTML += `
      <div class="dune-radial-item-container ${item.position}">
        <a data-id="${item.id}" class="dune-radial-item">
          <img src="${item.icon}" alt="${item.name}" class="dune-radial-icon">
          <span class="dune-radial-tooltip">${item.name}</span>
        </a>
      </div>
    `;
  });
  
  // Create the complete radial menu structure
  const radialMenuHTML = `
    <div id="duneRadialMenu" class="dune-radial-menu">
      <div class="dune-radial-background">
        <div class="dune-radial-circle outer"></div>
        <div class="dune-radial-circle middle"></div>
        <div class="dune-radial-circle inner"></div>
      </div>
      ${centerButtonHTML}
      ${radialItemsHTML}
    </div>
    <div id="duneRadialOverlay" class="dune-radial-overlay"></div>
  `;
  
  // Create subcategory popout HTML that will be positioned at the bottom of the screen for mobile
  let subcategoryContainerHTML = `<div id="duneSubcategoryContainer" class="dune-subcategory-container"></div>`;
  
  // Add the menu and subcategory container to the page
  $('body').append(radialMenuHTML);
  $('body').append(subcategoryContainerHTML);
  
  // Create the logo container and breadcrumb with home icon
  const breadcrumbHTML = `
    <div class="dune-breadcrumb-nav">
      <a id="duneLogoBtn" class="dune-logo-btn">
        <img src="https://dunedb.com/favicon.ico" alt="DuneDB Logo" class="dune-logo">
      </a>
      <a href="https://dunedb.com/Main_Page" class="breadcrumb-home-link">
        <img src="https://dunedb.com/images/9/99/HomeNavIcon.png" alt="Home" class="breadcrumb-home-icon">
        <span>Home</span>
      </a>
      <span class="dune-breadcrumb-separator">/</span>
      <a href="https://dunedb.com/Buildings">Buildings</a>
      <span class="dune-breadcrumb-separator">/</span>
      <a href="https://dunedb.com/Buildings/Refiners">Refiners</a>
      <span class="dune-breadcrumb-separator">/</span>
      <span>${$('h1.firstHeading').text() || $('.mw-page-title-main').text()}</span>
    </div>
  `;
  
  // Add the breadcrumb after the title
  $('h1.firstHeading, .mw-page-title-main').parent().after(breadcrumbHTML);
  
  // Opening animation effect
  const openMenu = () => {
    $('#duneRadialMenu').addClass('active');
    $('#duneRadialOverlay').addClass('active');
    
    // Add sequential animation to each item
    $('.dune-radial-item-container').each(function(index) {
      const $item = $(this);
      setTimeout(() => {
        $item.addClass('animated');
      }, index * 50);
    });
    
    // Animate center button last
    setTimeout(() => {
      $('.dune-radial-center').addClass('animated');
    }, menuItems.length * 50);
  };
  
  // Closing animation effect
  const closeMenu = () => {
    // Hide subcategory menu if open
    hideSubcategories();
    
    $('.dune-radial-item-container, .dune-radial-center').removeClass('animated');
    
    setTimeout(() => {
      $('#duneRadialMenu').removeClass('active');
      $('#duneRadialOverlay').removeClass('active');
    }, 300);
  };
  
  // Function to check if device is mobile
  const isMobile = () => {
    return window.innerWidth <= 768;
  };
  
  // Handle showing subcategories
  const showSubcategories = (itemId, event) => {
    // Find the clicked item in our data
    const item = menuItems.find(i => i.id === itemId);
    if (!item || !item.subcategories) return;
    
    // Mark the item as selected
    $('.dune-radial-item').removeClass('selected');
    $(`.dune-radial-item[data-id="${itemId}"]`).addClass('selected');
    
    // Build subcategory HTML
    let subcategoryHTML = `
      <div class="dune-subcategory-header">
        <img src="${item.icon}" alt="${item.name}" class="dune-subcategory-icon">
        <span>${item.name}</span>
      </div>
      <div class="dune-subcategory-items">
    `;
    
    item.subcategories.forEach((sub, index) => {
      subcategoryHTML += `
        <a href="${sub.url}" class="dune-subcategory-item" style="--item-index: ${index}">
          <span class="dune-subcategory-name">${sub.name}</span>
        </a>
      `;
    });
    
    subcategoryHTML += `
      </div>
      <div class="dune-subcategory-footer">
        <a href="https://dunedb.com/${item.id}" class="dune-subcategory-all">View All ${item.name}</a>
      </div>
    `;
    
    // Update subcategory container content
    const $subcategoryContainer = $('#duneSubcategoryContainer');
    $subcategoryContainer.html(subcategoryHTML);
    
    // Position the subcategory container
    if (isMobile()) {
      // Mobile: Position at the bottom of the screen
      $subcategoryContainer.css({
        bottom: '20px',
        left: '50%',
        top: 'auto',
        transform: 'translateX(-50%)',
        width: '80%',
        maxWidth: '300px'
      });
    } else {
      // Desktop: Position below the main menu with an extra 40px gap
      const menuBottom = $('#duneRadialMenu').offset().top + $('#duneRadialMenu').outerHeight() / 2 + 200; // Increased from 175 to 200
      const top = menuBottom;
      
      // Center horizontally
      const left = window.innerWidth / 2 - 100;
      
      $subcategoryContainer.css({
        top: top + 'px',
        left: left + 'px',
        transform: 'none',
        width: '200px',
        maxWidth: 'none',
        bottom: 'auto'
      });
    }
    
    // Show the container
    $subcategoryContainer.addClass('active');
    
    // Prevent event from closing the main menu
    event.stopPropagation();
  };
  
  // Hide subcategories
  const hideSubcategories = () => {
    $('#duneSubcategoryContainer').removeClass('active');
    $('.dune-radial-item').removeClass('selected');
  };
  
  // Toggle menu when clicking the logo button
  $(document).on('click', '#duneLogoBtn', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    if ($('#duneRadialMenu').hasClass('active')) {
      closeMenu();
    } else {
      openMenu();
    }
  });
  
  // Handle item click to show subcategories
  $(document).on('click', '.dune-radial-item', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    const itemId = $(this).data('id');
    
    // If already selected, hide subcategories
    if ($(this).hasClass('selected')) {
      hideSubcategories();
    } else {
      showSubcategories(itemId, e);
    }
  });
  
  // Close subcategories when clicking anywhere else in the radial menu
  $(document).on('click', '#duneRadialMenu', function(e) {
    if (!$(e.target).closest('.dune-radial-item').length) {
      hideSubcategories();
    }
  });
  
  // Close when clicking overlay
  $(document).on('click', '#duneRadialOverlay', function() {
    closeMenu();
  });
  
  // Close menu with ESC key
  $(document).on('keydown', function(e) {
    if (e.key === 'Escape') {
      if ($('#duneSubcategoryContainer').hasClass('active')) {
        hideSubcategories();
      } else if ($('#duneRadialMenu').hasClass('active')) {
        closeMenu();
      }
    }
  });
  
  // Update positions on window resize
  $(window).on('resize', function() {
    if ($('#duneSubcategoryContainer').hasClass('active')) {
      // Get the ID of the currently selected item
      const itemId = $('.dune-radial-item.selected').data('id');
      if (itemId) {
        // Reposition the subcategory container
        hideSubcategories();
        showSubcategories(itemId, { stopPropagation: function(){} });
      }
    }
  });
});