MediaWiki:Common.js: Difference between revisions

Revision as of 21:43, 21 April 2026

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

    /* ================= ORIGINAL DROPDOWN SYSTEM (RESTORED) ================= */

    document.querySelectorAll('.mw-dropdown-ui').forEach(container => {
      const select = container.querySelector('select');
      const sections = container.querySelectorAll('.dropdown-section');

      if (!select) return;

      select.addEventListener('change', function () {
        sections.forEach(s => s.style.display = 'none');

        const target = container.querySelector('#' + this.value);
        if (target) target.style.display = 'block';
      });
    });


    /* ================= TAB SYSTEM (SAFE VERSION) ================= */

    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
          buttons.forEach(b => b.classList.remove('active'));
          this.classList.add('active');

          const container = group.parentElement;

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

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

            // 🔥 init mod system safely
            initModSystems(target);
          }

        });
      });

    });


    /* ================= MOD SYSTEM (ADDED SAFELY) ================= */

    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 left = db.querySelector('[data-left]');
        const right = db.querySelector('[data-right]');
        if (!left || !right) return;

        const leftData = JSON.parse(left.dataset.left);
        const rightData = JSON.parse(right.dataset.right);

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

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

        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(data, label, isLeft) {
          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';

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

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

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

        wrapper.appendChild(createDropdown(leftData, 'Select Mod', true));
        wrapper.appendChild(createDropdown(rightData, 'Select Type', false));
        wrapper.appendChild(output);

        container.appendChild(wrapper);

      });

    }


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

    document.querySelectorAll('.mw-tab-buttons').forEach(group => {
      const first = group.querySelector('.mw-tab-btn');
      if (first) first.click();
    });

  });
});