MediaWiki:Common.js: Difference between revisions

Revision as of 15:11, 18 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
});

/* === Settings dropdown (site-wide) ===
   Put this in MediaWiki:Common.js
*/

mw.loader.using(['mediawiki.util']).done(function () {
  $(function () {
    // Helper to build menu items (edit this array to change links)
    var menuItems = [
      { title: 'Preferences', page: 'Special:Preferences' },
      { title: 'Watchlist', page: 'Special:Watchlist' },
      { title: 'My talk', page: 'Special:MyTalk' },
      { title: 'Recent changes', page: 'Special:RecentChanges' }
    ];

    // Build DOM
    var $menu = $('<div id="mw-settings-dropdown" class="mw-settings-dropdown" role="navigation" aria-label="Settings"></div>');
    var $button = $('<button class="mw-settings-button" aria-haspopup="true" aria-expanded="false" aria-controls="mw-settings-list">Settings ▾</button>');
    var $list = $('<ul id="mw-settings-list" class="mw-settings-list" hidden></ul>');

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

    $menu.append($button, $list);

    // Try several insertion targets (common across skins); first match wins
    var targets = [
      '#mw-navbar-right',   // Tweeki / some custom headers
      '#p-personal',        // older Vector / MonoBook personal tools container
      '#mw-head-base',      // some skins
      '#mw-head',           // fallback header container
      '#p-navigation',      // left nav
      'body'                // ultimate fallback
    ];

    var inserted = false;
    for (var i = 0; i < targets.length; i++) {
      var $t = $(targets[i]).first();
      if ($t.length) {
        // If target has a UL (portlet), insert as <li> there; else append the widget
        var $ul = $t.is('ul') ? $t : $t.find('ul').first();
        if ($ul && $ul.length) {
          // wrap dropdown in an <li> so markup fits portlet lists
          var $liWrap = $('<li id="pt-settings" class="mw-portlet-item"></li>');
          $liWrap.append($menu);
          $ul.append($liWrap);
        } else {
          $t.append($menu);
        }
        inserted = true;
        break;
      }
    }
    if (!inserted) $('body').append($menu);

    // Toggle behavior (click / outside click / keyboard)
    $button.on('click', function (e) {
      var expanded = $(this).attr('aria-expanded') === 'true';
      if (expanded) {
        $(this).attr('aria-expanded', 'false');
        $list.attr('hidden', 'hidden');
      } else {
        $(this).attr('aria-expanded', 'true');
        $list.removeAttr('hidden');
        $list.find('a').first().focus();
      }
      e.stopPropagation();
    });

    // Close if clicking outside
    $(document).on('click', function () {
      $button.attr('aria-expanded', 'false');
      $list.attr('hidden', 'hidden');
    });
    $menu.on('click', function (e) { e.stopPropagation(); });

    // Keyboard: Esc closes; Down/Enter/Space opens
    $(document).on('keydown', function (e) {
      if (e.key === 'Escape') {
        $button.attr('aria-expanded', 'false');
        $list.attr('hidden', 'hidden');
      }
    });
    $button.on('keydown', function (e) {
      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        $button.click();
      }
    });

  });
});