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 () {

    /* ================= UNIVERSAL 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;

          // 🔥 works for BOTH systems
          let container =
            this.closest('.mw-tabs') ||
            this.closest('.mw-tab-content') ||
            document;

          // hide all tabs in scope
          container.querySelectorAll('.mw-tab-content').forEach(c => {
            c.style.display = 'none';
          });

          // reset buttons
          container.querySelectorAll('.mw-tab-btn').forEach(b => {
            b.classList.remove('active');
          });

          // activate
          this.classList.add('active');

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

      // auto open first tab
      if (buttons.length) buttons[0].click();
    });

    /* ================= INGREDIENT DROPDOWNS (RESTORED) ================= */

    document.querySelectorAll('.mw-dropdown-ui').forEach(container => {

      const label = container.dataset.label || "Select";
      const options = JSON.parse(container.dataset.options || "{}");

      const select = document.createElement('select');

      const defaultOption = document.createElement('option');
      defaultOption.textContent = label;
      defaultOption.value = "";
      select.appendChild(defaultOption);

      Object.keys(options).forEach(key => {
        const opt = document.createElement('option');
        opt.value = key;
        opt.textContent = options[key].label;
        select.appendChild(opt);
      });

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

      select.onchange = function () {
        const selected = options[this.value];
        output.innerHTML = selected ? selected.content : "";
      };

      container.innerHTML = '';
      container.appendChild(select);
      container.appendChild(output);
    });

    /* ================= 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);
    });

  });
});