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 * * 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 : "
\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 * * 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 : "
\n\t\n
\n", _fillContent : function() { // 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() { // 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 * * 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 : "\n\t\n\t\t\n\t\t\t
\n\t\t\t${label}\n\t\t\n\t\t
\n
\n\t
\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 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); } }); }