MediaWiki:Common.js: Difference between revisions

Revision as of 21:08, 21 April 2026

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

    /* ================= TAB SYSTEM (FIXED NESTED) ================= */

    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');

          // deactivate only this group's buttons
          buttons.forEach(b => b.classList.remove('active'));
          this.classList.add('active');

          // scope to correct parent container
          const container = group.parentElement;

          // hide ONLY direct children tabs (not nested)
          container.querySelectorAll(':scope > .mw-tab-content').forEach(tab => {
            tab.classList.remove('active');
          });

          // show selected tab
          const target = container.querySelector('#' + tabId);
          if (target) target.classList.add('active');
        });
      });

      // auto activate first tab in each group
      if (buttons.length > 0) {
        buttons[0].click();
      }
    });


    /* ================= MOD SYSTEM (RESTORED) ================= */

    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;

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

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

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

  });
});
/* ================= SIMPLE DATA-OPTIONS DROPDOWN ================= */

document.querySelectorAll('.mw-dropdown-ui[data-options]').forEach(container => {
  const data = JSON.parse(container.getAttribute('data-options'));

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

  const button = document.createElement('div');
  button.className = 'mod-dropdown-btn';
  button.textContent = container.getAttribute('data-label') || 'Select';

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

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

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

    item.onclick = () => {
      button.textContent = obj.label;
      list.style.display = 'none';
      output.innerHTML = obj.content;
    };

    list.appendChild(item);
  });

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

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

  container.appendChild(wrapper);
});