New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f

1 files changed, 233 insertions, 0 deletions

diff --git a/includes/js/dojox/layout/RadioGroup.js b/includes/js/dojox/layout/RadioGroup.js
new file mode 100644
index 0000000..98317ee
--- /dev/null
+++ b/includes/js/dojox/layout/RadioGroup.js
@@ -0,0 +1,233 @@
+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");
+		});
+	}
+});
+
+}