MediaWiki:Tangle/定数表/dev.js

$(function () {
    const container = document.getElementById("chart-constant-js-cut-in-1");

    const htmlContent = `
  <div class="button-container">
    <button class="button" data-target="chart-constant-table-12 chart-constant-table-11" data-color="#FF9500">
      <span class="label">12-11</span>
    </button>
    <button class="button" data-target="chart-constant-table-10" data-color="#c31c40">
      <span class="label">10</span>
    </button>
    <button class="button" data-target="chart-constant-table-9" data-color="#65226f">
      <span class="label">9</span>
    </button>
    <button class="button" data-target="chart-constant-table-8" data-color="#2bb36b">
      <span class="label">8</span>
    </button>
    <button class="button reset" data-target="all">
      <span class="label">重置</span>
    </button>
  </div>
`;

    const cssContent = `
  .button-container {
    display: flex;
    gap: 0.8em;
    margin-bottom: 0.8em;
  }

  .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;
    cursor: pointer;
    box-shadow: 0 0 2px #7f7f7f;
  }

  .button .label {
    position: relative;
  }

  .button.active {
    color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  }

  .reset {
    color: #000;
  }

  .hidden {
    display: none !important;
  }
`;

    const jsContent = `
  const buttons = document.querySelectorAll(".button");
  const tables = document.querySelectorAll("[class^='chart-constant-table']");

  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      if (button.classList.contains("reset")) {
        tables.forEach((table) => table.classList.remove("hidden"));
        buttons.forEach((btn) => {
          btn.classList.remove("active");
          btn.style.background = "transparent";
        });
        return;
      }

      buttons.forEach((btn) => {
        btn.classList.remove("active");
        btn.style.background = "transparent";
      });

      button.classList.add("active");
      const color = button.getAttribute("data-color");
      if (color) {
        button.style.background = color;
      }

      const targets = button.getAttribute("data-target").split(" ");
      tables.forEach((table) => table.classList.add("hidden"));

      targets.forEach((target) => {
        const matchedTables = document.querySelectorAll("div." + target);
        matchedTables.forEach((table) => table.classList.remove("hidden"));
      });
    });
  });
`;

    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);

});

$(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 2px #7f7f7f; /* 默认边框样式 */
    }

    .single-toggle-button.active {
      color: #fff;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* 激活状态的边框 */
      background: #FF9500; /* 激活背景色 */
    }

    .show {
      display: block !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);
});