MediaWiki:Common.js: Difference between revisions

Revision as of 18:47, 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;
          const container = group.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();
    });

    /* ================= DROPDOWNS ================= */

    let selectedLeft = null;
    let selectedRight = null;

    function createDropdown(container, label, options, side) {

      const wrapper = document.createElement('div');
      wrapper.className = 'custom-dropdown';

      const button = document.createElement('button');
      button.className = 'custom-dropdown-btn';
      button.textContent = label;

      const list = document.createElement('div');
      list.className = 'custom-dropdown-list';

      // 🔥 CRITICAL FIX — remove from layout completely
      list.style.position = "absolute";
      list.style.top = "100%";
      list.style.left = "0";
      list.style.display = "none";

      Object.keys(options).forEach(key => {
        const item = document.createElement('div');
        item.className = 'custom-dropdown-item';
        item.textContent = options[key];

        item.onclick = function () {
          button.textContent = options[key];

          if (side === 'left') selectedLeft = key;
          if (side === 'right') selectedRight = key;

          list.style.display = "none";
          updateResult();
        };

        list.appendChild(item);
      });

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

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

      container.innerHTML = '';
      container.appendChild(wrapper);
    }

    function updateResult() {
      const result = document.querySelector('[data-combo-result]');
      if (!result) return;

      if (!selectedLeft || !selectedRight) {
        result.style.display = "none";
        return;
      }

      result.style.display = "block";

      const key = selectedLeft + "|" + selectedRight;
      const data = JSON.parse(result.dataset.combo || "{}");

      result.innerHTML = data[key] || "No data for this combination.";
    }

    document.querySelectorAll('[data-dropdown-group]').forEach(group => {
      const left = group.querySelector('[data-left]');
      const right = group.querySelector('[data-right]');

      if (left) createDropdown(left, left.dataset.label, JSON.parse(left.dataset.options), "left");
      if (right) createDropdown(right, right.dataset.label, JSON.parse(right.dataset.options), "right");
    });

  });
});