dojo-pkg 1.111.0

data/data/dojo-release-1.1.1-src/dojox/layout/RadioGroup.js

@@ -0,0 +1,229 @@
+dojo.provide("dojox.layout.RadioGroup");
+dojo.experimental("dojox.layout.RadioGroup");
+//
+//	dojox.layout.RadioGroup - an experimental (probably poorly named) Layout widget extending StackContainer
+//	that accepts ContentPanes as children, and applies aesthetically pleasing responsive transition animations
+//	attached to :hover of the Buttons created.
+//
+//	FIXME: take the Buttons out of the root template, and allow layoutAlign or similar attrib to use a different
+//	template, or build the template dynamically? 
+//
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dijit._Container");
+dojo.require("dijit.layout.StackContainer");
+dojo.require("dojox.fx.easing"); 
+
+dojo.declare("dojox.layout.RadioGroup",
+	[dijit.layout.StackContainer,dijit._Templated],
+	{
+	// summary: A Container that turns its Layout Children into a single Pane and transitions between states
+	//	onHover of the button
+	//
+
+	// duration: Int
+	//	used for Fade and Slide RadioGroup's, the duration to run the transition animation. does not affect anything
+	//	in default RadioGroup
+	duration: 750,
+
+	// hasButtons: Boolean
+	//	toggles internal button making on or off
+	hasButtons: true,
+
+	// templateString: String
+	//	the template for our container
+	templateString: '<div class="dojoxRadioGroup">'
+			+' 	<div dojoAttachPoint="buttonHolder" style="display:none;">'
+			+'		<table class="dojoxRadioButtons"><tbody><tr class="dojoxRadioButtonRow" dojoAttachPoint="buttonNode"></tr></tbody></table>'
+			+'	</div>'
+			+'	<div class="dojoxRadioView" dojoAttachPoint="containerNode"></div>'
+			+'</div>',
+
+	startup: function(){
+		// summary: scan the container for children, and make "tab buttons" for them
+		this.inherited("startup",arguments);
+		this._children = this.getChildren();
+		this._buttons = this._children.length;
+		this._size = dojo.coords(this.containerNode);
+		if(this.hasButtons){
+			dojo.style(this.buttonHolder,"display","block");
+			dojo.forEach(this._children,this._makeButton,this);
+		}
+	},
+
+	// private:
+	_makeButton: function(/* DomNode */n){
+		// summary: creates a hover button for a child node of the RadioGroup
+		dojo.style(n.domNode,"position","absolute");
+		var tmp = document.createElement('td');
+		this.buttonNode.appendChild(tmp);
+		var tmpt = tmp.appendChild(document.createElement('div'));
+		var tmpw = new dojox.layout._RadioButton({
+			label: n.title,
+			page: n
+		},tmpt);
+		tmpw.startup();
+	},
+
+	// FIXME: shouldn't have to rewriting these, need to take styling out of _showChild and _hideChild
+	//		and use classes on the domNode in _transition or something similar (in StackContainer)
+	_transition: function(/*Widget*/newWidget, /*Widget*/oldWidget){
+		// summary: called when StackContainer receives a selectChild call, used to transition the panes.
+		this._showChild(newWidget);
+		if(oldWidget){
+			this._hideChild(oldWidget);
+		}
+		// Size the new widget, in case this is the first time it's being shown,
+		// or I have been resized since the last time it was shown.
+		// page must be visible for resizing to work
+		if(this.doLayout && newWidget.resize){
+			newWidget.resize(this._containerContentBox || this._contentBox);
+		}
+	},
+
+	_showChild: function(/*Widget*/ page){
+		// summary: show the selected child widget
+		var children = this.getChildren();
+		page.isFirstChild = (page == children[0]);
+		page.isLastChild = (page == children[children.length-1]);
+		page.selected = true;
+
+		page.domNode.style.display="";
+
+		if(page._loadCheck){
+			page._loadCheck(); // trigger load in ContentPane
+		}
+		if(page.onShow){
+			page.onShow();
+		}
+	},
+
+	_hideChild: function(/*Widget*/ page){
+		// summary: hide the specified child widget
+		page.selected=false;
+		page.domNode.style.display="none";
+		if(page.onHide){
+			page.onHide();
+		}
+	}
+
+});
+
+dojo.declare("dojox.layout.RadioGroupFade",
+	dojox.layout.RadioGroup,
+	{
+	// summary: An extension on a stock RadioGroup, that fades the panes.
+
+	_hideChild: function(page){
+		// summary: hide the specified child widget
+		dojo.fadeOut({
+			node:page.domNode,
+			duration:this.duration,
+			onEnd: this.inherited("_hideChild",arguments)
+		}).play();
+	},
+
+	_showChild: function(page){
+		// summary: show the specified child widget
+		this.inherited("_showChild",arguments);
+		dojo.style(page.domNode,"opacity",0);
+		dojo.fadeIn({
+			node:page.domNode,
+			duration:this.duration
+		}).play();
+	}
+});
+
+dojo.declare("dojox.layout.RadioGroupSlide",
+	dojox.layout.RadioGroup,
+	{
+	// summary: A Sliding Radio Group
+	// description: 
+	//		An extension on a stock RadioGroup widget, sliding the pane
+	//		into view from being hidden. The entry direction is randomized 
+	//		on each view
+	//		
+
+	// easing: dojo._Animation.easing
+	//	A hook to override the default easing of the pane slides.
+	easing: dojox.fx.easing.easeOut,
+
+	startup: function(){
+		// summary: on startup, set each of the panes off-screen (_showChild is called later)
+		this.inherited("startup",arguments);
+		dojo.forEach(this._children,this._positionChild,this);
+	},
+
+	_positionChild: function(page){
+		// summary: randomly set the child out of view
+		// description: 
+		var rA = Math.round(Math.random());
+		var rB = Math.round(Math.random());
+		dojo.style(page.domNode, rA? "top" : "left", (rB ? "-" : "") + this._size[rA?"h":"w"]+"px");
+	},
+
+	_showChild: function(page){
+		// summary: Slide in the selected child widget
+		this.inherited("_showChild",arguments);
+		if(this._anim && this._anim.status()=="playing"){
+			this._anim.gotoPercent(100,true);
+		}
+		this._anim = dojo.animateProperty({
+			node:page.domNode,
+			properties: {
+				// take a performance hit determinging one of these doesn't get modified
+				// but it's better this way than an extra call to mixin in think?
+				left: { end:0, unit:"px" },
+				top: { end:0, unit:"px" }
+			},
+			duration:this.duration,	
+			easing:this.easing
+		});
+		this._anim.play();
+	},
+
+	_hideChild: function(page){
+		// summary: reset the position of the hidden pane out of sight
+		this.inherited("_hideChild",arguments);
+		this._positionChild(page);
+	}
+});
+
+dojo.declare("dojox.layout._RadioButton",
+	[dijit._Widget,dijit._Templated,dijit._Contained],
+	{
+	// summary: The Buttons for a RadioGroup
+	//
+	// description: A private widget used to manipulate the StackContainer (RadioGroup*). Don't create directly. 
+	//	
+	
+	// label: String
+	//	the Text Label of the button
+	label: "",
+
+	// domNode to tell parent to select
+	page: null,
+
+	templateString: '<div dojoAttachPoint="focusNode" class="dojoxRadioButton"><span dojoAttachPoint="titleNode" class="dojoxRadioButtonLabel">${label}</span></div>',
+	
+	startup: function(){
+		// summary: start listening to mouseOver
+		this.connect(this.domNode,"onmouseover","_onMouse");
+	},
+	
+	_onMouse: function(/* Event */e){
+		// summary: set the selected child on hover, and set our hover state class
+		this.getParent().selectChild(this.page);
+		this._clearSelected();
+		dojo.addClass(this.domNode,"dojoxRadioButtonSelected");
+	},
+
+	_clearSelected: function(){
+		// summary: remove hover state class from sibling Buttons. This is easier (and more reliable)
+		//	than setting up an additional connection to onMouseOut
+		// FIXME: this relies on the template being [div][span]node[/span][/div]
+		dojo.query(".dojoxRadioButtonSelected",this.domNode.parentNode.parentNode).forEach(function(n){
+			dojo.removeClass(n,"dojoxRadioButtonSelected");
+		});
+	}
+});

data/data/dojo-release-1.1.1-src/dojox/layout/ResizeHandle.js

@@ -0,0 +1,267 @@
+dojo.provide("dojox.layout.ResizeHandle");
+dojo.experimental("dojox.layout.ResizeHandle"); 
+
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated"); 
+dojo.require("dojo.fx"); 
+
+dojo.declare("dojox.layout.ResizeHandle",
+	[dijit._Widget, dijit._Templated],
+	{
+	// summary: A dragable handle used to resize an attached node.
+	// description:
+	//	The handle on the bottom-right corner of FloatingPane or other widgets that allows
+	//	the widget to be resized.
+	//	Typically not used directly.
+	//
+	// targetId: String
+	//	id of the Widget OR DomNode that I will size
+	targetId: '',
+
+	// targetContainer: DomNode
+	//	over-ride targetId and attch this handle directly to a reference of a DomNode
+	targetContainer: null, 
+
+	// resizeAxis: String
+	//	one of: x|y|xy limit resizing to a single axis, default to xy ... 
+	resizeAxis: "xy",
+
+	// activeResize: Boolean
+	// 	if true, node will size realtime with mouse movement, 
+	//	if false, node will create virtual node, and only resize target on mouseUp
+	activeResize: false,
+	
+	// activeResizeClass: String
+	//	css class applied to virtual resize node. 
+	activeResizeClass: 'dojoxResizeHandleClone',
+
+	// animateSizing: Boolean
+	//	only applicable if activeResize = false. onMouseup, animate the node to the
+	//	new size
+	animateSizing: true,
+	
+	// animateMethod: String
+	// 	one of "chain" or "combine" ... visual effect only. combine will "scale" 
+	// 	node to size, "chain" will alter width, then height
+	animateMethod: 'chain',
+
+	// animateDuration: Integer
+	//	time in MS to run sizing animation. if animateMethod="chain", total animation 
+	//	playtime is 2*animateDuration
+	animateDuration: 225,
+
+	// minHeight: Integer
+	//	smallest height in px resized node can be
+	minHeight: 100,
+
+	// minWidth: Integer
+	//	smallest width in px resize node can be
+	minWidth: 100,
+
+	templateString: '<div dojoAttachPoint="resizeHandle" class="dojoxResizeHandle"><div></div></div>',
+
+	postCreate: function(){
+		// summary: setup our one major listener upon creation
+		this.connect(this.resizeHandle, "onmousedown", "_beginSizing");
+		if(!this.activeResize){ 
+			// there shall be only a single resize rubberbox that at the top
+			// level so that we can overlay it on anything whenever the user
+			// resizes something. Since there is only one mouse pointer he
+			// can't at once resize multiple things interactively.
+			this._resizeHelper = dijit.byId('dojoxGlobalResizeHelper');
+
+			if (!this._resizeHelper){
+				var tmpNode = document.createElement('div');
+				tmpNode.style.display = "none";
+				dojo.body().appendChild(tmpNode);
+				dojo.addClass(tmpNode,this.activeResizeClass);
+				this._resizeHelper = new dojox.layout._ResizeHelper({ 
+						id: 'dojoxGlobalResizeHelper'},tmpNode);
+				this._resizeHelper.startup();
+			}
+		}else{ this.animateSizing = false; } 	
+
+		if (!this.minSize) { 
+			this.minSize = { w: this.minWidth, h: this.minHeight };
+		}
+		// should we modify the css for the cursor hover to n-resize nw-resize and w-resize?
+		this._resizeX = this._resizeY = false; 
+		switch (this.resizeAxis.toLowerCase()) {
+		case "xy" : 
+			this._resizeX = this._resizeY = true; 
+			// FIXME: need logic to determine NW or NE class to see
+			// based on which [todo] corner is clicked
+			dojo.addClass(this.resizeHandle,"dojoxResizeNW"); 
+			break; 
+		case "x" : 
+			this._resizeX = true; 
+			dojo.addClass(this.resizeHandle,"dojoxResizeW");
+			break;
+		case "y" : 
+			this._resizeY = true; 
+			dojo.addClass(this.resizeHandle,"dojoxResizeN");
+			break;
+		}
+	},
+
+	_beginSizing: function(/*Event*/ e){
+		// summary: setup movement listeners and calculate initial size
+		
+		if (this._isSizing){ return false; }
+
+		this.targetWidget = dijit.byId(this.targetId);
+
+		this.targetDomNode = this.targetWidget ? this.targetWidget.domNode : dojo.byId(this.targetId);
+		if (this.targetContainer) { this.targetDomNode = this.targetContainer; } 
+		if (!this.targetDomNode){ return false; }
+
+		if (!this.activeResize) {
+			var c = dojo.coords(this.targetDomNode, true);
+			this._resizeHelper.resize({l: c.x, t: c.y, w: c.w, h: c.h});
+			this._resizeHelper.show();
+		}
+
+		this._isSizing = true;
+		this.startPoint  = {'x':e.clientX, 'y':e.clientY};
+
+		// FIXME: this is funky: marginBox adds height, contentBox ignores padding (expected, but foo!)
+		var mb = (this.targetWidget) ? dojo.marginBox(this.targetDomNode) : dojo.contentBox(this.targetDomNode);  
+		this.startSize  = { 'w':mb.w, 'h':mb.h };
+
+		this._pconnects = []; 
+		this._pconnects.push(dojo.connect(document,"onmousemove",this,"_updateSizing")); 
+		this._pconnects.push(dojo.connect(document,"onmouseup", this, "_endSizing"));
+
+		e.preventDefault();
+	},
+
+	_updateSizing: function(/*Event*/ e){
+		// summary: called when moving the ResizeHandle ... determines 
+		//	new size based on settings/position and sets styles.
+
+		if(this.activeResize){
+			this._changeSizing(e);
+		}else{
+			var tmp = this._getNewCoords(e);	
+			if(tmp === false){ return; }
+			this._resizeHelper.resize(tmp);
+		}
+		e.preventDefault();
+	},
+
+	_getNewCoords: function(/* Event */ e){
+		
+		// On IE, if you move the mouse above/to the left of the object being resized,
+		// sometimes clientX/Y aren't set, apparently.  Just ignore the event.
+		try{
+			if(!e.clientX  || !e.clientY){ return false; }
+		}catch(e){
+			// sometimes you get an exception accessing above fields...
+			return false;
+		}
+		this._activeResizeLastEvent = e; 
+
+		var dx = this.startPoint.x - e.clientX;
+		var dy = this.startPoint.y - e.clientY;
+		
+		var newW = (this._resizeX) ? this.startSize.w - dx : this.startSize.w;
+		var newH = (this._resizeY) ? this.startSize.h - dy : this.startSize.h;
+
+		// minimum size check
+		if(this.minSize){
+			//var mb = dojo.marginBox(this.targetDomNode);
+			if(newW < this.minSize.w){
+				newW = this.minSize.w;
+			}
+			if(newH < this.minSize.h){
+				newH = this.minSize.h;
+			}
+		}
+		return {w:newW, h:newH};  // Object
+	},
+	
+	_changeSizing: function(/*Event*/ e){
+		// summary: apply sizing information based on information in (e) to attached node
+		var tmp = this._getNewCoords(e);
+		if(tmp===false){ return; }
+
+		if(this.targetWidget && typeof this.targetWidget.resize == "function"){ 
+			this.targetWidget.resize(tmp);
+		}else{
+			if(this.animateSizing){
+				var anim = dojo.fx[this.animateMethod]([
+					dojo.animateProperty({
+						node: this.targetDomNode,
+						properties: { 
+							width: { start: this.startSize.w, end: tmp.w, unit:'px' } 
+						},	
+						duration: this.animateDuration
+					}),
+					dojo.animateProperty({
+						node: this.targetDomNode,
+						properties: { 
+							height: { start: this.startSize.h, end: tmp.h, unit:'px' }
+						},
+						duration: this.animateDuration
+					})
+				]);
+				anim.play();
+			}else{
+				dojo.style(this.targetDomNode,"width",tmp.w+"px"); 
+				dojo.style(this.targetDomNode,"height",tmp.h+"px");
+			}
+		}	
+	},
+
+	_endSizing: function(/*Event*/ e){
+		// summary: disconnect listenrs and cleanup sizing
+		dojo.forEach(this._pconnects,dojo.disconnect);
+		if(!this.activeResize){
+			this._resizeHelper.hide();
+			this._changeSizing(e);
+		}
+		this._isSizing = false;
+		this.onResize(e);
+	},
+	
+	onResize: function(e){
+		// summary: Stub fired when sizing is done, for things like Grid
+	}
+	
+});
+
+dojo.declare("dojox.layout._ResizeHelper",
+	dijit._Widget,
+	{
+	// summary: A global private resize helper shared between any resizeHandle with activeSizing='false;
+	
+	startup: function(){
+		if(this._started){ return; }	
+		this.inherited(arguments);
+	},
+
+	show: function(){
+		// summary: show helper to start resizing
+		dojo.fadeIn({ node: this.domNode, duration:120, 
+			beforeBegin: dojo.hitch(this,function(){
+				this.domNode.style.display=''; 
+			})
+		}).play();
+	},
+
+	hide: function(){
+		// summary: hide helper after resizing is complete
+		dojo.fadeOut({ node:this.domNode, duration:250,
+			onEnd: dojo.hitch(this,function(){
+				this.domNode.style.display="none";
+			})
+		}).play();
+	},
+	
+	resize: function(/* Object */dim){
+		// summary: size the widget and place accordingly
+		
+		// FIXME: this is off when padding present
+		dojo.marginBox(this.domNode, dim);
+	}
+});

data/data/dojo-release-1.1.1-src/dojox/layout/ScrollPane.js

@@ -0,0 +1,110 @@
+dojo.provide("dojox.layout.ScrollPane");
+dojo.experimental("dojox.layout.ScrollPane");
+
+dojo.require("dijit.layout._LayoutWidget");
+dojo.require("dijit._Templated");
+
+dojo.declare("dojox.layout.ScrollPane",
+	[dijit.layout._LayoutWidget,dijit._Templated],
+	{
+	// summary: A pane that "scrolls" its content based on the mouse poisition inside
+	//
+	// description:
+	//		A sizable container that takes it's content's natural size and creates
+	//		a scroll effect based on the relative mouse position. It is an interesting
+	//		way to display lists of data, or blocks of content, within a confined
+	//		space.
+	//
+	// 		Horizontal scrolling is supported. Combination scrolling is not.
+	//
+	//		FIXME: need to adust the _line somehow, it stops scrolling
+	//		
+	// example:
+	// |	<div dojoType="dojox.layout.ScrollPane" style="width:150px height:300px;">
+	// |		<!-- any height content -->
+	// |	</div>
+	//
+	// _line: dojo._Line
+	// 		storage for our top and bottom most scrollpoints
+	_line: null,
+	
+	// _lo: the height of the visible pane
+	_lo: null,
+	
+	_offset: 15,
+	
+	// orientation: String
+	//		either "horizontal" or "vertical" for scroll orientation. 
+	orientation: "vertical",
+	
+	templatePath: dojo.moduleUrl("dojox.layout","resources/ScrollPane.html"),
+	
+	layout: function(){
+		// summary: calculates required sizes. call this if we add/remove content manually, or reload the content.
+	
+		dojo.style(this.wrapper,this._dir,this.domNode.style[this._dir]);
+		this._lo = dojo.coords(this.wrapper,true);
+		this._size = Math.max(0,(this._vertical ?
+			(this.containerNode.scrollHeight - this._lo.h)  :
+			(this.containerNode.scrollWidth - this._lo.w)     
+		));
+		this._line = new dojo._Line(0-this._offset,this._size+(this._offset*2));
+	
+		// share a relative position w the scroll offset via a line
+		var u = this._lo[(this._vertical?"h":"w")]
+		var size = u * (u / Math.max(1,this._size));
+		var center = Math.floor(u - size);        
+		this._helpLine = new dojo._Line(0,center);
+	
+		// size the helper
+		dojo.style(this.helper,this._dir,Math.floor(size)+"px");
+		
+	},
+	
+	postCreate: function(){
+		this.inherited(arguments);
+	
+		// for the helper
+		this._showAnim = dojo._fade({ node:this.helper, end:0.5, duration:350 });
+		this._hideAnim = dojo.fadeOut({ node:this.helper, duration: 750 });
+	
+		// orientation helper
+		this._vertical = (this.orientation == "vertical");
+		if(!this._vertical){
+			dojo.addClass(this.containerNode,"dijitInline");
+			this._edge = "left";
+			this._dir = "width";
+		}else{
+			this._dir = "height";
+			this._edge = "top";
+		}
+		
+		this._hideAnim.play();
+		dojo.style(this.wrapper,"overflow","hidden");
+	
+	},	
+	
+	_set: function(/* Float */n){
+		// summary: set the pane's scroll offset, and position the virtual scroll helper 
+		this.wrapper[(this._vertical ? "scrollTop" : "scrollLeft")] = Math.floor(this._line.getValue(n));
+		dojo.style(this.helper,this._edge,Math.floor(this._helpLine.getValue(n))+"px");    
+	},
+	
+	_calc: function(/* Event */e){
+		// summary: calculate the relative offset of the cursor over the node, and call _set
+		this._set(this._vertical ? 
+			((e.pageY-(this._lo.y))/this._lo.h) :
+			((e.pageX-(this._lo.x))/this._lo.w)
+		);
+	},
+	
+	_enter: function(e){
+		if(this._hideAnim && this._hideAnim.status()=="playing"){ this._hideAnim.stop(); }
+		this._showAnim.play();
+	},
+	
+	_leave: function(e){
+		this._hideAnim.play();    
+	}
+    
+});