Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dijit.form.Button"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.

dojo._hasResource["dijit.form.Button"] = true;

dojo.provide("dijit.form.Button");

dojo.require("dijit.form._FormWidget");

dojo.require("dijit._Container");

dojo.declare("dijit.form.Button", dijit.form._FormWidget, {

/*

 * usage

 *	<button dojoType="button" onClick="...">Hello world</button>

 *

 *  var button1 = new dijit.form.Button({label: "hello world", onClick: foo});

 *	dojo.body().appendChild(button1.domNode);

 */

	// summary

	//	Basically the same thing as a normal HTML button, but with special styling.

	// label: String

	//	text to display in button

	label: "",

	// showLabel: Boolean

	//	whether or not to display the text label in button

	showLabel: true,

	// iconClass: String

	//	class to apply to div in button to make it display an icon

	iconClass: "",

	type: "button",

	baseClass: "dijitButton",

	templateString:"<div class=\"dijit dijitLeft dijitInline dijitButton\"\n\tdojoAttachEvent=\"onclick:_onButtonClick,onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse\"\n\t><div class='dijitRight'\n\t\t><button class=\"dijitStretch dijitButtonNode dijitButtonContents\" dojoAttachPoint=\"focusNode,titleNode\"\n\t\t\ttype=\"${type}\" waiRole=\"button\" waiState=\"labelledby-${id}_label\"\n\t\t\t><span class=\"dijitInline ${iconClass}\" dojoAttachPoint=\"iconNode\" \n \t\t\t\t><span class=\"dijitToggleButtonIconChar\">&#10003</span \n\t\t\t></span\n\t\t\t><span class=\"dijitButtonText\" id=\"${id}_label\" dojoAttachPoint=\"containerNode\">${label}</span\n\t\t></button\n\t></div\n></div>\n",

	// TODO: set button's title to this.containerNode.innerText

	_onClick: function(/*Event*/ e){

		// summary: internal function to handle click actions

		if(this.disabled){ return false; }

		this._clicked(); // widget click actions

		return this.onClick(e); // user click actions

	},

	_onButtonClick: function(/*Event*/ e){

		// summary: callback when the user mouse clicks the button portion

		dojo.stopEvent(e);

		var okToSubmit = this._onClick(e) !== false; // returning nothing is same as true

		// for some reason type=submit buttons don't automatically submit the form; do it manually

		if(this.type=="submit" && okToSubmit){

			for(var node=this.domNode; node; node=node.parentNode){

				var widget=dijit.byNode(node);

				if(widget && widget._onSubmit){

					widget._onSubmit(e);

					break;

				}

				if(node.tagName.toLowerCase() == "form"){

					if(!node.onsubmit || node.onsubmit()){ node.submit(); }

					break;

				}

			}

		}

	},

	postCreate: function(){

		// summary:

		//	get label and set as title on button icon if necessary

		if (this.showLabel == false){

			var labelText = "";

			this.label = this.containerNode.innerHTML;

			labelText = dojo.trim(this.containerNode.innerText || this.containerNode.textContent);

			// set title attrib on iconNode

			this.titleNode.title=labelText;

			dojo.addClass(this.containerNode,"dijitDisplayNone");

		}

		this.inherited(arguments);

	},

	onClick: function(/*Event*/ e){

		// summary: user callback for when button is clicked

		//      if type="submit", return value != false to perform submit

		return true;

	},

	_clicked: function(/*Event*/ e){

		// summary: internal replaceable function for when the button is clicked

	},

	setLabel: function(/*String*/ content){

		// summary: reset the label (text) of the button; takes an HTML string

		this.containerNode.innerHTML = this.label = content;

		if(dojo.isMozilla){ // Firefox has re-render issues with tables

			var oldDisplay = dojo.getComputedStyle(this.domNode).display;

			this.domNode.style.display="none";

			var _this = this;

			setTimeout(function(){_this.domNode.style.display=oldDisplay;},1);

		}

		if (this.showLabel == false){

				this.titleNode.title=dojo.trim(this.containerNode.innerText || this.containerNode.textContent);

		}

	}

});

