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-buttons').forEach(group => {
      const buttons = group.querySelectorAll('.mw-tab-btn');

      buttons.forEach(btn => {
        btn.onclick = function () {
          const tabId = this.dataset.tab;
          const container = group.closest('.mw-tab-content') || document;

          container.querySelectorAll('.mw-tab-content').forEach(c => c.style.display = 'none');
          container.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));

          this.classList.add('active');

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

      if (buttons.length) buttons[0].click();
    });

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

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

      const modType = system.dataset.mod;
      const dataBlock = document.querySelector('#mod-database [data-mod="' + modType + '"]');
      if (!dataBlock) return;

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

      let selectedLeft = null;
      let selectedRight = null;

      const leftDiv = document.createElement('div');
      const rightDiv = document.createElement('div');
      const result = document.createElement('div');

      result.style.display = "none";
      result.style.border = "1px solid #444";
      result.style.padding = "10px";
      result.style.marginTop = "10px";

      function createDropdown(container, options, side) {
        const btn = document.createElement('button');
        btn.textContent = "Select";

        btn.onclick = function () {
          document.querySelectorAll('.dropdown-list').forEach(el => el.remove());

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

          Object.keys(options).forEach(key => {
            const item = document.createElement('div');
            item.textContent = options[key];

            item.onclick = function () {
              btn.textContent = options[key];

              if (side === "left") selectedLeft = key;
              if (side === "right") selectedRight = key;

              list.remove();
              update();
            };

            list.appendChild(item);
          });

          container.appendChild(list);
        };

        container.appendChild(btn);
      }

      function update() {
        if (!selectedLeft || !selectedRight) {
          result.style.display = "none";
          return;
        }

        const key = selectedLeft + "__" + selectedRight;
        const match = dataBlock.querySelector('[data-key="' + key + '"]');

        result.style.display = "block";
        result.innerHTML = match ? match.innerHTML : "No data";
      }

      createDropdown(leftDiv, leftData, "left");
      createDropdown(rightDiv, rightData, "right");

      system.appendChild(leftDiv);
      system.appendChild(rightDiv);
      system.appendChild(result);
    });

  });
});