User:Csokol/MyScript.js

/*****************************************************************
Copyright (C) 2011 Francisco Sokol <chico.sokol@gmail.com>

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to

Free Software Foundation, Inc.
51 Franklin Street, Fifth Floor
Boston, MA   02110-1301, USA.
*****************************************************************/

var slideshowFactory;
var globalSlideshow;

function SlideshowFactory(linkId, appendToId, articleTitle, articleId, imagesUrls, captions) {
    //attributes
    this.linkId = linkId;
    this.appendToId = appendToId;
    this.articleTitle = articleTitle;
    this.articleId = articleId;
    this.imagesUrls = imagesUrls;
    this.captions= captions;
}
//methods
SlideshowFactory.prototype.activate = function() {
    $('#'+this.linkId).click(function(){
        globalSlideshow = new Slideshow(slideshowFactory.imagesUrls, slideshowFactory.captions);
        globalSlideshow.startPresentation();
    })
}

SlideshowFactory.prototype.showLink = function() {
    $('#'+this.appendToId).append("<li id='"+this.linkId+"'><span><a>Slideshow</a></span></li>");
}

function Slideshow(imageUrls, captions) {
    this.HTML = "";
    this.imagesUrls = imageUrls;
    this.captions = captions;
    this.totalImages = imageUrls.length;
    this.displayedImage = 0;
    this.imageIdPrefix = "slideshowimg-";
    this.slideshowId = "slideshow" ;
    this.title = "Slideshow" ;
    this.dialogHeight = $(window).height() * 0.8;
    this.dialogWidth = $(window).width() * 0.8;
    count = 0;
    for (i in this.imagesUrls) {
        url = this.imagesUrls[i];
        captionHTML = "<div style='text-align:center' class='thumbcaption'>" + this.captions[i] + "</div>";
        this.HTML += "<div id='"+this.imageIdPrefix +count+"' class='thumbinner'><img src='"+url+"'></img>"+captionHTML+"</div>";
        count++;
    }
    this.HTML = "<div id='"+this.slideshowId+"'>" + this.HTML + "</div>";
    
    this.startPresentation = function() {
        $('body').append(this.HTML);
        cssImg = {
            'display': 'none',
            'margin-left' :'auto', 
            'margin-right':'auto',
            'max-width': this.dialogWidth,
            'max-height': this.dialogHeight - (31 + 12 + 46),
        }
        $('#slideshow div.thumbinner').css(cssImg);
        dialogButtons = [
            {
                text:"Next",
                click: function() {
                    globalSlideshow.nextImg();
                }
            },
            {
                text:"Previous",
                click: function() {
                    globalSlideshow.previousImg();
                }
            }
            
        ];
        dialogOptions = {
            title: this.title,
            height: this.dialogHeight,
            width: this.dialogWidth,
            buttons: dialogButtons,
        }
        $('#'+this.slideshowId).dialog(dialogOptions);
        $('#'+this.slideshowId).dialog('open');
        $('#'+this.imageIdPrefix+this.displayedImage).css('display', 'block');
    }
    
    this.nextImg = function() {
        if (this.displayedImage == this.totalImages - 1)
            return;
        $('#'+this.imageIdPrefix+this.displayedImage).css('display', 'none');
        this.displayedImage++;
        $('#'+this.imageIdPrefix+this.displayedImage).css('display', 'block');
    }
    
    this.previousImg = function() {
        if (this.displayedImage == 0)
            return;
        $('#'+this.imageIdPrefix+this.displayedImage).css('display', 'none');
        this.displayedImage--;
        $('#'+this.imageIdPrefix+this.displayedImage).css('display', 'block');
    }
}

mw.loader.using( 'jquery.ui', function(){
    $(document).ready(function() {
        //if its not a special page
        articleId = mw.config.get('wgArticleId');
        if (articleId!= 0) {
            imagesUrls = [];
            captions = [];
            totalImages = $('div.thumbinner').length;
            $('div.thumbinner').each(function(index) {
                url = $(this).children('a').children('img').attr('src');
                caption = $(this).children('div.thumbcaption').text()
                imagesUrls.push(url);
                captions.push(caption);
                if (index == totalImages-1) {
                    articleId = mw.config.get('wgArticleId');
                    title = mw.config.get('wgTitle');
                    slideshowFactory = new SlideshowFactory('slideshow_link', 'p-namespaces ul', title, articleId, imagesUrls, captions);
                    slideshowFactory.showLink();
                    slideshowFactory.activate();    
                }
            });
        }
    });
});