MediaWiki:Gadget-Slideshow.js

From Elwiki

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
$('.slideshow').each(function(){
    var slideshow = $(this);
    var slidebox = slideshow.children('.contents');
    var slidelist = slidebox.children('.content_list');
    var slides = slidelist.children('li');
    var controls = slideshow.children('.controls');
    var nav = controls.children('.nav');
    var navs = nav.children('li');
    var prev = nav.children('.prev');
    var next = nav.children('.next');

    var isLoop = slideshow.hasClass('slideshow-loop');
    var isScrollSwitch = slideshow.hasClass('slideshow-scrollflip');
    var isHoverControls = slideshow.hasClass('slideshow-hovercontrols');

    var slideshowClass = slideshow.attr('class');
    var fetchClassValue = function(prefix, matchPattern, defaultValue){
        return (slideshowClass.match(new RegExp('(^|\\b)' + prefix + '(' + matchPattern + ')(\\b|$)', 'i')) || ['', '', defaultValue, ''])[2];
    };
    var hoverThreshold = fetchClassValue('slideshow-hovercontrols-threshold-', '\\d+', 30);
    var controlPosition = fetchClassValue('slideshow-controls-position-', 'top|bottom|left|right', 'top');
    var flipEffects = fetchClassValue('slideshow-flip-effects-', 'fade|swipe', 'fade');

    var repositionControls = function(position){
        switch(position){
            case 'top':
                slideshow.prepend(controls).removeClass('slideside');
                break;
            case 'bottom':
                slideshow.append(controls).removeClass('slideside');
                break;
            case 'left':
                slideshow.prepend(controls).addClass('slideside');
                break;
            case 'right':
                slideshow.append(controls).addClass('slideside');
                break;
        }
    };
    var duplicateSwipeClones = function(){
        switch(flipEffects){
            case 'swipe':
                var left_clone = slides.clone();
                var right_clone = slides.clone();
                slidelist.prepend(left_clone).append(right_clone);
                break;
        }
    };
    var getOffsetPageNumber = function(offset){
        var len = slides.length;
        var index = slidelist.find('li.active').index();
        if(isLoop){
            if(flipEffects === 'swipe')
                len = len / 3;
            return (index + offset) % len;
        }
        else{
            index = index + offset;
            index = index < 0 ? 0 : index;
            index = index > len - 1 ? len - 1 : index;
            return index;
        }
    };
    var fadeToPage = function(page){
        var index = slidelist.find('li.active').index();
        if(index != page){
            slides.eq(page).addClass('active').fadeIn(function(){
                slidelist.children('li.active').removeClass('active');
            });
        }
    };
    var swipeToPage = function(page){};
    var flipToPage = function(page){
        switch(flipEffects){
            case 'fade':
                fadeToPage(page);
                break;
            case 'swipe':
                swipeToPage(page);
                break;
        }
    };

    duplicateSwipeClones();
    repositionControls(controlPosition);
    flipToPage(0);
    prev.click(function(){
        console.log(getOffsetPageNumber(-1));
        flipToPage(getOffsetPageNumber(-1));
    });
    next.click(function(){
        console.log(getOffsetPageNumber(1));
        flipToPage(getOffsetPageNumber(1));
    });
});