/*

 * usage

 *	<button dojoType="DropDownButton" label="Hello world"><div dojotype=dijit.Menu>...</div></button>

 *

 *  var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) });

 *	dojo.body().appendChild(button1);

 */

dojo.declare("dijit.form.DropDownButton", [dijit.form.Button, dijit._Container], {

	// summary

	//		push the button and a menu shows up

	baseClass : "dijitDropDownButton",

	templateString:"<div class=\"dijit dijitLeft dijitInline\"\n\tdojoAttachEvent=\"onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse,onclick:_onDropDownClick,onkeydown:_onDropDownKeydown,onblur:_onDropDownBlur,onkeypress:_onKey\"\n\t><div class='dijitRight'>\n\t<button class=\"dijitStretch dijitButtonNode dijitButtonContents\" type=\"${type}\"\n\t\tdojoAttachPoint=\"focusNode,titleNode\" waiRole=\"button\" waiState=\"haspopup-true,labelledby-${id}_label\"\n\t\t><div class=\"dijitInline ${iconClass}\" dojoAttachPoint=\"iconNode\"></div\n\t\t><span class=\"dijitButtonText\" \tdojoAttachPoint=\"containerNode,popupStateNode\"\n\t\tid=\"${id}_label\">${label}</span\n\t\t><span class='dijitA11yDownArrow'>&#9660;</span>\n\t</button>\n</div></div>\n",

	_fillContent: function(){

		// my inner HTML contains both the button contents and a drop down widget, like

		// <DropDownButton>  <span>push me</span>  <Menu> ... </Menu> </DropDownButton>

		// The first node is assumed to be the button content. The widget is the popup.

		if(this.srcNodeRef){ // programatically created buttons might not define srcNodeRef

			//FIXME: figure out how to filter out the widget and use all remaining nodes as button

			//	content, not just nodes[0]

			var nodes = dojo.query("*", this.srcNodeRef);

			dijit.form.DropDownButton.superclass._fillContent.call(this, nodes[0]);

			// save pointer to srcNode so we can grab the drop down widget after it's instantiated

			this.dropDownContainer = this.srcNodeRef;

		}

	},

	startup: function(){

		// the child widget from srcNodeRef is the dropdown widget.  Insert it in the page DOM,

		// make it invisible, and store a reference to pass to the popup code.

		if(!this.dropDown){

			var dropDownNode = dojo.query("[widgetId]", this.dropDownContainer)[0];

			this.dropDown = dijit.byNode(dropDownNode);

			delete this.dropDownContainer;

		}

		dojo.body().appendChild(this.dropDown.domNode);

		this.dropDown.domNode.style.display="none";

	},

	_onArrowClick: function(/*Event*/ e){

		// summary: callback when the user mouse clicks on menu popup node

		if(this.disabled){ return; }

		this._toggleDropDown();

	},

	_onDropDownClick: function(/*Event*/ e){

		// on Firefox 2 on the Mac it is possible to fire onclick

		// by pressing enter down on a second element and transferring

		// focus to the DropDownButton;

		// we want to prevent opening our menu in this situation

		// and only do so if we have seen a keydown on this button;

		// e.detail != 0 means that we were fired by mouse

		var isMacFFlessThan3 = dojo.isFF && dojo.isFF < 3

			&& navigator.appVersion.indexOf("Macintosh") != -1;

		if(!isMacFFlessThan3 || e.detail != 0 || this._seenKeydown){

			this._onArrowClick(e);

		}

		this._seenKeydown = false;

	},

	_onDropDownKeydown: function(/*Event*/ e){

		this._seenKeydown = true;

	},

	_onDropDownBlur: function(/*Event*/ e){

		this._seenKeydown = false;

	},

	_onKey: function(/*Event*/ e){

		// summary: callback when the user presses a key on menu popup node

		if(this.disabled){ return; }

		if(e.keyCode == dojo.keys.DOWN_ARROW){

			if(!this.dropDown || this.dropDown.domNode.style.display=="none"){

				dojo.stopEvent(e);

				return this._toggleDropDown();

			}

		}

	},

	_onBlur: function(){

		// summary: called magically when focus has shifted away from this widget and it's dropdown

		this._closeDropDown();

		// don't focus on button.  the user has explicitly focused on something else.

	},

	_toggleDropDown: function(){

		// summary: toggle the drop-down widget; if it is up, close it, if not, open it

		if(this.disabled){ return; }

		dijit.focus(this.popupStateNode);

		var dropDown = this.dropDown;

		if(!dropDown){ return false; }

		if(!dropDown.isShowingNow){

			// If there's an href, then load that first, so we don't get a flicker

			if(dropDown.href && !dropDown.isLoaded){

				var self = this;

				var handler = dojo.connect(dropDown, "onLoad", function(){

					dojo.disconnect(handler);

					self._openDropDown();

				});

				dropDown._loadCheck(true);

				return;

			}else{

				this._openDropDown();

			}

		}else{

			this._closeDropDown();

		}

	},

	_openDropDown: function(){

		var dropDown = this.dropDown;

		var oldWidth=dropDown.domNode.style.width;

		var self = this;

		dijit.popup.open({

			parent: this,

			popup: dropDown,

			around: this.domNode,

			orient: this.isLeftToRight() ? {'BL':'TL', 'BR':'TR', 'TL':'BL', 'TR':'BR'}

				: {'BR':'TR', 'BL':'TL', 'TR':'BR', 'TL':'BL'},

			onExecute: function(){

				self._closeDropDown(true);

			},

			onCancel: function(){

				self._closeDropDown(true);

			},

			onClose: function(){

				dropDown.domNode.style.width = oldWidth;

				self.popupStateNode.removeAttribute("popupActive");

				this._opened = false;

			}

		});

		if(this.domNode.offsetWidth > dropDown.domNode.offsetWidth){

			var adjustNode = null;

			if(!this.isLeftToRight()){

				adjustNode = dropDown.domNode.parentNode;

				var oldRight = adjustNode.offsetLeft + adjustNode.offsetWidth;

			}

			// make menu at least as wide as the button

			dojo.marginBox(dropDown.domNode, {w: this.domNode.offsetWidth});

			if(adjustNode){

				adjustNode.style.left = oldRight - this.domNode.offsetWidth + "px";

			}

		}

		this.popupStateNode.setAttribute("popupActive", "true");

		this._opened=true;

		if(dropDown.focus){

			dropDown.focus();

		}

		// TODO: set this.checked and call setStateClass(), to affect button look while drop down is shown

	},

	_closeDropDown: function(/*Boolean*/ focus){

		if(this._opened){

			dijit.popup.close(this.dropDown);

			if(focus){ this.focus(); }

			this._opened = false;

		}

	}

});

