Context Navigation

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

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

Rev	Line
[483]	1	dojo.provide("dojox.image.ThumbnailPicker");
	2	dojo.experimental("dojox.image.ThumbnailPicker");
	3	//
	4	// dojox.image.ThumbnailPicker courtesy Shane O Sullivan, licensed under a Dojo CLA
	5	//
	6	// For a sample usage, see http://www.skynet.ie/~sos/photos.php
	7	//
	8	// document topics.
	9
	10	dojo.require("dojox.fx.scroll"); // is optional, but don't want to dojo[require] it
	11	dojo.require("dojo.fx.easing");
	12
	13	dojo.require("dojo.fx");
	14	dojo.require("dijit._Widget");
	15	dojo.require("dijit._Templated");
	16
	17	// FIXME: use CSS for size, thumbHeight, and thumbWidth
	18
	19	dojo.declare("dojox.image.ThumbnailPicker",
	20	[dijit._Widget, dijit._Templated],
	21	{
	22	// summary:
	23	// A scrolling Thumbnail Picker widget
	24
	25	// imageStore: Object
	26	// A data store that implements the dojo.data Read API.
	27	imageStore: null,
	28
	29	// request: Object
	30	// A dojo.data Read API Request object.
	31	request: null,
	32
	33	// size: Number
	34	// Width or height in pixels, depending if horizontal or vertical.
	35	size: 500,
	36
	37	// thumbHeight: Number
	38	// Default height of a thumbnail image
	39	thumbHeight: 75,
	40
	41	// thumbWidth: Number
	42	// Default width of an image
	43	thumbWidth: 100,
	44
	45	// useLoadNotifier: Boolean
	46	// Setting useLoadNotifier to true makes a colored DIV appear under each
	47	// thumbnail image, which is used to display the loading status of each
	48	// image in the data store.
	49	useLoadNotifier: false,
	50
	51	// useHyperlink: boolean
	52	// Setting useHyperlink to true causes a click on a thumbnail to open a link.
	53	useHyperlink: false,
	54
	55	// hyperlinkTarget: String
	56	// If hyperlinkTarget is set to "new", clicking on a thumb will open a new window
	57	// If it is set to anything else, clicking a thumbnail will open the url in the
	58	// current window.
	59	hyperlinkTarget: "new",
	60
	61	// isClickable: Boolean
	62	// When set to true, the cursor over a thumbnail changes.
	63	isClickable: true,
	64
	65	// isScrollable: Boolean
	66	// When true, uses smoothScroll to move between pages
	67	isScrollable: true,
	68
	69	// isHorizontal: Boolean
	70	// If true, the thumbnails are displayed horizontally. Otherwise they are displayed
	71	// vertically
	72	isHorizontal: true,
	73
	74	// autoLoad: Boolean
	75	autoLoad: true,
	76
	77	// linkAttr: String
	78	// The attribute name for accessing the url from the data store
	79	linkAttr: "link",
	80
	81	// imageThumbAttr: String
	82	// The attribute name for accessing the thumbnail image url from the data store
	83	imageThumbAttr: "imageUrlThumb",
	84
	85	// imageLargeAttr: String
	86	// The attribute name for accessing the large image url from the data store
	87	imageLargeAttr: "imageUrl",
	88
	89	// pageSize: Number
	90	// The number of images to request each time.
	91	pageSize: 20,
	92
	93	// titleAttr: String
	94	// The attribute name for accessing the title from the data store
	95	titleAttr: "title",
	96
	97	templateString: dojo.cache("dojox.image", "resources/ThumbnailPicker.html"),
	98
	99	// thumbs: Array
	100	// Stores the image nodes for the thumbnails.
	101	_thumbs: [],
	102
	103	// _thumbIndex: Number
	104	// The index of the first thumbnail shown
	105	_thumbIndex: 0,
	106
	107	// _maxPhotos: Number
	108	// The total number of photos in the image store
	109	_maxPhotos: 0,
	110
	111	// _loadedImages: Object
	112	// Stores the indices of images that have been marked as loaded using the
	113	// markImageLoaded function.
	114	_loadedImages: {},
	115
	116	baseClass: "ThumbnailPicker",
	117
	118	cellClass: "Thumbnail",
	119
	120	postCreate: function(){
	121	// summary:
	122	// Initializes styles and listeners
	123
	124	this.inherited(arguments);
	125
	126	this.pageSize = Number(this.pageSize);
	127
	128	this._scrollerSize = this.size - (51 * 2);
	129
	130	var sizeProp = this._sizeProperty = this.isHorizontal ? "width" : "height";
	131
	132	// FIXME: do this via css? calculate the correct width for the widget
	133	dojo.style(this.outerNode, "textAlign","center");
	134	dojo.style(this.outerNode, sizeProp, this.size+"px");
	135
	136	dojo.style(this.thumbScroller, sizeProp, this._scrollerSize + "px");
	137
	138	//If useHyperlink is true, then listen for a click on a thumbnail, and
	139	//open the link
	140	if(this.useHyperlink){
	141	dojo.subscribe(this.getClickTopicName(), this, function(packet){
	142	var index = packet.index;
	143	var url = this.imageStore.getValue(packet.data,this.linkAttr);
	144
	145	//If the data item doesn't contain a URL, do nothing
	146	if(!url){return;}
	147
	148	if(this.hyperlinkTarget == "new"){
	149	window.open(url);
	150	}else{
	151	window.location = url;
	152	}
	153	});
	154	}
	155
	156	if(this.isClickable){
	157	dojo.addClass(this.thumbsNode, "thumbClickable");
	158	}
	159	this._totalSize = 0;
	160
	161	var classExt = this.isHorizontal ? "Horiz" : "Vert";
	162
	163	// FIXME: can we setup a listener around the whole element and determine based on e.target?
	164	dojo.addClass(this.navPrev, "prev" + classExt);
	165	dojo.addClass(this.navNext, "next" + classExt);
	166	dojo.addClass(this.thumbsNode, "thumb"+classExt);
	167	dojo.addClass(this.outerNode, "thumb"+classExt);
	168
	169	dojo.attr(this.navNextImg, "src", this._blankGif);
	170	dojo.attr(this.navPrevImg, "src", this._blankGif);
	171
	172	this.connect(this.navPrev, "onclick", "_prev");
	173	this.connect(this.navNext, "onclick", "_next");
	174
	175	if(this.isHorizontal){
	176	this._sizeAttr = "offsetWidth";
	177	this._scrollAttr = "scrollLeft";
	178	}else{
	179	this._sizeAttr = "offsetHeight";
	180	this._scrollAttr = "scrollTop";
	181	}
	182
	183	this._updateNavControls();
	184
	185	this.init();
	186	},
	187
	188	init: function(){
	189	// summary
	190	// Loads first image
	191	if(this.isInitialized){
	192	return false;
	193	}
	194	this.isInitialized = true;
	195
	196	if(this.imageStore && this.request){
	197	this._loadNextPage();
	198	}
	199	return true;
	200	},
	201
	202	getClickTopicName: function(){
	203	// summary:
	204	// Returns the name of the dojo topic that can be
	205	// subscribed to in order to receive notifications on
	206	// which thumbnail was selected.
	207	return this.id + "/select"; // String
	208	},
	209
	210	getShowTopicName: function(){
	211	// summary:
	212	// Returns the name of the dojo topic that can be
	213	// subscribed to in order to receive notifications on
	214	// which thumbnail is now visible
	215	return this.id + "/show"; // String
	216	},
	217
	218	setDataStore: function(dataStore, request, /optional/paramNames){
	219	// summary:
	220	// Sets the data store and request objects to read data from.
	221	// dataStore:
	222	// An implementation of the dojo/data/api/Read API. This accesses the image
	223	// data.
	224	// request:
	225	// An implementation of the dojo/data/api/Request API. This specifies the
	226	// query and paging information to be used by the data store
	227	// paramNames:
	228	// An object defining the names of the item attributes to fetch from the
	229	// data store. The four attributes allowed are 'linkAttr', 'imageLargeAttr',
	230	// 'imageThumbAttr' and 'titleAttr'
	231	this.reset();
	232
	233	this.request = {
	234	query: {},
	235	start: request.start \|\| 0,
	236	count: request.count \|\| 10,
	237	onBegin: dojo.hitch(this, function(total){
	238	this._maxPhotos = total;
	239	})
	240	};
	241
	242	if(request.query){ dojo.mixin(this.request.query, request.query);}
	243
	244	if(paramNames){
	245	dojo.forEach(["imageThumbAttr", "imageLargeAttr", "linkAttr", "titleAttr"], function(attrName){
	246	if(paramNames[attrName]){ this[attrName] = paramNames[attrName]; }
	247	}, this);
	248	}
	249
	250	this.request.start = 0;
	251	this.request.count = this.pageSize;
	252	this.imageStore = dataStore;
	253	this._loadInProgress = false;
	254	if(!this.init()){this._loadNextPage();}
	255	},
	256
	257	reset: function(){
	258	// summary:
	259	// Resets the widget back to its original state.
	260	this._loadedImages = {};
	261	dojo.forEach(this._thumbs, function(img){
	262	if(img && img.parentNode){
	263	dojo.destroy(img);
	264	}
	265	});
	266
	267	this._thumbs = [];
	268	this.isInitialized = false;
	269	this._noImages = true;
	270	},
	271
	272	isVisible: function(index) {
	273	// summary:
	274	// Returns true if the image at the specified index is currently visible. False otherwise.
	275	var img = this._thumbs[index];
	276	if(!img){return false;}
	277	var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
	278	var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
	279	var scrollAttr = this.isHorizontal ? "scrollLeft" : "scrollTop";
	280	var offset = img[pos] - this.thumbsNode[pos];
	281	return (offset >= this.thumbScroller[scrollAttr]
	282	&& offset + img[size] <= this.thumbScroller[scrollAttr] + this._scrollerSize);
	283	},
	284
	285	resize: function(dim){
	286	var sizeParam = this.isHorizontal ? "w": "h";
	287
	288	var total = 0;
	289
	290	if(this._thumbs.length > 0 && dojo.marginBox(this._thumbs[0]).w == 0){
	291	// Skip the resize if the widget is not visible
	292	return;
	293	}
	294
	295	// Calculate the complete size of the thumbnails
	296	dojo.forEach(this._thumbs, dojo.hitch(this, function(imgContainer){
	297	var mb = dojo.marginBox(imgContainer.firstChild);
	298	var size = mb[sizeParam];
	299	total += (Number(size) + 10);
	300
	301	if(this.useLoadNotifier && mb.w > 0){
	302	dojo.style(imgContainer.lastChild, "width", (mb.w - 4) + "px");
	303	}
	304	dojo.style(imgContainer, "width", mb.w + "px");
	305	}));
	306
	307	dojo.style(this.thumbsNode, this._sizeProperty, total + "px");
	308	this._updateNavControls();
	309	},
	310
	311	_next: function() {
	312	// summary:
	313	// Displays the next page of images
	314	var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
	315	var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
	316	var baseOffset = this.thumbsNode[pos];
	317	var firstThumb = this._thumbs[this._thumbIndex];
	318	var origOffset = firstThumb[pos] - baseOffset;
	319
	320	var index = -1, img;
	321
	322	for(var i = this._thumbIndex + 1; i < this._thumbs.length; i++){
	323	img = this._thumbs[i];
	324	if(img[pos] - baseOffset + img[size] - origOffset > this._scrollerSize){
	325	this._showThumbs(i);
	326	return;
	327	}
	328	}
	329	},
	330
	331	_prev: function(){
	332	// summary:
	333	// Displays the next page of images
	334	if(this.thumbScroller[this.isHorizontal ? "scrollLeft" : "scrollTop"] == 0){return;}
	335	var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
	336	var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
	337
	338	var firstThumb = this._thumbs[this._thumbIndex];
	339	var origOffset = firstThumb[pos] - this.thumbsNode[pos];
	340
	341	var index = -1, img;
	342
	343	for(var i = this._thumbIndex - 1; i > -1; i--) {
	344	img = this._thumbs[i];
	345	if(origOffset - img[pos] > this._scrollerSize){
	346	this._showThumbs(i + 1);
	347	return;
	348	}
	349	}
	350	this._showThumbs(0);
	351	},
	352
	353	_checkLoad: function(img, index){
	354	// summary:
	355	// Checks if an image is loaded.
	356	dojo.publish(this.getShowTopicName(), [{index:index}]);
	357	this._updateNavControls();
	358	this._loadingImages = {};
	359
	360	this._thumbIndex = index;
	361
	362	//If we have not already requested the data from the store, do so.
	363	if(this.thumbsNode.offsetWidth - img.offsetLeft < (this._scrollerSize * 2)){
	364	this._loadNextPage();
	365	}
	366	},
	367
	368	_showThumbs: function(index){
	369	// summary:
	370	// Displays thumbnail images, starting at position 'index'
	371	// index: Number
	372	// The index of the first thumbnail
	373
	374	//FIXME: When is this be called with an invalid index? Do we need this check at all?
	375	// if(typeof index != "number"){ index = this._thumbIndex; }
	376	index = Math.min(Math.max(index, 0), this._maxPhotos);
	377
	378	if(index >= this._maxPhotos){ return; }
	379
	380	var img = this._thumbs[index];
	381	if(!img){ return; }
	382
	383	var left = img.offsetLeft - this.thumbsNode.offsetLeft;
	384	var top = img.offsetTop - this.thumbsNode.offsetTop;
	385	var offset = this.isHorizontal ? left : top;
	386
	387	if( (offset >= this.thumbScroller[this._scrollAttr]) &&
	388	(offset + img[this._sizeAttr] <= this.thumbScroller[this._scrollAttr] + this._scrollerSize)
	389	){
	390	// FIXME: WTF is this checking for?
	391	return;
	392	}
	393
	394
	395	if(this.isScrollable){
	396	var target = this.isHorizontal ? {x: left, y: 0} : { x:0, y:top};
	397	dojox.fx.smoothScroll({
	398	target: target,
	399	win: this.thumbScroller,
	400	duration:300,
	401	easing:dojo.fx.easing.easeOut,
	402	onEnd: dojo.hitch(this, "_checkLoad", img, index)
	403	}).play(10);
	404	}else{
	405	if(this.isHorizontal){
	406	this.thumbScroller.scrollLeft = left;
	407	}else{
	408	this.thumbScroller.scrollTop = top;
	409	}
	410	this._checkLoad(img, index);
	411	}
	412	},
	413
	414	markImageLoaded: function(index){
	415	// summary:
	416	// Changes a visual cue to show the image is loaded
	417	// description:
	418	// If 'useLoadNotifier' is set to true, then a visual cue is
	419	// given to state whether the image is loaded or not. Calling this function
	420	// marks an image as loaded.
	421	var thumbNotifier = dojo.byId("loadingDiv_"+this.id+"_"+index);
	422	if(thumbNotifier){this._setThumbClass(thumbNotifier, "thumbLoaded");}
	423	this._loadedImages[index] = true;
	424	},
	425
	426	_setThumbClass: function(thumb, className){
	427	// summary:
	428	// Adds a CSS class to a thumbnail, only if 'autoLoad' is true
	429	// thumb: DomNode
	430	// The thumbnail DOM node to set the class on
	431	// className: String
	432	// The CSS class to add to the DOM node.
	433	if(!this.autoLoad){ return; }
	434	dojo.addClass(thumb, className);
	435	},
	436
	437	_loadNextPage: function(){
	438	// summary:
	439	// Loads the next page of thumbnail images
	440	if(this._loadInProgress){return;}
	441	this._loadInProgress = true;
	442	var start = this.request.start + (this._noImages ? 0 : this.pageSize);
	443
	444	var pos = start;
	445	while(pos < this._thumbs.length && this._thumbs[pos]){pos ++;}
	446
	447	var store = this.imageStore;
	448
	449	//Define the function to call when the items have been
	450	//returned from the data store.
	451	var complete = function(items, request){
	452	if(store != this.imageStore){
	453	// If the store has been changed, ignore this callback.
	454	return;
	455	}
	456	if(items && items.length){
	457	var itemCounter = 0;
	458	var loadNext = dojo.hitch(this, function(){
	459	if(itemCounter >= items.length){
	460	this._loadInProgress = false;
	461	return;
	462	}
	463	var counter = itemCounter++;
	464
	465	this._loadImage(items[counter], pos + counter, loadNext);
	466	});
	467	loadNext();
	468
	469	//Show or hide the navigation arrows on the thumbnails,
	470	//depending on whether or not the widget is at the start,
	471	//end, or middle of the list of images.
	472	this._updateNavControls();
	473	}else{
	474	this._loadInProgress = false;
	475	}
	476	};
	477
	478	//Define the function to call if the store reports an error.
	479	var error = function(){
	480	this._loadInProgress = false;
	481	console.log("Error getting items");
	482	};
	483
	484	this.request.onComplete = dojo.hitch(this, complete);
	485	this.request.onError = dojo.hitch(this, error);
	486
	487	//Increment the start parameter. This is the dojo.data API's
	488	//version of paging.
	489	this.request.start = start;
	490	this._noImages = false;
	491
	492	//Execute the request for data.
	493	this.imageStore.fetch(this.request);
	494	},
	495
	496	_loadImage: function(data, index, callback){
	497	// summary:
	498	// Loads an image.
	499
	500	var store = this.imageStore;
	501	var url = store.getValue(data,this.imageThumbAttr);
	502
	503	var imgContainer = dojo.create("div", {
	504	id: "img_" + this.id + "_" + index,
	505	"class": this.cellClass
	506	});
	507
	508	var img = dojo.create("img", {}, imgContainer);
	509	img._index = index;
	510	img._data = data;
	511
	512	this._thumbs[index] = imgContainer;
	513	var loadingDiv;
	514	if(this.useLoadNotifier){
	515	loadingDiv = dojo.create("div", {
	516	id: "loadingDiv_" + this.id+"_" + index
	517	}, imgContainer);
	518
	519	//If this widget was previously told that the main image for this
	520	//thumb has been loaded, make the loading indicator transparent.
	521	this._setThumbClass(loadingDiv,
	522	this._loadedImages[index] ? "thumbLoaded":"thumbNotifier");
	523	}
	524	var size = dojo.marginBox(this.thumbsNode);
	525	var defaultSize;
	526	var sizeParam;
	527	if(this.isHorizontal){
	528	defaultSize = this.thumbWidth;
	529	sizeParam = 'w';
	530	} else{
	531	defaultSize = this.thumbHeight;
	532	sizeParam = 'h';
	533	}
	534	size = size[sizeParam];
	535	var sl = this.thumbScroller.scrollLeft, st = this.thumbScroller.scrollTop;
	536
	537	dojo.style(this.thumbsNode, this._sizeProperty, (size + defaultSize + 20) + "px");
	538
	539	//Remember the scroll values, as changing the size can alter them
	540	this.thumbScroller.scrollLeft = sl;
	541	this.thumbScroller.scrollTop = st;
	542	this.thumbsNode.appendChild(imgContainer);
	543
	544	dojo.connect(img, "onload", this, dojo.hitch(this, function(){
	545	if(store != this.imageStore){
	546	// If the store has changed, ignore this load event
	547	return false;
	548	}
	549	this.resize();
	550
	551	// Have to use a timeout here to prevent a call stack that gets
	552	// so deep that IE throws stack overflow errors
	553	setTimeout(callback, 0);
	554	return false;
	555	}));
	556
	557	dojo.connect(img, "onclick", this, function(evt){
	558	dojo.publish(this.getClickTopicName(), [{
	559	index: evt.target._index,
	560	data: evt.target._data,
	561	url: img.getAttribute("src"),
	562	largeUrl: this.imageStore.getValue(data,this.imageLargeAttr),
	563	title: this.imageStore.getValue(data,this.titleAttr),
	564	link: this.imageStore.getValue(data,this.linkAttr)
	565	}]);
	566	//
	567	dojo.query("." + this.cellClass, this.thumbsNode).removeClass(this.cellClass + "Selected");
	568	dojo.addClass(evt.target.parentNode, this.cellClass + "Selected");
	569	return false;
	570	});
	571	dojo.addClass(img, "imageGalleryThumb");
	572	img.setAttribute("src", url);
	573	var title = this.imageStore.getValue(data, this.titleAttr);
	574	if(title){ img.setAttribute("title",title); }
	575	this._updateNavControls();
	576
	577	},
	578
	579	_updateNavControls: function(){
	580	// summary:
	581	// Updates the navigation controls to hide/show them when at
	582	// the first or last images.
	583	var change = function(node, add){
	584	var fn = add ? "addClass" : "removeClass";
	585	dojo[fn](node,"enabled");
	586	dojo[fn](node,"thumbClickable");
	587	};
	588
	589	var pos = this.isHorizontal ? "scrollLeft" : "scrollTop";
	590	var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
	591	change(this.navPrev, (this.thumbScroller[pos] > 0));
	592
	593	var addClass = (this.thumbScroller[pos] + this._scrollerSize < this.thumbsNode[size]);
	594	change(this.navNext, addClass);
	595	}
	596	});

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

Download in other formats: