Jump to content

MediaWiki:Common.js: Difference between revisions

From Once Human Guide
← Older editNewer edit →
Bones (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,328 edits
No edit summary
No edit summary
Line 2: Line 2:
   $(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 (FIXED FOR MEDIAWIKI) =====
mw.hook('wikipage.content').add(function () {
  document.querySelectorAll('.mw-tabs').forEach(tabContainer => {
    const buttons = tabContainer.querySelectorAll('.mw-tab-btn');
    const contents = tabContainer.querySelectorAll('.mw-tab-content');
    if (!buttons.length) return;
    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');
        const targetEl = tabContainer.querySelector('#' + target);
        if (targetEl) targetEl.classList.add('active');
      });
    });
    // auto select first tab
    buttons[0].classList.add('active');
    contents[0].classList.add('active');
  });
});
document.addEventListener("click", function () {
  document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown);
});
mw.loader.using('mediawiki.util').then(function () {
  $(function () {
    // TAB SYSTEM
     document.querySelectorAll('.mw-tab-buttons').forEach(group => {
     document.querySelectorAll('.mw-tab-buttons').forEach(group => {
       const buttons = group.querySelectorAll('.mw-tab-btn');
       const buttons = group.querySelectorAll('.mw-tab-btn');
Line 137: Line 9:
           const tabId = this.dataset.tab;
           const tabId = this.dataset.tab;


           // deactivate all
           // 🔥 ONLY affect tabs in this group
           document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
           const container = group.parentElement;
           document.querySelectorAll('.mw-tab-content').forEach(c => c.style.display = 'none');
 
          container.querySelectorAll(':scope > .mw-tab-content').forEach(c => {
            c.style.display = 'none';
          });
 
           container.querySelectorAll('.mw-tab-btn').forEach(b => {
            b.classList.remove('active');
          });


          // activate selected
           this.classList.add('active');
           this.classList.add('active');
           const target = document.getElementById(tabId);
 
           const target = container.querySelector('#' + tabId);
           if (target) target.style.display = 'block';
           if (target) target.style.display = 'block';
         });
         });
       });
       });


       // 🔥 AUTO-SELECT FIRST TAB
       // auto-open first tab in each group
       if (buttons.length > 0) {
       if (buttons.length > 0) {
         buttons[0].click();
         buttons[0].click();

Revision as of 18:14, 21 April 2026

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

    document.querySelectorAll('.mw-tab-buttons').forEach(group => {
      const buttons = group.querySelectorAll('.mw-tab-btn');

      buttons.forEach(btn => {
        btn.addEventListener('click', function () {
          const tabId = this.dataset.tab;

          // 🔥 ONLY affect tabs in this group
          const container = group.parentElement;

          container.querySelectorAll(':scope > .mw-tab-content').forEach(c => {
            c.style.display = 'none';
          });

          container.querySelectorAll('.mw-tab-btn').forEach(b => {
            b.classList.remove('active');
          });

          this.classList.add('active');

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

      // auto-open first tab in each group
      if (buttons.length > 0) {
        buttons[0].click();
      }
    });

  });
});
Retrieved from "https://ohwikiguide.com/index.php?title=MediaWiki:Common.js&oldid=867"