Subversion Repositories Applications.papyrus

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

dojo._hasResource["dojox.layout.RadioGroup"] = true;

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");

		});

	}

});

}