Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */
// Updated JavaScript for the radial menu
$(document).ready(function() {
  // Remove the "From Dune Awakening DB" tagline
  $('#tagline').remove();
  
  // Reduce spacing above the title
  $('.mw-page-title-main').parent().css('margin-top', '0');
  $('.mw-page-title-main').parent().css('padding-top', '5px');
  
  // Add breadcrumb navigation
  var pageTitle = $('.mw-page-title-main').text() || $('h1.firstHeading').text();
  
  // Generate breadcrumb HTML - without the radial menu inside
  var breadcrumbHTML = `
    <div class="dune-breadcrumb-nav">
      <div class="dune-logo-container">
        <img src="https://dunedb.com/favicon.ico" alt="DuneDB Logo" class="dune-logo">
      </div>
      <a href="/Main_Page">Home</a>
      <span class="dune-breadcrumb-separator">/</span>
      <a href="/Buildings">Buildings</a>
      <span class="dune-breadcrumb-separator">/</span>
      <a href="/Buildings/Refiners">Refiners</a>
      <span class="dune-breadcrumb-separator">/</span>
      <span>${pageTitle}</span>
    </div>
  `;
  
  // Insert breadcrumb after page title
  $('.mw-page-title-main').parent().after(breadcrumbHTML);
  
  // Add the radial menu to the body for proper positioning
  var radialMenuHTML = `
    <div class="dune-radial-menu">
      <a href="/Buildings" class="dune-radial-item">
        <i class="fa fa-building"></i>
        <span class="dune-radial-tooltip">Buildings</span>
      </a>
      <a href="/Items" class="dune-radial-item">
        <i class="fa fa-cube"></i>
        <span class="dune-radial-tooltip">Items</span>
      </a>
      <a href="/Crafting" class="dune-radial-item">
        <i class="fa fa-hammer"></i>
        <span class="dune-radial-tooltip">Crafting</span>
      </a>
      <a href="/Research" class="dune-radial-item">
        <i class="fa fa-flask"></i>
        <span class="dune-radial-tooltip">Research</span>
      </a>
      <a href="/Journeys" class="dune-radial-item">
        <i class="fa fa-map-marked-alt"></i>
        <span class="dune-radial-tooltip">Journeys</span>
      </a>
      <a href="/Vehicles" class="dune-radial-item">
        <i class="fa fa-truck-monster"></i>
        <span class="dune-radial-tooltip">Vehicles</span>
      </a>
      <a href="/Resources" class="dune-radial-item">
        <i class="fa fa-box"></i>
        <span class="dune-radial-tooltip">Resources</span>
      </a>
      <a href="/Main_Page" class="dune-radial-item">
        <i class="fa fa-home"></i>
        <span class="dune-radial-tooltip">Home</span>
      </a>
    </div>
    <div class="dune-radial-overlay"></div>
  `;
  
  // Append the radial menu to the body
  $('body').append(radialMenuHTML);
  
  // Toggle radial menu on logo click
  $('.dune-logo').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('.dune-radial-menu').toggleClass('active');
    $('.dune-radial-overlay').toggleClass('active');
  });

  // Close the radial menu when clicking the overlay
  $('.dune-radial-overlay').on('click', function() {
    $('.dune-radial-menu').removeClass('active');
    $('.dune-radial-overlay').removeClass('active');
  });
  
  // Add Font Awesome if not already present
  if ($('link[href*="font-awesome"]').length === 0) {
    $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">');
  }
});

MediaWiki

MediaWiki:Common.js

From Dune Awakening DB