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-btn').forEach(btn => {
      btn.addEventListener('click', function () {

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

        // deactivate buttons
        parent.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');

        // hide contents
        document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active'));

        // show selected
        const target = document.getElementById(tabId);
        if (target) {
          target.classList.add('active');

          // 🔥 INIT MOD SYSTEM AFTER TAB OPENS
          initModSystems(target);
        }

      });
    });


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

    function initModSystems(scope) {

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

        if (container.dataset.loaded) return; // prevent duplicates
        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 first tab automatically
    const firstTab = document.querySelector('.mw-tab-btn');
    if (firstTab) firstTab.click();

  });
});