MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Creature Infobox Image Toggle */
$(function () {
  // Only run if this template is on the page
  if (document.querySelector('.creature-infobox') === null) {
    return;
  }

  var femTab = document.querySelector('.ci-fem-tab');
  var maleTab = document.querySelector('.ci-male-tab');
  var femaleImg = document.querySelector('.fem-creature-img');
  var maleImg = document.querySelector('.male-creature-img');
  //console.log('test');

  femTab.addEventListener('click', function() {
    // hide male img, show fem
    //console.log('fem tab hit');
    femaleImg.style.display = 'block';
    maleImg.style.display = 'none';
    femTab.classList.add('ci-tab-active');
    maleTab.classList.remove('ci-tab-active');
   });

   maleTab .addEventListener('click', function() {
     // hide male img, show fem
     //console.log('male tab hit');
     femaleImg.style.display = 'none';
     maleImg.style.display = 'block';
     femTab.classList.remove('ci-tab-active');
     maleTab.classList.add('ci-tab-active');
   });
});

/*
(function () {
    function initCreatureInfoboxes() {
        document.querySelectorAll('.infobox-creature').forEach(function (box) {
            var femTab = box.querySelector('.ci-fem-tab');
            var maleTab = box.querySelector('.ci-male-tab');
            var femaleImg = box.querySelector('.fem-creature-img');
            var maleImg = box.querySelector('.male-creature-img');

            femTab.addEventListener('click', function() {
              // hide male img, show fem
              console.log('fem tab hit');
              femaleImg.style.display = 'block';
              maleImg.style.display = 'none';
              femTab.style.classList.toggle('ci-tab-active');
              maleTab.style.classList.toggle('ci-tab-active');
            });

            maleTab .addEventListener('click', function() {
              // hide male img, show fem
              console.log('male tab hit');
              femaleImg.style.display = 'none';
              maleImg.style.display = 'block';
              femTab.style.classList.toggle('ci-tab-active');
              maleTab.style.classList.toggle('ci-tab-active');
            });
        });
    }

    // Run after the DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initCreatureInfoboxes);
    } else {
        initCreatureInfoboxes();
    }
}());
*/