MenuItem.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dijit.MenuItem"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dijit.MenuItem"] = true;
  8. dojo.provide("dijit.MenuItem");
  9. dojo.require("dijit._Widget");
  10. dojo.require("dijit._Templated");
  11. dojo.require("dijit._Contained");
  12. dojo.require("dijit._CssStateMixin");
  13. dojo.declare("dijit.MenuItem",
  14. [dijit._Widget, dijit._Templated, dijit._Contained, dijit._CssStateMixin],
  15. {
  16. // summary:
  17. // A line item in a Menu Widget
  18. // Make 3 columns
  19. // icon, label, and expand arrow (BiDi-dependent) indicating sub-menu
  20. 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"),
  21. attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, {
  22. label: { node: "containerNode", type: "innerHTML" },
  23. iconClass: { node: "iconNode", type: "class" }
  24. }),
  25. baseClass: "dijitMenuItem",
  26. // label: String
  27. // Menu text
  28. label: '',
  29. // iconClass: String
  30. // Class to apply to DOMNode to make it display an icon.
  31. iconClass: "",
  32. // accelKey: String
  33. // Text for the accelerator (shortcut) key combination.
  34. // Note that although Menu can display accelerator keys there
  35. // is no infrastructure to actually catch and execute these
  36. // accelerators.
  37. accelKey: "",
  38. // disabled: Boolean
  39. // If true, the menu item is disabled.
  40. // If false, the menu item is enabled.
  41. disabled: false,
  42. _fillContent: function(/*DomNode*/ source){
  43. // If button label is specified as srcNodeRef.innerHTML rather than
  44. // this.params.label, handle it here.
  45. if(source && !("label" in this.params)){
  46. this.set('label', source.innerHTML);
  47. }
  48. },
  49. buildRendering: function(){
  50. this.inherited(arguments);
  51. var label = this.id+"_text";
  52. dojo.attr(this.containerNode, "id", label);
  53. if(this.accelKeyNode){
  54. dojo.attr(this.accelKeyNode, "id", this.id + "_accel");
  55. label += " " + this.id + "_accel";
  56. }
  57. dijit.setWaiState(this.domNode, "labelledby", label);
  58. dojo.setSelectable(this.domNode, false);
  59. },
  60. _onHover: function(){
  61. // summary:
  62. // Handler when mouse is moved onto menu item
  63. // tags:
  64. // protected
  65. this.getParent().onItemHover(this);
  66. },
  67. _onUnhover: function(){
  68. // summary:
  69. // Handler when mouse is moved off of menu item,
  70. // possibly to a child menu, or maybe to a sibling
  71. // menuitem or somewhere else entirely.
  72. // tags:
  73. // protected
  74. // if we are unhovering the currently selected item
  75. // then unselect it
  76. this.getParent().onItemUnhover(this);
  77. // When menu is hidden (collapsed) due to clicking a MenuItem and having it execute,
  78. // FF and IE don't generate an onmouseout event for the MenuItem.
  79. // So, help out _CssStateMixin in this case.
  80. this._set("hovering", false);
  81. },
  82. _onClick: function(evt){
  83. // summary:
  84. // Internal handler for click events on MenuItem.
  85. // tags:
  86. // private
  87. this.getParent().onItemClick(this, evt);
  88. dojo.stopEvent(evt);
  89. },
  90. onClick: function(/*Event*/ evt){
  91. // summary:
  92. // User defined function to handle clicks
  93. // tags:
  94. // callback
  95. },
  96. focus: function(){
  97. // summary:
  98. // Focus on this MenuItem
  99. try{
  100. if(dojo.isIE == 8){
  101. // needed for IE8 which won't scroll TR tags into view on focus yet calling scrollIntoView creates flicker (#10275)
  102. this.containerNode.focus();
  103. }
  104. dijit.focus(this.focusNode);
  105. }catch(e){
  106. // this throws on IE (at least) in some scenarios
  107. }
  108. },
  109. _onFocus: function(){
  110. // summary:
  111. // This is called by the focus manager when focus
  112. // goes to this MenuItem or a child menu.
  113. // tags:
  114. // protected
  115. this._setSelected(true);
  116. this.getParent()._onItemFocus(this);
  117. this.inherited(arguments);
  118. },
  119. _setSelected: function(selected){
  120. // summary:
  121. // Indicate that this node is the currently selected one
  122. // tags:
  123. // private
  124. /***
  125. * TODO: remove this method and calls to it, when _onBlur() is working for MenuItem.
  126. * Currently _onBlur() gets called when focus is moved from the MenuItem to a child menu.
  127. * That's not supposed to happen, but the problem is:
  128. * In order to allow dijit.popup's getTopPopup() to work,a sub menu's popupParent
  129. * points to the parent Menu, bypassing the parent MenuItem... thus the
  130. * MenuItem is not in the chain of active widgets and gets a premature call to
  131. * _onBlur()
  132. */
  133. dojo.toggleClass(this.domNode, "dijitMenuItemSelected", selected);
  134. },
  135. setLabel: function(/*String*/ content){
  136. // summary:
  137. // Deprecated. Use set('label', ...) instead.
  138. // tags:
  139. // deprecated
  140. dojo.deprecated("dijit.MenuItem.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0");
  141. this.set("label", content);
  142. },
  143. setDisabled: function(/*Boolean*/ disabled){
  144. // summary:
  145. // Deprecated. Use set('disabled', bool) instead.
  146. // tags:
  147. // deprecated
  148. dojo.deprecated("dijit.Menu.setDisabled() is deprecated. Use set('disabled', bool) instead.", "", "2.0");
  149. this.set('disabled', disabled);
  150. },
  151. _setDisabledAttr: function(/*Boolean*/ value){
  152. // summary:
  153. // Hook for attr('disabled', ...) to work.
  154. // Enable or disable this menu item.
  155. dijit.setWaiState(this.focusNode, 'disabled', value ? 'true' : 'false');
  156. this._set("disabled", value);
  157. },
  158. _setAccelKeyAttr: function(/*String*/ value){
  159. // summary:
  160. // Hook for attr('accelKey', ...) to work.
  161. // Set accelKey on this menu item.
  162. this.accelKeyNode.style.display=value?"":"none";
  163. this.accelKeyNode.innerHTML=value;
  164. //have to use colSpan to make it work in IE
  165. dojo.attr(this.containerNode,'colSpan',value?"1":"2");
  166. this._set("accelKey", value);
  167. }
  168. });
  169. }