MediaWiki:Tangle/定数表/dev.js

$(function () {
    console.log("javascript load from MediaWiki:Tangle/定数表/dev.js")

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

  .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);
        console.log(targets);
        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);

});