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
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
mw.loader.using('mediawiki.util').then(function () {
mw.loader.using(['mediawiki.util']).then(function () {
   $(function () {
   $(function () {


     console.log("COMMON.JS LOADED");
     /* ================= TAB SYSTEM ================= */


     try {
     document.querySelectorAll('.mw-tab-buttons').forEach(tabGroup => {


       /* ================= OLD SELECT DROPDOWNS ================= */
       const buttons = tabGroup.querySelectorAll('.mw-tab-btn');


       document.querySelectorAll('.mw-dropdown-ui').forEach(container => {
       buttons.forEach(btn => {
         const select = container.querySelector('select');
         btn.addEventListener('click', function () {
        const sections = container.querySelectorAll('.dropdown-section');


        if (!select) return;
          const tabId = this.getAttribute('data-tab');


        select.addEventListener('change', function () {
          // deactivate buttons in this group only
           sections.forEach(s => s.style.display = 'none');
          buttons.forEach(b => b.classList.remove('active'));
           this.classList.add('active');


           const target = container.querySelector('#' + this.value);
           // find container
           if (target) target.style.display = 'block';
           const container = tabGroup.parentElement;
        });
      });


          // hide direct tab contents
          container.querySelectorAll(':scope > .mw-tab-content').forEach(c => {
            c.classList.remove('active');
          });


      /* ================= NEW DATA-OPTIONS DROPDOWNS ================= */
          // show selected
          const target = container.querySelector('#' + tabId);
          if (target) target.classList.add('active');


       document.querySelectorAll('.mw-dropdown-ui[data-options]').forEach(container => {
        });
       });


        if (container.dataset.loaded) return;
    });


        let data;
        try {
          data = JSON.parse(container.dataset.options);
        } catch (e) {
          console.error("Dropdown JSON error:", e);
          return;
        }


        const btn = document.createElement('div');
    /* ================= DROPDOWN SYSTEM ================= */
        btn.className = 'mod-dropdown-btn';
        btn.textContent = "Select One";


        const list = document.createElement('div');
    document.querySelectorAll('.mw-dropdown-ui').forEach(container => {
        list.className = 'mod-dropdown-list';
      const select = container.querySelector('select');
      const sections = container.querySelectorAll('.dropdown-section');


        const output = document.createElement('div');
      if (!select) return;
        output.className = 'mw-dropdown-output';
        output.textContent = "Select something to see details";


        Object.entries(data)
      select.addEventListener('change', function () {
          .sort((a, b) => a[1].label.localeCompare(b[1].label))
        sections.forEach(s => s.style.display = 'none');
          .forEach(([key, val]) => {


            const item = document.createElement('div');
        const target = container.querySelector('#' + this.value);
            item.className = 'mod-dropdown-item';
        if (target) target.style.display = 'block';
            item.textContent = val.label;
      });
 
    });
            item.onclick = () => {
              btn.textContent = val.label;
              list.style.display = 'none';
              output.innerHTML = val.content;
            };
 
            list.appendChild(item);
          });
 
        btn.onclick = () => {
          list.style.display = list.style.display === 'block' ? 'none' : 'block';
        };


        // 🔥 DO NOT WIPE container (this was breaking everything before)
        container.appendChild(btn);
        container.appendChild(list);
        container.appendChild(output);


        container.dataset.loaded = "true";
    /* ================= INITIAL TAB LOAD ================= */
 
      });


     } catch (err) {
     document.querySelectorAll('.mw-tab-buttons').forEach(group => {
       console.error("COMMON.JS ERROR:", err);
       const first = group.querySelector('.mw-tab-btn');
     }
      if (first) first.click();
     });


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

Revision as of 21:50, 21 April 2026

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

    /* ================= TAB SYSTEM ================= */

    document.querySelectorAll('.mw-tab-buttons').forEach(tabGroup => {

      const buttons = tabGroup.querySelectorAll('.mw-tab-btn');

      buttons.forEach(btn => {
        btn.addEventListener('click', function () {

          const tabId = this.getAttribute('data-tab');

          // deactivate buttons in this group only
          buttons.forEach(b => b.classList.remove('active'));
          this.classList.add('active');

          // find container
          const container = tabGroup.parentElement;

          // hide direct tab contents
          container.querySelectorAll(':scope > .mw-tab-content').forEach(c => {
            c.classList.remove('active');
          });

          // show selected
          const target = container.querySelector('#' + tabId);
          if (target) target.classList.add('active');

        });
      });

    });


    /* ================= DROPDOWN SYSTEM ================= */

    document.querySelectorAll('.mw-dropdown-ui').forEach(container => {
      const select = container.querySelector('select');
      const sections = container.querySelectorAll('.dropdown-section');

      if (!select) return;

      select.addEventListener('change', function () {
        sections.forEach(s => s.style.display = 'none');

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


    /* ================= INITIAL TAB LOAD ================= */

    document.querySelectorAll('.mw-tab-buttons').forEach(group => {
      const first = group.querySelector('.mw-tab-btn');
      if (first) first.click();
    });

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