diff options
Diffstat (limited to 'includes/js/dijit/form/Button.js')
| -rw-r--r-- | includes/js/dijit/form/Button.js | 425 |
1 files changed, 425 insertions, 0 deletions
diff --git a/includes/js/dijit/form/Button.js b/includes/js/dijit/form/Button.js new file mode 100644 index 0000000..f81078f --- /dev/null +++ b/includes/js/dijit/form/Button.js @@ -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\">✓</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\"> </div\n\t\t><div class=\"dijitReset dijitInline dijitArrowButtonChar\" waiRole=\"presentation\">▼</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\"> </div\n\t\t\t><div class=\"dijitReset dijitArrowButtonChar\" waiRole=\"presentation\">▼</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 + } +}); + +} |