]> git.pond.sub.org Git - eow/blobdiff - static/dojo-release-1.1.1/dijit/form/Button.js
add Dojo 1.1.1
[eow] / static / dojo-release-1.1.1 / dijit / form / Button.js
diff --git a/static/dojo-release-1.1.1/dijit/form/Button.js b/static/dojo-release-1.1.1/dijit/form/Button.js
new file mode 100644 (file)
index 0000000..f81078f
--- /dev/null
@@ -0,0 +1,425 @@
+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,
+       {
+       // summary:
+       //      Basically the same thing as a normal HTML button, but with special styling.
+       //
+       // 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: 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 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",
+
+       _onChangeMonitor: '',
+       // TODO: set button's title to this.containerNode.innerText
+
+       _onClick: function(/*Event*/ e){
+               // summary: internal function to handle click actions
+               if(this.disabled || this.readOnly){
+                       dojo.stopEvent(e); // needed for checkbox
+                       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
+               if(this._onClick(e) === false){ // returning nothing is same as true
+                       dojo.stopEvent(e);
+               }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;
+                               }
+                       }
+               }
+       },
+
+       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");
+               }
+               dojo.setSelectable(this.focusNode, false);
+               this.inherited(arguments);
+       },
+
+       onClick: function(/*Event*/ e){
+               // summary: user callback for when button is clicked
+               //      if type="submit", return true 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;
+               this._layoutHack();
+               if (this.showLabel == false){
+                       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 popup
+       //
+       // 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",
+
+       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",
+
+       _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(){
+               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: callback 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: callback when the user presses a key on menu popup node
+               if(this.disabled || this.readOnly){ return; }
+               if(e.keyCode == 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._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:
+                               // 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");
+                               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;                   
+               }
+       }
+});
+
+dojo.declare("dijit.form.ComboButton", dijit.form.DropDownButton, {
+       // summary: A Normal Button with a DropDown
+       //
+       // 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);
+       // 
+
+       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",
+
+       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);
+                               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.
+               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;
+               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,
+
+       _onChangeMonitor: 'checked',
+
+       attributeMap: dojo.mixin(dojo.clone(dijit.form.Button.prototype.attributeMap),
+               {checked:"focusNode"}),
+
+       _clicked: function(/*Event*/ evt){
+               this.setAttribute('checked', !this.checked);
+       },
+
+       setAttribute: function(/*String*/ attr, /*anything*/ value){
+               this.inherited(arguments);
+               switch(attr){
+                       case "checked":
+                               dijit.setWaiState(this.focusNode || this.domNode, "pressed", this.checked);
+                               this._setStateClass();          
+                               this._handleOnChange(this.checked, true);
+               }
+       },
+
+
+       setChecked: function(/*Boolean*/ checked){
+               // summary:
+               //      Programatically deselect the button
+               dojo.deprecated("setChecked("+checked+") is deprecated. Use setAttribute('checked',"+checked+") instead.", "", "2.0");
+               this.setAttribute('checked', checked);
+       },
+       
+       postCreate: function(){
+               this.inherited(arguments);
+               this.setAttribute('checked', this.checked); //to initially set wai pressed state 
+       }
+});
+
+}