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;

          let container =
            this.closest('.mw-tabs') ||
            this.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();
    });

    /* ================= DROPDOWN SYSTEM ================= */

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

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

        // 🔥 SORT ALPHABETICALLY
        const sortedKeys = Object.keys(options).sort((a, b) =>
          options[a].label.localeCompare(options[b].label)
        );

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

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

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

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

        sortedKeys.forEach(key => {
          const item = document.createElement('div');
          item.className = "mod-dropdown-item";
          item.textContent = options[key].label;

          item.onclick = function () {
            button.textContent = options[key].label;
            output.innerHTML = options[key].content;
            list.style.display = "none";
          };

          list.appendChild(item);
        });

        button.onclick = function () {
          list.style.display =
            list.style.display === "block" ? "none" : "block";
        };

        wrapper.appendChild(button);
        wrapper.appendChild(list);

        container.innerHTML = '';
        container.appendChild(wrapper);
        container.appendChild(output);

      } catch (e) {
        console.error("Dropdown error:", e);
      }

    });

  });
});