1 | define([ |
---|
2 | "dojo/_base/declare", // declare |
---|
3 | "dojo/dom", // dom.setSelectable |
---|
4 | "dojo/dom-attr", // domAttr.set |
---|
5 | "dojo/dom-class", // domClass.toggle |
---|
6 | "dojo/_base/event", // event.stop |
---|
7 | "dojo/_base/kernel", // kernel.deprecated |
---|
8 | "dojo/_base/sniff", // has("ie") |
---|
9 | "./_Widget", |
---|
10 | "./_TemplatedMixin", |
---|
11 | "./_Contained", |
---|
12 | "./_CssStateMixin", |
---|
13 | "dojo/text!./templates/MenuItem.html" |
---|
14 | ], function(declare, dom, domAttr, domClass, event, kernel, has, |
---|
15 | _Widget, _TemplatedMixin, _Contained, _CssStateMixin, template){ |
---|
16 | |
---|
17 | /*===== |
---|
18 | var _Widget = dijit._Widget; |
---|
19 | var _TemplatedMixin = dijit._TemplatedMixin; |
---|
20 | var _Contained = dijit._Contained; |
---|
21 | var _CssStateMixin = dijit._CssStateMixin; |
---|
22 | =====*/ |
---|
23 | |
---|
24 | // module: |
---|
25 | // dijit/MenuItem |
---|
26 | // summary: |
---|
27 | // A line item in a Menu Widget |
---|
28 | |
---|
29 | |
---|
30 | return declare("dijit.MenuItem", |
---|
31 | [_Widget, _TemplatedMixin, _Contained, _CssStateMixin], |
---|
32 | { |
---|
33 | // summary: |
---|
34 | // A line item in a Menu Widget |
---|
35 | |
---|
36 | // Make 3 columns |
---|
37 | // icon, label, and expand arrow (BiDi-dependent) indicating sub-menu |
---|
38 | templateString: template, |
---|
39 | |
---|
40 | baseClass: "dijitMenuItem", |
---|
41 | |
---|
42 | // label: String |
---|
43 | // Menu text |
---|
44 | label: '', |
---|
45 | _setLabelAttr: { node: "containerNode", type: "innerHTML" }, |
---|
46 | |
---|
47 | // iconClass: String |
---|
48 | // Class to apply to DOMNode to make it display an icon. |
---|
49 | iconClass: "dijitNoIcon", |
---|
50 | _setIconClassAttr: { node: "iconNode", type: "class" }, |
---|
51 | |
---|
52 | // accelKey: String |
---|
53 | // Text for the accelerator (shortcut) key combination. |
---|
54 | // Note that although Menu can display accelerator keys there |
---|
55 | // is no infrastructure to actually catch and execute these |
---|
56 | // accelerators. |
---|
57 | accelKey: "", |
---|
58 | |
---|
59 | // disabled: Boolean |
---|
60 | // If true, the menu item is disabled. |
---|
61 | // If false, the menu item is enabled. |
---|
62 | disabled: false, |
---|
63 | |
---|
64 | _fillContent: function(/*DomNode*/ source){ |
---|
65 | // If button label is specified as srcNodeRef.innerHTML rather than |
---|
66 | // this.params.label, handle it here. |
---|
67 | if(source && !("label" in this.params)){ |
---|
68 | this.set('label', source.innerHTML); |
---|
69 | } |
---|
70 | }, |
---|
71 | |
---|
72 | buildRendering: function(){ |
---|
73 | this.inherited(arguments); |
---|
74 | var label = this.id+"_text"; |
---|
75 | domAttr.set(this.containerNode, "id", label); |
---|
76 | if(this.accelKeyNode){ |
---|
77 | domAttr.set(this.accelKeyNode, "id", this.id + "_accel"); |
---|
78 | label += " " + this.id + "_accel"; |
---|
79 | } |
---|
80 | this.domNode.setAttribute("aria-labelledby", label); |
---|
81 | dom.setSelectable(this.domNode, false); |
---|
82 | }, |
---|
83 | |
---|
84 | _onHover: function(){ |
---|
85 | // summary: |
---|
86 | // Handler when mouse is moved onto menu item |
---|
87 | // tags: |
---|
88 | // protected |
---|
89 | this.getParent().onItemHover(this); |
---|
90 | }, |
---|
91 | |
---|
92 | _onUnhover: function(){ |
---|
93 | // summary: |
---|
94 | // Handler when mouse is moved off of menu item, |
---|
95 | // possibly to a child menu, or maybe to a sibling |
---|
96 | // menuitem or somewhere else entirely. |
---|
97 | // tags: |
---|
98 | // protected |
---|
99 | |
---|
100 | // if we are unhovering the currently selected item |
---|
101 | // then unselect it |
---|
102 | this.getParent().onItemUnhover(this); |
---|
103 | |
---|
104 | // When menu is hidden (collapsed) due to clicking a MenuItem and having it execute, |
---|
105 | // FF and IE don't generate an onmouseout event for the MenuItem. |
---|
106 | // So, help out _CssStateMixin in this case. |
---|
107 | this._set("hovering", false); |
---|
108 | }, |
---|
109 | |
---|
110 | _onClick: function(evt){ |
---|
111 | // summary: |
---|
112 | // Internal handler for click events on MenuItem. |
---|
113 | // tags: |
---|
114 | // private |
---|
115 | this.getParent().onItemClick(this, evt); |
---|
116 | event.stop(evt); |
---|
117 | }, |
---|
118 | |
---|
119 | onClick: function(/*Event*/){ |
---|
120 | // summary: |
---|
121 | // User defined function to handle clicks |
---|
122 | // tags: |
---|
123 | // callback |
---|
124 | }, |
---|
125 | |
---|
126 | focus: function(){ |
---|
127 | // summary: |
---|
128 | // Focus on this MenuItem |
---|
129 | try{ |
---|
130 | if(has("ie") == 8){ |
---|
131 | // needed for IE8 which won't scroll TR tags into view on focus yet calling scrollIntoView creates flicker (#10275) |
---|
132 | this.containerNode.focus(); |
---|
133 | } |
---|
134 | this.focusNode.focus(); |
---|
135 | }catch(e){ |
---|
136 | // this throws on IE (at least) in some scenarios |
---|
137 | } |
---|
138 | }, |
---|
139 | |
---|
140 | _onFocus: function(){ |
---|
141 | // summary: |
---|
142 | // This is called by the focus manager when focus |
---|
143 | // goes to this MenuItem or a child menu. |
---|
144 | // tags: |
---|
145 | // protected |
---|
146 | this._setSelected(true); |
---|
147 | this.getParent()._onItemFocus(this); |
---|
148 | |
---|
149 | this.inherited(arguments); |
---|
150 | }, |
---|
151 | |
---|
152 | _setSelected: function(selected){ |
---|
153 | // summary: |
---|
154 | // Indicate that this node is the currently selected one |
---|
155 | // tags: |
---|
156 | // private |
---|
157 | |
---|
158 | /*** |
---|
159 | * TODO: remove this method and calls to it, when _onBlur() is working for MenuItem. |
---|
160 | * Currently _onBlur() gets called when focus is moved from the MenuItem to a child menu. |
---|
161 | * That's not supposed to happen, but the problem is: |
---|
162 | * In order to allow dijit.popup's getTopPopup() to work,a sub menu's popupParent |
---|
163 | * points to the parent Menu, bypassing the parent MenuItem... thus the |
---|
164 | * MenuItem is not in the chain of active widgets and gets a premature call to |
---|
165 | * _onBlur() |
---|
166 | */ |
---|
167 | |
---|
168 | domClass.toggle(this.domNode, "dijitMenuItemSelected", selected); |
---|
169 | }, |
---|
170 | |
---|
171 | setLabel: function(/*String*/ content){ |
---|
172 | // summary: |
---|
173 | // Deprecated. Use set('label', ...) instead. |
---|
174 | // tags: |
---|
175 | // deprecated |
---|
176 | kernel.deprecated("dijit.MenuItem.setLabel() is deprecated. Use set('label', ...) instead.", "", "2.0"); |
---|
177 | this.set("label", content); |
---|
178 | }, |
---|
179 | |
---|
180 | setDisabled: function(/*Boolean*/ disabled){ |
---|
181 | // summary: |
---|
182 | // Deprecated. Use set('disabled', bool) instead. |
---|
183 | // tags: |
---|
184 | // deprecated |
---|
185 | kernel.deprecated("dijit.Menu.setDisabled() is deprecated. Use set('disabled', bool) instead.", "", "2.0"); |
---|
186 | this.set('disabled', disabled); |
---|
187 | }, |
---|
188 | _setDisabledAttr: function(/*Boolean*/ value){ |
---|
189 | // summary: |
---|
190 | // Hook for attr('disabled', ...) to work. |
---|
191 | // Enable or disable this menu item. |
---|
192 | |
---|
193 | this.focusNode.setAttribute('aria-disabled', value ? 'true' : 'false'); |
---|
194 | this._set("disabled", value); |
---|
195 | }, |
---|
196 | _setAccelKeyAttr: function(/*String*/ value){ |
---|
197 | // summary: |
---|
198 | // Hook for attr('accelKey', ...) to work. |
---|
199 | // Set accelKey on this menu item. |
---|
200 | |
---|
201 | this.accelKeyNode.style.display=value?"":"none"; |
---|
202 | this.accelKeyNode.innerHTML=value; |
---|
203 | //have to use colSpan to make it work in IE |
---|
204 | domAttr.set(this.containerNode,'colSpan',value?"1":"2"); |
---|
205 | |
---|
206 | this._set("accelKey", value); |
---|
207 | } |
---|
208 | }); |
---|
209 | }); |
---|