MediaWiki:Common.js: Difference between revisions

Revision as of 13:59, 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
mw.loader.using(['jquery'], function () {
  (function ($) {
    var maxAttempts = 20; // tries x200ms = ~4s total before giving up

    function tryInsert(attemptLeft) {
      if ($('#second-dropdown').length) return; // already present

      var $nav = $('#mw-navbar-right');
      if (!$nav.length) {
        if (attemptLeft <= 0) { console.warn('Navbar (#mw-navbar-right) not found.'); return; }
        return setTimeout(function(){ tryInsert(attemptLeft - 1); }, 200);
      }

      // find a good candidate to clone (common classes for Tweeki/Vector-style menus)
      var $first = $nav.find('.vectorMenu, .mw-portlet-dropdown, .mw-dropdown, .mw-portlet').filter(function () {
        return $(this).find('.vectorMenuContent, .menu-content, ul').length;
      }).first();

      if (!$first || !$first.length) {
        if (attemptLeft <= 0) { console.warn('No existing dropdown found to clone.'); return; }
        return setTimeout(function(){ tryInsert(attemptLeft - 1); }, 200);
      }

      // clone (copy events/data too, if present)
      var $clone = $first.clone(true, true);

      // remove duplicate IDs inside the clone to avoid collisions
      $clone.find('[id]').addBack('[id]').each(function () { $(this).removeAttr('id'); });

      // Change heading text to what you want
      var $heading = $clone.find('.vectorMenuHeading, .menu-heading, .toggle, a').first();
      if ($heading && $heading.length) $heading.text('Settings');

      // Replace the menu contents with our items (keeps styling)
      var $content = $clone.find('.vectorMenuContent, .menu-content, .dropdown-content, .mw-portlet-body, ul').first();
      var menuHtml = ''
        + '<ul class="mw-dropdown-list">'
        + '  <li><a href="/wiki/Special:Preferences">Preferences</a></li>'
        + '  <li><a href="/wiki/Special:MyPage">My Page</a></li>'
        + '</ul>';

      if ($content && $content.length) {
        $content.html(menuHtml);
      } else {
        $clone.append('<div class="vectorMenuContent">' + menuHtml + '</div>');
      }

      // mark it uniquely
      $clone.attr('id', 'second-dropdown');

      // Insert before the search widget if possible, otherwise right after the first dropdown
      var searchSel = '#p-search, form#searchform, .vector-search-box, .mw-search, .searchbox, #searchInput';
      var $search = $nav.find(searchSel).first();
      if ($search && $search.length) {
        $clone.insertBefore($search);
      } else {
        $first.after($clone);
      }

      // Ensure show/hide works even if events didn't copy perfectly
      $clone.on('mouseenter focusin', function () { $(this).find('.vectorMenuContent').show(); });
      $clone.on('mouseleave focusout', function () { $(this).find('.vectorMenuContent').hide(); });

      // hide by default
      $clone.find('.vectorMenuContent').hide();
    }

    tryInsert(maxAttempts);
  })(jQuery);
});