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");

    /* ================= 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;
      container.dataset.loaded = "true";

      const data = JSON.parse(container.dataset.options);

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

      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)) // 🔥 alphabetical
        .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';
      };

      wrapper.appendChild(btn);
      wrapper.appendChild(list);

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

    });


  });
});