You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
514 lines
16 KiB
JavaScript
514 lines
16 KiB
JavaScript
dojo.provide("dijit.form.Button");
|
|
|
|
dojo.require("dijit.form._FormWidget");
|
|
dojo.require("dijit._Container");
|
|
|
|
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:
|
|
// | <button dojoType="dijit.form.Button" onClick="...">Hello world</button>
|
|
//
|
|
// 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 div in button to make it display an icon
|
|
iconClass: "",
|
|
|
|
// type: String
|
|
// Defines the type of button. "button", "submit", or "reset".
|
|
type: "button",
|
|
|
|
baseClass: "dijitButton",
|
|
|
|
templatePath: dojo.moduleUrl("dijit.form", "templates/Button.html"),
|
|
|
|
attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, {
|
|
label: { node: "containerNode", type: "innerHTML" },
|
|
iconClass: { node: "iconNode", type: "class" }
|
|
}),
|
|
|
|
|
|
_onClick: function(/*Event*/ e){
|
|
// summary:
|
|
// Internal function to handle click actions
|
|
if(this.disabled || this.readOnly){
|
|
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 is activated via a keystroke, stop the event unless is submit or reset.
|
|
if(e.type!='click' && !(this.type=="submit" || this.type=="reset")){
|
|
dojo.stopEvent(e);
|
|
}
|
|
if(this._onClick(e) === false){ // returning nothing is same as true
|
|
e.preventDefault(); // needed for checkbox
|
|
}else if(this.type=="submit" && !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;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
_setValueAttr: function(/*String*/ value){
|
|
// Verify that value cannot be set for BUTTON elements.
|
|
var attr = this.attributeMap.value || '';
|
|
if(this[attr.node||attr||'domNode'].tagName == 'BUTTON'){
|
|
// On IE, setting value actually overrides innerHTML, so disallow for everyone for consistency
|
|
if(value != this.value){
|
|
console.debug('Cannot change the value attribute on a Button widget.');
|
|
}
|
|
}
|
|
},
|
|
|
|
_fillContent: function(/*DomNode*/ source){
|
|
// Overrides _Templated._fillcContent().
|
|
// If button label is specified as srcNodeRef.innerHTML rather than
|
|
// this.params.label, handle it here.
|
|
if(source && !("label" in this.params)){
|
|
this.attr('label', source.innerHTML);
|
|
}
|
|
},
|
|
|
|
postCreate: function(){
|
|
if (this.showLabel == false){
|
|
dojo.addClass(this.containerNode,"dijitDisplayNone");
|
|
}
|
|
dojo.setSelectable(this.focusNode, false);
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
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 attr('label', ...) instead.
|
|
dojo.deprecated("dijit.form.Button.setLabel() is deprecated. Use attr('label', ...) instead.", "", "2.0");
|
|
this.attr("label", content);
|
|
},
|
|
_setLabelAttr: function(/*String*/ content){
|
|
// summary:
|
|
// Hook for attr('label', ...) to work.
|
|
// description:
|
|
// Set the label (text) of the button; takes an HTML string.
|
|
this.containerNode.innerHTML = this.label = content;
|
|
this._layoutHack();
|
|
if (this.showLabel == false && !this.params.title){
|
|
this.titleNode.title = dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
dojo.declare("dijit.form.DropDownButton", [dijit.form.Button, dijit._Container], {
|
|
// summary:
|
|
// A button with a drop down
|
|
//
|
|
// example:
|
|
// | <button dojoType="dijit.form.DropDownButton" label="Hello world">
|
|
// | <div dojotype="dijit.Menu">...</div>
|
|
// | </button>
|
|
//
|
|
// example:
|
|
// | var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) });
|
|
// | dojo.body().appendChild(button1);
|
|
//
|
|
|
|
baseClass : "dijitDropDownButton",
|
|
|
|
templatePath: dojo.moduleUrl("dijit.form" , "templates/DropDownButton.html"),
|
|
|
|
_fillContent: function(){
|
|
// Overrides Button._fillContent().
|
|
//
|
|
// 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(){
|
|
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){
|
|
var dropDownNode = dojo.query("[widgetId]", this.dropDownContainer)[0];
|
|
this.dropDown = dijit.byNode(dropDownNode);
|
|
delete this.dropDownContainer;
|
|
}
|
|
dijit.popup.prepare(this.dropDown.domNode);
|
|
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
destroyDescendants: function(){
|
|
if(this.dropDown){
|
|
this.dropDown.destroyRecursive();
|
|
delete this.dropDown;
|
|
}
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
_onArrowClick: function(/*Event*/ e){
|
|
// summary:
|
|
// Handler for when the user mouse clicks on menu popup node
|
|
if(this.disabled || this.readOnly){ 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:
|
|
// Handler when the user presses a key on drop down widget
|
|
if(this.disabled || this.readOnly){ return; }
|
|
if(e.charOrCode == dojo.keys.DOWN_ARROW){
|
|
if(!this.dropDown || this.dropDown.domNode.style.visibility=="hidden"){
|
|
dojo.stopEvent(e);
|
|
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.
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
_toggleDropDown: function(){
|
|
// summary:
|
|
// Toggle the drop-down widget; if it is up, close it; if not, open it.
|
|
if(this.disabled || this.readOnly){ return; }
|
|
dijit.focus(this.popupStateNode);
|
|
var dropDown = this.dropDown;
|
|
if(!dropDown){ return; }
|
|
if(!this._opened){
|
|
// 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.refresh();
|
|
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:
|
|
// TODO: add user-defined positioning option, like in Tooltip.js
|
|
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");
|
|
self._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;
|
|
}
|
|
}
|
|
});
|
|
|
|
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:
|
|
// | <button dojoType="dijit.form.ComboButton" onClick="...">
|
|
// | <span>Hello world</span>
|
|
// | <div dojoType="dijit.Menu">...</div>
|
|
// | </button>
|
|
//
|
|
// example:
|
|
// | var button1 = new dijit.form.ComboButton({label: "hello world", onClick: foo, dropDown: "myMenu"});
|
|
// | dojo.body().appendChild(button1.domNode);
|
|
//
|
|
|
|
templatePath: dojo.moduleUrl("dijit.form", "templates/ComboButton.html"),
|
|
|
|
attributeMap: dojo.mixin(dojo.clone(dijit.form.Button.prototype.attributeMap), {
|
|
id:"",
|
|
tabIndex: ["focusNode", "titleNode"]
|
|
}),
|
|
|
|
// 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);
|
|
this.connect(node, "ondeactivate", this._onNodeBlur);
|
|
}else{
|
|
this.connect(node, "onfocus", this._onNodeFocus);
|
|
this.connect(node, "onblur", this._onNodeBlur);
|
|
}
|
|
}));
|
|
},
|
|
|
|
focusFocalNode: function(node){
|
|
// summary:
|
|
// Focus the focal node node.
|
|
// description:
|
|
// Called by _KeyNavContainer for (when example) this button is in a toolbar.
|
|
// tags:
|
|
// protected
|
|
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.
|
|
// description:
|
|
// Called by _KeyNavContainer for (when example) this button is in a toolbar.
|
|
// tags:
|
|
// protected
|
|
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.
|
|
// description:
|
|
// Called by _KeyNavContainer for (when example) this button is in a toolbar.
|
|
// tags:
|
|
// protected
|
|
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.
|
|
// description:
|
|
// Called by _KeyNavContainer for (when example) this button is in a toolbar.
|
|
// tags:
|
|
// protected
|
|
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.
|
|
// description:
|
|
// Called by _KeyNavContainer for (when example) this button is in a toolbar.
|
|
// tags:
|
|
// protected
|
|
this._focusedNode = this.getFocalNodes()[this._focusedNode ? 0 : 1];
|
|
dijit.focus(this._focusedNode);
|
|
},
|
|
|
|
getFocalNodes: function(){
|
|
// summary:
|
|
// Returns an array of focal nodes for this widget.
|
|
// description:
|
|
// Called by _KeyNavContainer for (when example) this button is in a toolbar.
|
|
// tags:
|
|
// protected
|
|
return this._focalNodes;
|
|
},
|
|
|
|
_onNodeFocus: function(evt){
|
|
this._focusedNode = evt.currentTarget;
|
|
var fnc = this._focusedNode == this.focusNode ? "dijitDownArrowButtonFocused" : "dijitButtonContentsFocused";
|
|
dojo.addClass(this._focusedNode, fnc);
|
|
},
|
|
|
|
_onNodeBlur: function(evt){
|
|
var fnc = evt.currentTarget == this.focusNode ? "dijitDownArrowButtonFocused" : "dijitButtonContentsFocused";
|
|
dojo.removeClass(evt.currentTarget, fnc);
|
|
},
|
|
|
|
_onBlur: function(){
|
|
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,
|
|
|
|
attributeMap: dojo.mixin(dojo.clone(dijit.form.Button.prototype.attributeMap),
|
|
{checked:"focusNode"}),
|
|
|
|
_clicked: function(/*Event*/ evt){
|
|
this.attr('checked', !this.checked);
|
|
},
|
|
|
|
_setCheckedAttr: function(/*Boolean*/ value){
|
|
this.checked = value;
|
|
dojo.attr(this.focusNode || this.domNode, "checked", value);
|
|
dijit.setWaiState(this.focusNode || this.domNode, "pressed", value);
|
|
this._setStateClass();
|
|
this._handleOnChange(value, true);
|
|
},
|
|
|
|
setChecked: function(/*Boolean*/ checked){
|
|
// summary:
|
|
// Deprecated. Use attr('checked', true/false) instead.
|
|
dojo.deprecated("setChecked("+checked+") is deprecated. Use attr('checked',"+checked+") instead.", "", "2.0");
|
|
this.attr('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.attr('checked', this.params.checked || false);
|
|
}
|
|
});
|