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, 229 insertions, 0 deletions

diff --git a/includes/js/dijit/layout/AccordionContainer.js b/includes/js/dijit/layout/AccordionContainer.js
new file mode 100644
index 0000000..12f8945
--- /dev/null
+++ b/includes/js/dijit/layout/AccordionContainer.js
@@ -0,0 +1,229 @@
+if(!dojo._hasResource["dijit.layout.AccordionContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dijit.layout.AccordionContainer"] = true;
+dojo.provide("dijit.layout.AccordionContainer");
+
+dojo.require("dojo.fx");
+
+dojo.require("dijit._Container");
+dojo.require("dijit._Templated");
+dojo.require("dijit.layout.StackContainer");
+dojo.require("dijit.layout.ContentPane");
+
+dojo.declare(
+	"dijit.layout.AccordionContainer",
+	dijit.layout.StackContainer,
+	{
+		// summary:
+		//		Holds a set of panes where every pane's title is visible, but only one pane's content is visible at a time,
+		//		and switching between panes is visualized by sliding the other panes up/down.
+		// example:
+		// | 	<div dojoType="dijit.layout.AccordionContainer">
+		// |		<div dojoType="dijit.layout.AccordionPane" title="pane 1">
+		// |			<div dojoType="dijit.layout.ContentPane">...</div>
+		// | 	</div>
+		// |		<div dojoType="dijit.layout.AccordionPane" title="pane 2">
+		// |			<p>This is some text</p>
+		// ||		...
+		// |	</div>
+		//
+		// duration: Integer
+		//		Amount of time (in ms) it takes to slide panes
+		duration: 250,
+
+		_verticalSpace: 0,
+
+		postCreate: function(){
+			this.domNode.style.overflow="hidden";
+			this.inherited("postCreate",arguments); 
+			dijit.setWaiRole(this.domNode, "tablist");
+			dojo.addClass(this.domNode,"dijitAccordionContainer");
+		},
+
+		startup: function(){
+			if(this._started){ return; }
+			this.inherited("startup",arguments);	
+			if(this.selectedChildWidget){
+				var style = this.selectedChildWidget.containerNode.style;
+				style.display = "";
+				style.overflow = "auto";
+				this.selectedChildWidget._setSelectedState(true);
+			}
+		},
+
+		layout: function(){
+			// summary: 
+			//		Set the height of the open pane based on what room remains
+
+			// get cumulative height of all the title bars, and figure out which pane is open
+			var totalCollapsedHeight = 0;
+			var openPane = this.selectedChildWidget;
+			dojo.forEach(this.getChildren(), function(child){
+				totalCollapsedHeight += child.getTitleHeight();
+			});
+			var mySize = this._contentBox;
+			this._verticalSpace = (mySize.h - totalCollapsedHeight);
+			if(openPane){
+				openPane.containerNode.style.height = this._verticalSpace + "px";
+/***
+TODO: this is wrong.  probably you wanted to call resize on the SplitContainer
+inside the AccordionPane??
+				if(openPane.resize){
+					openPane.resize({h: this._verticalSpace});
+				}
+***/
+			}
+		},
+
+		_setupChild: function(/*Widget*/ page){
+			// Summary: prepare the given child
+			return page;
+		},
+
+		_transition: function(/*Widget?*/newWidget, /*Widget?*/oldWidget){
+//TODO: should be able to replace this with calls to slideIn/slideOut
+			if(this._inTransition){ return; }
+			this._inTransition = true;
+			var animations = [];
+			var paneHeight = this._verticalSpace;
+			if(newWidget){
+				newWidget.setSelected(true);
+				var newContents = newWidget.containerNode;
+				newContents.style.display = "";
+
+				animations.push(dojo.animateProperty({
+					node: newContents,
+					duration: this.duration,
+					properties: {
+						height: { start: "1", end: paneHeight }
+					},
+					onEnd: function(){
+						newContents.style.overflow = "auto";
+					}
+				}));
+			}
+			if(oldWidget){
+				oldWidget.setSelected(false);
+				var oldContents = oldWidget.containerNode;
+				oldContents.style.overflow = "hidden";
+				animations.push(dojo.animateProperty({
+					node: oldContents,
+					duration: this.duration,
+					properties: {
+						height: { start: paneHeight, end: "1" }
+					},
+					onEnd: function(){
+						oldContents.style.display = "none";
+					}
+				}));
+			}
+
+			this._inTransition = false;
+
+			dojo.fx.combine(animations).play();
+		},
+
+		// note: we are treating the container as controller here
+		_onKeyPress: function(/*Event*/ e){
+			if(this.disabled || e.altKey || !(e._dijitWidget || e.ctrlKey)){ return; }
+			var k = dojo.keys;
+			var fromTitle = e._dijitWidget;
+			switch(e.keyCode){
+				case k.LEFT_ARROW:
+				case k.UP_ARROW:
+					if (fromTitle){
+						this._adjacent(false)._onTitleClick();
+						dojo.stopEvent(e);
+					}
+					break;
+				case k.PAGE_UP:
+					if (e.ctrlKey){
+						this._adjacent(false)._onTitleClick();
+						dojo.stopEvent(e);
+					}
+					break;
+				case k.RIGHT_ARROW:
+				case k.DOWN_ARROW:
+					if (fromTitle){
+						this._adjacent(true)._onTitleClick();
+						dojo.stopEvent(e);
+					}
+					break;
+				case k.PAGE_DOWN:
+					if (e.ctrlKey){
+						this._adjacent(true)._onTitleClick();
+						dojo.stopEvent(e);
+					}
+					break;
+				default:
+					if(e.ctrlKey && e.keyCode == k.TAB){
+						this._adjacent(e._dijitWidget, !e.shiftKey)._onTitleClick();
+						dojo.stopEvent(e);
+					}
+				
+			}
+		}
+	}
+);
+
+dojo.declare("dijit.layout.AccordionPane",
+	[dijit.layout.ContentPane, dijit._Templated, dijit._Contained],
+	{
+	// summary:
+	//		AccordionPane is a ContentPane with a title that may contain another widget.
+	//		Nested layout widgets, such as SplitContainer, are not supported at this time.
+	// example: 
+	// | see dijit.layout.AccordionContainer
+
+	templateString:"<div class='dijitAccordionPane'\n\t><div dojoAttachPoint='titleNode,focusNode' dojoAttachEvent='ondijitclick:_onTitleClick,onkeypress:_onTitleKeyPress,onfocus:_handleFocus,onblur:_handleFocus'\n\t\tclass='dijitAccordionTitle' wairole=\"tab\"\n\t\t><div class='dijitAccordionArrow' waiRole=\"presentation\"></div\n\t\t><div class='arrowTextUp' waiRole=\"presentation\">&#9650;</div\n\t\t><div class='arrowTextDown' waiRole=\"presentation\">&#9660;</div\n\t\t><div waiRole=\"presentation\" dojoAttachPoint='titleTextNode' class='dijitAccordionText'>${title}</div></div\n\t><div><div dojoAttachPoint='containerNode' style='overflow: hidden; height: 1px; display: none'\n\t\tclass='dijitAccordionBody' wairole=\"tabpanel\"\n\t></div></div>\n</div>\n",
+
+	postCreate: function(){
+		this.inherited("postCreate",arguments)
+		dojo.setSelectable(this.titleNode, false);
+		this.setSelected(this.selected);
+	},
+
+	getTitleHeight: function(){
+		// summary: returns the height of the title dom node
+		return dojo.marginBox(this.titleNode).h;	// Integer
+	},
+
+	_onTitleClick: function(){
+		// summary: callback when someone clicks my title
+		var parent = this.getParent();
+		if(!parent._inTransition){
+			parent.selectChild(this);
+			dijit.focus(this.focusNode);
+		}
+	},
+
+	_onTitleKeyPress: function(/*Event*/ evt){
+		evt._dijitWidget = this;
+		return this.getParent()._onKeyPress(evt);
+	},
+
+	_setSelectedState: function(/*Boolean*/ isSelected){
+		this.selected = isSelected;
+		dojo[(isSelected ? "addClass" : "removeClass")](this.titleNode,"dijitAccordionTitle-selected");
+		this.focusNode.setAttribute("tabIndex", isSelected ? "0" : "-1");
+	},
+
+	_handleFocus: function(/*Event*/e){
+		// summary: handle the blur and focus state of this widget
+		dojo[(e.type=="focus" ? "addClass" : "removeClass")](this.focusNode,"dijitAccordionFocused");		
+	},
+
+	setSelected: function(/*Boolean*/ isSelected){
+		// summary: change the selected state on this pane
+		this._setSelectedState(isSelected);
+		if(isSelected){
+			this.onSelected();
+			this._loadCheck(true); // if href specified, trigger load
+		}
+	},
+
+	onSelected: function(){
+		// summary: called when this pane is selected
+	}
+});
+
+}