MediaWiki:Common.js: Difference between revisions

Revision as of 17:35, 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;
      });

    });

  });
});
// ===== TAB SYSTEM =====
document.querySelectorAll('.mw-tabs').forEach(tabContainer => {
  const buttons = tabContainer.querySelectorAll('.mw-tab-btn');
  const contents = tabContainer.querySelectorAll('.mw-tab-content');

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      const target = btn.getAttribute('data-tab');

      // remove active
      buttons.forEach(b => b.classList.remove('active'));
      contents.forEach(c => c.classList.remove('active'));

      // activate
      btn.classList.add('active');
      tabContainer.querySelector(`#${target}`).classList.add('active');
    });
  });

  // auto activate first tab
  if (buttons.length > 0) {
    buttons[0].click();
  }
});