MediaWiki:Common.js: Difference between revisions

Revision as of 22:45, 21 April 2026

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

    /* =========================
       ORIGINAL TAB SYSTEM (RESTORED)
    ========================= */
    document.querySelectorAll('.mw-tab-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const tabId = btn.dataset.tab;

        // deactivate all buttons
        document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        // hide all contents
        document.querySelectorAll('.mw-tab-content').forEach(c => {
          c.style.display = 'none';
        });

        // show selected
        const target = document.getElementById(tabId);
        if (target) target.style.display = 'block';
      });
    });

    // auto-click first tab (like your original behavior)
    const firstTab = document.querySelector('.mw-tab-btn');
    if (firstTab) firstTab.click();


    /* =========================
       DROPDOWN SYSTEM (FIX ONLY)
    ========================= */
    document.querySelectorAll('.mw-dropdown-ui').forEach(container => {

      let raw = container.getAttribute('data-options');
      if (!raw) return;

      let options;

      try {
        // ONLY improvement: safer parsing
        options = JSON.parse(raw);
      } catch (e) {
        console.error("Dropdown JSON failed:", raw);
        return;
      }

      const labelText = container.dataset.label || "Select One";

      const label = document.createElement('div');
      label.textContent = labelText;
      label.style.marginBottom = "6px";

      const select = document.createElement('select');
      select.style.width = "100%";
      select.style.padding = "8px";

      const defaultOpt = document.createElement('option');
      defaultOpt.value = "";
      defaultOpt.textContent = "Select One";
      select.appendChild(defaultOpt);

      const output = document.createElement('div');
      output.style.marginTop = "12px";

      Object.entries(options).forEach(([key, val]) => {
        const opt = document.createElement('option');
        opt.value = key;
        opt.textContent = val.label || key;
        select.appendChild(opt);
      });

      select.addEventListener('change', () => {
        const selected = options[select.value];
        output.innerHTML = selected ? selected.content : "";
      });

      container.innerHTML = "";
      container.appendChild(label);
      container.appendChild(select);
      container.appendChild(output);

    });

  });
});