|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ================================
| |
| 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);
| |
| }
| |
| });
| |
| })();
| |
