Context Navigation

source: Dev/trunk/src/client/dojox/image/SlideShow.js

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 19.0 KB

Rev	Line
[483]	1	dojo.provide("dojox.image.SlideShow");
	2	//
	3	// dojox.image.SlideShow courtesy Shane O Sullivan, licensed under a Dojo CLA
	4	// For a sample usage, see http://www.skynet.ie/~sos/photos.php
	5	//
	6	//
	7	// TODO: more cleanups
	8	//
	9	dojo.require("dojo.string");
	10	dojo.require("dojo.fx");
	11	dojo.require("dijit._Widget");
	12	dojo.require("dijit._Templated");
	13
	14	dojo.declare("dojox.image.SlideShow",
	15	[dijit._Widget, dijit._Templated],
	16	{
	17	// summary:
	18	// A Slideshow Widget
	19
	20	// imageHeight: Number
	21	// The maximum height of an image
	22	imageHeight: 375,
	23
	24	// imageWidth: Number
	25	// The maximum width of an image.
	26	imageWidth: 500,
	27
	28	// title: String
	29	// The initial title of the SlideShow
	30	title: "",
	31
	32	// titleTemplate: String
	33	// a way to customize the wording in the title. supported parameters to be populated are:
	34	// ${title} = the passed title of the image
	35	// ${current} = the current index of the image
	36	// ${total} = the total number of images in the SlideShow
	37	//
	38	// should add more?
	39	titleTemplate: '${title} <span class="slideShowCounterText">(${current} of ${total})</span>',
	40
	41	// noLink: Boolean
	42	// Prevents the slideshow from putting an anchor link around the displayed image
	43	// enables if true, though still will not link in absence of a url to link to
	44	noLink: false,
	45
	46	// loop: Boolean
	47	// true/false - make the slideshow loop
	48	loop: true,
	49
	50	// hasNav: Boolean
	51	// toggle to enable/disable the visual navigation controls
	52	hasNav: true,
	53
	54	// images: Array
	55	// Contains the DOM nodes that individual images are stored in when loaded or loading.
	56	images: [],
	57
	58	// pageSize: Number
	59	// The number of images to request each time.
	60	pageSize: 20,
	61
	62	// autoLoad: Boolean
	63	// If true, then images are preloaded, before the user navigates to view them.
	64	// If false, an image is not loaded until the user views it.
	65	autoLoad: true,
	66
	67	// autoStart: Boolean
	68	// If true, the SlideShow begins playing immediately
	69	autoStart: false,
	70
	71	// fixedHeight: Boolean
	72	// If true, the widget does not resize itself to fix the displayed image.
	73	fixedHeight: false,
	74
	75	// imageStore: Object
	76	// Implementation of the dojo/data/api/Read API, which provides data on the images
	77	// to be displayed.
	78	imageStore: null,
	79
	80	// linkAttr: String
	81	// Defines the name of the attribute to request from the store to retrieve the
	82	// URL to link to from an image, if any.
	83	linkAttr: "link",
	84
	85	// imageLargeAttr: String
	86	// Defines the name of the attribute to request from the store to retrieve the
	87	// URL to the image.
	88	imageLargeAttr: "imageUrl",
	89
	90	// titleAttr: String
	91	// Defines the name of the attribute to request from the store to retrieve the
	92	// title of the picture, if any.
	93	titleAttr: "title",
	94
	95	// slideshowInterval: Number
	96	// Time, in seconds, between image transitions during a slideshow.
	97	slideshowInterval: 3,
	98
	99	templateString: dojo.cache("dojox.image", "resources/SlideShow.html"),
	100
	101	// _imageCounter: Number
	102	// A counter to keep track of which index image is to be loaded next
	103	_imageCounter: 0,
	104
	105	// _tmpImage: DomNode
	106	// The temporary image to show when a picture is loading.
	107	_tmpImage: null,
	108
	109	// _request: Object
	110	// Implementation of the dojo/data/api/Request API, which defines the query
	111	// parameters for accessing the store.
	112	_request: null,
	113
	114	postCreate: function(){
	115	// summary:
	116	// Initializes the widget, sets up listeners and shows the first image
	117	this.inherited(arguments);
	118	var img = document.createElement("img");
	119
	120	// FIXME: should API be to normalize an image to fit in the specified height/width?
	121	img.setAttribute("width", this.imageWidth);
	122	img.setAttribute("height", this.imageHeight);
	123
	124	if(this.hasNav){
	125	dojo.connect(this.outerNode, "onmouseover", this, function(evt){
	126	try{ this._showNav();}
	127	catch(e){} //TODO: remove try/catch
	128	});
	129	dojo.connect(this.outerNode, "onmouseout", this, function(evt){
	130	try{ this._hideNav(evt);}
	131	catch(e){} //TODO: remove try/catch
	132	});
	133	}
	134
	135	this.outerNode.style.width = this.imageWidth + "px";
	136
	137	img.setAttribute("src", this._blankGif);
	138	var _this = this;
	139
	140	this.largeNode.appendChild(img);
	141	this._tmpImage = this._currentImage = img;
	142	this._fitSize(true);
	143
	144	this._loadImage(0, dojo.hitch(this, "showImage", 0));
	145	this._calcNavDimensions();
	146	dojo.style(this.navNode, "opacity", 0);
	147	},
	148
	149	setDataStore: function(dataStore, request, /optional/paramNames){
	150	// summary:
	151	// Sets the data store and request objects to read data from.
	152	// dataStore:
	153	// An implementation of the dojo/data/api/Read API. This accesses the image
	154	// data.
	155	// request:
	156	// An implementation of the dojo/data/api/Request API. This specifies the
	157	// query and paging information to be used by the data store
	158	// paramNames:
	159	// An object defining the names of the item attributes to fetch from the
	160	// data store. The three attributes allowed are 'linkAttr', 'imageLargeAttr' and 'titleAttr'
	161	this.reset();
	162	var _this = this;
	163
	164	this._request = {
	165	query: {},
	166	start: request.start \|\| 0,
	167	count: request.count \|\| this.pageSize,
	168	onBegin: function(count, request){
	169	// FIXME: fires too often?!?
	170	_this.maxPhotos = count;
	171	}
	172	};
	173	if(request.query){
	174	dojo.mixin(this._request.query, request.query);
	175	}
	176	if(paramNames){
	177	dojo.forEach(["imageLargeAttr", "linkAttr", "titleAttr"], function(attrName){
	178	if(paramNames[attrName]){
	179	this[attrName] = paramNames[attrName];
	180	}
	181	}, this);
	182	}
	183
	184	var _complete = function(items){
	185	// FIXME: onBegin above used to work for maxPhotos:
	186	_this.maxPhotos = items.length;
	187	_this._request.onComplete = null;
	188	if(_this.autoStart){
	189	_this.imageIndex = -1;
	190	_this.toggleSlideShow();
	191	} else {
	192	_this.showImage(0);
	193	}
	194
	195	};
	196
	197	this.imageStore = dataStore;
	198	this._request.onComplete = _complete;
	199	this._request.start = 0;
	200	this.imageStore.fetch(this._request);
	201	},
	202
	203	reset: function(){
	204	// summary:
	205	// Resets the widget to its initial state
	206	// description:
	207	// Removes all previously loaded images, and clears all caches.
	208	dojo.query("> *", this.largeNode).orphan();
	209	this.largeNode.appendChild(this._tmpImage);
	210
	211	dojo.query("> *", this.hiddenNode).orphan();
	212	dojo.forEach(this.images, function(img){
	213	if(img && img.parentNode){ img.parentNode.removeChild(img); }
	214	});
	215	this.images = [];
	216	this.isInitialized = false;
	217	this._imageCounter = 0;
	218	},
	219
	220	isImageLoaded: function(index){
	221	// summary:
	222	// Returns true if image at the specified index is loaded, false otherwise.
	223	// index:
	224	// The number index in the data store to check if it is loaded.
	225	return this.images && this.images.length > index && this.images[index];
	226	},
	227
	228	moveImageLoadingPointer: function(index){
	229	// summary:
	230	// If 'autoload' is true, this tells the widget to start loading
	231	// images from the specified pointer.
	232	// index:
	233	// The number index in the data store to start loading images from.
	234	this._imageCounter = index;
	235	},
	236
	237	destroy: function(){
	238	// summary:
	239	// Cleans up the widget when it is being destroyed
	240	if(this._slideId) { this._stop(); }
	241	this.inherited(arguments);
	242	},
	243
	244	showNextImage: function(inTimer, forceLoop){
	245	// summary:
	246	// Changes the image being displayed to the next image in the data store
	247	// inTimer: Boolean
	248	// If true, a slideshow is active, otherwise the slideshow is inactive.
	249	if(inTimer && this._timerCancelled){ return false; }
	250
	251	if(this.imageIndex + 1 >= this.maxPhotos){
	252	if(inTimer && (this.loop \|\| forceLoop)){
	253	this.imageIndex = -1;
	254	}else{
	255	if(this._slideId){ this._stop(); }
	256	return false;
	257	}
	258	}
	259
	260	this.showImage(this.imageIndex + 1, dojo.hitch(this,function(){
	261	if(inTimer){ this._startTimer(); }
	262	}));
	263	return true;
	264	},
	265
	266	toggleSlideShow: function(){
	267	// summary:
	268	// Switches the slideshow mode on and off.
	269
	270	// If the slideshow is already running, stop it.
	271	if(this._slideId){
	272	this._stop();
	273	}else{
	274	dojo.toggleClass(this.domNode,"slideShowPaused");
	275	this._timerCancelled = false;
	276	var idx = this.imageIndex;
	277
	278	if(idx < 0 \|\| (this.images[idx] && this.images[idx]._img.complete)){
	279	var success = this.showNextImage(true, true);
	280
	281	if(!success){
	282	this._stop();
	283	}
	284	}else{
	285	var handle = dojo.subscribe(this.getShowTopicName(), dojo.hitch(this, function(info){
	286	setTimeout(dojo.hitch(this, function(){
	287	if(info.index == idx){
	288	var success = this.showNextImage(true, true);
	289	if(!success){
	290	this._stop();
	291	}
	292	dojo.unsubscribe(handle);
	293	}}),
	294	this.slideshowInterval * 1000);
	295	}));
	296	dojo.publish(this.getShowTopicName(),
	297	[{index: idx, title: "", url: ""}]);
	298	}
	299	}
	300	},
	301
	302	getShowTopicName: function(){
	303	// summary:
	304	// Returns the topic id published to when an image is shown
	305	// description:
	306	// The information published is: index, title and url
	307	return (this.widgetId \|\| this.id) + "/imageShow";
	308	},
	309
	310	getLoadTopicName: function(){
	311	// summary:
	312	// Returns the topic id published to when an image finishes loading.
	313	// description:
	314	// The information published is the index position of the image loaded.
	315	return (this.widgetId ? this.widgetId : this.id) + "/imageLoad";
	316	},
	317
	318	showImage: function(index, /* Function? */callback){
	319	// summary:
	320	// Shows the image at index 'index'.
	321	// index: Number
	322	// The position of the image in the data store to display
	323	// callback: Function
	324	// Optional callback function to call when the image has finished displaying.
	325
	326	if(!callback && this._slideId){
	327	this.toggleSlideShow();
	328	}
	329	var _this = this;
	330	var current = this.largeNode.getElementsByTagName("div");
	331	this.imageIndex = index;
	332
	333	var showOrLoadIt = function() {
	334	//If the image is already loaded, then show it.
	335	if(_this.images[index]){
	336	while(_this.largeNode.firstChild){
	337	_this.largeNode.removeChild(_this.largeNode.firstChild);
	338	}
	339	dojo.style(_this.images[index],"opacity", 0);
	340	_this.largeNode.appendChild(_this.images[index]);
	341	_this._currentImage = _this.images[index]._img;
	342	_this._fitSize();
	343
	344	var onEnd = function(a,b,c){
	345
	346	var img = _this.images[index].firstChild;
	347	if(img.tagName.toLowerCase() != "img"){ img = img.firstChild; }
	348	var title = img.getAttribute("title") \|\| "";
	349	if(_this._navShowing){
	350	_this._showNav(true);
	351	}
	352	dojo.publish(_this.getShowTopicName(), [{
	353	index: index,
	354	title: title,
	355	url: img.getAttribute("src")
	356	}]);
	357
	358	if(callback) {
	359	callback(a,b,c);
	360	}
	361	_this._setTitle(title);
	362	};
	363
	364	dojo.fadeIn({
	365	node: _this.images[index],
	366	duration: 300,
	367	onEnd: onEnd
	368	}).play();
	369
	370	}else{
	371	//If the image is not loaded yet, load it first, then show it.
	372	_this._loadImage(index, function(){
	373	_this.showImage(index, callback);
	374	});
	375	}
	376	};
	377
	378	//If an image is currently showing, fade it out, then show
	379	//the new image. Otherwise, just show the new image.
	380	if(current && current.length > 0){
	381	dojo.fadeOut({
	382	node: current[0],
	383	duration: 300,
	384	onEnd: function(){
	385	_this.hiddenNode.appendChild(current[0]);
	386	showOrLoadIt();
	387	}
	388	}).play();
	389	}else{
	390	showOrLoadIt();
	391	}
	392	},
	393
	394	_fitSize: function(force){
	395	// summary:
	396	// Fits the widget size to the size of the image being shown,
	397	// or centers the image, depending on the value of 'fixedHeight'
	398	// force: Boolean
	399	// If true, the widget is always resized, regardless of the value of 'fixedHeight'
	400	if(!this.fixedHeight \|\| force){
	401	var height = (this._currentImage.height + (this.hasNav ? 20:0));
	402	dojo.style(this.innerWrapper, "height", height + "px");
	403	return;
	404	}
	405	dojo.style(this.largeNode, "paddingTop", this._getTopPadding() + "px");
	406	},
	407
	408	_getTopPadding: function(){
	409	// summary:
	410	// Returns the padding to place at the top of the image to center it vertically.
	411	if(!this.fixedHeight){ return 0; }
	412	return (this.imageHeight - this._currentImage.height) / 2;
	413	},
	414
	415	_loadNextImage: function(){
	416	// summary:
	417	// Load the next unloaded image.
	418
	419	if(!this.autoLoad){
	420	return;
	421	}
	422	while(this.images.length >= this._imageCounter && this.images[this._imageCounter]){
	423	this._imageCounter++;
	424	}
	425	this._loadImage(this._imageCounter);
	426	},
	427
	428	_loadImage: function(index, callbackFn){
	429	// summary:
	430	// Load image at specified index
	431	// description:
	432	// This function loads the image at position 'index' into the
	433	// internal cache of images. This does not cause the image to be displayed.
	434	// index:
	435	// The position in the data store to load an image from.
	436	// callbackFn:
	437	// An optional function to execute when the image has finished loading.
	438
	439	if(this.images[index] \|\| !this._request) {
	440	return;
	441	}
	442
	443	var pageStart = index - (index % (this._request.count \|\| this.pageSize));
	444
	445	this._request.start = pageStart;
	446
	447	this._request.onComplete = function(items){
	448	var diff = index - pageStart;
	449
	450	if(items && items.length > diff){
	451	loadIt(items[diff]);
	452	}else{ /* Squelch - console.log("Got an empty set of items"); */ }
	453	}
	454
	455	var _this = this;
	456	var store = this.imageStore;
	457	var loadIt = function(item){
	458	var url = _this.imageStore.getValue(item, _this.imageLargeAttr);
	459
	460	var img = new Image(); // when creating img with "createElement" IE doesnt has width and height, so use the Image object
	461	var div = dojo.create("div", {
	462	id: _this.id + "_imageDiv" + index
	463	});
	464	div._img = img;
	465
	466	var link = _this.imageStore.getValue(item,_this.linkAttr);
	467	if(!link \|\| _this.noLink){
	468	div.appendChild(img);
	469	}else{
	470	var a = dojo.create("a", {
	471	"href": link,
	472	"target": "_blank"
	473	}, div);
	474	a.appendChild(img);
	475	}
	476
	477	dojo.connect(img, "onload", function(){
	478	if(store != _this.imageStore){
	479	// If the store has changed, ignore this load event.
	480	return;
	481	}
	482	_this._fitImage(img);
	483	dojo.attr(div, {"width": _this.imageWidth, "height": _this.imageHeight});
	484
	485	// make a short timeout to prevent IE6/7 stack overflow at line 0 ~ still occuring though for first image
	486	dojo.publish(_this.getLoadTopicName(), [index]);
	487
	488	setTimeout(function(){_this._loadNextImage();}, 1);
	489	if(callbackFn){ callbackFn(); }
	490	});
	491	_this.hiddenNode.appendChild(div);
	492
	493	var titleDiv = dojo.create("div", {
	494	className: "slideShowTitle"
	495	}, div);
	496
	497	_this.images[index] = div;
	498	dojo.attr(img, "src", url);
	499
	500	var title = _this.imageStore.getValue(item, _this.titleAttr);
	501	if(title){ dojo.attr(img, "title", title); }
	502	}
	503	this.imageStore.fetch(this._request);
	504	},
	505
	506	_stop: function(){
	507	// summary:
	508	// Stops a running slide show.
	509	if(this._slideId){ clearTimeout(this._slideId); }
	510	this._slideId = null;
	511	this._timerCancelled = true;
	512	dojo.removeClass(this.domNode,"slideShowPaused");
	513	},
	514
	515	_prev: function(){
	516	// summary:
	517	// Show the previous image.
	518
	519	// FIXME: either pull code from showNext/prev, or call it here
	520	if(this.imageIndex < 1){ return; }
	521	this.showImage(this.imageIndex - 1);
	522	},
	523
	524	_next: function(){
	525	// summary:
	526	// Show the next image
	527	this.showNextImage();
	528	},
	529
	530	_startTimer: function(){
	531	// summary:
	532	// Starts a timeout to show the next image when a slide show is active
	533	var id = this.id;
	534	this._slideId = setTimeout(function(){
	535	dijit.byId(id).showNextImage(true);
	536	}, this.slideshowInterval * 1000);
	537	},
	538
	539	_calcNavDimensions: function() {
	540	// summary:
	541	// Calculates the dimensions of the navigation controls
	542	dojo.style(this.navNode, "position", "absolute");
	543
	544	//Place the navigation controls far off screen
	545	dojo.style(this.navNode, "top", "-10000px");
	546
	547	dojo.style(this.navPlay, 'marginLeft', 0);
	548
	549	this.navPlay._size = dojo.marginBox(this.navPlay);
	550	this.navPrev._size = dojo.marginBox(this.navPrev);
	551	this.navNext._size = dojo.marginBox(this.navNext);
	552
	553	dojo.style(this.navNode, {"position": "", top: ""});
	554	},
	555
	556	_setTitle: function(title){
	557	// summary:
	558	// Sets the title to the image being displayed
	559	// title: String
	560	// The String title of the image
	561
	562	this.titleNode.innerHTML = dojo.string.substitute(this.titleTemplate,{
	563	title: title,
	564	current: 1 + this.imageIndex,
	565	total: this.maxPhotos \|\| ""
	566	});
	567	},
	568
	569	_fitImage: function(img) {
	570	// summary:
	571	// Ensures that the image width and height do not exceed the maximum.
	572	// img: Node
	573	// The image DOM node to optionally resize
	574	var width = img.width;
	575	var height = img.height;
	576
	577	if(width > this.imageWidth){
	578	height = Math.floor(height * (this.imageWidth / width));
	579	img.height = height;
	580	img.width = width = this.imageWidth;
	581	}
	582	if(height > this.imageHeight){
	583	width = Math.floor(width * (this.imageHeight / height));
	584	img.height = this.imageHeight;
	585	img.width = width;
	586	}
	587	},
	588
	589	_handleClick: function(/* Event */e){
	590	// summary:
	591	// Performs navigation on the images based on users mouse clicks
	592	// e:
	593	// An Event object
	594	switch(e.target){
	595	case this.navNext: this._next(); break;
	596	case this.navPrev: this._prev(); break;
	597	case this.navPlay: this.toggleSlideShow(); break;
	598	}
	599	},
	600
	601	_showNav: function(force){
	602	// summary:
	603	// Shows the navigation controls
	604	// force: Boolean
	605	// If true, the navigation controls are repositioned even if they are
	606	// currently visible.
	607	if(this._navShowing && !force){return;}
	608	this._calcNavDimensions();
	609	dojo.style(this.navNode, "marginTop", "0px");
	610
	611
	612	var navPlayPos = dojo.style(this.navNode, "width")/2 - this.navPlay._size.w/2 - this.navPrev._size.w;
	613	console.log('navPlayPos = ' + dojo.style(this.navNode, "width")/2 + ' - ' + this.navPlay._size.w + '/2 - '
	614	+ this.navPrev._size.w);
	615
	616	dojo.style(this.navPlay, "marginLeft", navPlayPos + "px");
	617	var wrapperSize = dojo.marginBox(this.outerNode);
	618
	619	var margin = this._currentImage.height - this.navPlay._size.h - 10 + this._getTopPadding();
	620
	621	if(margin > this._currentImage.height){margin += 10;}
	622	dojo[this.imageIndex < 1 ? "addClass":"removeClass"](this.navPrev, "slideShowCtrlHide");
	623	dojo[this.imageIndex + 1 >= this.maxPhotos ? "addClass":"removeClass"](this.navNext, "slideShowCtrlHide");
	624
	625	var _this = this;
	626	if(this._navAnim) {
	627	this._navAnim.stop();
	628	}
	629	if(this._navShowing){ return; }
	630	this._navAnim = dojo.fadeIn({
	631	node: this.navNode,
	632	duration: 300,
	633	onEnd: function(){ _this._navAnim = null; }
	634	});
	635	this._navAnim.play();
	636	this._navShowing = true;
	637	},
	638
	639	_hideNav: function(/* Event */e){
	640	// summary:
	641	// Hides the navigation controls
	642	// e: Event
	643	// The DOM Event that triggered this function
	644	if(!e \|\| !this._overElement(this.outerNode, e)){
	645	var _this = this;
	646	if(this._navAnim){
	647	this._navAnim.stop();
	648	}
	649	this._navAnim = dojo.fadeOut({
	650	node: this.navNode,
	651	duration:300,
	652	onEnd: function(){ _this._navAnim = null; }
	653	});
	654	this._navAnim.play();
	655	this._navShowing = false;
	656	}
	657	},
	658
	659	_overElement: function(/DomNode/element, /Event/e){
	660	// summary:
	661	// Returns whether the mouse is over the passed element.
	662	// Element must be display:block (ie, not a `<span>`)
	663
	664	//When the page is unloading, if this method runs it will throw an
	665	//exception.
	666	if(typeof(dojo) == "undefined"){ return false; }
	667	element = dojo.byId(element);
	668	var m = { x: e.pageX, y: e.pageY };
	669	var bb = dojo.position(element, true);
	670
	671	return (m.x >= bb.x
	672	&& m.x <= (bb.x + bb.w)
	673	&& m.y >= bb.y
	674	&& m.y <= (top + bb.h)
	675	); // boolean
	676	}
	677	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: