git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/form/Button.js

   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");
   4
   5 dojo.require("dijit.form._FormWidget");
   6 dojo.require("dijit._Container");
   7
   8 dojo.declare("dijit.form.Button",
   9         dijit.form._FormWidget,
  10         {
  11         // summary:
  12         //      Basically the same thing as a normal HTML button, but with special styling.
  13         //
  14         // example:
  15         // |    <button dojoType="dijit.form.Button" onClick="...">Hello world</button>
  16         //
  17         // example:
  18         // |    var button1 = new dijit.form.Button({label: "hello world", onClick: foo});
  19         // |    dojo.body().appendChild(button1.domNode);
  20         //
  21         // label: String
  22         //      text to display in button
  23         label: "",
  24
  25         // showLabel: Boolean
  26         //      whether or not to display the text label in button
  27         showLabel: true,
  28
  29         // iconClass: String
  30         //      class to apply to div in button to make it display an icon
  31         iconClass: "",
  32
  33         type: "button",
  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\">&#10003;</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",
  36
  37         _onChangeMonitor: '',
  38         // TODO: set button's title to this.containerNode.innerText
  39
  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
  44                         return false;
  45                 }
  46                 this._clicked(); // widget click actions
  47                 return this.onClick(e); // user click actions
  48         },
  49
  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
  53                         dojo.stopEvent(e);
  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"){
  58                                         widget._onSubmit(e);
  59                                         break;
  60                                 }
  61                         }
  62                 }
  63         },
  64
  65         postCreate: function(){
  66                 // summary:
  67                 //      get label and set as title on button icon if necessary
  68                 if (this.showLabel == false){
  69                         var labelText = "";
  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");
  75                 }
  76                 dojo.setSelectable(this.focusNode, false);
  77                 this.inherited(arguments);
  78         },
  79
  80         onClick: function(/*Event*/ e){
  81                 // summary: user callback for when button is clicked
  82                 //      if type="submit", return true to perform submit
  83                 return true;
  84         },
  85
  86         _clicked: function(/*Event*/ e){
  87                 // summary: internal replaceable function for when the button is clicked
  88         },
  89
  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;
  93                 this._layoutHack();
  94                 if (this.showLabel == false){
  95                         this.titleNode.title=dojo.trim(this.containerNode.innerText || this.containerNode.textContent || '');
  96                 }
  97         }
  98 });
  99
 100
 101 dojo.declare("dijit.form.DropDownButton", [dijit.form.Button, dijit._Container], {
 102         // summary: A button with a popup
 103         //
 104         // example:
 105         // |    <button dojoType="dijit.form.DropDownButton" label="Hello world">
 106         // |            <div dojotype="dijit.Menu">...</div>
 107         // |    </button>
 108         //
 109         // example:
 110         // |    var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) });
 111         // |    dojo.body().appendChild(button1);
 112         //
 113
 114         baseClass : "dijitDropDownButton",
 115
 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\">&thinsp;</div\n\t\t><div class=\"dijitReset dijitInline dijitArrowButtonChar\" waiRole=\"presentation\">&#9660;</div\n\t></button\n></div></div>\n",
 117
 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]);
 127
 128                         // save pointer to srcNode so we can grab the drop down widget after it's instantiated
 129                         this.dropDownContainer = this.srcNodeRef;
 130                 }
 131         },
 132
 133         startup: function(){
 134                 if(this._started){ return; }
 135
 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.
 138                 if(!this.dropDown){
 139                         var dropDownNode = dojo.query("[widgetId]", this.dropDownContainer)[0];
 140                         this.dropDown = dijit.byNode(dropDownNode);
 141                         delete this.dropDownContainer;
 142                 }
 143                 dijit.popup.prepare(this.dropDown.domNode);
 144
 145                 this.inherited(arguments);
 146         },
 147
 148         destroyDescendants: function(){
 149                 if(this.dropDown){
 150                         this.dropDown.destroyRecursive();
 151                         delete this.dropDown;
 152                 }
 153                 this.inherited(arguments);
 154         },
 155
 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();
 160         },
 161
 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);
 173                 }
 174                 this._seenKeydown = false;
 175         },
 176
 177         _onDropDownKeydown: function(/*Event*/ e){
 178                 this._seenKeydown = true;
 179         },
 180
 181         _onDropDownBlur: function(/*Event*/ e){
 182                 this._seenKeydown = false;
 183         },
 184
 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"){
 190                                 dojo.stopEvent(e);
 191                                 this._toggleDropDown();
 192                         }
 193                 }
 194         },
 195
 196         _onBlur: function(){
 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);
 201         },
 202
 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; }
 209                 if(!this._opened){
 210                         // If there's an href, then load that first, so we don't get a flicker
 211                         if(dropDown.href && !dropDown.isLoaded){
 212                                 var self = this;
 213                                 var handler = dojo.connect(dropDown, "onLoad", function(){
 214                                         dojo.disconnect(handler);
 215                                         self._openDropDown();
 216                                 });
 217                                 dropDown._loadCheck(true);
 218                                 return;
 219                         }else{
 220                                 this._openDropDown();
 221                         }
 222                 }else{
 223                         this._closeDropDown();
 224                 }
 225         },
 226
 227         _openDropDown: function(){
 228                 var dropDown = this.dropDown;
 229                 var oldWidth=dropDown.domNode.style.width;
 230                 var self = this;
 231
 232                 dijit.popup.open({
 233                         parent: this,
 234                         popup: dropDown,
 235                         around: this.domNode,
 236                         orient:
 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);
 242                         },
 243                         onCancel: function(){
 244                                 self._closeDropDown(true);
 245                         },
 246                         onClose: function(){
 247                                 dropDown.domNode.style.width = oldWidth;
 248                                 self.popupStateNode.removeAttribute("popupActive");
 249                                 this._opened = false;
 250                         }
 251                 });
 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;
 257                         }
 258                         // make menu at least as wide as the button
 259                         dojo.marginBox(dropDown.domNode, {w: this.domNode.offsetWidth});
 260                         if(adjustNode){
 261                                 adjustNode.style.left = oldRight - this.domNode.offsetWidth + "px";
 262                         }
 263                 }
 264                 this.popupStateNode.setAttribute("popupActive", "true");
 265                 this._opened=true;
 266                 if(dropDown.focus){
 267                         dropDown.focus();
 268                 }
 269                 // TODO: set this.checked and call setStateClass(), to affect button look while drop down is shown
 270         },
 271
 272         _closeDropDown: function(/*Boolean*/ focus){
 273                 if(this._opened){
 274                         dijit.popup.close(this.dropDown);
 275                         if(focus){ this.focus(); }
 276                         this._opened = false;
 277                 }
 278         }
 279 });
 280
 281 dojo.declare("dijit.form.ComboButton", dijit.form.DropDownButton, {
 282         // summary: A Normal Button with a DropDown
 283         //
 284         // example:
 285         // |    <button dojoType="dijit.form.ComboButton" onClick="...">
 286         // |            <span>Hello world</span>
 287         // |            <div dojoType="dijit.Menu">...</div>
 288         // |    </button>
 289         //
 290         // example:
 291         // |    var button1 = new dijit.form.ComboButton({label: "hello world", onClick: foo, dropDown: "myMenu"});
 292         // |    dojo.body().appendChild(button1.domNode);
 293         //
 294
 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\">&thinsp;</div\n\t\t\t><div class=\"dijitReset dijitArrowButtonChar\" waiRole=\"presentation\">&#9660;</div\n\t\t></td\n\t></tr></tbody\n></table>\n",
 296
 297         attributeMap: dojo.mixin(dojo.clone(dijit.form._FormWidget.prototype.attributeMap),
 298                 {id:"", name:""}),
 299
 300         // optionsTitle: String
 301         //  text that describes the options menu (accessibility)
 302         optionsTitle: "",
 303
 304         baseClass: "dijitComboButton",
 305
 306         _focusedNode: null,
 307
 308         postCreate: function(){
 309                 this.inherited(arguments);
 310                 this._focalNodes = [this.titleNode, this.popupStateNode];
 311                 dojo.forEach(this._focalNodes, dojo.hitch(this, function(node){
 312                         if(dojo.isIE){
 313                                 this.connect(node, "onactivate", this._onNodeFocus);
 314                                 this.connect(node, "ondeactivate", this._onNodeBlur);
 315                         }else{
 316                                 this.connect(node, "onfocus", this._onNodeFocus);
 317                                 this.connect(node, "onblur", this._onNodeBlur);
 318                         }
 319                 }));
 320         },
 321
 322         focusFocalNode: function(node){
 323                 // summary: Focus the focal node node.
 324                 this._focusedNode = node;
 325                 dijit.focus(node);
 326         },
 327
 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];
 333         },
 334
 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);
 340         },
 341
 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];
 347         },
 348
 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);
 354         },
 355
 356         getFocalNodes: function(){
 357                 // summary: Returns an array of focal nodes for this widget.
 358                 return this._focalNodes;
 359         },
 360
 361         _onNodeFocus: function(evt){
 362                 this._focusedNode = evt.currentTarget;
 363                 var fnc = this._focusedNode == this.focusNode ? "dijitDownArrowButtonFocused" : "dijitButtonContentsFocused";
 364                 dojo.addClass(this._focusedNode, fnc);
 365         },
 366
 367         _onNodeBlur: function(evt){
 368                 var fnc = evt.currentTarget == this.focusNode ? "dijitDownArrowButtonFocused" : "dijitButtonContentsFocused";
 369                 dojo.removeClass(evt.currentTarget, fnc);
 370         },
 371
 372         _onBlur: function(){
 373                 this.inherited(arguments);
 374                 this._focusedNode = null;
 375         }
 376 });
 377
 378 dojo.declare("dijit.form.ToggleButton", dijit.form.Button, {
 379         // summary:
 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
 382
 383         baseClass: "dijitToggleButton",
 384
 385         // checked: Boolean
 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.
 390         checked: false,
 391
 392         _onChangeMonitor: 'checked',
 393
 394         attributeMap: dojo.mixin(dojo.clone(dijit.form.Button.prototype.attributeMap),
 395                 {checked:"focusNode"}),
 396
 397         _clicked: function(/*Event*/ evt){
 398                 this.setAttribute('checked', !this.checked);
 399         },
 400
 401         setAttribute: function(/*String*/ attr, /*anything*/ value){
 402                 this.inherited(arguments);
 403                 switch(attr){
 404                         case "checked":
 405                                 dijit.setWaiState(this.focusNode || this.domNode, "pressed", this.checked);
 406                                 this._setStateClass();
 407                                 this._handleOnChange(this.checked, true);
 408                 }
 409         },
 410
 411
 412         setChecked: function(/*Boolean*/ checked){
 413                 // summary:
 414                 //      Programatically deselect the button
 415                 dojo.deprecated("setChecked("+checked+") is deprecated. Use setAttribute('checked',"+checked+") instead.", "", "2.0");
 416                 this.setAttribute('checked', checked);
 417         },
 418
 419         postCreate: function(){
 420                 this.inherited(arguments);
 421                 this.setAttribute('checked', this.checked); //to initially set wai pressed state
 422         }
 423 });
 424
 425 }