「MediaWiki:Tangle/定数表/dev.js」：修訂間差異

MediaWiki:Tangle/定数表/dev.js (查看原始碼)

於 2024年11月25日 (一) 17:14 的修訂

增加 2,673 位元組、 2024年11月25日 (星期一)

// Edit via Wikiplus

Star0

常驻人员、介面管理員、管理員

6,571

次編輯

@@ 第109行： / 第109行： @@
     document.body.appendChild(scriptElement);
+});
+$(function () {
+  const container = document.getElementById("chart-constant-js-cut-in-2");
+  // 插入 HTML
+  const htmlContent = `
+   <div class="button-container">
+    <button class="button single-toggle-button" data-color="#FF9500">
+     <span class="label">切换</span>
+    </button>
+   </div>
+  `;
+  // 插入 CSS
+  const cssContent = `
+   .button-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0.8em;
+   }
+   .single-toggle-button {
+    font-size: 15px;
+    padding: 0.6em 1.3em;
+    font-weight: 500;
+    color: #000;
+    border: none;
+    position: relative;
+    overflow: hidden;
+    border-radius: 0.5em;
+    background: transparent;
+    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+    cursor: pointer;
+    box-shadow: 0 0 10px #7f7f7f; /* 默认边框样式 */
+   }
+   .single-toggle-button.active {
+    color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 激活状态的边框 */
+    background: #FF9500; /* 激活背景色 */
+   }
+   .show {
+    display: unset !important;
+   }
+  `;
+  // 插入 JS
+  const jsContent = `
+   const button = document.querySelector(".single-toggle-button");
+   const targets = document.querySelectorAll(".chart-constant-single-part-b");
+   // 从 localStorage 获取初始状态
+   const savedState = localStorage.getItem("singleButtonActiveV2") === "true";
+   if (savedState) {
+    button.classList.add("active");
+    button.style.background = button.getAttribute("data-color");
+    targets.forEach((target) => { target.classList.add("show"); });
+   } else {
+    targets.forEach((target) => { target.classList.remove("show"); });
+   }
+   button.addEventListener("click", () => {
+    const isActive = button.classList.contains("active");
+    if (isActive) {
+     button.classList.remove("active");
+     button.style.background = "transparent";
+     targets.forEach((target) => { target.classList.remove("show"); });
+     localStorage.setItem("singleButtonActiveV2", "false");
+    } else {
+     button.classList.add("active");
+     button.style.background = button.getAttribute("data-color");
+     targets.forEach((target) => { target.classList.add("show"); });
+     localStorage.setItem("singleButtonActiveV2", "true");
+    }
+   });
+  `;
+  container.innerHTML = htmlContent;
+  const styleElement = document.createElement("style");
+  styleElement.innerHTML = cssContent;
+  document.head.appendChild(styleElement);
+  const scriptElement = document.createElement("script");
+  scriptElement.innerHTML = jsContent;
+  document.body.appendChild(scriptElement);
 });