MediaWiki:Common.js: Difference between revisions

Revision as of 14:27, 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');

    // Apply the blink effect immediately
    mainImageDiv.classList.add('blink');

    // Set new image HTML and loading bar
    mainImageDiv.innerHTML = imageHtml + '<div class="loadingBar"></div>';

    // Remove the blink class after the animation ends
    setTimeout(function() {
        mainImageDiv.classList.remove('blink');
    }, 500); // Duration of the blink animation in milliseconds

    resetAndStartLoadingBar();
}

function addClickEventToImages() {
    var images = document.querySelectorAll('.carousel .dpImage');
    images.forEach(function(image, index) {
        image.addEventListener('click', function() {
            clearTimeout(imageRotationTimeout); // Clear existing timeout
            setMainImage(this.innerHTML);
            lastSelectedIndex = currentIndex;
            currentIndex = index;
            startImageRotation(); // Restart the rotation
        });
    });
}

var lastSelectedIndex = -1;
var currentIndex = 0;
var rotationInterval = 10000; // 10 seconds
var imageRotationTimeout;

function getNextIndex(imagesLength) {
    var nextIndex;
    do {
        nextIndex = Math.floor(Math.random() * imagesLength);
    } while (nextIndex === lastSelectedIndex);
    return nextIndex;
}

function startImageRotation() {
    var images = document.querySelectorAll('.carousel .dpImage');
    currentIndex = getNextIndex(images.length);

    setMainImage(images[currentIndex].innerHTML);
    lastSelectedIndex = currentIndex;

    resetAndStartLoadingBar();

    // Schedule the next rotation
    imageRotationTimeout = setTimeout(startImageRotation, rotationInterval);
}

function resetAndStartLoadingBar() {
    var loadingBar = document.querySelector('.loadingBar');
    loadingBar.style.transition = 'none'; // Disable transition
    loadingBar.style.width = '0%'; // Reset the width immediately
    setTimeout(function() {
        loadingBar.style.transition = 'width ' + rotationInterval + 'ms linear';
        loadingBar.style.width = '100%'; // Start the transition
    }, 10); // Small delay to allow for width reset
}

// Initialize
window.onload = function() {
    addClickEventToImages();
    startImageRotation(); // Start the initial rotation
};