MediaWiki:Common.js: Difference between revisions

Revision as of 14:17, 1 February 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');
  });
}

var imageRotationTimeout; // Declare this variable globally
var loading = true;

function setMainImage(imageHtml) {
    var mainImageDiv = document.querySelector('.mainImage');

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

    // Delay the image update to allow the blink effect to be visible
    setTimeout(function() {
        // Set new image HTML and loading bar
        mainImageDiv.innerHTML = imageHtml + '<div class="loadingBar"></div>';
        resetAndStartLoadingBar();

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

}

function toggleLoadingBarVisibility() {
    loading = false;
    var loadingBar = document.querySelector('.loadingBar');
    if (loadingBar) {
        var isHidden = loadingBar.style.display === 'none';
        loadingBar.style.display = isHidden ? 'block' : 'none';
    }
}

function addClickEventToImages() {
    var images = document.querySelectorAll('.carousel .dpImage');
    images.forEach(function(image, index) {
        image.addEventListener('click', function() {
            // Cancel auto rotation
            clearTimeout(imageRotationTimeout);

            // Hide the loading bar by setting its display to 'none'
            toggleLoadingBarVisibility();

            // Set clicked image as main image
            setMainImage(this.innerHTML);
        });
    });
}

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() {
    if(loading) {
       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
};

$(document).ready(function(){
			// $fn.scrollSpeed(step, speed, easing);
			jQuery.scrollSpeed(200, 800);
});

// Custom scrolling speed with jQuery
// Source: github.com/ByNathan/jQuery.scrollSpeed
// Version: 1.0.2

(function($) {
    
    jQuery.scrollSpeed = function(step, speed, easing) {
        
        var $document = $(document),
            $window = $(window),
            $body = $('html, body'),
            option = easing || 'default',
            root = 0,
            scroll = false,
            scrollY,
            scrollX,
            view;
            
        if (window.navigator.msPointerEnabled)
        
            return false;
            
        $window.on('mousewheel DOMMouseScroll', function(e) {
            
            var deltaY = e.originalEvent.wheelDeltaY,
                detail = e.originalEvent.detail;
                scrollY = $document.height() > $window.height();
                scrollX = $document.width() > $window.width();
                scroll = true;
            
            if (scrollY) {
                
                view = $window.height();
                    
                if (deltaY < 0 || detail > 0)
            
                    root = (root + view) >= $document.height() ? root : root += step;
                
                if (deltaY > 0 || detail < 0)
            
                    root = root <= 0 ? 0 : root -= step;
                
                $body.stop().animate({
            
                    scrollTop: root
                
                }, speed, option, function() {
            
                    scroll = false;
                
                });
            }
            
            if (scrollX) {
                
                view = $window.width();
                    
                if (deltaY < 0 || detail > 0)
            
                    root = (root + view) >= $document.width() ? root : root += step;
                
                if (deltaY > 0 || detail < 0)
            
                    root = root <= 0 ? 0 : root -= step;
                
                $body.stop().animate({
            
                    scrollLeft: root
                
                }, speed, option, function() {
            
                    scroll = false;
                
                });
            }
            
            return false;
            
        }).on('scroll', function() {
            
            if (scrollY && !scroll) root = $window.scrollTop();
            if (scrollX && !scroll) root = $window.scrollLeft();
            
        }).on('resize', function() {
            
            if (scrollY && !scroll) view = $window.height();
            if (scrollX && !scroll) view = $window.width();
            
        });       
    };
    
    jQuery.easing.default = function (x,t,b,c,d) {
    
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    };
    
})(jQuery);