Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dojox.image.ThumbnailPicker"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.

dojo._hasResource["dojox.image.ThumbnailPicker"] = true;

dojo.provide("dojox.image.ThumbnailPicker");

dojo.experimental("dojox.image.ThumbnailPicker");

//

// dojox.image.ThumbnailPicker courtesy Shane O Sullivan, licensed under a Dojo CLA

// @author  Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)

//

// For a sample usage, see http://www.skynet.ie/~sos/photos.php

//

//	document topics.

dojo.require("dojo.fx");

dojo.require("dijit._Widget");

dojo.require("dijit._Templated");

dojo.declare("dojox.image.ThumbnailPicker",

	[dijit._Widget, dijit._Templated],

	{

	// summary: A scrolling Thumbnail Picker widget

	//

	// imageStore: Object

	// A data store that implements the dojo.data Read API.

	imageStore: null,

	// request: Object

	// A dojo.data Read API Request object.

	request: null,

	// size: Number

	// Width or height in pixels, depending if horizontal or vertical.

	size: 500,

	// thumbHeight: Number

	// Default height of a thumbnail image

	thumbHeight: 75,

	// thumbWidth: Number

	// Default width of an image

	thumbWidth: 100,

	// useLoadNotifier: Boolean

	// Setting useLoadNotifier to true makes a colored DIV appear under each

	// thumbnail image, which is used to display the loading status of each

	// image in the data store.

	useLoadNotifier: false,

	// useHyperlink: boolean

	// Setting useHyperlink to true causes a click on a thumbnail to open a link.

	useHyperlink: false,

	// hyperlinkTarget: String

	// If hyperlinkTarget is set to "new", clicking on a thumb will open a new window

	// If it is set to anything else, clicking a thumbnail will open the url in the

	// current window.

	hyperlinkTarget: "new",

	// isClickable: Boolean

	// When set to true, the cursor over a thumbnail changes.

	isClickable: true,

	// isScrollable: Boolean

	// When true, uses smoothScroll to move between pages

	isScrollable: true,

	// isHorizontal: Boolean

	// If true, the thumbnails are displayed horizontally. Otherwise they are displayed

	// vertically

	isHorizontal: true,

	//autoLoad: Boolean

	autoLoad: true,

	// linkAttr: String

	// The attribute name for accessing the url from the data store

	linkAttr: "link",

	// imageThumbAttr: String

	// The attribute name for accessing the thumbnail image url from the data store

	imageThumbAttr: "imageUrlThumb",

	// imageLargeAttr: String

	// The attribute name for accessing the large image url from the data store

	imageLargeAttr: "imageUrl",

	// pageSize: Number

	//	The number of images to request each time.

	pageSize: 20,

	// titleAttr: String

	// The attribute name for accessing the title from the data store

	titleAttr: "title",

	templateString:"<div dojoAttachPoint=\"outerNode\" class=\"thumbOuter\">\n\t<div dojoAttachPoint=\"navPrev\" class=\"thumbNav thumbClickable\">\n\t  <img src=\"\" dojoAttachPoint=\"navPrevImg\"/>    \n\t</div>\n\t<div dojoAttachPoint=\"thumbScroller\" class=\"thumbScroller\">\n\t  <div dojoAttachPoint=\"thumbsNode\" class=\"thumbWrapper\"></div>\n\t</div>\n\t<div dojoAttachPoint=\"navNext\" class=\"thumbNav thumbClickable\">\n\t  <img src=\"\" dojoAttachPoint=\"navNextImg\"/>  \n\t</div>\n</div>\n",

	tempImgPath: dojo.moduleUrl("dojox.image", "resources/images/1pixel.gif"),

	// thumbs: Array

	// Stores the image nodes for the thumbnails.

	_thumbs: [],

	// _thumbIndex: Number

	// The index of the first thumbnail shown

	_thumbIndex: 0,

	// _maxPhotos: Number

	// The total number of photos in the image store

	_maxPhotos: 0,

	// _loadedImages: Object

	// Stores the indices of images that have been marked as loaded using the

	// markImageLoaded function.

	_loadedImages: {},

	postCreate: function(){

		// summary: Initializes styles and listeners

		this.widgetid = this.id;

		this.inherited("postCreate",arguments);

		this.pageSize = Number(this.pageSize);

		this._scrollerSize = this.size - (51 * 2);

		var sizeProp = this._sizeProperty = this.isHorizontal ? "width" : "height";

		// FIXME: do this via css? calculate the correct width for the widget

		dojo.style(this.outerNode, "textAlign","center");

		dojo.style(this.outerNode, sizeProp, this.size+"px");

		dojo.style(this.thumbScroller, sizeProp, this._scrollerSize + "px");

		//If useHyperlink is true, then listen for a click on a thumbnail, and

		//open the link

		if(this.useHyperlink){

			dojo.subscribe(this.getClickTopicName(), this, function(packet){

				var index = packet.index;

				var url = this.imageStore.getValue(packet.data,this.linkAttr);

				//If the data item doesn't contain a URL, do nothing

				if(!url){return;}

				if(this.hyperlinkTarget == "new"){

					window.open(url);

				}else{

					window.location = url;

				}

			});

		}

		if(this.isScrollable) {

			dojo.require("dojox.fx.scroll");

			dojo.require("dojox.fx.easing");

		}

		if(this.isClickable){

			dojo.addClass(this.thumbsNode, "thumbClickable");

		}

		this._totalSize = 0;

		this.init();

	},

	init: function(){

		// summary: Creates DOM nodes for thumbnail images and initializes their listeners

		if(this.isInitialized) {return false;}

		var classExt = this.isHorizontal ? "Horiz" : "Vert";

		// FIXME: can we setup a listener around the whole element and determine based on e.target?

		dojo.addClass(this.navPrev, "prev" + classExt);

		dojo.addClass(this.navNext, "next" + classExt);

		dojo.addClass(this.thumbsNode, "thumb"+classExt);

		dojo.addClass(this.outerNode, "thumb"+classExt);

		this.navNextImg.setAttribute("src", this.tempImgPath);

		this.navPrevImg.setAttribute("src", this.tempImgPath);

		dojo.connect(this.navPrev, "onclick", this, "_prev");

		dojo.connect(this.navNext, "onclick", this, "_next");

		this.isInitialized = true;

		if(this.isHorizontal){

			this._offsetAttr = "offsetLeft";

			this._sizeAttr = "offsetWidth";

			this._scrollAttr = "scrollLeft";

		}else{

			this._offsetAttr = "offsetTop";

			this._sizeAttr = "offsetHeight";

			this._scrollAttr = "scrollTop";

		}

		this._updateNavControls();

		if(this.imageStore && this.request){this._loadNextPage();}

		return true;

	},

	getClickTopicName: function(){

		// summary: Returns the name of the dojo topic that can be

		//   subscribed to in order to receive notifications on

		//   which thumbnail was selected.

		return (this.widgetId ? this.widgetId : this.id) + "/select"; // String

	},

	getShowTopicName: function(){

		// summary: Returns the name of the dojo topic that can be

		//   subscribed to in order to receive notifications on

		//   which thumbnail is now visible

		return (this.widgetId ? this.widgetId : this.id) + "/show"; // String

	},

	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 four attributes allowed are 'linkAttr', 'imageLargeAttr',

		//	'imageThumbAttr' and 'titleAttr'

		this.reset();

		this.request = {

			query: {},

			start: request.start ? request.start : 0,

			count: request.count ? request.count : 10,

			onBegin: dojo.hitch(this, function(total){

				this._maxPhotos = total;

			})

		};

		if(request.query){ dojo.mixin(this.request.query, request.query);}

		if(paramNames && paramNames.imageThumbAttr){

			var attrNames = ["imageThumbAttr", "imageLargeAttr", "linkAttr", "titleAttr"];

			for(var i = 0; i< attrNames.length; i++){

				if(paramNames[attrNames[i]]){this[attrNames[i]] = paramNames[attrNames[i]];}

			}

		}

		this.request.start = 0;

		this.request.count = this.pageSize;

		this.imageStore = dataStore;

		if(!this.init()){this._loadNextPage();}

	},

	reset: function(){

		// summary: Resets the widget back to its original state.

		this._loadedImages = {};

		var img;

		for(var pos = 0; pos < this._thumbs.length; pos++){

			img = this._thumbs[pos];

			if(img){

				//	dojo.event.browser.clean(img);

				if(img.parentNode){

					img.parentNode.removeChild(img);

				}

			}

		}

		this._thumbs = [];

		this.isInitialized = false;

		this._noImages = true;

	},

	isVisible: function(idx) {

		// summary: Returns true if the image at the specified index is currently visible. False otherwise.

		var img = this._thumbs[idx];;

		if(!img){return false;}

		var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";

		var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";

		var scrollAttr = this.isHorizontal ? "scrollLeft" : "scrollTop";

		var offset = img[pos] - this.thumbsNode[pos];

		return (offset >= this.thumbScroller[scrollAttr]

			&& offset + img[size] <= this.thumbScroller[scrollAttr] + this._scrollerSize);

	},

	_next: function() {

		// summary: Displays the next page of images

		var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";

		var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";

		var baseOffset = this.thumbsNode[pos];

		var firstThumb = this._thumbs[this._thumbIndex];

		var origOffset = firstThumb[pos] - baseOffset;

		var idx = -1, img;

		for(var i = this._thumbIndex + 1; i < this._thumbs.length; i++){

			img = this._thumbs[i];

			if(img[pos] - baseOffset + img[size] - origOffset > this._scrollerSize){

				this._showThumbs(i);

				return;

			}

		}

	},

	_prev: function(){

		// summary: Displays the next page of images

		if(this.thumbScroller[this.isHorizontal ? "scrollLeft" : "scrollTop"] == 0){return;}

		var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";

		var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";

		var firstThumb = this._thumbs[this._thumbIndex];

		var origOffset = firstThumb[pos] - this.thumbsNode[pos];

		var idx = -1, img;

		for(var i = this._thumbIndex - 1; i > -1; i--) {

			img = this._thumbs[i];

			if(origOffset - img[pos] > this._scrollerSize){

				this._showThumbs(i + 1);

				return;

			}

		}

		this._showThumbs(0);

	},

	_checkLoad: function(img, idx){

		dojo.publish(this.getShowTopicName(), [{index:idx}]);

		this._updateNavControls();

		this._loadingImages = {};

		this._thumbIndex = idx;

		//If we have not already requested the data from the store, do so.

		if(this.thumbsNode.offsetWidth - img.offsetLeft < (this._scrollerSize * 2)){

			this._loadNextPage();

		}

	},

	_showThumbs: function(idx){

		// summary: Displays thumbnail images, starting at position 'idx'

		// idx: Number

		//	The index of the first thumbnail

		var _this = this;

		var idx = arguments.length == 0 ? this._thumbIndex : arguments[0];

		idx = Math.min(Math.max(idx, 0), this._maxPhotos);

		if(idx >= this._maxPhotos){ return; }

		var img = this._thumbs[idx];

		if(!img){ return; }

		var left = img.offsetLeft - this.thumbsNode.offsetLeft;

		var top = img.offsetTop - this.thumbsNode.offsetTop;

		var offset = this.isHorizontal ? left : top;

		if(	(offset >= this.thumbScroller[this._scrollAttr]) &&

			(offset + img[this._sizeAttr] <= this.thumbScroller[this._scrollAttr] + this._scrollerSize)

		){

			// FIXME: WTF is this checking for?

			return;

		}

		if(this.isScrollable){

			var target = this.isHorizontal ? {x: left, y: 0} : { x:0, y:top};

			dojox.fx.smoothScroll({

				target: target,

				win: this.thumbScroller,

				duration:300,

				easing:dojox.fx.easing.easeOut,

				onEnd: dojo.hitch(this, "_checkLoad", img, idx)

			}).play(10);

		}else{

			if(this.isHorizontal){

				this.thumbScroller.scrollLeft = left;

			}else{

				this.thumbScroller.scrollTop = top;

			}

			this._checkLoad(img, idx);

		}

	},

	markImageLoaded: function(index){

		// summary: Changes a visual cue to show the image is loaded

		// description: If 'useLoadNotifier' is set to true, then a visual cue is

		//	given to state whether the image is loaded or not.	Calling this function

		//	marks an image as loaded.

		var thumbNotifier = dojo.byId("loadingDiv_"+this.widgetid+"_"+index);

		if(thumbNotifier){this._setThumbClass(thumbNotifier, "thumbLoaded");}

		this._loadedImages[index] = true;

	},

	_setThumbClass: function(thumb, className){

		// summary: Adds a CSS class to a thumbnail, only if 'autoLoad' is true

		// thumb: DomNode

		//	The thumbnail DOM node to set the class on

		// className: String

		//	The CSS class to add to the DOM node.

		if(!this.autoLoad){ return; }

		dojo.addClass(thumb, className);

	},

	_loadNextPage: function(){

		// summary: Loads the next page of thumbnail images

		if(this._loadInProgress){return;}

		this._loadInProgress = true;

		var start = this.request.start + (this._noImages == true ? 0 : this.pageSize);

		var pos = start;

		while(pos < this._thumbs.length && this._thumbs[pos]){pos ++;}

		var _this = this;

		//Define the function to call when the items have been

		//returned from the data store.

		var complete = function(items, request){

			if(items && items.length) {

				var itemCounter = 0;

				var loadNext = function(){

					if(itemCounter >= items.length){

						_this._loadInProgress = false;

						return;

					}

					var counter = itemCounter++;

					_this._loadImage(items[counter], pos + counter, loadNext);

				}

				loadNext();

				//Show or hide the navigation arrows on the thumbnails,

				//depending on whether or not the widget is at the start,

				//end, or middle of the list of images.

				_this._updateNavControls();

			}else{

				_this._loadInProgress = false;

			}

		};

		//Define the function to call if the store reports an error.

		var error = function(){

			_this._loadInProgress = false;

			console.debug("Error getting items");

		};

		this.request.onComplete = complete;

		this.request.onError = error;

		//Increment the start parameter. This is the dojo.data API's

		//version of paging.

		this.request.start = start;

		this._noImages = false;

		//Execute the request for data.

		this.imageStore.fetch(this.request);

	},

	_loadImage: function(data, index, callback){

		var url = this.imageStore.getValue(data,this.imageThumbAttr);

		var img = document.createElement("img");

		var imgContainer = document.createElement("div");

		imgContainer.setAttribute("id","img_" + this.widgetid+"_"+index);

		imgContainer.appendChild(img);

		img._index = index;

		img._data = data;

		this._thumbs[index] = imgContainer;

		var loadingDiv;

		if(this.useLoadNotifier){

			loadingDiv = document.createElement("div");

			loadingDiv.setAttribute("id","loadingDiv_" + this.widgetid+"_"+index);

			//If this widget was previously told that the main image for this

			//thumb has been loaded, make the loading indicator transparent.

			this._setThumbClass(loadingDiv,

				this._loadedImages[index] ? "thumbLoaded":"thumbNotifier");

			imgContainer.appendChild(loadingDiv);

		}

		var size = dojo.marginBox(this.thumbsNode);

		var defaultSize;

		var sizeParam;

		if(this.isHorizontal){

			defaultSize = this.thumbWidth;

			sizeParam = 'w';

		} else{

			defaultSize = this.thumbHeight;

			sizeParam = 'h';

		}

		size = size[sizeParam];

		var sl = this.thumbScroller.scrollLeft, st = this.thumbScroller.scrollTop;

		dojo.style(this.thumbsNode, this._sizeProperty, (size + defaultSize + 20) + "px");

		//Remember the scroll values, as changing the size can alter them

		this.thumbScroller.scrollLeft = sl;

		this.thumbScroller.scrollTop = st;

		this.thumbsNode.appendChild(imgContainer);

		dojo.connect(img, "onload", this, function(){

			var realSize = dojo.marginBox(img)[sizeParam];

			this._totalSize += (Number(realSize) + 4);

			dojo.style(this.thumbsNode, this._sizeProperty, this._totalSize + "px");

			if(this.useLoadNotifier){dojo.style(loadingDiv, "width", (img.width - 4) + "px"); }

			callback();

			return false;

		});

		dojo.connect(img, "onclick", this, function(evt){

			dojo.publish(this.getClickTopicName(),	[{

				index: evt.target._index,

				data: evt.target._data,

				url: img.getAttribute("src"),

				largeUrl: this.imageStore.getValue(data,this.imageLargeAttr),

				title: this.imageStore.getValue(data,this.titleAttr),

				link: this.imageStore.getValue(data,this.linkAttr)

			}]);

			return false;

		});

		dojo.addClass(img, "imageGalleryThumb");

		img.setAttribute("src", url);

		var title = this.imageStore.getValue(data, this.titleAttr);

		if(title){ img.setAttribute("title",title); }

		this._updateNavControls();

	},

	_updateNavControls: function(){

		// summary: Updates the navigation controls to hide/show them when at

		//	the first or last images.

		var cells = [];

		var change = function(node, add){

			var fn = add ? "addClass" : "removeClass";

			dojo[fn](node,"enabled");

			dojo[fn](node,"thumbClickable");

		};

		var pos = this.isHorizontal ? "scrollLeft" : "scrollTop";

		var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";

		change(this.navPrev, (this.thumbScroller[pos] > 0));

		var last = this._thumbs[this._thumbs.length - 1];

		var addClass = (this.thumbScroller[pos] + this._scrollerSize < this.thumbsNode[size]);

		change(this.navNext, addClass);

	}

});

}