MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

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

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

    let selectedLeft = null;
    let selectedRight = null;

    function createDropdown(container, label, options, side) {
      const wrapper = document.createElement('div');

      const button = document.createElement('button');
      button.textContent = label;

      let list = null; // 🔥 only create when clicked

      button.onclick = function () {

        // remove existing open dropdowns
        document.querySelectorAll('.dropdown-list').forEach(el => el.remove());

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

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

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

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

            list.remove();
            updateResult();
          };

          list.appendChild(item);
        });

        wrapper.appendChild(list);
      };

      wrapper.appendChild(button);
      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");
    });

  });
});