MediaWiki:Common.js: Difference between revisions

Revision as of 14:26, 19 September 2025

/* Any JavaScript here will be loaded for all users on every page load. */
// JavaScript code to save checkbox state and restore it when the page loads
$(document).ready(function() {
    // Function to save the state of checkboxes to localStorage
    function saveCheckboxState() {
        $('input[type="checkbox"]').each(function() {
            localStorage.setItem($(this).attr('id'), $(this).prop('checked'));
        });
    }

    // Function to load the state of checkboxes from localStorage
    function loadCheckboxState() {
        $('input[type="checkbox"]').each(function() {
            const savedState = localStorage.getItem($(this).attr('id'));
            if (savedState !== null) {
                $(this).prop('checked', savedState === 'true');
            }
        });
    }

    // Load the saved checkbox state when the page is loaded
    loadCheckboxState();

    // Save the checkbox state whenever a checkbox is changed
    $('input[type="checkbox"]').change(function() {
        saveCheckboxState();
    });
});

/* Adjust the search box width
$(document).ready(function () {
    $('#searchInput').css('width', '600px'); // Adjust width as needed
}); */

// "Where To" dropdown
$(function () {
    // Prevent duplicate
    if ($('#mw-settings-dropdown').length) return;

    // Create container
    var $container = $('<div id="mw-settings-dropdown"></div>');
    var $button = $('<button>Where To? ▾</button>');
    var $list = $('<ul></ul>');

    // Define menu items
    var menuItems = [
        { title: 'Disneyland', page: 'Disneyland' },
        { title: 'California Adventure', page: 'California Adventure' },
        { title: 'Disneyland Resort', page: 'Disneyland Resort' }
    ];

    // Populate dropdown
    menuItems.forEach(function(item) {
        var $li = $('<li></li>');
        var $a = $('<a></a>').attr('href', mw.util.getUrl(item.page)).text(item.title);
        $li.append($a);
        $list.append($li);
    });

    $container.append($button).append($list);

    // Insert into navbar-right if exists
    var $navbar = $('#mw-navbar-right');
    if ($navbar.length) {
        // Prepend = place at far left of navbar-right
        $navbar.prepend($container);
    } else {
        // fallback: absolute top-right
        $container.css({ position: 'absolute', top: '10px', right: '10px' });
        $('body').append($container);
    }

    // Toggle dropdown
    $button.on('click', function(e) {
        $list.toggle();
        e.stopPropagation();
    });

    // Close dropdown when clicking outside
    $(document).on('click', function() {
        $list.hide();
    });

    $container.on('click', function(e) {
        e.stopPropagation();
    });
});

// Second dropdown
(function () {
  'use strict';

  // Wait-for-selector helper
  function whenExists(selector, cb, tries, interval) {
    tries = (typeof tries === 'number') ? tries : 50;
    interval = (typeof interval === 'number') ? interval : 100;
    var i = 0;
    var timer = setInterval(function () {
      var el = document.querySelector(selector);
      if (el) {
        clearInterval(timer);
        cb(el);
      } else if (++i >= tries) {
        clearInterval(timer);
        console.warn('whenExists: selector not found:', selector);
      }
    }, interval);
  }

  // Ensure mw.util is loaded
  mw.loader.using(['mediawiki.util'], function () {
    // Try a few selectors that Medik sites commonly use
    whenExists('.navbar-nav.navbar-right, .nav.navbar-nav.navbar-right, #mw-navbar-right, .mw-navbar-right', function (navRootEl) {
      try {
        var $root = $(navRootEl);

        // decide which <ul> to insert into (some skins wrap the ul in another container)
        var $ul = $root.is('ul') ? $root : ($root.find('ul.navbar-nav').first().length ? $root.find('ul.navbar-nav').first() : $root.find('ul').first());

        if (!$ul || !$ul.length) {
          console.warn('Could not find <ul> to insert dropdown into. Root element:', $root);
          return;
        }

        // avoid adding it twice
        if ($ul.find('li.my-extra-dropdown').length) {
          console.log('Extra dropdown already present; skipping.');
          return;
        }

        // Build the dropdown <li> using jQuery (no raw innerHTML string)
        var $li = $('<li>', { 'class': 'dropdown my-extra-dropdown' });
        var $a = $('<a>', {
          href: '#',
          'class': 'dropdown-toggle',
          'data-toggle': 'dropdown',
          role: 'button',
          'aria-haspopup': 'true',
          'aria-expanded': 'false',
          html: 'More <span class="caret"></span>'
        });
        var $menu = $('<ul>', { 'class': 'dropdown-menu' });

        $menu.append($('<li>').append($('<a>', { href: mw.util.getUrl('Special:RecentChanges'), text: 'Recent changes' })));
        $menu.append($('<li>').append($('<a>', { href: mw.util.getUrl('Special:Random'), text: 'Random page' })));
        $menu.append($('<li>').append($('<a>', { href: mw.util.getUrl('Help:Contents'), text: 'Help' })));

        $li.append($a).append($menu);

        // Insert after the first existing dropdown if possible, otherwise append
        var $firstDropdown = $ul.find('li.dropdown').first();
        if ($firstDropdown.length) {
          $firstDropdown.after($li);
        } else {
          $ul.append($li);
        }

        console.log('Extra dropdown added to navbar.');
      } catch (err) {
        console.error('Error while adding extra dropdown:', err);
      }
    }, 50, 150); // tries, interval (ms)
  });
})();

// Add Edit Source to user dropdown
mw.loader.using('mediawiki.util', function () {
    // Add a new entry into the user dropdown
    mw.util.addPortletLink(
        'p-personal',                        // user menu ID
        mw.util.getUrl( mw.config.get('wgPageName'), { action: 'edit' } ), 
        'Edit Source',
        'pt-editsource'
    );
});