Subversion Repositories Applications.papyrus

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

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

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

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

dojo.require("dijit.Dialog");

dojo.require("dojox.fx");

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

	dijit._Widget,{

	// summary:

	//	a dojo-based Lightbox implementation.

	//

	// description:

	//	an Elegant, keyboard accessible, markup and store capable Lightbox widget to show images

	//	in a modal dialog-esque format. Can show individual images as Modal dialog, or can group

	//	images with multiple entry points, all using a single "master" Dialog for visualization

	//

	// examples:

	//

	//	<a href="image1.jpg" dojoType="dojox.image.Lightbox">show lightbox</a>

	//	<a href="image2.jpg" dojoType="dojox.image.Lightbox" group="one">show group lightbox</a>

	//	<a href="image3.jpg" dojoType="dojox.image.Lightbox" group="one">show group lightbox</a>

	//

	//	FIXME: not implemented fully yet, though works with basic datastore access. need to manually call

	//	widget._attachedDialog.addImage(item,"fromStore") for each item in a store result set.

	//	<div dojoType="dojox.image.Lightbox" group="fromStore" store="storeName"></div>

	// group: String

	//	grouping images in a page with similar tags will provide a 'slideshow' like grouping of images

	group: "",

	// title: String

	//	A string of text to be shown in the Lightbox beneath the image (empty if using a store)

	title: "",

	// href; String

	//	link to image to use for this Lightbox node (empty if using a store).

	href: "",

	// duration: Integer

	//	generic time in MS to adjust the feel of widget. could possibly add various

	//	durations for the various actions (dialog fadein, sizeing, img fadein ...)

	duration: 500,

	// _allowPassthru: Boolean

	//	privately set this to disable/enable natural link of anchor tags

	_allowPassthru: false,

	_attachedDialog: null, // try to share a single underlay per page?

	startup: function(){

		this.inherited("startup", arguments);

		// setup an attachment to the masterDialog (or create the masterDialog)

		var tmp = dijit.byId('dojoxLightboxDialog');

		if(tmp){

			this._attachedDialog = tmp;

		}else{

			// this is the first instance to start, so we make the masterDialog

			this._attachedDialog = new dojox.image._LightboxDialog({ id: "dojoxLightboxDialog" });

			this._attachedDialog.startup();

		}

		if(!this.store){

			// FIXME: full store support lacking, have to manually call this._attachedDialog.addImage(imgage,group) as it stands

			this._addSelf();

			this.connect(this.domNode, "onclick", "_handleClick");

		}

	},

	_addSelf: function(){

		this._attachedDialog.addImage({

			href: this.href,

			title: this.title

		},this.group||null);

	},

	_handleClick: function(/* Event */e){

		// summary: handle the click on the link

		if(!this._allowPassthru){ e.preventDefault(); }

		else{ return; }

		this.show();

	},

	show: function(){

		this._attachedDialog.show(this);

	},

	disable: function(){

		// summary, disables event clobbering and dialog, and follows natural link

		this._allowPassthru = true;

	},

	enable: function(){

		// summary: enables the dialog (prevents default link)

		this._allowPassthru = false;

	}

});

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

	dijit.Dialog,{

	//

	// Description:

	//

	//	a widget that intercepts anchor links (typically around images)

	//	and displays a modal Dialog. this is the actual Popup, and should

	//	not be created directly.

	//

	//	there will only be one of these on a page, so all dojox.image.Lightbox's will us it

	//	(the first instance of a Lightbox to be show()'n will create me If i do not exist)

	//

	//	note: the could be the ImagePane i was talking about?

	// title: String

	// 	the current title

	title: "",

	// FIXME: implement titleTemplate

	// inGroup: Array

	//	Array of objects. this is populated by from the JSON object _groups, and

	//	should not be populate manually. it is a placeholder for the currently

	//	showing group of images in this master dialog

	inGroup: null,

	// imgUrl: String

	//	the src="" attrib of our imageNode (can be null at statup)

	imgUrl: "",

	// an array of objects, each object being a unique 'group'

	_groups: { XnoGroupX: [] },

	_imageReady: false,

	templateString:"<div class=\"dojoxLightbox\" dojoAttachPoint=\"containerNode\">\n\t<div style=\"position:relative\">\n\t\t<div dojoAttachPoint=\"imageContainer\" class=\"dojoxLightboxContainer\">\n\t\t\t<img dojoAttachPoint=\"imgNode\" src=\"${imgUrl}\" class=\"dojoxLightboxImage\" alt=\"${title}\">\n\t\t\t<div class=\"dojoxLightboxFooter\" dojoAttachPoint=\"titleNode\">\n\t\t\t\t<div class=\"dijitInline LightboxClose\" dojoAttachPoint=\"closeNode\"></div>\n\t\t\t\t<div class=\"dijitInline LightboxNext\" dojoAttachPoint=\"nextNode\"></div>\t\n\t\t\t\t<div class=\"dijitInline LightboxPrev\" dojoAttachPoint=\"prevNode\"></div>\n\n\t\t\t\t<div class=\"dojoxLightboxText\"><span dojoAttachPoint=\"textNode\">${title}</span><span dojoAttachPoint=\"groupCount\" class=\"dojoxLightboxGroupText\"></span></div>\n\t\t\t</div>\n\t\t</div>\t\n\t\t\n\t</div>\n</div>\n",

	startup: function(){

		// summary: add some extra event handlers, and startup our superclass.

		this.inherited("startup", arguments);

		// FIXME: these are supposed to be available in dijit.Dialog already,

		// but aren't making it over.

		dojo.connect(document.documentElement,"onkeypress",this,"_handleKey");

		this.connect(window,"onresize","_position");

		this.connect(this.nextNode, "onclick", "_nextImage");

		this.connect(this.prevNode, "onclick", "_prevImage");

		this.connect(this.closeNode, "onclick", "hide");

	},

	show: function(/* Object */groupData){

		// summary: starts the chain of events to show an image in the dialog, including showing the dialog

		//	if it is not already visible

		dojo.style(this.imgNode,"opacity","0");

		dojo.style(this.titleNode,"opacity","0");

		// we only need to call dijit.Dialog.show() if we're not already open.

		if(!this.open){ this.inherited("show", arguments); }

		this._imageReady = false;

		this.imgNode.src = groupData.href;

		if((groupData.group && !(groupData == "XnoGroupX")) || this.inGroup){

			if(!this.inGroup){

				this.inGroup = this._groups[(groupData.group)];

				var i = 0;

				// determine where we were or are in the show

				dojo.forEach(this.inGroup,function(g){

					if (g.href == groupData.href){

						this._positionIndex = i;

					}

					i++;

				},this);

			}

			if(!this._positionIndex){ this._positionIndex=0; this.imgNode.src = this.inGroup[this._positionIndex].href; }

			this.groupCount.innerHTML = " (" +(this._positionIndex+1) +" of "+this.inGroup.length+")";

			this.prevNode.style.visibility = "visible";

			this.nextNode.style.visibility = "visible";

		}else{

			this.groupCount.innerHTML = "";

			this.prevNode.style.visibility = "hidden";

			this.nextNode.style.visibility = "hidden";

		}

		this.textNode.innerHTML = groupData.title;

		if(!this._imageReady || this.imgNode.complete === true){

			this._imgConnect = dojo.connect(this.imgNode,"onload", this, function(){

				this._imageReady = true;

				this.resizeTo({ w: this.imgNode.width, h:this.imgNode.height, duration:this.duration });

				dojo.disconnect(this._imgConnect);

			});

			// onload doesn't fire in IE if you connect before you set the src.

			// hack to re-set the src after onload connection made:

			if(dojo.isIE){ this.imgNode.src = this.imgNode.src; }

		}else{

			// do it quickly. kind of a hack, but image is ready now

			this.resizeTo({ w: this.imgNode.width, h:this.imgNode.height, duration:1 });

		}

	},

	_nextImage: function(){

		// summary: load next image in group

		if(this._positionIndex+1<this.inGroup.length){

			this._positionIndex++;

		}else{

			this._positionIndex = 0;

		}

		this._loadImage();

	},

	_prevImage: function(){

		// summary: load previous image in group

		if(this._positionIndex==0){

			this._positionIndex = this.inGroup.length-1;

		}else{

			this._positionIndex--;

		}

		this._loadImage();

	},

	_loadImage: function(){

		// summary: do the prep work before we can show another image

		var _loading = dojo.fx.combine([

			dojo.fadeOut({ node:this.imgNode, duration:(this.duration/2) }),

			dojo.fadeOut({ node:this.titleNode, duration:(this.duration/2) })

		]);

		this.connect(_loading,"onEnd","_prepNodes");

		_loading.play(10);

	},

	_prepNodes: function(){

		// summary: a localized hook to accompany _loadImage

		this._imageReady = false;

		this.show({

			href: this.inGroup[this._positionIndex].href,

			title: this.inGroup[this._positionIndex].title

		});

	},

	resizeTo: function(/* Object */size){

		// summary: resize our dialog container, and fire _showImage

		var _sizeAnim = dojox.fx.sizeTo({

			node: this.containerNode,

			duration:size.duration||this.duration,

			width: size.w,

			height:size.h+30

		});

		this.connect(_sizeAnim,"onEnd","_showImage");

		_sizeAnim.play(this.duration);

	},

	_showImage: function(){

		// summary: fade in the image, and fire showNav

		dojo.fadeIn({ node: this.imgNode, duration:this.duration,

			onEnd: dojo.hitch(this,"_showNav")

		}).play(75);

	},

	_showNav: function(){

		// summary: fade in the footer, and setup our connections.

		dojo.fadeIn({ node: this.titleNode, duration:200 }).play(25);

	},

	hide: function(){

		// summary: close the Lightbox

		dojo.fadeOut({node:this.titleNode, duration:200 }).play(25);

		this.inherited("hide", arguments);

		this.inGroup = null;

		this._positionIndex = null;

	},

	addImage: function(/* object */child,/* String? */group){

		// summary: add an image to this master dialog

		//

		// child.href: String - link to image (required)

		// child.title: String - title to display

		//

		// group: String - attach to group of similar tag

		//	or null for individual image instance

		var g = group;

		if(!child.href){ return; }

		if(g){

			if(this._groups[(g)]){

				this._groups[(g)].push(child);

			}else{

				this._groups[(g)] = [(child)];

			}

		}else{ this._groups["XnoGroupX"].push(child); }

	},

	_handleKey: function(/* Event */e){

		// summary: handle keyboard navigation

		if(!this.open){ return; }

		var key = (e.charCode == dojo.keys.SPACE ? dojo.keys.SPACE : e.keyCode);

		switch(key){

			case dojo.keys.ESCAPE: this.hide(); break;

			case dojo.keys.DOWN_ARROW:

			case dojo.keys.RIGHT_ARROW:

			case 78: // key "n"

				this._nextImage(); break;

			case dojo.keys.UP_ARROW:

			case dojo.keys.LEFT_ARROW:

			case 80: // key "p"

				this._prevImage(); break;

		}

	}

});

}