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\t
\n
\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);
}
});
}