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

    /* ===== SELECT DROPDOWNS (OLD SYSTEM) ===== */
    document.querySelectorAll('.mw-dropdown-ui select').forEach(select => {
      const container = select.closest('.mw-dropdown-ui');
      const sections = container.querySelectorAll('.dropdown-section');

      select.addEventListener('change', function () {
        sections.forEach(s => s.style.display = 'none');

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


    /* ===== DATA-OPTIONS DROPDOWNS (NEW SYSTEM) ===== */
    document.querySelectorAll('.mw-dropdown-ui[data-options]').forEach(container => {

      if (container.dataset.rendered) return;

      let data;
      try {
        data = JSON.parse(container.dataset.options);
      } catch (e) {
        console.error("Bad JSON:", 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";

      Object.values(data).forEach(item => {
        const option = document.createElement('div');
        option.className = 'mod-dropdown-item';
        option.textContent = item.label;

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

        list.appendChild(option);
      });

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

      container.appendChild(btn);
      container.appendChild(list);
      container.appendChild(output);

      container.dataset.rendered = "true";
    });

  });
});