MediaWiki:Common.js: Difference between revisions

Revision as of 20:41, 21 April 2026

mw.loader.using('mediawiki.util').then(function () {
  $(function () {

    /* ================= TAB SYSTEM ================= */

    document.querySelectorAll('.mw-tab-buttons').forEach(group => {
      const buttons = group.querySelectorAll('.mw-tab-btn');

      buttons.forEach(btn => {
        btn.onclick = function () {
          const tabId = this.dataset.tab;

          let container =
            this.closest('.mw-tabs') ||
            this.closest('.mw-tab-content') ||
            document;

          container.querySelectorAll('.mw-tab-content').forEach(c => {
            c.style.display = 'none';
          });

          container.querySelectorAll('.mw-tab-btn').forEach(b => {
            b.classList.remove('active');
          });

          this.classList.add('active');

          const target = container.querySelector('#' + tabId);
          if (target) target.style.display = 'block';
        };
      });

      if (buttons.length) buttons[0].click();
    });

    /* ================= SAFE DROPDOWN SYSTEM ================= */

    document.querySelectorAll('.mw-dropdown-ui').forEach(container => {

      try {
        const label = container.dataset.label || "Select";
        const raw = container.getAttribute("data-options");

        // 🔥 FIX: CLEAN BROKEN JSON BEFORE PARSE
        let clean = raw
          .replace(/[\n\r]/g, "")        // remove line breaks
          .replace(/,\s*}/g, "}")       // remove trailing commas
          .replace(/,\s*]/g, "]");      // remove trailing commas in arrays

        let options = {};

        try {
          options = JSON.parse(clean);
        } catch (e) {
          console.error("JSON still broken:", clean);
          container.innerHTML = "<div style='color:red'>Dropdown failed to load (bad data)</div>";
          return;
        }

        // 🔥 SORT
        const sortedKeys = Object.keys(options).sort((a, b) =>
          options[a].label.localeCompare(options[b].label)
        );

        const wrapper = document.createElement('div');
        wrapper.style.position = "relative";

        const button = document.createElement('button');
        button.textContent = label;
        button.style.width = "100%";
        button.style.padding = "10px";
        button.style.background = "#111";
        button.style.color = "#fff";
        button.style.border = "1px solid #444";
        button.style.borderRadius = "6px";
        button.style.cursor = "pointer";
        button.style.textAlign = "left";

        const list = document.createElement('div');
        list.style.display = "none";
        list.style.position = "absolute";
        list.style.width = "100%";
        list.style.background = "#1a1a1a";
        list.style.border = "1px solid #444";
        list.style.borderRadius = "6px";
        list.style.zIndex = "9999";
        list.style.maxHeight = "250px";
        list.style.overflowY = "auto";

        const output = document.createElement('div');
        output.style.marginTop = "10px";
        output.style.padding = "10px";
        output.style.border = "1px solid #444";
        output.style.display = "none";

        sortedKeys.forEach(key => {
          const item = document.createElement('div');
          item.textContent = options[key].label;
          item.style.padding = "8px";
          item.style.cursor = "pointer";
          item.style.color = "#ccc";

          item.onmouseenter = () => {
            item.style.background = "#00bfff";
            item.style.color = "#000";
          };

          item.onmouseleave = () => {
            item.style.background = "";
            item.style.color = "#ccc";
          };

          item.onclick = function () {
            button.textContent = options[key].label;
            output.innerHTML = options[key].content;
            output.style.display = "block";
            list.style.display = "none";
          };

          list.appendChild(item);
        });

        button.onclick = function () {
          list.style.display = list.style.display === "block" ? "none" : "block";
        };

        wrapper.appendChild(button);
        wrapper.appendChild(list);

        container.innerHTML = "";
        container.appendChild(wrapper);
        container.appendChild(output);

      } catch (err) {
        console.error("Dropdown crash:", err);
      }

    });

  });
});