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


    /* ================= VARIABLES ================= */
     let selectedLeft = null;
     let selectedLeft = null;
     let selectedRight = null;
     let selectedRight = null;


     /* ================= TAB SYSTEM ================= */
     /* TABS */
     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 15: Line 14:
           const container = group.closest('.mw-tab-content') || document;
           const container = group.closest('.mw-tab-content') || document;


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


           this.classList.add('active');
           this.classList.add('active');
Line 33: Line 27:
     });
     });


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


       const wrapper = document.createElement('div');
       const wrapper = document.createElement('div');
Line 46: Line 40:


       Object.keys(options).forEach(key => {
       Object.keys(options).forEach(key => {
        const opt = options[key];
         const item = document.createElement('div');
         const item = document.createElement('div');
         item.textContent = opt.label;
         item.textContent = options[key].label;


         item.addEventListener('click', function () {
         item.onclick = function () {
           button.textContent = opt.label;
           button.textContent = options[key].label;
           list.style.display = 'none';
           list.style.display = 'none';


           if (container.classList.contains('combo-left')) {
           if (container.classList.contains('combo-left')) selectedLeft = key;
            selectedLeft = key;
           if (container.classList.contains('combo-right')) selectedRight = key;
          }
           if (container.classList.contains('combo-right')) {
            selectedRight = key;
          }


           updateCombo();
           updateCombo();
         });
         };


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


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


       wrapper.appendChild(button);
       wrapper.appendChild(button);
Line 80: Line 69:
     document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown);
     document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown);


     /* ================= COMBO LOGIC ================= */
     /* RESULT LOGIC */
     function updateCombo() {
     function updateCombo() {
       const result = document.getElementById('combo-result');
       const result = document.getElementById('combo-result');
       if (!result) return;
 
       if (!selectedLeft || !selectedRight) {
        result.style.display = 'none';
        return;
      }
 
      result.style.display = 'block';


       if (selectedLeft === 'flame_resonance' && selectedRight === 'burn') {
       if (selectedLeft === 'flame_resonance' && selectedRight === 'burn') {

Revision as of 18:31, 21 April 2026

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

    let selectedLeft = null;
    let selectedRight = null;

    /* TABS */
    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;
          const container = group.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 > 0) buttons[0].click();
    });

    /* DROPDOWNS */
    function initDropdown(container) {
      const label = container.dataset.label;
      const options = JSON.parse(container.dataset.options);

      const wrapper = document.createElement('div');
      const button = document.createElement('button');
      const list = document.createElement('div');

      button.textContent = label;
      list.style.display = 'none';

      Object.keys(options).forEach(key => {
        const item = document.createElement('div');
        item.textContent = options[key].label;

        item.onclick = function () {
          button.textContent = options[key].label;
          list.style.display = 'none';

          if (container.classList.contains('combo-left')) selectedLeft = key;
          if (container.classList.contains('combo-right')) selectedRight = key;

          updateCombo();
        };

        list.appendChild(item);
      });

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

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

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

    document.querySelectorAll('.mw-dropdown-ui').forEach(initDropdown);

    /* RESULT LOGIC */
    function updateCombo() {
      const result = document.getElementById('combo-result');

      if (!selectedLeft || !selectedRight) {
        result.style.display = 'none';
        return;
      }

      result.style.display = 'block';

      if (selectedLeft === 'flame_resonance' && selectedRight === 'burn') {
        result.innerHTML = "Max Burn Stack +2, Burn Duration -20%. Flash Effect: Burn DMG +5%";
      } else {
        result.innerHTML = "No data for this combination.";
      }
    }

  });
});