MediaWiki:Minerva.css: Difference between revisions

// Theme toggle functionality for Structorica Wiki

// Cookie helper functions
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(";").shift();
  return null;
}

function setCookie(name, value, days = 365) {
  const domain = ".structorica.wiki"; // Cross-subdomain support
  document.cookie = `${name}=${value}; path=/; domain=${domain}; max-age=${
    days * 24 * 60 * 60
  }`;
}

document.addEventListener("DOMContentLoaded", function () {
  var userPanel = document.querySelector("#p-personal ul");

  if (userPanel) {
    // Add both theme and width toggle buttons
    userPanel.insertAdjacentHTML(
      "afterbegin",
      '<li class="mw-list-item mw-list-item-js" id="pt-fw-disable"><a href="#" title="Toggle fixed width"><span></span></a></li>' +
        '<li class="mw-list-item mw-list-item-js" id="pt-dm-toggle"><a href="#" title="Toggle dark mode"><span></span></a></li>'
    );

    setTimeout(function () {
      // Theme toggle functionality
      var themeBtn = document.getElementById("pt-dm-toggle");
      if (themeBtn) {
        // Set initial theme from cookie (fallback to localStorage for migration)
        var savedTheme =
          getCookie("stw-theme") || localStorage.getItem("stw-theme") || "dark";
        var body = document.body;

        if (savedTheme === "dark") {
          body.classList.add("stw-theme-dark");
          body.classList.remove("stw-theme-light");
        } else {
          body.classList.add("stw-theme-light");
          body.classList.remove("stw-theme-dark");
        }

        themeBtn.addEventListener("click", function (e) {
          e.preventDefault();

          if (body.classList.contains("stw-theme-dark")) {
            body.classList.remove("stw-theme-dark");
            body.classList.add("stw-theme-light");
            setCookie("stw-theme", "light");
            localStorage.setItem("stw-theme", "light"); // Fallback
          } else {
            body.classList.remove("stw-theme-light");
            body.classList.add("stw-theme-dark");
            setCookie("stw-theme", "dark");
            localStorage.setItem("stw-theme", "dark"); // Fallback
          }
        });
      }

      // Width toggle functionality
      var widthBtn = document.getElementById("pt-fw-disable");
      if (widthBtn) {
        // Set initial width mode from cookie
        var savedWidth =
          getCookie("stw-width") ||
          localStorage.getItem("stw-width") ||
          "fluid";
        var root = document.documentElement;

        if (savedWidth === "fluid") {
          root.style.setProperty("--fixed-width", "100vw");
          widthBtn.id = "pt-fw-disable"; // Fullscreen mode
        } else {
          root.style.removeProperty("--fixed-width"); // Use default 1200px
          widthBtn.id = "pt-fw-enable"; // Exit fullscreen mode
        }

        widthBtn.addEventListener("click", function (e) {
          e.preventDefault();

          if (root.style.getPropertyValue("--fixed-width") === "100vw") {
            // Switch to fixed width (remove property to use default 1200px)
            root.style.removeProperty("--fixed-width");
            widthBtn.id = "pt-fw-enable";
            setCookie("stw-width", "fixed");
            localStorage.setItem("stw-width", "fixed"); // Fallback
          } else {
            // Switch to fluid width
            root.style.setProperty("--fixed-width", "100vw");
            widthBtn.id = "pt-fw-disable";
            setCookie("stw-width", "fluid");
            localStorage.setItem("stw-width", "fluid"); // Fallback
          }
        });
      }
    }, 100);
  } else {
    console.log(
      "Theme script: userPanel not found, trying alternative selector"
    );
    var altPanel = document.querySelector("#p-personal");
    console.log("Theme script: altPanel found:", !!altPanel, altPanel);
  }
});