Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dojox.image.SlideShow"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.image.SlideShow"] = true;
dojo.provide("dojox.image.SlideShow");
//
// dojox.image.SlideShow courtesy Shane O Sullivan, licensed under a Dojo CLA 
// For a sample usage, see http://www.skynet.ie/~sos/photos.php
//
// @author  Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
// @license Licensed under the Academic Free License 3.0 http://www.opensource.org/licenses/afl-3.0.php
//
//      TODO: more cleanups
//
dojo.require("dojo.fx");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("dojox.image.SlideShow",
        [dijit._Widget, dijit._Templated],
        {
        // imageHeight: Number
        //      The maximum height of an image
        imageHeight: 375,
        
        // imageWidth: Number
        //      The maximum width of an image.
        imageWidth: 500,

        // title: String
        //      the initial title of the SlideShow 
        title: "",

        // titleTemplate: String
        //      a way to customize the wording in the title. supported tags to be populated are:
        //              @title = the passed title of the image
        //              @current = the current index of the image
        //              @total = the total number of images in the SlideShow
        //
        //      should add more?
        titleTemplate: '@title <span class="slideShowCounterText">(@current of @total)</span>',

        // noLink: Boolean
        //      Prevents the slideshow from putting an anchor link around the displayed image
        //      enables if true, though still will not link in absence of a url to link to
        noLink: false,

        // loop: Boolean
        //      true/false - make the slideshow loop
        loop: true,

        // hasNav: Boolean
        //      toggle to enable/disable the visual navigation controls
        hasNav: true,

        // images: Array
        // Contains the DOM nodes that individual images are stored in when loaded or loading.
        images: [],
        
        // pageSize: Number
        //      The number of images to request each time.
        pageSize: 20,
                
        // autoLoad: Boolean
        //      If true, then images are preloaded, before the user navigates to view them.
        //      If false, an image is not loaded until the user views it.
        autoLoad: true,
        
        // fixedHeight: Boolean
        // If true, the widget does not resize itself to fix the displayed image.
        fixedHeight: false,

        // imageStore: Object
        //      Implementation of the dojo.data.api.Read API, which provides data on the images
        //      to be displayed.
        imageStore: null,
                
        // linkAttr: String
        //      Defines the name of the attribute to request from the store to retrieve the
        //      URL to link to from an image, if any.
        linkAttr: "link",
        
        // imageLargeAttr: String
        //      Defines the name of the attribute to request from the store to retrieve the
        //      URL to the image.
        imageLargeAttr: "imageUrl",
        
        // titleAttr: String
        //      Defines the name of the attribute to request from the store to retrieve the
        //      title of the picture, if any.
        titleAttr: "title",

        // slideshowInterval: Number
        // Time, in seconds, between image transitions during a slideshow.
        slideshowInterval: 3,
        
        templateString:"<div dojoAttachPoint=\"outerNode\" class=\"slideShowWrapper\">\n\t<div style=\"position:relative;\" dojoAttachPoint=\"innerWrapper\">\n\t\t<div class=\"slideShowNav\" dojoAttachEvent=\"onclick: _handleClick\">\n\t\t\t<div class=\"dijitInline slideShowTitle\" dojoAttachPoint=\"titleNode\">${title}</div>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"navNode\" class=\"slideShowCtrl\" dojoAttachEvent=\"onclick: _handleClick\">\n\t\t\t<span dojoAttachPoint=\"navPrev\" class=\"slideShowCtrlPrev\"></span>\n\t\t\t<span dojoAttachPoint=\"navPlay\" class=\"slideShowCtrlPlay\"></span>\n\t\t\t<span dojoAttachPoint=\"navNext\" class=\"slideShowCtrlNext\"></span>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"largeNode\" class=\"slideShowImageWrapper\"></div>\t\t\n\t\t<div dojoAttachPoint=\"hiddenNode\" class=\"slideShowHidden\"></div>\n\t</div>\n</div>\n",
        
        // _tempImgPath: URL
        //      URL to the image to display when an image is not yet fully loaded.
        _tempImgPath: dojo.moduleUrl("dojox.image", "resources/images/1pixel.gif"),

        // _imageCounter: Number
        //      A counter to keep track of which index image is to be loaded next
        _imageCounter: 0,
        
        // _tmpImage: DomNode
        //      The temporary image to show when a picture is loading.
        _tmpImage: null,
        
        // _request: Object
        //      Implementation of the dojo.data.api.Request API, which defines the query 
        //      parameters for accessing the store.
        _request: null,

        postCreate: function(){
                // summary: Initilizes the widget, sets up listeners and shows the first image
                this.inherited("postCreate",arguments);
                var img = document.createElement("img");

                // FIXME: should API be to normalize an image to fit in the specified height/width?
                img.setAttribute("width", this.imageWidth);
                img.setAttribute("height", this.imageHeight);

                if(this.hasNav){
                        dojo.connect(this.outerNode, "onmouseover", function(evt){
                                try{_this._showNav();}
                                catch(e){}                      
                        });             
                        dojo.connect(this.outerNode, "onmouseout", function(evt){
                                try{_this._hideNav(evt);}
                                catch(e){}
                        });
                }
                
                this.outerNode.style.width = this.imageWidth + "px";

                img.setAttribute("src", this._tempImgPath);
                var _this = this;
                
                this.largeNode.appendChild(img);
                this._tmpImage = img;
                this._currentImage = img;
                this._fitSize(true);
                
                this._loadImage(0, function(){
                     _this.showImage(0);
                });
                this._calcNavDimensions();
        },

        setDataStore: function(dataStore, request, /*optional*/paramNames){
                // summary: Sets the data store and request objects to read data from.
                // dataStore:
                //      An implementation of the dojo.data.api.Read API. This accesses the image
                //      data.
                // request:
                //      An implementation of the dojo.data.api.Request API. This specifies the
                //      query and paging information to be used by the data store
                // paramNames:
                //      An object defining the names of the item attributes to fetch from the
                //      data store.  The three attributes allowed are 'linkAttr', 'imageLargeAttr' and 'titleAttr'
                this.reset();
                var _this = this;
                this._request = {
                        query: {},
                        start: ((request.start) ? request.start : 0),
                        count: ((request.count) ? request.count : this.pageSize),
                        onBegin: function(count, request){
                                _this.maxPhotos = count;
                        }
                };
                if(request.query){ dojo.mixin(this._request.query, request.query); }
                if(paramNames && paramNames.imageLargeAttr){
                        this.imageLargeAttr = paramNames.imageLargeAttr;
                }
        
                var _this = this;
                var _complete = function(items){
                        _this.showImage(0); 
                        _this._request.onComplete = null;
                };
                
                this.imageStore = dataStore;
                this._request.onComplete = _complete;
                this._request.start = 0;
                this.imageStore.fetch(this._request);
        },

        reset: function(){
                // summary: Resets the widget to its initial state
                // description: Removes all previously loaded images, and clears all caches.
                while(this.largeNode.firstChild){
                        this.largeNode.removeChild(this.largeNode.firstChild);
                }
                this.largeNode.appendChild(this._tmpImage);
                while(this.hiddenNode.firstChild){
                        this.hiddenNode.removeChild(this.hiddenNode.firstChild);
                }
                var img;
                for(var pos = 0; pos < this.images.length; pos++){
                        img = this.images[pos];
                        if(img && img.parentNode){ img.parentNode.removeChild(img); }
                }
                this.images = [];
                this.isInitialized = false;
                this._imageCounter = 0;
        },

        isImageLoaded: function(idx){
                // summary: Returns true if image at the specified index is loaded, false otherwise.
                // idx:
                //      The number index in the data store to check if it is loaded.
                return this.images && this.images.length > index && this.images[idx];
        },

        moveImageLoadingPointer: function(idx){
                // summary: If 'autoload' is true, this tells the widget to start loading
                //      images from the specified pointer.
                // idx:
                //      The number index in the data store to start loading images from.
                this._imageCounter = idx;
        },
        
        destroy: function(){
                // summary: Cleans up the widget when it is being destroyed
                if(this._slideId) { this._stop(); }
                this.inherited("destroy",arguments);
        },

        showNextImage: function(inTimer, forceLoop){
                // summary: Changes the image being displayed to the next image in the data store
                // inTimer: Boolean
                //      If true, a slideshow is active, otherwise the slideshow is inactive.
                if(inTimer && this._timerCancelled){return false;}
                
                if(this.imageIndex + 1 >= this.maxPhotos){
                        if(inTimer && (this.loop || forceLoop)){ this.imageIndex = -1; }
                        else{
                                if(this._slideId){ this._stop(); }
                                return false;
                        }
                }
                var _this = this;
                this.showImage(this.imageIndex + 1, function(){
                        if(inTimer){ _this._startTimer(); }
                });
                return true;
        },

        toggleSlideShow: function(){
                // summary: Switches the slideshow mode on and off.
                if(this._slideId){
                        this._stop();
                }else{
                        dojo.toggleClass(this.domNode,"slideShowPaused");                       
                        this._timerCancelled = false;
                        var success = this.showNextImage(true, true);
                        if(!success){
                                this._stop();
                        }
                }
        },

        getShowTopicName: function(){
                // summary: Returns the topic id published to when an image is shown
                // description:
                //      The information published is: index, title and url
                return (this.widgetId ? this.widgetId : this.id) + "/imageShow";
        },

        getLoadTopicName: function(){
                // summary: Returns the topic id published to when an image finishes loading.
                // description:
                //      The information published is the index position of the image loaded.
                return (this.widgetId ? this.widgetId : this.id) + "/imageLoad";
        },

        showImage: function(idx, /* Function? */callback){
                // summary: Shows the image at index 'idx'.
                // idx: Number
                //      The position of the image in the data store to display
                // callback: Function
                //      Optional callback function to call when the image has finished displaying.
                
                if(!callback && this._slideId){ this.toggleSlideShow(); }
                var _this = this;
                var current = this.largeNode.getElementsByTagName("div");
                this.imageIndex = idx;

                var showOrLoadIt = function() {
                        //If the image is already loaded, then show it. 
                        if(_this.images[idx]){
                                while(_this.largeNode.firstChild){
                                        _this.largeNode.removeChild(_this.largeNode.firstChild);
                                }
                                _this.images[idx].style.opacity = 0;
                                _this.largeNode.appendChild(_this.images[idx]);
                                _this._currentImage = _this.images[idx]._img;
                                _this._fitSize();
                                                                
                            var onEnd = function(a,b,c) {
                                        var img = _this.images[idx].firstChild;
                                        if(img.tagName.toLowerCase() != "img"){img = img.firstChild;}
                                        title = img.getAttribute("title");
                                        
                                        if(_this._navShowing){
                                                _this._showNav(true);
                                        }
                                        dojo.publish(_this.getShowTopicName(), [{
                                                index: idx,     
                                                title: title,
                                                url: img.getAttribute("src")
                                        }]);
                                if(callback) { callback(a,b,c); }
                                        _this._setTitle(title);
                        };
                                
                                dojo.fadeIn({
                                        node: _this.images[idx],
                                        duration: 300,
                                        onEnd: onEnd
                                }).play();
                        }else{
                                //If the image is not loaded yet, load it first, then show it.
                                _this._loadImage(idx, function(){
                                        dojo.publish(_this.getLoadTopicName(), [idx]);
                                        _this.showImage(idx, callback); 
                                });
                        }
                };

                //If an image is currently showing, fade it out, then show
                //the new image. Otherwise, just show the new image.    
                if(current && current.length > 0){
                        dojo.fadeOut({
                                node: current[0],
                                duration: 300,
                                onEnd: function(){
                                        _this.hiddenNode.appendChild(current[0]);
                                        showOrLoadIt();
                        }
                        }).play();
                }else{
                        showOrLoadIt();
                }
        },
        
        _fitSize: function(force){
                // summary: Fits the widget size to the size of the image being shown,
                //      or centers the image, depending on the value of 'fixedHeight'
                // force: Boolean
                //      If true, the widget is always resized, regardless of the value of 'fixedHeight'
                if(!this.fixedHeight || force){
                        var height = (this._currentImage.height + (this.hasNav ? 20:0));
                        dojo.style(this.innerWrapper, "height", height + "px");
                        return;
                }
                dojo.style(this.largeNode, "paddingTop", this._getTopPadding() + "px");
        },
        
        _getTopPadding: function(){
                if(!this.fixedHeight){return 0;}
                // summary: Returns the padding to place at the top of the image to center it vertically.
                return (this.imageHeight - this._currentImage.height)/2;
        },
        
        _loadNextImage: function(){
                //summary: Load the next unloaded image.
                if(!this.autoLoad){ return; }
                while(this.images.length >= this._imageCounter && this.images[this._imageCounter]){
                        this._imageCounter++;
                }
                this._loadImage(this._imageCounter);
        },
        
        _loadImage: function(idx, callbackFn){
                // summary: Load image at specified index
                // description:
                //      This function loads the image at position 'idx' into the
                //      internal cache of images.  This does not cause the image to be displayed.
                // idx:
                //      The position in the data store to load an image from.
                // callbackFn:
                //      An optional function to execute when the image has finished loading.    
                if(this.images[idx] || !this._request) { return; }
                
                var pageStart = idx - (idx % this.pageSize);

                this._request.start = pageStart;                

                this._request.onComplete = function(items){
                        var diff = idx - pageStart;
                        if(items && items.length > diff){
                                loadIt(items[diff]);
                        }else{ /* Squelch - console.log("Got an empty set of items"); */ }
                }

                var _this = this;       
                var loadIt = function(item){                    
                        var url = _this.imageStore.getValue(item, _this.imageLargeAttr);
                        var img = document.createElement("img");
                        var div = document.createElement("div");
                        div._img = img;

                        var link = _this.imageStore.getValue(item,_this.linkAttr);
                        if(!link || _this.noLink){ div.appendChild(img); 
                        }else{
                                var a = document.createElement("a");
                                a.setAttribute("href", link);
                                a.setAttribute("target","_blank");
                                div.appendChild(a);
                                a.appendChild(img);
                        }

                        div.setAttribute("id",_this.id + "_imageDiv" + idx);
                        dojo.connect(img, "onload", function(){
                                _this._fitImage(img);
                                div.setAttribute("width",_this.imageWidth);
                                div.setAttribute("height",_this.imageHeight);                           
                                
                                dojo.publish(_this.getLoadTopicName(), [idx]);
                                _this._loadNextImage();
                                if(callbackFn){ callbackFn(); }
                        });
                        _this.hiddenNode.appendChild(div);

                        var titleDiv = document.createElement("div");
                        dojo.addClass(titleDiv, "slideShowTitle");
                        div.appendChild(titleDiv);
                
                        _this.images[idx] = div;
                        img.setAttribute("src", url);
                        
                        var title = _this.imageStore.getValue(item,_this.titleAttr);
                        if(title){ img.setAttribute("title",title); } 
                }
                this.imageStore.fetch(this._request);
        },

        _stop: function(){
                // summary: Stops a running slide show.
                if(this._slideId) { clearTimeout(this._slideId); }
                this._slideId = null;
                this._timerCancelled = true;
                dojo.removeClass(this.domNode,"slideShowPaused");
        },

        _prev: function(){
                // summary: Show the previous image.
                // FIXME: either pull code from showNext/prev, or call it here
                if(this.imageIndex < 1) { return;}
                this.showImage(this.imageIndex - 1);
        },

        _next: function(){
                // summary: Show the next image
                this.showNextImage();
        },

        _startTimer: function(){
                // summary: Starts a timeout to show the next image when a slide show is active
                this._slideId = setTimeout("dijit.byId('"+this.id +"').showNextImage(true);", this.slideshowInterval * 1000);
        },
        
        _calcNavDimensions: function() {
                // summary:
                //      Calculates the dimensions of the navigation controls
                dojo.style(this.navNode, "position", "absolute");
                
                //Place the navigation controls far off screen
                dojo.style(this.navNode, "left", "-10000px");
                
                //Make the navigation controls visible
                dojo._setOpacity(this.navNode, 99);
                
                this.navPlay._size = dojo.marginBox(this.navPlay);
                this.navPrev._size = dojo.marginBox(this.navPrev);
                this.navNext._size = dojo.marginBox(this.navNext);
                
                dojo._setOpacity(this.navNode, 0);
                dojo.style(this.navNode, "position", "");
                dojo.style(this.navNode, "left", "");           
        },

        _setTitle: function(title){
                // summary: Sets the title of the image to be displayed
                // title: String
                //      The String title of the image
                this.titleNode.innerHTML = this.titleTemplate.replace('@title',title)
                        .replace('@current', String(Number(this.imageIndex) + 1)) 
                        .replace('@total',String(this.maxPhotos));
        },
        
        _fitImage: function(img) {
                // summary: Ensures that the image width and height do not exceed the maximum.
                // img: Node
                //      The image DOM node to optionally resize
                var width = img.width
                var height = img.height;
                
                if(width > this.imageWidth){
                        height = Math.floor(height * (this.imageWidth / width));
                        img.setAttribute("height", height + "px");
                        img.setAttribute("width", this.imageWidth + "px");                      
                }
                if(height > this.imageHeight){
                        width = Math.floor(width * (this.imageHeight / height));
                        img.setAttribute("height", this.imageHeight + "px");
                        img.setAttribute("width", width + "px");
                }
        },
        
        _handleClick: function(/* Event */e){
                // summary: Performs navigation on the images based on users mouse clicks
                // e:
                //      An Event object
                switch(e.target){
                        case this.navNext:this._next(); break;
                        case this.navPrev:this._prev(); break;
                        case this.navPlay:this.toggleSlideShow(); break;
                }
        },
        
        _showNav: function(force){
                // summary:
                //      Shows the navigation controls
                // force: Boolean
                //      If true, the navigation controls are repositioned even if they are
                //      currently visible.
                if(this._navShowing && !force){return;}
                dojo.style(this.navNode, "marginTop", "0px");
                dojo.style(this.navPlay, "marginLeft", "0px");
                var wrapperSize = dojo.marginBox(this.outerNode);
                
                var margin = this._currentImage.height - this.navPlay._size.h - 10 + this._getTopPadding();
                
                if(margin > this._currentImage.height){margin += 10;}
                dojo[this.imageIndex < 1 ? "addClass":"removeClass"](this.navPrev, "slideShowCtrlHide");
                dojo[this.imageIndex + 1 >= this.maxPhotos ? "addClass":"removeClass"](this.navNext, "slideShowCtrlHide");
        
                var _this = this;
                if(this._navAnim) {
                        this._navAnim.stop();
                }
                if(this._navShowing){return;}
                this._navAnim = dojo.fadeIn({node: this.navNode, duration: 300,
                                                        onEnd: function(){_this._navAnim=null;}});
                
                this._navAnim.play();
                this._navShowing = true;
        },
        
        _hideNav: function(/* Event */e){
                // summary:     Hides the navigation controls
                // e: Event
                //      The DOM Event that triggered this function
                if(!e || !this._overElement(this.outerNode, e)) {
                        var _this = this;
                        if(this._navAnim) {
                                this._navAnim.stop();
                        }
                        this._navAnim = dojo.fadeOut({node: this.navNode,duration:300,
                                                 onEnd: function(){_this._navAnim=null;}});
                        this._navAnim.play();
                        this._navShowing = false;
                }
        },
        
        _overElement: function(/*DomNode*/element, /*Event*/e){
                // summary:
                //      Returns whether the mouse is over the passed element.
                //      Element must be display:block (ie, not a <span>)
                
                //When the page is unloading, if this method runs it will throw an
                //exception.
                if(typeof(dojo)=="undefined"){return false;}
                element = dojo.byId(element);
                var m = {x: e.pageX, y: e.pageY};
                var bb = dojo._getBorderBox(element);
                var absl = dojo.coords(element, true);
                var left = absl.x;

                return (m.x >= left
                        && m.x <= (left + bb.w)
                        && m.y >= absl.y
                        && m.y <= (top + bb.h)
                );      //      boolean
        }
});

}