Subversion Repositories Applications.papyrus

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

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

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

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

//

// dojox.image.Gallery 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

//

//	TODO: Make public, document params and privitize non-API conformant methods.

//	document topics.

dojo.require("dojo.fx");

dojo.require("dijit._Widget");

dojo.require("dijit._Templated");

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

dojo.require("dojox.image.SlideShow");

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

	[dijit._Widget, dijit._Templated],

	{

	// summary:

	//	Gallery widget that wraps a dojox.image.ThumbnailPicker and dojox.image.SlideShow widget

	// imageHeight: Number

	//	Maximum height of an image in the SlideShow widget

	imageHeight: 375,

	// imageWidth: Number

	//	Maximum width of an image in the SlideShow widget

	imageWidth: 500,

	// pageSize: Number

	//	The number of records to retrieve from the data store per request.

	pageSize: dojox.image.SlideShow.prototype.pageSize,

	// autoLoad: Boolean

	//	If true, images are loaded before the user views them. If false, an

	//	image is loaded when the user displays it.

	autoLoad: true,

	// 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",

	// imageThumbAttr: String

	//	Defines the name of the attribute to request from the store to retrieve the

	//	URL to the thumbnail image.

	imageThumbAttr: "imageUrlThumb",

	// 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: Integer

	//	time in seconds, between image changes in the slide show.

	slideshowInterval: 3,

	templateString:"<div dojoAttachPoint=\"outerNode\" class=\"imageGalleryWrapper\">\n\t<div dojoAttachPoint=\"thumbPickerNode\"></div>\n\t<div dojoAttachPoint=\"slideShowNode\"></div>\n</div>\n",

	postCreate: function(){

		// summary: Initializes the widget, creates the ThumbnailPicker and SlideShow widgets

		this.widgetid = this.id;

		this.inherited("postCreate",arguments)

		this.thumbPicker = new dojox.image.ThumbnailPicker({

			linkAttr: this.linkAttr,

			imageLargeAttr: this.imageLargeAttr,

			titleAttr: this.titleAttr,

			useLoadNotifier: true

		}, this.thumbPickerNode);

		this.slideShow = new dojox.image.SlideShow({

			imageHeight: this.imageHeight,

			imageWidth: this.imageWidth,

			autoLoad: this.autoLoad,

			linkAttr: this.linkAttr,

			imageLargeAttr: this.imageLargeAttr,

			titleAttr: this.titleAttr,

			slideshowInterval: this.slideshowInterval,

			pageSize: this.pageSize

		}, this.slideShowNode);

		var _this = this;

		//When an image is shown in the Slideshow, make sure it is visible

		//in the ThumbnailPicker

		dojo.subscribe(this.slideShow.getShowTopicName(), function(packet){

			//if(packet.index < _this.thumbPicker._thumbIndex

			//   || packet.index > _this.thumbPicker._thumbIndex + _this.thumbPicker.numberThumbs -1){

			//if(!_this.thumbPicker.isVisible(packet.index)){

				//var index = packet.index - (packet.index % _this.thumbPicker.numberThumbs);

				_this.thumbPicker._showThumbs(packet.index);

			//}

		});

		//When the user clicks a thumbnail, show that image

		dojo.subscribe(this.thumbPicker.getClickTopicName(), function(evt){

			_this.slideShow.showImage(evt.index);

		});

		//When the ThumbnailPicker moves to show a new set of pictures,

		//make the Slideshow start loading those pictures first.

		dojo.subscribe(this.thumbPicker.getShowTopicName(), function(evt){

			_this.slideShow.moveImageLoadingPointer(evt.index);

		});

		//When an image finished loading in the slideshow, update the loading

		//notification in the ThumbnailPicker

		dojo.subscribe(this.slideShow.getLoadTopicName(), function(index){

			_this.thumbPicker.markImageLoaded(index);

		});

		this._centerChildren();

	},

  	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.thumbPicker.setDataStore(dataStore, request, paramNames);

		this.slideShow.setDataStore(dataStore, request, paramNames);

  	},

  	reset: function(){

		// summary: Resets the widget to its initial state

		this.slideShow.reset();

		this.thumbPicker.reset();

  	},

	showNextImage: function(inTimer){

		// summary: Changes the image being displayed in the SlideShow to the next

		//	image in the data store

		// inTimer: Boolean

		//	If true, a slideshow is active, otherwise the slideshow is inactive.

		this.slideShow.showNextImage();

	},

	toggleSlideshow: function(){

		// summary: Switches the slideshow mode on and off.

		this.slideShow.toggleSlideshow();

	},

	showImage: function(index, /*optional*/callback){

		// summary: Shows the image at index 'idx'.

		// idx: 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.

		this.slideShow.showImage(index, callback);

	},

	_centerChildren: function() {

		// summary: Ensures that the ThumbnailPicker and the SlideShow widgets

		//	are centered.

		var thumbSize = dojo.marginBox(this.thumbPicker.outerNode);

		var slideSize = dojo.marginBox(this.slideShow.outerNode);

		var diff = (thumbSize.w - slideSize.w) / 2;

		if(diff > 0) {

			dojo.style(this.slideShow.outerNode, "marginLeft", diff + "px");

		} else if(diff < 0) {

			dojo.style(this.thumbPicker.outerNode, "marginLeft", (diff * -1) + "px");

		}

	}

});

}