MediaWiki:Common.js: Difference between revisions

Revision as of 14:11, 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');
      select.style.padding = '6px';

      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.style.padding = '12px';
      output.style.border = '1px solid #444';
      output.style.background = '#111';
      output.style.width = '300px';
      output.innerHTML = 'Provide Hide Perk information Here';

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

      const leftLabel = document.createElement('div');
      leftLabel.textContent = 'Hide';
      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 = 'Perks';
      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.appendChild(left);
      wrapper.appendChild(right);

      container.appendChild(wrapper);

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

        if (!val || !data[val]) {
          output.innerHTML = 'Provide Hide Perk information Here';
          return;
        }

        output.innerHTML =
          '<b>' + data[val].label + '</b><br><br>' +
          data[val].content;
      });

    });

  });
});