Page MenuHomeCode
Files F946573

Button.js
No OneTemporary
Actions

Button.js
View Options

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 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:"<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\">&#10003</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 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
* <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 up
baseClass : "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'>&#9660;</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 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
* <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 menu
templateString:"<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\">&#9660;</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 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,
_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);
}
});
}

File Metadata

Mime Type
text/plain
Expires
Sat, Apr 26, 07:44 (1 d, 1 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
26493
Default Alt Text
Button.js (14 KB)

Event Timeline