dojo-pkg 1.111.0

data/data/dojo-release-1.1.1-src/dojox/image/SlideShow.js

@@ -0,0 +1,594 @@
+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,
+	
+	templatePath: dojo.moduleUrl("dojox.image", "resources/SlideShow.html"),
+	
+	// _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
+	}
+});