MediaWiki:Common.js

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; // inject ID so submenu logic works

  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();
};