1 if(!dojo._hasResource["dijit.form.Button"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
2 dojo._hasResource["dijit.form.Button"] = true;
3 dojo.provide("dijit.form.Button");
5 dojo.require("dijit.form._FormWidget");
6 dojo.require("dijit._Container");
8 dojo.declare("dijit.form.Button",
9 dijit.form._FormWidget,
12 // Basically the same thing as a normal HTML button, but with special styling.
15 // | <button dojoType="dijit.form.Button" onClick="...">Hello world</button>
18 // | var button1 = new dijit.form.Button({label: "hello world", onClick: foo});
19 // | dojo.body().appendChild(button1.domNode);
22 // text to display in button
26 // whether or not to display the text label in button
30 // class to apply to div in button to make it display an icon
34 baseClass: "dijitButton",
35 templateString:"<div class=\"dijit dijitReset dijitLeft dijitInline\"\n\tdojoAttachEvent=\"onclick:_onButtonClick,onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse\"\n\twaiRole=\"presentation\"\n\t><button class=\"dijitReset dijitStretch dijitButtonNode dijitButtonContents\" dojoAttachPoint=\"focusNode,titleNode\"\n\t\ttype=\"${type}\" waiRole=\"button\" waiState=\"labelledby-${id}_label\"\n\t\t><span class=\"dijitReset dijitInline ${iconClass}\" dojoAttachPoint=\"iconNode\" \n \t\t\t><span class=\"dijitReset dijitToggleButtonIconChar\">✓</span \n\t\t></span\n\t\t><div class=\"dijitReset dijitInline\"><center class=\"dijitReset dijitButtonText\" id=\"${id}_label\" dojoAttachPoint=\"containerNode\">${label}</center></div\n\t></button\n></div>\n",
38 // TODO: set button's title to this.containerNode.innerText
40 _onClick: function(/*Event*/ e){
41 // summary: internal function to handle click actions
42 if(this.disabled || this.readOnly){
43 dojo.stopEvent(e); // needed for checkbox
46 this._clicked(); // widget click actions
47 return this.onClick(e); // user click actions
50 _onButtonClick: function(/*Event*/ e){
51 // summary: callback when the user mouse clicks the button portion
52 if(this._onClick(e) === false){ // returning nothing is same as true
54 }else if(this.type=="submit" && !this.focusNode.form){ // see if a nonform widget needs to be signalled
55 for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
56 var widget=dijit.byNode(node);
57 if(widget && typeof widget._onSubmit == "function"){
65 postCreate: function(){
67 // get label and set as title on button icon if necessary
68 if (this.showLabel == false){
70 this.label = this.containerNode.innerHTML;
71 labelText = dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
72 // set title attrib on iconNode
73 this.titleNode.title=labelText;
74 dojo.addClass(this.containerNode,"dijitDisplayNone");
76 dojo.setSelectable(this.focusNode, false);
77 this.inherited(arguments);
80 onClick: function(/*Event*/ e){
81 // summary: user callback for when button is clicked
82 // if type="submit", return true to perform submit
86 _clicked: function(/*Event*/ e){
87 // summary: internal replaceable function for when the button is clicked
90 setLabel: function(/*String*/ content){
91 // summary: reset the label (text) of the button; takes an HTML string
92 this.containerNode.innerHTML = this.label = content;
94 if (this.showLabel == false){
95 this.titleNode.title=dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
101 dojo.declare("dijit.form.DropDownButton", [dijit.form.Button, dijit._Container], {
102 // summary: A button with a popup
105 // | <button dojoType="dijit.form.DropDownButton" label="Hello world">
106 // | <div dojotype="dijit.Menu">...</div>
110 // | var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) });
111 // | dojo.body().appendChild(button1);
114 baseClass : "dijitDropDownButton",
116 templateString:"<div class=\"dijit dijitReset dijitLeft dijitInline\"\n\tdojoAttachEvent=\"onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse,onclick:_onDropDownClick,onkeydown:_onDropDownKeydown,onblur:_onDropDownBlur,onkeypress:_onKey\"\n\twaiRole=\"presentation\"\n\t><div class='dijitReset dijitRight' waiRole=\"presentation\"\n\t><button class=\"dijitReset dijitStretch dijitButtonNode dijitButtonContents\" type=\"${type}\"\n\t\tdojoAttachPoint=\"focusNode,titleNode\" waiRole=\"button\" waiState=\"haspopup-true,labelledby-${id}_label\"\n\t\t><div class=\"dijitReset dijitInline ${iconClass}\" dojoAttachPoint=\"iconNode\" waiRole=\"presentation\"></div\n\t\t><div class=\"dijitReset dijitInline dijitButtonText\" dojoAttachPoint=\"containerNode,popupStateNode\" waiRole=\"presentation\"\n\t\t\tid=\"${id}_label\">${label}</div\n\t\t><div class=\"dijitReset dijitInline dijitArrowButtonInner\" waiRole=\"presentation\"> </div\n\t\t><div class=\"dijitReset dijitInline dijitArrowButtonChar\" waiRole=\"presentation\">▼</div\n\t></button\n></div></div>\n",
118 _fillContent: function(){
119 // my inner HTML contains both the button contents and a drop down widget, like
120 // <DropDownButton> <span>push me</span> <Menu> ... </Menu> </DropDownButton>
121 // The first node is assumed to be the button content. The widget is the popup.
122 if(this.srcNodeRef){ // programatically created buttons might not define srcNodeRef
123 //FIXME: figure out how to filter out the widget and use all remaining nodes as button
124 // content, not just nodes[0]
125 var nodes = dojo.query("*", this.srcNodeRef);
126 dijit.form.DropDownButton.superclass._fillContent.call(this, nodes[0]);
128 // save pointer to srcNode so we can grab the drop down widget after it's instantiated
129 this.dropDownContainer = this.srcNodeRef;
134 if(this._started){ return; }
136 // the child widget from srcNodeRef is the dropdown widget. Insert it in the page DOM,
137 // make it invisible, and store a reference to pass to the popup code.
139 var dropDownNode = dojo.query("[widgetId]", this.dropDownContainer)[0];
140 this.dropDown = dijit.byNode(dropDownNode);
141 delete this.dropDownContainer;
143 dijit.popup.prepare(this.dropDown.domNode);
145 this.inherited(arguments);
148 destroyDescendants: function(){
150 this.dropDown.destroyRecursive();
151 delete this.dropDown;
153 this.inherited(arguments);
156 _onArrowClick: function(/*Event*/ e){
157 // summary: callback when the user mouse clicks on menu popup node
158 if(this.disabled || this.readOnly){ return; }
159 this._toggleDropDown();
162 _onDropDownClick: function(/*Event*/ e){
163 // on Firefox 2 on the Mac it is possible to fire onclick
164 // by pressing enter down on a second element and transferring
165 // focus to the DropDownButton;
166 // we want to prevent opening our menu in this situation
167 // and only do so if we have seen a keydown on this button;
168 // e.detail != 0 means that we were fired by mouse
169 var isMacFFlessThan3 = dojo.isFF && dojo.isFF < 3
170 && navigator.appVersion.indexOf("Macintosh") != -1;
171 if(!isMacFFlessThan3 || e.detail != 0 || this._seenKeydown){
172 this._onArrowClick(e);
174 this._seenKeydown = false;
177 _onDropDownKeydown: function(/*Event*/ e){
178 this._seenKeydown = true;
181 _onDropDownBlur: function(/*Event*/ e){
182 this._seenKeydown = false;
185 _onKey: function(/*Event*/ e){
186 // summary: callback when the user presses a key on menu popup node
187 if(this.disabled || this.readOnly){ return; }
188 if(e.keyCode == dojo.keys.DOWN_ARROW){
189 if(!this.dropDown || this.dropDown.domNode.style.visibility=="hidden"){
191 this._toggleDropDown();
197 // summary: called magically when focus has shifted away from this widget and it's dropdown
198 this._closeDropDown();
199 // don't focus on button. the user has explicitly focused on something else.
200 this.inherited(arguments);
203 _toggleDropDown: function(){
204 // summary: toggle the drop-down widget; if it is up, close it, if not, open it
205 if(this.disabled || this.readOnly){ return; }
206 dijit.focus(this.popupStateNode);
207 var dropDown = this.dropDown;
208 if(!dropDown){ return; }
210 // If there's an href, then load that first, so we don't get a flicker
211 if(dropDown.href && !dropDown.isLoaded){
213 var handler = dojo.connect(dropDown, "onLoad", function(){
214 dojo.disconnect(handler);
215 self._openDropDown();
217 dropDown._loadCheck(true);
220 this._openDropDown();
223 this._closeDropDown();
227 _openDropDown: function(){
228 var dropDown = this.dropDown;
229 var oldWidth=dropDown.domNode.style.width;
235 around: this.domNode,
237 // TODO: add user-defined positioning option, like in Tooltip.js
238 this.isLeftToRight() ? {'BL':'TL', 'BR':'TR', 'TL':'BL', 'TR':'BR'}
239 : {'BR':'TR', 'BL':'TL', 'TR':'BR', 'TL':'BL'},
240 onExecute: function(){
241 self._closeDropDown(true);
243 onCancel: function(){
244 self._closeDropDown(true);
247 dropDown.domNode.style.width = oldWidth;
248 self.popupStateNode.removeAttribute("popupActive");
249 this._opened = false;
252 if(this.domNode.offsetWidth > dropDown.domNode.offsetWidth){
253 var adjustNode = null;
254 if(!this.isLeftToRight()){
255 adjustNode = dropDown.domNode.parentNode;
256 var oldRight = adjustNode.offsetLeft + adjustNode.offsetWidth;
258 // make menu at least as wide as the button
259 dojo.marginBox(dropDown.domNode, {w: this.domNode.offsetWidth});
261 adjustNode.style.left = oldRight - this.domNode.offsetWidth + "px";
264 this.popupStateNode.setAttribute("popupActive", "true");
269 // TODO: set this.checked and call setStateClass(), to affect button look while drop down is shown
272 _closeDropDown: function(/*Boolean*/ focus){
274 dijit.popup.close(this.dropDown);
275 if(focus){ this.focus(); }
276 this._opened = false;
281 dojo.declare("dijit.form.ComboButton", dijit.form.DropDownButton, {
282 // summary: A Normal Button with a DropDown
285 // | <button dojoType="dijit.form.ComboButton" onClick="...">
286 // | <span>Hello world</span>
287 // | <div dojoType="dijit.Menu">...</div>
291 // | var button1 = new dijit.form.ComboButton({label: "hello world", onClick: foo, dropDown: "myMenu"});
292 // | dojo.body().appendChild(button1.domNode);
295 templateString:"<table class='dijit dijitReset dijitInline dijitLeft'\n\tcellspacing='0' cellpadding='0' waiRole=\"presentation\"\n\t><tbody waiRole=\"presentation\"><tr waiRole=\"presentation\"\n\t\t><td\tclass=\"dijitReset dijitStretch dijitButtonContents dijitButtonNode\"\n\t\t\ttabIndex=\"${tabIndex}\"\n\t\t\tdojoAttachEvent=\"ondijitclick:_onButtonClick,onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse\" dojoAttachPoint=\"titleNode\"\n\t\t\twaiRole=\"button\" waiState=\"labelledby-${id}_label\"\n\t\t\t><div class=\"dijitReset dijitInline ${iconClass}\" dojoAttachPoint=\"iconNode\" waiRole=\"presentation\"></div\n\t\t\t><div class=\"dijitReset dijitInline dijitButtonText\" id=\"${id}_label\" dojoAttachPoint=\"containerNode\" waiRole=\"presentation\">${label}</div\n\t\t></td\n\t\t><td class='dijitReset dijitStretch dijitButtonNode dijitArrowButton dijitDownArrowButton'\n\t\t\tdojoAttachPoint=\"popupStateNode,focusNode\"\n\t\t\tdojoAttachEvent=\"ondijitclick:_onArrowClick, onkeypress:_onKey,onmouseenter:_onMouse,onmouseleave:_onMouse\"\n\t\t\tstateModifier=\"DownArrow\"\n\t\t\ttitle=\"${optionsTitle}\" name=\"${name}\"\n\t\t\twaiRole=\"button\" waiState=\"haspopup-true\"\n\t\t\t><div class=\"dijitReset dijitArrowButtonInner\" waiRole=\"presentation\"> </div\n\t\t\t><div class=\"dijitReset dijitArrowButtonChar\" waiRole=\"presentation\">▼</div\n\t\t></td\n\t></tr></tbody\n></table>\n",
297 attributeMap: dojo.mixin(dojo.clone(dijit.form._FormWidget.prototype.attributeMap),
300 // optionsTitle: String
301 // text that describes the options menu (accessibility)
304 baseClass: "dijitComboButton",
308 postCreate: function(){
309 this.inherited(arguments);
310 this._focalNodes = [this.titleNode, this.popupStateNode];
311 dojo.forEach(this._focalNodes, dojo.hitch(this, function(node){
313 this.connect(node, "onactivate", this._onNodeFocus);
314 this.connect(node, "ondeactivate", this._onNodeBlur);
316 this.connect(node, "onfocus", this._onNodeFocus);
317 this.connect(node, "onblur", this._onNodeBlur);
322 focusFocalNode: function(node){
323 // summary: Focus the focal node node.
324 this._focusedNode = node;
328 hasNextFocalNode: function(){
329 // summary: Returns true if this widget has no node currently
330 // focused or if there is a node following the focused one.
331 // False is returned if the last node has focus.
332 return this._focusedNode !== this.getFocalNodes()[1];
335 focusNext: function(){
336 // summary: Focus the focal node following the current node with focus
337 // or the first one if no node currently has focus.
338 this._focusedNode = this.getFocalNodes()[this._focusedNode ? 1 : 0];
339 dijit.focus(this._focusedNode);
342 hasPrevFocalNode: function(){
343 // summary: Returns true if this widget has no node currently
344 // focused or if there is a node before the focused one.
345 // False is returned if the first node has focus.
346 return this._focusedNode !== this.getFocalNodes()[0];
349 focusPrev: function(){
350 // summary: Focus the focal node before the current node with focus
351 // or the last one if no node currently has focus.
352 this._focusedNode = this.getFocalNodes()[this._focusedNode ? 0 : 1];
353 dijit.focus(this._focusedNode);
356 getFocalNodes: function(){
357 // summary: Returns an array of focal nodes for this widget.
358 return this._focalNodes;
361 _onNodeFocus: function(evt){
362 this._focusedNode = evt.currentTarget;
363 var fnc = this._focusedNode == this.focusNode ? "dijitDownArrowButtonFocused" : "dijitButtonContentsFocused";
364 dojo.addClass(this._focusedNode, fnc);
367 _onNodeBlur: function(evt){
368 var fnc = evt.currentTarget == this.focusNode ? "dijitDownArrowButtonFocused" : "dijitButtonContentsFocused";
369 dojo.removeClass(evt.currentTarget, fnc);
373 this.inherited(arguments);
374 this._focusedNode = null;
378 dojo.declare("dijit.form.ToggleButton", dijit.form.Button, {
380 // A button that can be in two states (checked or not).
381 // Can be base class for things like tabs or checkbox or radio buttons
383 baseClass: "dijitToggleButton",
386 // Corresponds to the native HTML <input> element's attribute.
387 // In markup, specified as "checked='checked'" or just "checked".
388 // True if the button is depressed, or the checkbox is checked,
389 // or the radio button is selected, etc.
392 _onChangeMonitor: 'checked',
394 attributeMap: dojo.mixin(dojo.clone(dijit.form.Button.prototype.attributeMap),
395 {checked:"focusNode"}),
397 _clicked: function(/*Event*/ evt){
398 this.setAttribute('checked', !this.checked);
401 setAttribute: function(/*String*/ attr, /*anything*/ value){
402 this.inherited(arguments);
405 dijit.setWaiState(this.focusNode || this.domNode, "pressed", this.checked);
406 this._setStateClass();
407 this._handleOnChange(this.checked, true);
412 setChecked: function(/*Boolean*/ checked){
414 // Programatically deselect the button
415 dojo.deprecated("setChecked("+checked+") is deprecated. Use setAttribute('checked',"+checked+") instead.", "", "2.0");
416 this.setAttribute('checked', checked);
419 postCreate: function(){
420 this.inherited(arguments);
421 this.setAttribute('checked', this.checked); //to initially set wai pressed state