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 2: Line 2:
   $(function () {
   $(function () {


     /* ================= TAB SYSTEM (FIXED NESTED) ================= */
     /* ================= TAB SYSTEM ================= */


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


      buttons.forEach(btn => {
        const tabId = this.getAttribute('data-tab');
        btn.addEventListener('click', function () {
        const parent = this.closest('div');
          const tabId = this.getAttribute('data-tab');


          // deactivate only this group's buttons
        // deactivate buttons
          buttons.forEach(b => b.classList.remove('active'));
        parent.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
          this.classList.add('active');
        this.classList.add('active');


          // scope to correct parent container
        // hide contents
          const container = group.parentElement;
        document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active'));


          // hide ONLY direct children tabs (not nested)
        // show selected
          container.querySelectorAll(':scope > .mw-tab-content').forEach(tab => {
        const target = document.getElementById(tabId);
            tab.classList.remove('active');
        if (target) {
           });
          target.classList.add('active');
 
           // 🔥 INIT MOD SYSTEM AFTER TAB OPENS
          initModSystems(target);
        }


          // show selected tab
          const target = container.querySelector('#' + tabId);
          if (target) target.classList.add('active');
        });
       });
       });
      // auto activate first tab in each group
      if (buttons.length > 0) {
        buttons[0].click();
      }
     });
     });




     /* ================= MOD SYSTEM (RESTORED) ================= */
     /* ================= MOD SYSTEM ================= */


     document.querySelectorAll('.mod-system').forEach(container => {
     function initModSystems(scope) {
      const modType = container.getAttribute('data-mod');
      const db = document.querySelector(`#mod-database [data-mod="${modType}"]`);


       if (!db) return;
       scope.querySelectorAll('.mod-system').forEach(container => {


      const leftData = JSON.parse(db.querySelector('[data-left]').getAttribute('data-left'));
        if (container.dataset.loaded) return; // prevent duplicates
      const rightData = JSON.parse(db.querySelector('[data-right]').getAttribute('data-right'));
        container.dataset.loaded = "true";


      const wrapper = document.createElement('div');
        const modType = container.dataset.mod;
      wrapper.className = 'mod-dropdown';
        const db = document.querySelector(`#mod-database [data-mod="${modType}"]`);


      const leftBtn = document.createElement('div');
        if (!db) return;
      leftBtn.className = 'mod-dropdown-btn';
      leftBtn.textContent = 'Select Mod Type';


      const leftList = document.createElement('div');
        const leftData = JSON.parse(db.querySelector('[data-left]').dataset.left);
      leftList.className = 'mod-dropdown-list';
        const rightData = JSON.parse(db.querySelector('[data-right]').dataset.right);


      const rightBtn = document.createElement('div');
        const wrapper = document.createElement('div');
      rightBtn.className = 'mod-dropdown-btn';
        wrapper.className = 'mw-dropdown-ui';
      rightBtn.textContent = 'Select Stat';
        wrapper.setAttribute('data-label', 'Select Mod');


      const rightList = document.createElement('div');
        const dropdown1 = createDropdown(Object.entries(leftData), 'Select Mod');
      rightList.className = 'mod-dropdown-list';
        const dropdown2 = createDropdown(Object.entries(rightData), 'Select Type');


      const output = document.createElement('div');
        const output = document.createElement('div');
      output.className = 'mw-dropdown-output';
        output.className = 'mw-dropdown-output';
        output.textContent = 'Select options to see details';


      let selectedLeft = null;
        wrapper.appendChild(dropdown1);
      let selectedRight = null;
        wrapper.appendChild(dropdown2);
        wrapper.appendChild(output);


      Object.entries(leftData).forEach(([key, label]) => {
         container.appendChild(wrapper);
         const item = document.createElement('div');
        item.className = 'mod-dropdown-item';
        item.textContent = label;


         item.onclick = () => {
         let selectedLeft = null;
          selectedLeft = key;
        let selectedRight = null;
          leftBtn.textContent = label;
          leftList.style.display = 'none';
          updateOutput();
        };


         leftList.appendChild(item);
         function updateOutput() {
      });
          if (!selectedLeft || !selectedRight) return;


      Object.entries(rightData).forEach(([key, label]) => {
          const key = `${selectedLeft}__${selectedRight}`;
        const item = document.createElement('div');
          const content = db.querySelector(`[data-key="${key}"]`);
        item.className = 'mod-dropdown-item';
        item.textContent = label;


        item.onclick = () => {
           output.innerHTML = content ? content.innerHTML : "No data found";
          selectedRight = key;
         }
           rightBtn.textContent = label;
          rightList.style.display = 'none';
          updateOutput();
         };


         rightList.appendChild(item);
         function createDropdown(items, label) {
      });
          const div = document.createElement('div');
          div.className = 'mod-dropdown';


      leftBtn.onclick = () => {
          const btn = document.createElement('div');
        leftList.style.display = leftList.style.display === 'block' ? 'none' : 'block';
          btn.className = 'mod-dropdown-btn';
      };
          btn.textContent = label;


      rightBtn.onclick = () => {
          const list = document.createElement('div');
        rightList.style.display = rightList.style.display === 'block' ? 'none' : 'block';
          list.className = 'mod-dropdown-list';
      };


      function updateOutput() {
          items.forEach(([key, text]) => {
        if (!selectedLeft || !selectedRight) return;
            const item = document.createElement('div');
            item.className = 'mod-dropdown-item';
            item.textContent = text;


        const key = `${selectedLeft}__${selectedRight}`;
            item.onclick = () => {
        const match = db.querySelector(`[data-key="${key}"]`);
              btn.textContent = text;
              list.style.display = 'none';


        output.innerHTML = match ? match.innerHTML : "No data found";
              if (label === 'Select Mod') selectedLeft = key;
      }
              else selectedRight = key;


      wrapper.appendChild(leftBtn);
              updateOutput();
      wrapper.appendChild(leftList);
            };
      wrapper.appendChild(rightBtn);
      wrapper.appendChild(rightList);
      wrapper.appendChild(output);


      container.appendChild(wrapper);
            list.appendChild(item);
    });
          });


  });
          btn.onclick = () => {
});
            list.style.display = list.style.display === 'block' ? 'none' : 'block';
/* ================= SIMPLE DATA-OPTIONS DROPDOWN ================= */
          };


