MediaWiki:Common.js: Difference between revisions

Revision as of 21:56, 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.addEventListener('click', function () {
          const tabId = this.getAttribute('data-tab');

          // remove active from siblings
          buttons.forEach(b => b.classList.remove('active'));

          // activate clicked
          this.classList.add('active');

          // find ALL tab content on page
          document.querySelectorAll('.mw-tab-content').forEach(tab => {
            tab.classList.remove('active');
          });

          // activate target
          const target = document.getElementById(tabId);
          if (target) target.classList.add('active');
        });
      });

      // AUTO ACTIVATE FIRST TAB IN EACH GROUP
      const first = buttons[0];
      if (first) first.click();
    });

    /* ================= MOD SYSTEM ================= */

    document.querySelectorAll('.mod-system').forEach(container => {
      const modType = container.getAttribute('data-mod');
      const db = document.querySelector(`#mod-database [data-mod="${modType}"]`);

      if (!db) return;

      const leftData = JSON.parse(db.querySelector('[data-left]').getAttribute('data-left'));
      const rightData = JSON.parse(db.querySelector('[data-right]').getAttribute('data-right'));

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

      const leftBtn = document.createElement('div');
      leftBtn.className = 'mod-dropdown-btn';
      leftBtn.textContent = 'Select Mod Type';

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

      const rightBtn = document.createElement('div');
      rightBtn.className = 'mod-dropdown-btn';
      rightBtn.textContent = 'Select Stat';

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

      const output = document.createElement('div');
      output.className = 'mw-dropdown-output';

      let selectedLeft = null;
      let selectedRight = null;

      // Populate LEFT dropdown
      Object.entries(leftData).forEach(([key, label]) => {
        const item = document.createElement('div');
        item.className = 'mod-dropdown-item';
        item.textContent = label;

        item.onclick = () => {
          selectedLeft = key;
          leftBtn.textContent = label;
          leftList.style.display = 'none';
          updateOutput();
        };

        leftList.appendChild(item);
      });

      // Populate RIGHT dropdown
      Object.entries(rightData).forEach(([key, label]) => {
        const item = document.createElement('div');
        item.className = 'mod-dropdown-item';
        item.textContent = label;

        item.onclick = () => {
          selectedRight = key;
          rightBtn.textContent = label;
          rightList.style.display = 'none';
          updateOutput();
        };

        rightList.appendChild(item);
      });

      // Toggle lists
      leftBtn.onclick = () => {
        leftList.style.display = leftList.style.display === 'block' ? 'none' : 'block';
      };

      rightBtn.onclick = () => {
        rightList.style.display = rightList.style.display === 'block' ? 'none' : 'block';
      };

      function updateOutput() {
        if (!selectedLeft || !selectedRight) return;

        const key = `${selectedLeft}__${selectedRight}`;
        const match = db.querySelector(`[data-key="${key}"]`);

        output.innerHTML = match ? match.innerHTML : "No data found";
      }

      wrapper.appendChild(leftBtn);
      wrapper.appendChild(leftList);
      wrapper.appendChild(rightBtn);
      wrapper.appendChild(rightList);
      wrapper.appendChild(output);

      container.appendChild(wrapper);
    });

  });
});