Jump to content

MediaWiki:Common.js: Difference between revisions

From Once Human Guide
No edit summary
No edit summary
Line 2: Line 2:
   $(function () {
   $(function () {


     document.querySelectorAll('.mw-tab-buttons').forEach(group => {
     function initDropdown(container) {
       const buttons = group.querySelectorAll('.mw-tab-btn');
      const label = container.dataset.label || "Select";
       const options = JSON.parse(container.dataset.options || "{}");


       buttons.forEach(btn => {
       const wrapper = document.createElement('div');
        btn.addEventListener('click', function () {
      wrapper.className = 'mw-dropdown';
          const tabId = this.dataset.tab;


          // 🔥 Find the nearest container that holds this group
      const button = document.createElement('button');
          const container = group.closest('.mw-tab-content') || document;
      button.textContent = label;
      button.className = 'mw-dropdown-btn';


          // Hide ONLY tabs inside this container
      const list = document.createElement('div');
          container.querySelectorAll('.mw-tab-content').forEach(c => {
      list.className = 'mw-dropdown-list';
            c.style.display = 'none';
      list.style.display = 'none';
          });


          container.querySelectorAll('.mw-tab-btn').forEach(b => {
      const content = document.createElement('div');
            b.classList.remove('active');
      content.className = 'mw-dropdown-content';
          });


          this.classList.add('active');
      Object.keys(options).forEach(key => {
        const opt = options[key];


          const target = container.querySelector('#' + tabId);
        const item = document.createElement('div');
          if (target) target.style.display = 'block';
        item.className = 'mw-dropdown-item';
        item.textContent = opt.label;
 
        item.addEventListener('click', function () {
          button.textContent = opt.label;
          content.innerHTML = opt.content;
          list.style.display = 'none';
         });
         });
        list.appendChild(item);
      });
      button.addEventListener('click', function () {
        list.style.display = list.style.display === 'none' ? 'block' : 'none';
       });
       });


       // auto open first tab
       wrapper.appendChild(button);
       if (buttons.length > 0) {
       wrapper.appendChild(list);
        buttons[0].click();
      wrapper.appendChild(content);
      }
 
     });
      container.innerHTML = '';
      container.appendChild(wrapper);
    }
 
    // 🔥 INIT ALL DROPDOWNS
     document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown);


   });
   });
});
});

Revision as of 18:21, 21 April 2026

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

    function initDropdown(container) {
      const label = container.dataset.label || "Select";
      const options = JSON.parse(container.dataset.options || "{}");

      const wrapper = document.createElement('div');
      wrapper.className = 'mw-dropdown';

      const button = document.createElement('button');
      button.textContent = label;
      button.className = 'mw-dropdown-btn';

      const list = document.createElement('div');
      list.className = 'mw-dropdown-list';
      list.style.display = 'none';

      const content = document.createElement('div');
      content.className = 'mw-dropdown-content';

      Object.keys(options).forEach(key => {
        const opt = options[key];

        const item = document.createElement('div');
        item.className = 'mw-dropdown-item';
        item.textContent = opt.label;

        item.addEventListener('click', function () {
          button.textContent = opt.label;
          content.innerHTML = opt.content;
          list.style.display = 'none';
        });

        list.appendChild(item);
      });

      button.addEventListener('click', function () {
        list.style.display = list.style.display === 'none' ? 'block' : 'none';
      });

      wrapper.appendChild(button);
      wrapper.appendChild(list);
      wrapper.appendChild(content);

      container.innerHTML = '';
      container.appendChild(wrapper);
    }

    // 🔥 INIT ALL DROPDOWNS
    document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown);

  });
});