dojox/widget/rotator/ThumbnailController.js

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

define([
	"dojo/_base/declare",
	"dojo/_base/connect",
	"dojo/_base/lang",
	"dojo/_base/event",
	"dojo/aspect",
	"dojo/dom-attr",
	"dojo/dom-class",
	"dojo/dom-construct",
	"dojo/query"
], function(declare, connect, lang, event, aspect, domAttr, domClass, domConstruct, query) {

	var _css = "dojoxRotatorThumb",
		_selected = _css + "Selected";

	return declare("dojox.widget.rotator.ThumbnailController", null, {
		// summary:
		//		A rotator controller that displays thumbnails of each rotator pane.
		// description:
		//		The ThumbnailController will look at each of the rotator's panes and
		//		only if the node is an `<img>` tag, then it will create an thumbnail of
		//		the pane's image using the `<img>` tag's "thumbsrc" or "src" attribute.
		//
		//		The size of the thumbnails and the style of the selected thumbnail is
		//		controlled using CSS.
		// example:
		//	|	<div dojoType="dojox.widget.Rotator" jsId="myRotator">
		//	|		<img src="/path/to/image1.jpg" thumbsrc="/path/to/thumb1.jpg" alt="Image 1"/>
		//	|		<img src="/path/to/image2.jpg" thumbsrc="/path/to/thumb2.jpg" alt="Image 2"/>
		//	|	</div>
		//	|	<div dojoType="dojox.widget.rotator.ThumbnailController" rotator="myRotator"></div>

		// rotator: dojox/widget/Rotator
		//		An instance of a Rotator widget.
		rotator: null,

		constructor: function(/*Object*/params, /*DomNode|string*/node){
			// summary:
			//		Initializes the thumbnails and connect to the rotator.

			lang.mixin(this, params);

			this._domNode = node;

			// check if we have a valid rotator
			var r = this.rotator;
			if(r){
				// remove all of the controller's child nodes just in case
				while(node.firstChild){
					node.removeChild(node.firstChild);
				}

				for(var i=0; i<r.panes.length; i++){
					var n = r.panes[i].node,
						s = domAttr.get(n, "thumbsrc") || domAttr.get(n, "src"),
						t = domAttr.get(n, "alt") || "";

					if(/img/i.test(n.tagName)){
						(function(j){
							domConstruct.create("a", {
								classname: _css + ' ' + _css + j + ' ' + (j == r.idx ? _selected : ""),
								href: s,
								onclick: function(e){
									event.stop(e);
									if(r){
										r.control.apply(r, ["go", j]);
									}
								},
								title: t,
								innerHTML: '<img src="' + s + '" alt="' + t + '"/>'
							}, node);
						})(i);
					}
				}

				aspect.after(r, 'onUpdate', lang.hitch(this, "_onUpdate"), true);
			}
		},

		destroy: function(){
			// summary:
			//		Disconnect from the rotator.

			domConstruct.destroy(this._domNode);
		},

		_onUpdate: function(/*string*/type){
			// summary:
			//		Updates various pager controls when the rotator updates.

			var r = this.rotator; // no need to test if this is null since _onUpdate is only fired by the rotator
			if(type == "onAfterTransition"){
				var n = query('.' + _css, this._domNode).removeClass(_selected);
				if(r.idx < n.length){
					domClass.add(n[r.idx], _selected);
				}
			}
		}
	});

});