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 () {


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


     document.querySelectorAll('.mw-tab-buttons').forEach(group => {
     document.querySelectorAll('.mw-tab-buttons').forEach(group => {
Line 11: Line 11:
           const tabId = this.dataset.tab;
           const tabId = this.dataset.tab;


          // 🔥 works for BOTH systems
           let container =
           let container =
             this.closest('.mw-tabs') ||
             this.closest('.mw-tabs') ||
Line 17: Line 16:
             document;
             document;


          // hide all tabs in scope
           container.querySelectorAll('.mw-tab-content').forEach(c => {
           container.querySelectorAll('.mw-tab-content').forEach(c => {
             c.style.display = 'none';
             c.style.display = 'none';
           });
           });


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


          // activate
           this.classList.add('active');
           this.classList.add('active');


Line 35: Line 31:
       });
       });


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


     /* ================= INGREDIENT DROPDOWNS (RESTORED) ================= */
     /* ================= DROPDOWN FIX (THIS WAS MISSING) ================= */


     document.querySelectorAll('.mw-dropdown-ui').forEach(container => {
     document.querySelectorAll('.mw-dropdown-ui').forEach(container => {


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


      const select = document.createElement('select');
        const select = document.createElement('select');


      const defaultOption = document.createElement('option');
        const first = document.createElement('option');
      defaultOption.textContent = label;
        first.textContent = label;
      defaultOption.value = "";
        first.value = "";
      select.appendChild(defaultOption);
        select.appendChild(first);


      Object.keys(options).forEach(key => {
        Object.keys(options).forEach(key => {
        const opt = document.createElement('option');
          const opt = document.createElement('option');
        opt.value = key;
          opt.value = key;
        opt.textContent = options[key].label;
          opt.textContent = options[key].label;
        select.appendChild(opt);
          select.appendChild(opt);
      });
        });
 
      const output = document.createElement('div');
      output.className = 'mw-dropdown-output';
 
      select.onchange = function () {
        const selected = options[this.value];
        output.innerHTML = selected ? selected.content : "";
      };


      container.innerHTML = '';
        const output = document.createElement('div');
      container.appendChild(select);
        output.className = 'mw-dropdown-output';
      container.appendChild(output);
    });


    /* ================= MOD SYSTEM ================= */
         select.onchange = function () {
 
           const selected = options[this.value];
    document.querySelectorAll('.mod-system').forEach(system => {
          output.innerHTML = selected ? selected.content : "";
 
      const modType = system.dataset.mod;
      const dataBlock = document.querySelector('#mod-database [data-mod="' + modType + '"]');
      if (!dataBlock) return;
 
      const leftData = JSON.parse(dataBlock.querySelector('[data-left]').dataset.left);
      const rightData = JSON.parse(dataBlock.querySelector('[data-right]').dataset.right);
 
      let selectedLeft = null;
      let selectedRight = null;
 
      const leftDiv = document.createElement('div');
      const rightDiv = document.createElement('div');
      const result = document.createElement('div');
 
      result.style.display = "none";
      result.style.border = "1px solid #444";
      result.style.padding = "10px";
      result.style.marginTop = "10px";
 
      function createDropdown(container, options, side) {
        const btn = document.createElement('button');
         btn.textContent = "Select";
 
        btn.onclick = function () {
          document.querySelectorAll('.dropdown-list').forEach(el => el.remove());
 
           const list = document.createElement('div');
          list.className = 'dropdown-list';
 
          Object.keys(options).forEach(key => {
            const item = document.createElement('div');
            item.textContent = options[key];
 
            item.onclick = function () {
              btn.textContent = options[key];
 
              if (side === "left") selectedLeft = key;
              if (side === "right") selectedRight = key;
 
              list.remove();
              update();
            };
 
            list.appendChild(item);
          });
 
          container.appendChild(list);
         };
         };


         container.appendChild(btn);
        container.innerHTML = '';
      }
         container.appendChild(select);
 
         container.appendChild(output);
      function update() {
         if (!selectedLeft || !selectedRight) {
          result.style.display = "none";
          return;
        }


        const key = selectedLeft + "__" + selectedRight;
      } catch (e) {
        const match = dataBlock.querySelector('[data-key="' + key + '"]');
         console.error("Dropdown error:", e);
 
         result.style.display = "block";
        result.innerHTML = match ? match.innerHTML : "No data";
       }
       }


      createDropdown(leftDiv, leftData, "left");
      createDropdown(rightDiv, rightData, "right");
      system.appendChild(leftDiv);
      system.appendChild(rightDiv);
      system.appendChild(result);
     });
     });


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

Revision as of 20:04, 21 April 2026

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

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

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

      buttons.forEach(btn => {
        btn.onclick = function () {
          const tabId = this.dataset.tab;

          let container =
            this.closest('.mw-tabs') ||
            this.closest('.mw-tab-content') ||
            document;

          container.querySelectorAll('.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';
        };
      });

      if (buttons.length) buttons[0].click();
    });

    /* ================= DROPDOWN FIX (THIS WAS MISSING) ================= */

    document.querySelectorAll('.mw-dropdown-ui').forEach(container => {

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

        const select = document.createElement('select');

        const first = document.createElement('option');
        first.textContent = label;
        first.value = "";
        select.appendChild(first);

        Object.keys(options).forEach(key => {
          const opt = document.createElement('option');
          opt.value = key;
          opt.textContent = options[key].label;
          select.appendChild(opt);
        });

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

        select.onchange = function () {
          const selected = options[this.value];
          output.innerHTML = selected ? selected.content : "";
        };

        container.innerHTML = '';
        container.appendChild(select);
        container.appendChild(output);

      } catch (e) {
        console.error("Dropdown error:", e);
      }

    });

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