+++ /dev/null
-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)
-//
-// TODO: more cleanups
-//
-dojo.require("dojo.string");
-dojo.require("dojo.fx");
-dojo.require("dijit._Widget");
-dojo.require("dijit._Templated");
-
-dojo.declare("dojox.image.SlideShow",
- [dijit._Widget, dijit._Templated],
- {
- // summary: A Slideshow Widget
-
- // 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 parameters 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,
-
- // autoStart: Boolean
- // If true, the SlideShow begins playing immediately
- autoStart: false,
-
- // 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("dojo", "resources/blank.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(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){} //TODO: remove try/catch
- });
- dojo.connect(this.outerNode, "onmouseout", function(evt){
- try{_this._hideNav(evt);}
- catch(e){} //TODO: remove try/catch
- });
- }
-
- this.outerNode.style.width = this.imageWidth + "px";
-
- img.setAttribute("src", this._tempImgPath);
- var _this = this;
-
- this.largeNode.appendChild(img);
- this._tmpImage = 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 || 0,
- count: request.count || this.pageSize,
- onBegin: function(count, request){
- _this.maxPhotos = count;
- }
- };
- if(request.query){ dojo.mixin(this._request.query, request.query); }
- if(paramNames){
- dojo.forEach(["imageLargeAttr", "linkAttr", "titleAttr"], function(attrName){
- if(paramNames[attrName]){ this[attrName] = paramNames[attrName]; }
- }, this);
- }
-
- var _complete = function(items){
- _this.showImage(0);
- _this._request.onComplete = null;
- if(_this.autoStart){
- _this.toggleSlideShow();
- }
- };
-
- 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);
- }
- dojo.forEach(this.images, function(img){
- if(img && img.parentNode){ img.parentNode.removeChild(img); }
- });
- this.images = [];
- this.isInitialized = false;
- this._imageCounter = 0;
- },
-
- isImageLoaded: function(index){
- // summary: Returns true if image at the specified index is loaded, false otherwise.
- // index:
- // The number index in the data store to check if it is loaded.
- return this.images && this.images.length > index && this.images[index];
- },
-
- moveImageLoadingPointer: function(index){
- // summary: If 'autoload' is true, this tells the widget to start loading
- // images from the specified pointer.
- // index:
- // The number index in the data store to start loading images from.
- this._imageCounter = index;
- },
-
- destroy: function(){
- // summary: Cleans up the widget when it is being destroyed
- if(this._slideId) { this._stop(); }
- this.inherited(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.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(index, /* Function? */callback){
- // summary: Shows the image at index 'index'.
- // index: 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 = index;
-
- var showOrLoadIt = function() {
- //If the image is already loaded, then show it.
- if(_this.images[index]){
- while(_this.largeNode.firstChild){
- _this.largeNode.removeChild(_this.largeNode.firstChild);
- }
- _this.images[index].style.opacity = 0;
- _this.largeNode.appendChild(_this.images[index]);
- _this._currentImage = _this.images[index]._img;
- _this._fitSize();
-
- var onEnd = function(a,b,c) {
- var img = _this.images[index].firstChild;
- if(img.tagName.toLowerCase() != "img"){img = img.firstChild;}
- title = img.getAttribute("title");
-
- if(_this._navShowing){
- _this._showNav(true);
- }
- dojo.publish(_this.getShowTopicName(), [{
- index: index,
- title: title,
- url: img.getAttribute("src")
- }]);
- if(callback) { callback(a,b,c); }
- _this._setTitle(title);
- };
-
- dojo.fadeIn({
- node: _this.images[index],
- duration: 300,
- onEnd: onEnd
- }).play();
- }else{
- //If the image is not loaded yet, load it first, then show it.
- _this._loadImage(index, function(){
- dojo.publish(_this.getLoadTopicName(), [index]);
- _this.showImage(index, 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(index, callbackFn){
- // summary: Load image at specified index
- // description:
- // This function loads the image at position 'index' into the
- // internal cache of images. This does not cause the image to be displayed.
- // index:
- // 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[index] || !this._request) { return; }
-
- var pageStart = index - (index % this.pageSize);
-
- this._request.start = pageStart;
-
- this._request.onComplete = function(items){
- var diff = index - 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" + index);
- dojo.connect(img, "onload", function(){
- _this._fitImage(img);
- div.setAttribute("width",_this.imageWidth);
- div.setAttribute("height",_this.imageHeight);
-
- dojo.publish(_this.getLoadTopicName(), [index]);
- _this._loadNextImage();
- if(callbackFn){ callbackFn(); }
- });
- _this.hiddenNode.appendChild(div);
-
- var titleDiv = document.createElement("div");
- dojo.addClass(titleDiv, "slideShowTitle");
- div.appendChild(titleDiv);
-
- _this.images[index] = 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
- var id = this.id;
- this._slideId = setTimeout(function(){dijit.byId(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, "top", "-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, "top", "");
- },
-
- _setTitle: function(title){
- // summary: Sets the title of the image to be displayed
- // title: String
- // The String title of the image
- this.titleNode.innerHTML = dojo.string.substitute(this.titleTemplate,
- { title: title, current: 1 + this.imageIndex, total: 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
- }
-});
-
-}
projects / eow / blobdiff