/*

 * usage

 *	<button dojoType="ComboButton" onClick="..."><span>Hello world</span><div dojoType=dijit.Menu>...</div></button>

 *

 *  var button1 = new dijit.form.ComboButton({label: "hello world", onClick: foo, dropDown: "myMenu"});

 *	dojo.body().appendChild(button1.domNode);

 */

dojo.declare("dijit.form.ComboButton", dijit.form.DropDownButton, {

	// summary

	//		left side is normal button, right side displays menu

	templateString:"<table class='dijit dijitReset dijitInline dijitLeft'\n\tcellspacing='0' cellpadding='0'\n\tdojoAttachEvent=\"onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse\">\n\t<tr>\n\t\t<td\tclass=\"dijitStretch dijitButtonContents dijitButtonNode\"\n\t\t\ttabIndex=\"${tabIndex}\"\n\t\t\tdojoAttachEvent=\"ondijitclick:_onButtonClick\"  dojoAttachPoint=\"titleNode\"\n\t\t\twaiRole=\"button\" waiState=\"labelledby-${id}_label\">\n\t\t\t<div class=\"dijitInline ${iconClass}\" dojoAttachPoint=\"iconNode\"></div>\n\t\t\t<span class=\"dijitButtonText\" id=\"${id}_label\" dojoAttachPoint=\"containerNode\">${label}</span>\n\t\t</td>\n\t\t<td class='dijitReset dijitRight dijitButtonNode dijitDownArrowButton'\n\t\t\tdojoAttachPoint=\"popupStateNode,focusNode\"\n\t\t\tdojoAttachEvent=\"ondijitclick:_onArrowClick, onkeypress:_onKey\"\n\t\t\tstateModifier=\"DownArrow\"\n\t\t\ttitle=\"${optionsTitle}\" name=\"${name}\"\n\t\t\twaiRole=\"button\" waiState=\"haspopup-true\"\n\t\t><div waiRole=\"presentation\">&#9660;</div>\n\t</td></tr>\n</table>\n",

	attributeMap: dojo.mixin(dojo.clone(dijit.form._FormWidget.prototype.attributeMap),

		{id:"", name:""}),

	// optionsTitle: String

	//  text that describes the options menu (accessibility)

	optionsTitle: "",

	baseClass: "dijitComboButton",

	_focusedNode: null,

	postCreate: function(){

		this.inherited(arguments);

		this._focalNodes = [this.titleNode, this.popupStateNode];

		dojo.forEach(this._focalNodes, dojo.hitch(this, function(node){

			if(dojo.isIE){

				this.connect(node, "onactivate", this._onNodeFocus);

			}else{

				this.connect(node, "onfocus", this._onNodeFocus);

			}

		}));

	},

	focusFocalNode: function(node){

		// summary: Focus the focal node node.

		this._focusedNode = node;

		dijit.focus(node);

	},

	hasNextFocalNode: function(){

		// summary: Returns true if this widget has no node currently

		//		focused or if there is a node following the focused one.

		//		False is returned if the last node has focus.

		return this._focusedNode !== this.getFocalNodes()[1];

	},

	focusNext: function(){

		// summary: Focus the focal node following the current node with focus

		//		or the first one if no node currently has focus.

		this._focusedNode = this.getFocalNodes()[this._focusedNode ? 1 : 0];

		dijit.focus(this._focusedNode);

	},

	hasPrevFocalNode: function(){

		// summary: Returns true if this widget has no node currently

		//		focused or if there is a node before the focused one.

		//		False is returned if the first node has focus.

		return this._focusedNode !== this.getFocalNodes()[0];

	},

	focusPrev: function(){

		// summary: Focus the focal node before the current node with focus

		//		or the last one if no node currently has focus.

		this._focusedNode = this.getFocalNodes()[this._focusedNode ? 0 : 1];

		dijit.focus(this._focusedNode);

	},

	getFocalNodes: function(){

		// summary: Returns an array of focal nodes for this widget.

		return this._focalNodes;

	},

	_onNodeFocus: function(evt){

		this._focusedNode = evt.currentTarget;

	},

	_onBlur: function(evt){

		this.inherited(arguments);

		this._focusedNode = null;

	}

});

dojo.declare("dijit.form.ToggleButton", dijit.form.Button, {

	// summary

	//	A button that can be in two states (checked or not).

	//	Can be base class for things like tabs or checkbox or radio buttons

	baseClass: "dijitToggleButton",

	// checked: Boolean

	//		Corresponds to the native HTML <input> element's attribute.

	//		In markup, specified as "checked='checked'" or just "checked".

	//		True if the button is depressed, or the checkbox is checked,

	//		or the radio button is selected, etc.

	checked: false,

	_clicked: function(/*Event*/ evt){

		this.setChecked(!this.checked);

	},

	setChecked: function(/*Boolean*/ checked){

		// summary

		//	Programatically deselect the button

		this.checked = checked;

		dijit.setWaiState(this.focusNode || this.domNode, "pressed", this.checked);

		this._setStateClass();

		this.onChange(checked);

	}

});

}