MediaWiki:Common.js: Difference between revisions

Revision as of 17:31, 21 April 2026

mw.loader.using('mediawiki.util').then(function () {
  $(function () {

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

      let raw = container.getAttribute('data-options');
      if (!raw) return;

      let data;

      try {
        data = JSON.parse(raw);
      } catch (e) {
        console.error('Dropdown JSON error:', e);
        container.innerHTML = '<span style="color:red;">Invalid dropdown data</span>';
        return;
      }

      // ===== CREATE DROPDOWN =====
      const select = document.createElement('select');

      const defaultOption = document.createElement('option');
      defaultOption.value = '';
      defaultOption.textContent = 'Select one';
      select.appendChild(defaultOption);

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

      // ===== CREATE OUTPUT PANEL =====
      const output = document.createElement('div');
      output.className = 'mw-dropdown-output';
      output.innerHTML = 'Select an option to view details';

      // ===== LEFT COLUMN =====
      const left = document.createElement('div');

      const leftLabel = document.createElement('div');
      leftLabel.textContent = container.getAttribute('data-label') || 'Selection';
      leftLabel.style.marginBottom = '6px';
      leftLabel.style.fontWeight = 'bold';

      left.appendChild(leftLabel);
      left.appendChild(select);

      // ===== RIGHT COLUMN =====
      const right = document.createElement('div');

      const rightLabel = document.createElement('div');
      rightLabel.textContent = 'Details';
      rightLabel.style.marginBottom = '6px';
      rightLabel.style.fontWeight = 'bold';

      right.appendChild(rightLabel);
      right.appendChild(output);

      // ===== WRAPPER (LAYOUT) =====
      const wrapper = document.createElement('div');
      wrapper.style.display = 'flex';
      wrapper.style.gap = '40px';
      wrapper.style.alignItems = 'flex-start';
      wrapper.style.flexWrap = 'wrap';

      wrapper.appendChild(left);
      wrapper.appendChild(right);

      container.appendChild(wrapper);

      // ===== CHANGE HANDLER =====
      select.addEventListener('change', function () {
        const val = this.value;

        if (!val || !data[val]) {
          output.innerHTML = 'Select an option to view details';
          return;
        }

        output.innerHTML =
          '<b style="color:#00bfff;">' + data[val].label + '</b><br><br>' +
          data[val].content;
      });

    });

  });
});