MediaWiki:Common.js

// ✅ Replace static menuItems with dynamic data
$(document).ready(function() {
  const dataTag = document.getElementById('radialMenuData');
  const menuItems = dataTag ? JSON.parse(dataTag.textContent) : [];

  const isMobile = () => window.innerWidth <= 768;

  let radialItemsHTML = '';
  menuItems.forEach((item, index) => {
    const id = item.category.toLowerCase().replace(/\s+/g, '-');
    item.id = id;

    radialItemsHTML += `
      <div class="dune-radial-item-container ${item.position}">
        <a data-id="${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>
    `;
  });

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

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

  const subcategoryContainerHTML = `<div id="duneSubcategoryContainer" class="dune-subcategory-container"></div>`;
  $('body').append(radialMenuHTML);
  $('body').append(subcategoryContainerHTML);

  if (isMobile()) {
    $('#duneRadialMenu').addClass('mobile-grid');
  }

  const showSubcategories = (itemId, event) => {
    const item = menuItems.find(i => i.id === itemId);
    if (!item || !item.subcategories) return;

    $('.dune-radial-item').removeClass('selected');
    $(`.dune-radial-item[data-id="${itemId}"]`).addClass('selected');

    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="${item.url}" class="dune-subcategory-all">View All ${item.name}</a>
      </div>
    `;

    const $subcategoryContainer = $('#duneSubcategoryContainer');
    $subcategoryContainer.html(subcategoryHTML);

    $subcategoryContainer.removeClass((index, className) => {
      return (className.match(/from-\S+/g) || []).join(' ');
    });
    $subcategoryContainer.addClass(`from-${item.position}`);
    $subcategoryContainer.addClass('active');

    event.stopPropagation();
  };

  const hideSubcategories = () => {
    $('#duneSubcategoryContainer').removeClass('active');
    $('.dune-radial-item').removeClass('selected');
  };

  $(document).on('click', '#duneLogoBtn', function(e) {
    e.preventDefault();
    e.stopPropagation();
    if ($('#duneRadialMenu').hasClass('active')) {
      hideSubcategories();
      $('#duneRadialMenu').removeClass('active');
      $('#duneRadialOverlay').removeClass('active');
    } else {
      $('#duneRadialMenu').addClass('active');
      $('#duneRadialOverlay').addClass('active');
      $('.dune-radial-item-container').each(function(index) {
        const $item = $(this);
        setTimeout(() => {
          $item.addClass('animated');
        }, index * 50);
      });
      setTimeout(() => {
        $('.dune-radial-center').addClass('animated');
      }, menuItems.length * 50);
    }
  });

  $(document).on('click', '.dune-radial-item', function(e) {
    e.preventDefault();
    e.stopPropagation();
    const itemId = $(this).data('id');
    if ($(this).hasClass('selected')) {
      hideSubcategories();
    } else {
      showSubcategories(itemId, e);
    }
  });

  $(document).on('click', '#duneRadialOverlay', function() {
    hideSubcategories();
    $('#duneRadialMenu').removeClass('active');
    $('#duneRadialOverlay').removeClass('active');
  });

  $(document).on('keydown', function(e) {
    if (e.key === 'Escape') {
      if ($('#duneSubcategoryContainer').hasClass('active')) {
        hideSubcategories();
      } else if ($('#duneRadialMenu').hasClass('active')) {
        $('#duneRadialMenu').removeClass('active');
        $('#duneRadialOverlay').removeClass('active');
      }
    }
  });

  $(window).on('resize', function() {
    if (isMobile()) {
      $('#duneRadialMenu').addClass('mobile-grid');
    } else {
      $('#duneRadialMenu').removeClass('mobile-grid');
    }
  });
});