MediaWiki: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.

/* ================================
   InsaneUO-inspired Common.js
   Enhancements for Timeless skin
   ================================ */

/**
 * Dark mode toggle
 * - Adds a button in the header
 * - Remembers user preference in localStorage
 */
(function () {
  const DARK_CLASS = "dark-mode";

  function applyDarkMode(enabled) {
    if (enabled) {
      document.documentElement.classList.add(DARK_CLASS);
    } else {
      document.documentElement.classList.remove(DARK_CLASS);
    }
  }

  // Read preference
  const savedPref = localStorage.getItem("darkMode") === "true";
  applyDarkMode(savedPref);

  // Add toggle button to header
  $(document).ready(function () {
    const $toggle = $('<a>')
      .attr("href", "#")
      .attr("id", "darkModeToggle")
      .addClass("iuo-cta")
      .text(savedPref ? "☾ Dark On" : "☀ Dark Off");

    $("#mw-head .mw-shell").append($('<div id="iuo-top-cta">').append($toggle));

    $toggle.on("click", function (e) {
      e.preventDefault();
      const isDark = !$("html").hasClass(DARK_CLASS);
      applyDarkMode(isDark);
      localStorage.setItem("darkMode", isDark);
      $toggle.text(isDark ? "☾ Dark On" : "☀ Dark Off");
    });
  });
})();

/**
 * Collapsible sections
 * - Turns every h2 into a collapsible block
 */
(function () {
  $(document).ready(function () {
    $(".mw-body h2").each(function () {
      const $h2 = $(this);
      const $nextUntilH2 = $h2.nextUntil("h2");

      if ($nextUntilH2.length > 0) {
        const $wrapper = $("<div>").addClass("collapsible-section");
        $nextUntilH2.wrapAll($wrapper);

        const $btn = $('<span class="collapse-btn">[–]</span>');
        $h2.append(" ").append($btn);

        $btn.on("click", function () {
          $wrapper.toggle();
          $btn.text($wrapper.is(":visible") ? "[–]" : "[+]");
        });
      }
    });
  });
})();

/**
 * Sticky "Edit" button
 * - Adds a floating edit shortcut on the right
 */
(function () {
  $(document).ready(function () {
    const $editLink = $("#ca-edit a").attr("href");
    if ($editLink) {
      const $floatingBtn = $('<a>')
        .attr("href", $editLink)
        .addClass("button iuo-floating-edit")
        .text("✎ Edit");

      $("body").append($floatingBtn);
    }
  });
})();