/* Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved. Available via Academic Free License >= 2.1 OR the modified BSD license. see: http://dojotoolkit.org/license for details */ 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.require("dijit._HasDropDown"); dojo.declare("dijit.form.Button", dijit.form._FormWidget, { // summary: // Basically the same thing as a normal HTML button, but with special styling. // description: // Buttons can display a label, an icon, or both. // A label should always be specified (through innerHTML) or the label // attribute. It can be hidden via showLabel=false. // example: // | // // example: // | var button1 = new dijit.form.Button({label: "hello world", onClick: foo}); // | dojo.body().appendChild(button1.domNode); // label: HTML String // Text to display in button. // If the label is hidden (showLabel=false) then and no title has // been specified, then label is also set as title attribute of icon. label: "", // showLabel: Boolean // Set this to true to hide the label text and display only the icon. // (If showLabel=false then iconClass must be specified.) // Especially useful for toolbars. // If showLabel=true, the label will become the title (a.k.a. tooltip/hint) of the icon. // // The exception case is for computers in high-contrast mode, where the label // will still be displayed, since the icon doesn't appear. showLabel: true, // iconClass: String // Class to apply to DOMNode in button to make it display an icon iconClass: "", // type: String // Defines the type of button. "button", "submit", or "reset". type: "button", baseClass: "dijitButton", templateString: dojo.cache("dijit.form", "templates/Button.html", "\n"), attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, { value: "valueNode" }), _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: // Handler when the user activates the button portion. if(this._onClick(e) === false){ // returning nothing is same as true e.preventDefault(); // needed for checkbox }else if(this.type == "submit" && !(this.valueNode||this.focusNode).form){ // see if a nonform widget needs to be signalled for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){ var widget=dijit.byNode(node); if(widget && typeof widget._onSubmit == "function"){ widget._onSubmit(e); break; } } }else if(this.valueNode){ this.valueNode.click(); e.preventDefault(); // cancel BUTTON click and continue with hidden INPUT click } }, buildRendering: function(){ this.inherited(arguments); dojo.setSelectable(this.focusNode, false); }, _fillContent: function(/*DomNode*/ source){ // Overrides _Templated._fillContent(). // If button label is specified as srcNodeRef.innerHTML rather than // this.params.label, handle it here. // TODO: remove the method in 2.0, parser will do it all for me if(source && (!this.params || !("label" in this.params))){ this.set('label', source.innerHTML); } }, _setShowLabelAttr: function(val){ if(this.containerNode){ dojo.toggleClass(this.containerNode, "dijitDisplayNone", !val); } this._set("showLabel", val); }, onClick: function(/*Event*/ e){ // summary: // Callback for when button is clicked. // If type="submit", return true to perform submit, or false to cancel it. // type: // callback return true; // Boolean }, _clicked: function(/*Event*/ e){ // summary: // Internal overridable function for when the button is clicked }, setLabel: function(/*String*/ content){ // summary: // Deprecated. Use set('label', ...) instead. dojo.deprecated("dijit.form.Button.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0"); this.set("label", content); }, _setLabelAttr: function(/*String*/ content){ // summary: // Hook for set('label', ...) to work. // description: // Set the label (text) of the button; takes an HTML string. this._set("label", content); this.containerNode.innerHTML = content; if(this.showLabel == false && !this.params.title){ this.titleNode.title = dojo.trim(this.containerNode.innerText || this.containerNode.textContent || ''); } }, _setIconClassAttr: function(/*String*/ val){ // Custom method so that icon node is hidden when not in use, to avoid excess padding/margin // appearing around it (even if it's a 0x0 sized node) var oldVal = this.iconClass || "dijitNoIcon", newVal = val || "dijitNoIcon"; dojo.replaceClass(this.iconNode, newVal, oldVal); this._set("iconClass", val); } }); dojo.declare("dijit.form.DropDownButton", [dijit.form.Button, dijit._Container, dijit._HasDropDown], { // summary: // A button with a drop down // // example: // | // // example: // | var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) }); // | dojo.body().appendChild(button1); // baseClass : "dijitDropDownButton", templateString: dojo.cache("dijit.form", "templates/DropDownButton.html", "\n"), _fillContent: function(){ // Overrides Button._fillContent(). // // My inner HTML contains both the button contents and a drop down widget, like // push me ... // 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(){ if(this._started){ return; } // 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 && this.dropDownContainer){ var dropDownNode = dojo.query("[widgetId]", this.dropDownContainer)[0]; this.dropDown = dijit.byNode(dropDownNode); delete this.dropDownContainer; } if(this.dropDown){ dijit.popup.hide(this.dropDown); } this.inherited(arguments); }, isLoaded: function(){ // Returns whether or not we are loaded - if our dropdown has an href, // then we want to check that. var dropDown = this.dropDown; return (!!dropDown && (!dropDown.href || dropDown.isLoaded)); }, loadDropDown: function(){ // Loads our dropdown var dropDown = this.dropDown; if(!dropDown){ return; } if(!this.isLoaded()){ var handler = dojo.connect(dropDown, "onLoad", this, function(){ dojo.disconnect(handler); this.openDropDown(); }); dropDown.refresh(); }else{ this.openDropDown(); } }, isFocusable: function(){ // Overridden so that focus is handled by the _HasDropDown mixin, not by // the _FormWidget mixin. return this.inherited(arguments) && !this._mouseDown; } }); dojo.declare("dijit.form.ComboButton", dijit.form.DropDownButton, { // summary: // A combination button and drop-down button. // Users can click one side to "press" the button, or click an arrow // icon to display the drop down. // // example: // | // // example: // | var button1 = new dijit.form.ComboButton({label: "hello world", onClick: foo, dropDown: "myMenu"}); // | dojo.body().appendChild(button1.domNode); // templateString: dojo.cache("dijit.form", "templates/ComboButton.html", "
\n"), attributeMap: dojo.mixin(dojo.clone(dijit.form.Button.prototype.attributeMap), { id: "", tabIndex: ["focusNode", "titleNode"], title: "titleNode" }), // optionsTitle: String // Text that describes the options menu (accessibility) optionsTitle: "", baseClass: "dijitComboButton", // Set classes like dijitButtonContentsHover or dijitArrowButtonActive depending on // mouse action over specified node cssStateNodes: { "buttonNode": "dijitButtonNode", "titleNode": "dijitButtonContents", "_popupStateNode": "dijitDownArrowButton" }, _focusedNode: null, _onButtonKeyPress: function(/*Event*/ evt){ // summary: // Handler for right arrow key when focus is on left part of button if(evt.charOrCode == dojo.keys[this.isLeftToRight() ? "RIGHT_ARROW" : "LEFT_ARROW"]){ dijit.focus(this._popupStateNode); dojo.stopEvent(evt); } }, _onArrowKeyPress: function(/*Event*/ evt){ // summary: // Handler for left arrow key when focus is on right part of button if(evt.charOrCode == dojo.keys[this.isLeftToRight() ? "LEFT_ARROW" : "RIGHT_ARROW"]){ dijit.focus(this.titleNode); dojo.stopEvent(evt); } }, focus: function(/*String*/ position){ // summary: // Focuses this widget to according to position, if specified, // otherwise on arrow node // position: // "start" or "end" if(!this.disabled){ dijit.focus(position == "start" ? this.titleNode : this._popupStateNode); } } }); 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 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, attributeMap: dojo.mixin(dojo.clone(dijit.form.Button.prototype.attributeMap), { checked:"focusNode" }), _clicked: function(/*Event*/ evt){ this.set('checked', !this.checked); }, _setCheckedAttr: function(/*Boolean*/ value, /*Boolean?*/ priorityChange){ this._set("checked", value); dojo.attr(this.focusNode || this.domNode, "checked", value); dijit.setWaiState(this.focusNode || this.domNode, "pressed", value); this._handleOnChange(value, priorityChange); }, setChecked: function(/*Boolean*/ checked){ // summary: // Deprecated. Use set('checked', true/false) instead. dojo.deprecated("setChecked("+checked+") is deprecated. Use set('checked',"+checked+") instead.", "", "2.0"); this.set('checked', checked); }, reset: function(){ // summary: // Reset the widget's value to what it was at initialization time this._hasBeenBlurred = false; // set checked state to original setting this.set('checked', this.params.checked || false); } }); }