Blame | Last modification | View Log | RSS feed
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 buttonlabel: "",// showLabel: Boolean// whether or not to display the text label in buttonshowLabel: true,// iconClass: String// class to apply to div in button to make it display an iconiconClass: "",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\">✓</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 actionsif(this.disabled){ return false; }this._clicked(); // widget click actionsreturn this.onClick(e); // user click actions},_onButtonClick: function(/*Event*/ e){// summary: callback when the user mouse clicks the button portiondojo.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 manuallyif(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 necessaryif (this.showLabel == false){var labelText = "";this.label = this.containerNode.innerHTML;labelText = dojo.trim(this.containerNode.innerText || this.containerNode.textContent);// set title attrib on iconNodethis.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 submitreturn 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 stringthis.containerNode.innerHTML = this.label = content;if(dojo.isMozilla){ // Firefox has re-render issues with tablesvar 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 upbaseClass : "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'>▼</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 instantiatedthis.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 nodeif(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 mousevar 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 nodeif(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 dropdownthis._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 itif(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 flickerif(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 buttondojo.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 menutemplateString:"<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\">▼</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 buttonsbaseClass: "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 buttonthis.checked = checked;dijit.setWaiState(this.focusNode || this.domNode, "pressed", this.checked);this._setStateClass();this.onChange(checked);}});}