MediaWiki:Common.js: Difference between revisions

Revision as of 14:00, 31 January 2024

/* Any JavaScript here will be loaded for all users on every page load. */


var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    $(content).toggle('fast');
  });
}

function setMainImage(imageHtml) {
    var mainImageDiv = document.querySelector('.mainImage');
    mainImageDiv.innerHTML = imageHtml + '<div class="loadingBar"></div>';
    resetLoadingBar();
}

function resetLoadingBar() {
    var loadingBar = document.querySelector('.loadingBar');
    loadingBar.style.width = '0%'; // Reset the width
    // Start filling the bar
    var intervalTime = 10000; // Same as image rotation interval
    var stepTime = 100; // Update every 100 milliseconds
    var steps = intervalTime / stepTime;
    var currentStep = 0;

    var fillBar = setInterval(function() {
        currentStep++;
        var newWidth = (currentStep / steps) * 100;
        loadingBar.style.width = newWidth + '%';
        if (currentStep >= steps) {
            clearInterval(fillBar);
        }
    }, stepTime);
}

function addClickEventToImages() {
    var images = document.querySelectorAll('.carousel .dpImage');
    images.forEach(function(image, index) {
        image.addEventListener('click', function() {
            setMainImage(this.innerHTML);
            currentIndex = index; // Update the current index
        });
    });
}

var currentIndex = 0;
function rotateImages() {
    var images = document.querySelectorAll('.carousel .dpImage');

    setInterval(function() {
        if (currentIndex >= images.length) {
            currentIndex = 0;
        }

        setMainImage(images[currentIndex].innerHTML);
        currentIndex++;
    }, 10000); // Rotates every 10000 milliseconds (10 seconds)
}

// Call the functions when the window loads
window.onload = function() {
    addClickEventToImages();
    rotateImages();
    setMainImage(document.querySelector('.carousel .dpImage').innerHTML); // Set the first image as the default
};