MediaWiki:Common.js: Difference between revisions

Revision as of 21:42, 21 April 2026

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

    /* ================= TAB SYSTEM (FIXED + SCOPED) ================= */

    document.querySelectorAll('.mw-tab-buttons').forEach(tabGroup => {

      const buttons = tabGroup.querySelectorAll('.mw-tab-btn');

      buttons.forEach(btn => {
        btn.addEventListener('click', function () {

          const tabId = this.getAttribute('data-tab');

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

          // find nearest container
          const container = tabGroup.parentElement;

          // hide ONLY tabs in this container
          container.querySelectorAll(':scope > .mw-tab-content').forEach(c => {
            c.classList.remove('active');
          });

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

            // 🔥 initialize mod system ONLY when visible
            initModSystems(target);
          }

        });
      });

    });


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

    function initModSystems(scope) {

      scope.querySelectorAll('.mod-system').forEach(container => {

        if (container.dataset.loaded) return;
        container.dataset.loaded = "true";

        const modType = container.dataset.mod;
        const db = document.querySelector(`#mod-database [data-mod="${modType}"]`);
        if (!db) return;

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

        const wrapper = document.createElement('div');
        wrapper.className = 'mw-dropdown-ui';
        wrapper.setAttribute('data-label', 'Select Mod');

        const dropdown1 = createDropdown(Object.entries(leftData), 'Select Mod');
        const dropdown2 = createDropdown(Object.entries(rightData), 'Select Type');

        const output = document.createElement('div');
        output.className = 'mw-dropdown-output';
        output.textContent = 'Select options to see details';

        wrapper.appendChild(dropdown1);
        wrapper.appendChild(dropdown2);
        wrapper.appendChild(output);

        container.appendChild(wrapper);

        let selectedLeft = null;
        let selectedRight = null;

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

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

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

        function createDropdown(items, label) {
          const div = document.createElement('div');
          div.className = 'mod-dropdown';

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

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

          items.forEach(([key, text]) => {
            const item = document.createElement('div');
            item.className = 'mod-dropdown-item';
            item.textContent = text;

            item.onclick = () => {
              btn.textContent = text;
              list.style.display = 'none';

              if (label === 'Select Mod') selectedLeft = key;
              else selectedRight = key;

              updateOutput();
            };

            list.appendChild(item);
          });

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

          div.appendChild(btn);
          div.appendChild(list);

          return div;
        }

      });

    }


    /* ================= INITIAL LOAD ================= */

    // activate ONLY top-level first tabs
    document.querySelectorAll('.mw-tab-buttons').forEach(group => {
      const first = group.querySelector('.mw-tab-btn');
      if (first) first.click();
    });

  });
});