Jump to content

MediaWiki:Common.js: Difference between revisions

From Creature Breeder Wiki
Created page with "Creature Infobox Image Toggle: (function () { function initCreatureInfoboxes() { document.querySelectorAll('.infobox-creature').forEach(function (box) { var tabs = box.querySelectorAll('.ci-tab'); var imgs = box.querySelectorAll('.ci-img'); tabs.forEach(function (tab, index) { tab.addEventListener('click', function () { // Hide all images, deactivate all tabs img..."
 
No edit summary
Line 3: Line 3:
     function initCreatureInfoboxes() {
     function initCreatureInfoboxes() {
         document.querySelectorAll('.infobox-creature').forEach(function (box) {
         document.querySelectorAll('.infobox-creature').forEach(function (box) {
             var tabs = box.querySelectorAll('.ci-tab');
             var femTab = box.querySelector('.ci-fem-tab');
             var imgs = box.querySelectorAll('.ci-img');
             var maleTab = box.querySelector('.ci-male-tab);
            var femaleImg = box.querySelector('.fem-creature-img');
            var maleImg = box.querySelector('.male-creature-img');


             tabs.forEach(function (tab, index) {
             femTab.addEventListener('click', function() {
                tab.addEventListener('click', function () {
              // hide male img, show fem
                    // Hide all images, deactivate all tabs
              femaleImg.style.display = 'block';
                    imgs.forEach(function (img) { img.style.display = 'none'; });
              maleImg.style.display = 'none';
                    tabs.forEach(function (t) { t.classList.remove('ci-tab-active'); });
              femTab.style.classList.toggle('ci-tab-active');
              maleTab.style.classList.toggle('ci-tab-active');
            });


                    // Show selected image, activate selected tab
            maleTab .addEventListener('click', function() {
                    if (imgs[index]) imgs[index].style.display = 'block';
              // hide male img, show fem
                    tab.classList.add('ci-tab-active');
              femaleImg.style.display = 'none';
                });
              maleImg.style.display = 'block';
              femTab.style.classList.toggle('ci-tab-active');
              maleTab.style.classList.toggle('ci-tab-active');
             });
             });
         });
         });

Revision as of 15:23, 18 April 2026

/* Creature Infobox Image Toggle */
(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
              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
              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();
    }
}());