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

    console.log("COMMON.JS LOADED");

    try {

      /* ================= OLD SELECT DROPDOWNS ================= */

      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';
        });
      });


      /* ================= NEW DATA-OPTIONS DROPDOWNS ================= */

      document.querySelectorAll('.mw-dropdown-ui[data-options]').forEach(container => {

        if (container.dataset.loaded) return;

        let data;
        try {
          data = JSON.parse(container.dataset.options);
        } catch (e) {
          console.error("Dropdown JSON error:", e);
          return;
        }

        const btn = document.createElement('div');
        btn.className = 'mod-dropdown-btn';
        btn.textContent = "Select One";

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

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

        Object.entries(data)
          .sort((a, b) => a[1].label.localeCompare(b[1].label))
          .forEach(([key, val]) => {

            const item = document.createElement('div');
            item.className = 'mod-dropdown-item';
            item.textContent = val.label;

            item.onclick = () => {
              btn.textContent = val.label;
              list.style.display = 'none';
              output.innerHTML = val.content;
            };

            list.appendChild(item);
          });

        btn.onclick = () => {
          list.style.display = list.style.display === 'block' ? 'none' : 'block';
        };

        // 🔥 DO NOT WIPE container (this was breaking everything before)
        container.appendChild(btn);
        container.appendChild(list);
        container.appendChild(output);

        container.dataset.loaded = "true";

      });

    } catch (err) {
      console.error("COMMON.JS ERROR:", err);
    }

  });
});