Tags: Mobile edit Mobile web edit |
Tags: Mobile edit Mobile web edit |
| Line 1: |
Line 1: |
| // Theme toggle functionality for Structorica Wiki | | /* Theme toggle button styles for MinervaNeue mobile skin */ |
|
| |
|
| // Cookie helper functions | | /* Icon styles */ |
| function getCookie(name) {
| | .minerva-icon--theme-toggle { |
| const value = `; ${document.cookie}`;
| | mask-image: linear-gradient(transparent, transparent), |
| const parts = value.split(`; ${name}=`);
| | url("data:image/svg+xml,%3Csvg height='21' viewBox='0 0 21 21' width='21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.85464918.37900488c-1.91149353 1.51069427-3.13816124 3.84973402-3.13816124 6.47527736 0 4.55564936 3.69308349 8.24873286 8.24873286 8.24873286 2.5815709 0 4.8861545-1.1859235 6.3986798-3.0426994-.8206378 4.7389755-4.9523867 8.343122-9.9259291 8.343122-5.56375572 0-10.07407088-4.5103151-10.07407088-10.0740709 0-5.02506013 3.67919933-9.19079725 8.49074856-9.95036192z' fill='%2354595d' fill-rule='evenodd'/%3E%3C/svg%3E"); |
| if (parts.length === 2) return parts.pop().split(";").shift();
| |
| return null;
| |
| } | | } |
|
| |
|
| function setCookie(name, value, days = 365) {
| | .stw-theme-dark .minerva-icon--theme-toggle { |
| const domain = ".structorica.wiki"; // Cross-subdomain support
| | mask-image: linear-gradient(transparent, transparent), |
| document.cookie = `${name}=${value}; path=/; domain=${domain}; max-age=${
| | url("data:image/svg+xml,%3Csvg fill='%2354595d' fill-rule='evenodd' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M17.07 7.07V2.93h-4.14L10 0 7.07 2.93H2.93v4.14L0 10l2.93 2.93v4.14h4.14L10 20l2.93-2.93h4.14v-4.14L20 10zM10 16a6 6 0 1 1 6-6 6 6 0 0 1-6 6z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/svg%3E"); |
| 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);
| |
| }
| |
| });
| |
/* Theme toggle button styles for MinervaNeue mobile skin */
/* Icon styles */
.minerva-icon--theme-toggle {
mask-image: linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg height='21' viewBox='0 0 21 21' width='21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.85464918.37900488c-1.91149353 1.51069427-3.13816124 3.84973402-3.13816124 6.47527736 0 4.55564936 3.69308349 8.24873286 8.24873286 8.24873286 2.5815709 0 4.8861545-1.1859235 6.3986798-3.0426994-.8206378 4.7389755-4.9523867 8.343122-9.9259291 8.343122-5.56375572 0-10.07407088-4.5103151-10.07407088-10.0740709 0-5.02506013 3.67919933-9.19079725 8.49074856-9.95036192z' fill='%2354595d' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.stw-theme-dark .minerva-icon--theme-toggle {
mask-image: linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg fill='%2354595d' fill-rule='evenodd' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M17.07 7.07V2.93h-4.14L10 0 7.07 2.93H2.93v4.14L0 10l2.93 2.93v4.14h4.14L10 20l2.93-2.93h4.14v-4.14L20 10zM10 16a6 6 0 1 1 6-6 6 6 0 0 1-6 6z'/%3E%3Ccircle cx='10' cy='10' r='4.5'/%3E%3C/svg%3E");
}