diff options
Diffstat (limited to 'lib/dijit/MenuItem.js')
-rw-r--r-- | lib/dijit/MenuItem.js | 245 |
1 files changed, 188 insertions, 57 deletions
diff --git a/lib/dijit/MenuItem.js b/lib/dijit/MenuItem.js index 1f890b5f4..966b2b46b 100644 --- a/lib/dijit/MenuItem.js +++ b/lib/dijit/MenuItem.js @@ -1,69 +1,200 @@ /* - Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved. + Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved. Available via Academic Free License >= 2.1 OR the modified BSD license. see: http://dojotoolkit.org/license for details */ -if(!dojo._hasResource["dijit.MenuItem"]){ -dojo._hasResource["dijit.MenuItem"]=true; +if(!dojo._hasResource["dijit.MenuItem"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.MenuItem"] = true; dojo.provide("dijit.MenuItem"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dijit._Contained"); dojo.require("dijit._CssStateMixin"); -dojo.declare("dijit.MenuItem",[dijit._Widget,dijit._Templated,dijit._Contained,dijit._CssStateMixin],{templateString:dojo.cache("dijit","templates/MenuItem.html","<tr class=\"dijitReset dijitMenuItem\" dojoAttachPoint=\"focusNode\" waiRole=\"menuitem\" tabIndex=\"-1\"\n\t\tdojoAttachEvent=\"onmouseenter:_onHover,onmouseleave:_onUnhover,ondijitclick:_onClick\">\n\t<td class=\"dijitReset dijitMenuItemIconCell\" waiRole=\"presentation\">\n\t\t<img src=\"${_blankGif}\" alt=\"\" class=\"dijitIcon dijitMenuItemIcon\" dojoAttachPoint=\"iconNode\"/>\n\t</td>\n\t<td class=\"dijitReset dijitMenuItemLabel\" colspan=\"2\" dojoAttachPoint=\"containerNode\"></td>\n\t<td class=\"dijitReset dijitMenuItemAccelKey\" style=\"display: none\" dojoAttachPoint=\"accelKeyNode\"></td>\n\t<td class=\"dijitReset dijitMenuArrowCell\" waiRole=\"presentation\">\n\t\t<div dojoAttachPoint=\"arrowWrapper\" style=\"visibility: hidden\">\n\t\t\t<img src=\"${_blankGif}\" alt=\"\" class=\"dijitMenuExpand\"/>\n\t\t\t<span class=\"dijitMenuExpandA11y\">+</span>\n\t\t</div>\n\t</td>\n</tr>\n"),attributeMap:dojo.delegate(dijit._Widget.prototype.attributeMap,{label:{node:"containerNode",type:"innerHTML"},iconClass:{node:"iconNode",type:"class"}}),baseClass:"dijitMenuItem",label:"",iconClass:"",accelKey:"",disabled:false,_fillContent:function(_1){ -if(_1&&!("label" in this.params)){ -this.set("label",_1.innerHTML); -} -},postCreate:function(){ -this.inherited(arguments); -dojo.setSelectable(this.domNode,false); -var _2=this.id+"_text"; -dojo.attr(this.containerNode,"id",_2); -if(this.accelKeyNode){ -dojo.attr(this.accelKeyNode,"id",this.id+"_accel"); -_2+=" "+this.id+"_accel"; -} -dijit.setWaiState(this.domNode,"labelledby",_2); -},_onHover:function(){ -this.getParent().onItemHover(this); -},_onUnhover:function(){ -this.getParent().onItemUnhover(this); -this._hovering=false; -this._setStateClass(); -},_onClick:function(_3){ -this.getParent().onItemClick(this,_3); -dojo.stopEvent(_3); -},onClick:function(_4){ -},focus:function(){ -try{ -if(dojo.isIE==8){ -this.containerNode.focus(); -} -dijit.focus(this.focusNode); -} -catch(e){ -} -},_onFocus:function(){ -this._setSelected(true); -this.getParent()._onItemFocus(this); -this.inherited(arguments); -},_setSelected:function(_5){ -dojo.toggleClass(this.domNode,"dijitMenuItemSelected",_5); -},setLabel:function(_6){ -dojo.deprecated("dijit.MenuItem.setLabel() is deprecated. Use set('label', ...) instead.","","2.0"); -this.set("label",_6); -},setDisabled:function(_7){ -dojo.deprecated("dijit.Menu.setDisabled() is deprecated. Use set('disabled', bool) instead.","","2.0"); -this.set("disabled",_7); -},_setDisabledAttr:function(_8){ -this.disabled=_8; -dijit.setWaiState(this.focusNode,"disabled",_8?"true":"false"); -},_setAccelKeyAttr:function(_9){ -this.accelKey=_9; -this.accelKeyNode.style.display=_9?"":"none"; -this.accelKeyNode.innerHTML=_9; -dojo.attr(this.containerNode,"colSpan",_9?"1":"2"); -}}); + + +dojo.declare("dijit.MenuItem", + [dijit._Widget, dijit._Templated, dijit._Contained, dijit._CssStateMixin], + { + // summary: + // A line item in a Menu Widget + + // Make 3 columns + // icon, label, and expand arrow (BiDi-dependent) indicating sub-menu + templateString: dojo.cache("dijit", "templates/MenuItem.html", "<tr class=\"dijitReset dijitMenuItem\" dojoAttachPoint=\"focusNode\" role=\"menuitem\" tabIndex=\"-1\"\n\t\tdojoAttachEvent=\"onmouseenter:_onHover,onmouseleave:_onUnhover,ondijitclick:_onClick\">\n\t<td class=\"dijitReset dijitMenuItemIconCell\" role=\"presentation\">\n\t\t<img src=\"${_blankGif}\" alt=\"\" class=\"dijitIcon dijitMenuItemIcon\" dojoAttachPoint=\"iconNode\"/>\n\t</td>\n\t<td class=\"dijitReset dijitMenuItemLabel\" colspan=\"2\" dojoAttachPoint=\"containerNode\"></td>\n\t<td class=\"dijitReset dijitMenuItemAccelKey\" style=\"display: none\" dojoAttachPoint=\"accelKeyNode\"></td>\n\t<td class=\"dijitReset dijitMenuArrowCell\" role=\"presentation\">\n\t\t<div dojoAttachPoint=\"arrowWrapper\" style=\"visibility: hidden\">\n\t\t\t<img src=\"${_blankGif}\" alt=\"\" class=\"dijitMenuExpand\"/>\n\t\t\t<span class=\"dijitMenuExpandA11y\">+</span>\n\t\t</div>\n\t</td>\n</tr>\n"), + + attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, { + label: { node: "containerNode", type: "innerHTML" }, + iconClass: { node: "iconNode", type: "class" } + }), + + baseClass: "dijitMenuItem", + + // label: String + // Menu text + label: '', + + // iconClass: String + // Class to apply to DOMNode to make it display an icon. + iconClass: "", + + // accelKey: String + // Text for the accelerator (shortcut) key combination. + // Note that although Menu can display accelerator keys there + // is no infrastructure to actually catch and execute these + // accelerators. + accelKey: "", + + // disabled: Boolean + // If true, the menu item is disabled. + // If false, the menu item is enabled. + disabled: false, + + _fillContent: function(/*DomNode*/ source){ + // If button label is specified as srcNodeRef.innerHTML rather than + // this.params.label, handle it here. + if(source && !("label" in this.params)){ + this.set('label', source.innerHTML); + } + }, + + buildRendering: function(){ + this.inherited(arguments); + var label = this.id+"_text"; + dojo.attr(this.containerNode, "id", label); + if(this.accelKeyNode){ + dojo.attr(this.accelKeyNode, "id", this.id + "_accel"); + label += " " + this.id + "_accel"; + } + dijit.setWaiState(this.domNode, "labelledby", label); + dojo.setSelectable(this.domNode, false); + }, + + _onHover: function(){ + // summary: + // Handler when mouse is moved onto menu item + // tags: + // protected + this.getParent().onItemHover(this); + }, + + _onUnhover: function(){ + // summary: + // Handler when mouse is moved off of menu item, + // possibly to a child menu, or maybe to a sibling + // menuitem or somewhere else entirely. + // tags: + // protected + + // if we are unhovering the currently selected item + // then unselect it + this.getParent().onItemUnhover(this); + + // When menu is hidden (collapsed) due to clicking a MenuItem and having it execute, + // FF and IE don't generate an onmouseout event for the MenuItem. + // So, help out _CssStateMixin in this case. + this._set("hovering", false); + }, + + _onClick: function(evt){ + // summary: + // Internal handler for click events on MenuItem. + // tags: + // private + this.getParent().onItemClick(this, evt); + dojo.stopEvent(evt); + }, + + onClick: function(/*Event*/ evt){ + // summary: + // User defined function to handle clicks + // tags: + // callback + }, + + focus: function(){ + // summary: + // Focus on this MenuItem + try{ + if(dojo.isIE == 8){ + // needed for IE8 which won't scroll TR tags into view on focus yet calling scrollIntoView creates flicker (#10275) + this.containerNode.focus(); + } + dijit.focus(this.focusNode); + }catch(e){ + // this throws on IE (at least) in some scenarios + } + }, + + _onFocus: function(){ + // summary: + // This is called by the focus manager when focus + // goes to this MenuItem or a child menu. + // tags: + // protected + this._setSelected(true); + this.getParent()._onItemFocus(this); + + this.inherited(arguments); + }, + + _setSelected: function(selected){ + // summary: + // Indicate that this node is the currently selected one + // tags: + // private + + /*** + * TODO: remove this method and calls to it, when _onBlur() is working for MenuItem. + * Currently _onBlur() gets called when focus is moved from the MenuItem to a child menu. + * That's not supposed to happen, but the problem is: + * In order to allow dijit.popup's getTopPopup() to work,a sub menu's popupParent + * points to the parent Menu, bypassing the parent MenuItem... thus the + * MenuItem is not in the chain of active widgets and gets a premature call to + * _onBlur() + */ + + dojo.toggleClass(this.domNode, "dijitMenuItemSelected", selected); + }, + + setLabel: function(/*String*/ content){ + // summary: + // Deprecated. Use set('label', ...) instead. + // tags: + // deprecated + dojo.deprecated("dijit.MenuItem.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0"); + this.set("label", content); + }, + + setDisabled: function(/*Boolean*/ disabled){ + // summary: + // Deprecated. Use set('disabled', bool) instead. + // tags: + // deprecated + dojo.deprecated("dijit.Menu.setDisabled() is deprecated. Use set('disabled', bool) instead.", "", "2.0"); + this.set('disabled', disabled); + }, + _setDisabledAttr: function(/*Boolean*/ value){ + // summary: + // Hook for attr('disabled', ...) to work. + // Enable or disable this menu item. + + dijit.setWaiState(this.focusNode, 'disabled', value ? 'true' : 'false'); + this._set("disabled", value); + }, + _setAccelKeyAttr: function(/*String*/ value){ + // summary: + // Hook for attr('accelKey', ...) to work. + // Set accelKey on this menu item. + + this.accelKeyNode.style.display=value?"":"none"; + this.accelKeyNode.innerHTML=value; + //have to use colSpan to make it work in IE + dojo.attr(this.containerNode,'colSpan',value?"1":"2"); + + this._set("accelKey", value); + } + }); + } |