document.querySelectorAll('.mw-dropdown-ui[data-options]').forEach(container => {
          div.appendChild(btn);
  const data = JSON.parse(container.getAttribute('data-options'));
          div.appendChild(list);


  const wrapper = document.createElement('div');
          return div;
  wrapper.className = 'mod-dropdown';
        }


  const button = document.createElement('div');
      });
  button.className = 'mod-dropdown-btn';
  button.textContent = container.getAttribute('data-label') || 'Select';


  const list = document.createElement('div');
    }
  list.className = 'mod-dropdown-list';


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


  Object.entries(data).forEach(([key, obj]) => {
    /* ================= INITIAL LOAD ================= */
    const item = document.createElement('div');
    item.className = 'mod-dropdown-item';
    item.textContent = obj.label;


     item.onclick = () => {
     // activate first tab automatically
      button.textContent = obj.label;
    const firstTab = document.querySelector('.mw-tab-btn');
      list.style.display = 'none';
    if (firstTab) firstTab.click();
      output.innerHTML = obj.content;
    };


    list.appendChild(item);
   });
   });
  button.onclick = () => {
    list.style.display = list.style.display === 'block' ? 'none' : 'block';
  };
  wrapper.appendChild(button);
  wrapper.appendChild(list);
  wrapper.appendChild(output);
  container.appendChild(wrapper);
});
/* ================= AUTO ALPHABETIZE DROPDOWNS ================= */
document.querySelectorAll('.mw-dropdown-ui[data-options]').forEach(container => {
  const raw = container.getAttribute('data-options');
  if (!raw) return;
  try {
    const data = JSON.parse(raw);
    // Convert to array → sort → rebuild object
    const sorted = Object.entries(data)
      .sort((a, b) => a[1].label.localeCompare(b[1].label))
      .reduce((obj, [key, val]) => {
        obj[key] = val;
        return obj;
      }, {});
    // Replace with sorted version
    container.setAttribute('data-options', JSON.stringify(sorted));
  } catch (e) {
    console.warn("Dropdown JSON error:", e);
  }
});
});

Revision as of 21:40, 21 April 2026

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

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

    document.querySelectorAll('.mw-tab-btn').forEach(btn => {
      btn.addEventListener('click', function () {

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

        // deactivate buttons
        parent.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');

        // hide contents
        document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active'));

        // show selected
        const target = document.getElementById(tabId);
        if (target) {
          target.classList.add('active');

          // 🔥 INIT MOD SYSTEM AFTER TAB OPENS
          initModSystems(target);
        }

      });
    });


    /* ================= MOD SYSTEM ================= */

    function initModSystems(scope) {

      scope.querySelectorAll('.mod-system').forEach(container => {

        if (container.dataset.loaded) return; // prevent duplicates
        container.dataset.loaded = "true";

        const modType = container.dataset.mod;
        const db = document.querySelector(`#mod-database [data-mod="${modType}"]`);

        if (!db) return;

        const leftData = JSON.parse(db.querySelector('[data-left]').dataset.left);
        const rightData = JSON.parse(db.querySelector('[data-right]').dataset.right);

        const wrapper = document.createElement('div');
        wrapper.className = 'mw-dropdown-ui';
        wrapper.setAttribute('data-label', 'Select Mod');

        const dropdown1 = createDropdown(Object.entries(leftData), 'Select Mod');
        const dropdown2 = createDropdown(Object.entries(rightData), 'Select Type');

        const output = document.createElement('div');
        output.className = 'mw-dropdown-output';
        output.textContent = 'Select options to see details';

        wrapper.appendChild(dropdown1);
        wrapper.appendChild(dropdown2);
        wrapper.appendChild(output);

        container.appendChild(wrapper);

        let selectedLeft = null;
        let selectedRight = null;

        function updateOutput() {
          if (!selectedLeft || !selectedRight) return;

          const key = `${selectedLeft}__${selectedRight}`;
          const content = db.querySelector(`[data-key="${key}"]`);

          output.innerHTML = content ? content.innerHTML : "No data found";
        }

        function createDropdown(items, label) {
          const div = document.createElement('div');
          div.className = 'mod-dropdown';

          const btn = document.createElement('div');
          btn.className = 'mod-dropdown-btn';
          btn.textContent = label;

          const list = document.createElement('div');
          list.className = 'mod-dropdown-list';

          items.forEach(([key, text]) => {
            const item = document.createElement('div');
            item.className = 'mod-dropdown-item';
            item.textContent = text;

            item.onclick = () => {
              btn.textContent = text;
              list.style.display = 'none';

              if (label === 'Select Mod') selectedLeft = key;
              else selectedRight = key;

              updateOutput();
            };

            list.appendChild(item);
          });

          btn.onclick = () => {
            list.style.display = list.style.display === 'block' ? 'none' : 'block';
          };

          div.appendChild(btn);
          div.appendChild(list);

          return div;
        }

      });

    }


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

    // activate first tab automatically
    const firstTab = document.querySelector('.mw-tab-btn');
    if (firstTab) firstTab.click();

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