MediaWiki:Common.js

// ✅ Radial Menu Loader (Final Version with JSON-in-Div)
function waitForRadialData(callback, attempts = 0) {
  const dataTag = document.getElementById('radialMenuData');
  if (dataTag) {
    try {
      const menuItems = JSON.parse(dataTag.innerText || dataTag.textContent);
      console.log("✅ Loaded radialMenuData:", menuItems);
      callback(menuItems);
    } catch (e) {
      console.error("❌ Failed to parse radialMenuData", e);
    }
  } else if (attempts < 20) {
    setTimeout(() => waitForRadialData(callback, attempts + 1), 100);
  } else {
    console.warn("⚠️ radialMenuData tag not found after timeout.");
  }
}

$(document).ready(function () {
  waitForRadialData(function (menuItems) {
    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');
    };

    const toggleRadialMenu = () => {
      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);
      }
    };

    // ✅ Listen for clicks on both the original logo and the custom menu image inside the wrapper span
    $(document).on('click', '#duneLogoBtn, #menuRadialTrigger img', function (e) {
      console.log("✅ Radial trigger clicked");
      e.preventDefault();
      e.stopPropagation();
      toggleRadialMenu();
    });

    $(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('click', 'li.name.logo a[href="/Main_Page"]', function (e) {
      e.preventDefault();
      toggleRadialMenu();
    });

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


/* ===== Used-In dynamic filters & search ===== */
mw.hook( 'wikipage.content' ).add( function ( $content ) {

  const $holder = $content.find( '#usedInFilterHolder' );
  const $table  = $content.find( '#usedInTable' );

  if ( !$holder.length || !$table.length ) return;

  /* ---------- harvest meta from rows once ---------- */
  const rowsData = [];
  const stations = new Set();
  const types    = new Set();

  $table.find( 'tbody tr' ).each( function () {
    const $tds     = $( this ).children( 'td' );
    const output   = $tds.eq( 0 ).text().trim();
    const type     = $tds.eq( 1 ).text().trim();     // comment out if not needed
    const station  = $tds.last().text().trim();

    rowsData.push( { tr: this, output, type, station } );
    stations.add( station );
    types.add( type );
  } );

  /* ---------- build UI ---------- */
  const makeSel = ( id, label, opts ) => {
    const $sel = $( '<select>', { id, class: 'game-button', css:{margin:'6px 4px 6px 0'} } )
                  .append( $( '<option>', { value:'', text:label } ) );
    opts.forEach( o => $sel.append( $( '<option>', { value:o, text:o } ) ) );
    return $sel;
  };

  const $stationSel = makeSel( 'filterStation', 'All Stations', [ ...stations ].sort() );
  const $typeSel    = makeSel( 'filterType',    'All Types',    [ ...types ].sort() ); // remove if unused
  const $search     = $( '<input>', {
                          type:'text',
                          placeholder:'Search…',
                          css:{ margin:'6px 0', padding:'4px', width:'140px',
                               'background':'#111', color:'#fff', border:'1px solid #555' }
                        } );

  $holder.append( $stationSel, $typeSel, $search );   // drop $typeSel if not wanted

  /* ---------- filter engine (runs on any change) ---------- */
  function applyFilters() {
    const sVal = $stationSel.val();
    const tVal = $typeSel.val();
    const q    = $search.val().toLowerCase();

    rowsData.forEach( ({ tr, output, type, station }) => {
      const show =
        (!sVal || station === sVal) &&
        (!tVal || type    === tVal) &&
        (!q    || output.toLowerCase().includes( q ));
      tr.style.display = show ? '' : 'none';
    } );
  }

  $stationSel.on( 'change', applyFilters );
  $typeSel   .on( 'change', applyFilters );   // remove if you removed $typeSel
  $search    .on( 'input',  applyFilters );
} );




/* Lazy-load background image Blur */
document.addEventListener('DOMContentLoaded', () => {
  const hero = document.querySelector('.dune-hero');
  if (hero && !hero.style.backgroundImage) {
    hero.style.backgroundImage =
      'url(/images/7/70/Arrakis_dunes.jpg?2025)';
  }

  /* Stick radial menu after scroll */
  const radial = document.querySelector('.radial-menu-wrapper');
  if (!radial) return;
  const y = radial.offsetTop;
  window.addEventListener('scroll', () => {
    radial.classList.toggle('is-fixed', window.scrollY > y);
  });
});

/* ========================================
   MediaWiki:Common.js - Header Navigation Solution
   Add this to your MediaWiki:Common.js page
   ======================================== */

$(document).ready(function() {
    // Remove the CSS emergency header first
    $('<style>body::after { display: none !important; }</style>').appendTo('head');
    
    // Clear and rebuild the existing nav.tab-bar
    var $navbar = $('nav.tab-bar.hide-for-print');
    
    if ($navbar.length) {
        // Style the navbar container
        $navbar.css({
            'display': 'flex',
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'right': '0',
            'z-index': '1000',
            'height': '60px',
            'background': 'linear-gradient(180deg, rgba(20, 18, 28, 0.95) 0%, rgba(10, 8, 16, 0.98) 100%)',
            'border-bottom': '3px solid rgba(252, 231, 200, 0.4)',
            'box-shadow': '0 2px 20px rgba(0,0,0,0.8)',
            'align-items': 'center',
            'justify-content': 'space-between',
            'padding': '0 20px',
            'margin': '0'
        }).empty();
        
        // Add logo
        var $logo = $('<a href="/wiki/Main_Page">DUNE DB</a>').css({
            'font-family': '"Orbitron", sans-serif',
            'font-size': '22px',
            'color': '#fce7c8',
            'text-transform': 'uppercase',
            'letter-spacing': '3px',
            'font-weight': '700',
            'text-shadow': '0 0 15px rgba(252, 231, 200, 0.4)',
            'text-decoration': 'none',
            'white-space': 'nowrap'
        });
        
        // Add navigation container
        var $nav = $('<nav></nav>').css({
            'display': 'flex',
            'gap': '0',
            'margin': '0',
            'padding': '0'
        });
        
        // Navigation items
        var navItems = [
            { href: '/wiki/Items', text: '◇ Items' },
            { href: '/wiki/Crafting', text: '⚒ Crafting' },
            { href: '/wiki/Building', text: '⌂ Building' },
            { href: '/wiki/Tech_Tree', text: '⬢ Tech Tree' },
            { href: '/wiki/Journeys', text: '➤ Journeys' },
            { href: '/wiki/Skills', text: '★ Skills' },
            { href: '/wiki/Map', text: '🗺 Map' }
        ];
        
        // Add navigation links
        navItems.forEach(function(item, index) {
            var $link = $('<a href="' + item.href + '">' + item.text + '</a>').css({
                'display': 'flex',
                'align-items': 'center',
                'padding': '0 18px',
                'height': '60px',
                'color': 'rgba(252, 231, 200, 0.8)',
                'font-family': '"Rajdhani", sans-serif',
                'font-size': '14px',
                'font-weight': '600',
                'text-transform': 'uppercase',
                'letter-spacing': '1.2px',
                'text-decoration': 'none',
                'border-right': '1px solid rgba(252, 231, 200, 0.1)',
                'transition': 'all 0.3s ease',
                'background': 'transparent'
            });
            
            // Add first border
            if (index === 0) {
                $link.css('border-left', '1px solid rgba(252, 231, 200, 0.1)');
            }
            
            // Add hover effects
            $link.hover(
                function() {
                    $(this).css({
                        'background': 'rgba(252, 231, 200, 0.1)',
                        'color': '#fce7c8',
                        'text-shadow': '0 0 10px rgba(252, 231, 200, 0.5)'
                    });
                },
                function() {
                    $(this).css({
                        'background': 'transparent',
                        'color': 'rgba(252, 231, 200, 0.8)',
                        'text-shadow': 'none'
                    });
                }
            );
            
            $nav.append($link);
        });
        
        // Add search container
        var $searchContainer = $('<div></div>').css({
            'display': 'flex',
            'align-items': 'center'
        });
        
        var $searchForm = $('<form action="/index.php" method="get"></form>').css({
            'display': 'flex',
            'align-items': 'center',
            'gap': '0'
        });
        
        var $searchInput = $('<input type="search" name="search" placeholder="Search wiki...">').css({
            'background': 'rgba(0, 0, 2, 0.8)',
            'border': '2px solid rgba(252, 231, 200, 0.3)',
            'border-radius': '0',
            'color': '#fce7c8',
            'padding': '8px 12px',
            'width': '200px',
            'font-size': '13px',
            'font-family': '"Rajdhani", sans-serif',
            'transition': 'all 0.3s ease'
        });
        
        var $searchButton = $('<button type="submit">🔍</button>').css({
            'background': 'rgba(252, 231, 200, 0.1)',
            'border': '2px solid rgba(252, 231, 200, 0.3)',
            'border-left': 'none',
            'color': '#fce7c8',
            'padding': '8px 12px',
            'cursor': 'pointer',
            'font-size': '14px',
            'transition': 'all 0.3s ease',
            'height': '38px'
        });
        
        // Search focus effects
        $searchInput.focus(function() {
            $(this).css({
                'border-color': '#fce7c8',
                'box-shadow': '0 0 10px rgba(252, 231, 200, 0.3)',
                'width': '250px'
            });
        }).blur(function() {
            $(this).css({
                'border-color': 'rgba(252, 231, 200, 0.3)',
                'box-shadow': 'none',
                'width': '200px'
            });
        });
        
        // Search button hover
        $searchButton.hover(
            function() {
                $(this).css({
                    'background': 'rgba(252, 231, 200, 0.2)',
                    'border-color': '#fce7c8'
                });
            },
            function() {
                $(this).css({
                    'background': 'rgba(252, 231, 200, 0.1)',
                    'border-color': 'rgba(252, 231, 200, 0.3)'
                });
            }
        );
        
        // Logo hover effect
        $logo.hover(
            function() {
                $(this).css({
                    'color': '#fff',
                    'text-shadow': '0 0 20px rgba(252, 231, 200, 0.6)'
                });
            },
            function() {
                $(this).css({
                    'color': '#fce7c8',
                    'text-shadow': '0 0 15px rgba(252, 231, 200, 0.4)'
                });
            }
        );
        
        // Assemble the search form
        $searchForm.append($searchInput).append($searchButton);
        $searchContainer.append($searchForm);
        
        // Assemble the navbar
        $navbar.append($logo).append($nav).append($searchContainer);
        
        // Make sure body has proper padding for fixed header
        $('html, body').css('padding-top', '60px');
        
        // Mobile responsive - hide nav and search on small screens
        function checkMobile() {
            if ($(window).width() <= 768) {
                $nav.hide();
                $searchContainer.hide();
                $logo.css('font-size', '18px');
            } else {
                $nav.show();
                $searchContainer.show();
                $logo.css('font-size', '22px');
            }
        }
        
        // Check on load and resize
        checkMobile();
        $(window).resize(checkMobile);
        
        console.log('Dune DB Header: Navigation successfully loaded!');
    } else {
        console.warn('Dune DB Header: nav.tab-bar.hide-for-print not found');
    }
});

/* ========================================
   Breadcrumb fixes - also add to Common.js
   ======================================== */

$(document).ready(function() {
    // Style the breadcrumb more subtly
    $('.dune-breadcrumb-nav').css({
        'margin-bottom': '16px',
        'font-size': '13px',
        'background': 'rgba(0,0,2,.3)',
        'border': '1px solid rgba(252, 231, 200, 0.1)',
        'padding': '6px 12px',
        'border-radius': '2px',
        'clip-path': 'none'
    });
    
    // Remove the glowing border
    $('.dune-breadcrumb-nav').find('::before').remove();
    
    // Style breadcrumb links more subtly
    $('.dune-breadcrumb-nav a').css({
        'color': 'rgba(252, 231, 200, 0.5)',
        'font-weight': '400',
        'text-transform': 'none',
        'letter-spacing': '0.5px'
    });
    
    // Subtle hover
    $('.dune-breadcrumb-nav a').hover(
        function() {
            $(this).css({
                'color': 'rgba(252, 231, 200, 0.8)',
                'text-shadow': 'none'
            });
        },
        function() {
            $(this).css({
                'color': 'rgba(252, 231, 200, 0.5)',
                'text-shadow': 'none'
            });
        }
    );
    
    // Style separators
    $('.dune-breadcrumb-separator').css({
        'margin': '0 6px',
        'color': 'rgba(252, 231, 200, 0.2)',
        'font-weight': 'normal'
    }).text('/');
});