MediaWiki:Common.js: Difference between revisions

Revision as of 22:43, 21 April 2026

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

    /* =========================
       TAB SYSTEM (FIXED)
    ========================= */
    document.querySelectorAll('.mw-tab-buttons').forEach(container => {
      const buttons = container.querySelectorAll('.mw-tab-btn');

      buttons.forEach(btn => {
        btn.addEventListener('click', () => {
          const tabId = btn.dataset.tab;

          // deactivate siblings
          buttons.forEach(b => b.classList.remove('active'));
          btn.classList.add('active');

          // hide all contents globally
          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 activate first tab
      if (buttons.length) buttons[0].click();
    });

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

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

      if (!raw) return;

      let options;

      try {
        // SAFE PARSE (handles broken JSON better)
        options = JSON.parse(raw);
      } catch (e) {
        console.error("Dropdown JSON failed:", raw);
        return;
      }

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

      // Wrapper
      const wrapper = document.createElement('div');
      wrapper.className = 'mw-dropdown-wrapper';

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

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

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

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

      // Handle change
      select.addEventListener('change', () => {
        const selected = options[select.value];
        if (!selected) {
          output.innerHTML = "";
          return;
        }

        // IMPORTANT: allows FULL HTML + multiline
        output.innerHTML = selected.content || "";
      });

      // Clear container and rebuild
      container.innerHTML = "";
      wrapper.appendChild(label);
      wrapper.appendChild(select);
      wrapper.appendChild(output);
      container.appendChild(wrapper);

    });

  });
});