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 button = document.createElement('button');
      const list = document.createElement('div');

      button.textContent = label;
      list.style.display = 'none';

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

        item.onclick = function () {
          button.textContent = options[key];
          list.style.display = 'none';

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

          updateResult();
        };

        list.appendChild(item);
      });

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

      container.innerHTML = '';
      container.appendChild(button);
      container.appendChild(list);
    }

    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 comboKey = selectedLeft + "|" + selectedRight;
      const data = JSON.parse(result.dataset.combo || "{}");

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

    /* ================= INIT PER PAGE ================= */
    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"
        );
      }
    });

  });
});