| 1 |
efrain |
1 |
YUI.add('node-menunav', function (Y, NAME) {
|
|
|
2 |
|
|
|
3 |
/**
|
|
|
4 |
* <p>The MenuNav Node Plugin makes it easy to transform existing list-based
|
|
|
5 |
* markup into traditional, drop down navigational menus that are both accessible
|
|
|
6 |
* and easy to customize, and only require a small set of dependencies.</p>
|
|
|
7 |
*
|
|
|
8 |
*
|
|
|
9 |
* <p>To use the MenuNav Node Plugin, simply pass a reference to the plugin to a
|
|
|
10 |
* Node instance's <code>plug</code> method.</p>
|
|
|
11 |
*
|
|
|
12 |
* <p>
|
|
|
13 |
* <code>
|
|
|
14 |
* <script type="text/javascript"> <br>
|
|
|
15 |
* <br>
|
|
|
16 |
* // Call the "use" method, passing in "node-menunav". This will <br>
|
|
|
17 |
* // load the script and CSS for the MenuNav Node Plugin and all of <br>
|
|
|
18 |
* // the required dependencies. <br>
|
|
|
19 |
* <br>
|
|
|
20 |
* YUI().use("node-menunav", function(Y) { <br>
|
|
|
21 |
* <br>
|
|
|
22 |
* // Use the "contentready" event to initialize the menu when <br>
|
|
|
23 |
* // the subtree of element representing the root menu <br>
|
|
|
24 |
* // (<div id="menu-1">) is ready to be scripted. <br>
|
|
|
25 |
* <br>
|
|
|
26 |
* Y.on("contentready", function () { <br>
|
|
|
27 |
* <br>
|
|
|
28 |
* // The scope of the callback will be a Node instance <br>
|
|
|
29 |
* // representing the root menu (<div id="menu-1">). <br>
|
|
|
30 |
* // Therefore, since "this" represents a Node instance, it <br>
|
|
|
31 |
* // is possible to just call "this.plug" passing in a <br>
|
|
|
32 |
* // reference to the MenuNav Node Plugin. <br>
|
|
|
33 |
* <br>
|
|
|
34 |
* this.plug(Y.Plugin.NodeMenuNav); <br>
|
|
|
35 |
* <br>
|
|
|
36 |
* }, "#menu-1"); <br>
|
|
|
37 |
* <br>
|
|
|
38 |
* }); <br>
|
|
|
39 |
* <br>
|
|
|
40 |
* </script> <br>
|
|
|
41 |
* </code>
|
|
|
42 |
* </p>
|
|
|
43 |
*
|
|
|
44 |
* <p>The MenuNav Node Plugin has several configuration properties that can be
|
|
|
45 |
* set via an object literal that is passed as a second argument to a Node
|
|
|
46 |
* instance's <code>plug</code> method.
|
|
|
47 |
* </p>
|
|
|
48 |
*
|
|
|
49 |
* <p>
|
|
|
50 |
* <code>
|
|
|
51 |
* <script type="text/javascript"> <br>
|
|
|
52 |
* <br>
|
|
|
53 |
* // Call the "use" method, passing in "node-menunav". This will <br>
|
|
|
54 |
* // load the script and CSS for the MenuNav Node Plugin and all of <br>
|
|
|
55 |
* // the required dependencies. <br>
|
|
|
56 |
* <br>
|
|
|
57 |
* YUI().use("node-menunav", function(Y) { <br>
|
|
|
58 |
* <br>
|
|
|
59 |
* // Use the "contentready" event to initialize the menu when <br>
|
|
|
60 |
* // the subtree of element representing the root menu <br>
|
|
|
61 |
* // (<div id="menu-1">) is ready to be scripted. <br>
|
|
|
62 |
* <br>
|
|
|
63 |
* Y.on("contentready", function () { <br>
|
|
|
64 |
* <br>
|
|
|
65 |
* // The scope of the callback will be a Node instance <br>
|
|
|
66 |
* // representing the root menu (<div id="menu-1">). <br>
|
|
|
67 |
* // Therefore, since "this" represents a Node instance, it <br>
|
|
|
68 |
* // is possible to just call "this.plug" passing in a <br>
|
|
|
69 |
* // reference to the MenuNav Node Plugin. <br>
|
|
|
70 |
* <br>
|
|
|
71 |
* this.plug(Y.Plugin.NodeMenuNav, { mouseOutHideDelay: 1000 });
|
|
|
72 |
* <br><br>
|
|
|
73 |
* }, "#menu-1"); <br>
|
|
|
74 |
* <br>
|
|
|
75 |
* }); <br>
|
|
|
76 |
* <br>
|
|
|
77 |
* </script> <br>
|
|
|
78 |
* </code>
|
|
|
79 |
* </p>
|
|
|
80 |
*
|
|
|
81 |
DEPRECATED. The MenuNav Node Plugin has been deprecated as of YUI 3.9.0. This module will be removed from the library in a future version. If you require functionality similar to the one provided by this module, consider taking a look at the various modules in the YUI Gallery <http://yuilibrary.com/gallery/>.
|
|
|
82 |
|
|
|
83 |
@module node-menunav
|
|
|
84 |
@deprecated 3.9.0
|
|
|
85 |
*/
|
|
|
86 |
|
|
|
87 |
|
|
|
88 |
// Util shortcuts
|
|
|
89 |
|
|
|
90 |
var UA = Y.UA,
|
|
|
91 |
later = Y.later,
|
|
|
92 |
getClassName = Y.ClassNameManager.getClassName,
|
|
|
93 |
|
|
|
94 |
|
|
|
95 |
|
|
|
96 |
// Frequently used strings
|
|
|
97 |
|
|
|
98 |
MENU = "menu",
|
|
|
99 |
MENUITEM = "menuitem",
|
|
|
100 |
HIDDEN = "hidden",
|
|
|
101 |
PARENT_NODE = "parentNode",
|
|
|
102 |
CHILDREN = "children",
|
|
|
103 |
OFFSET_HEIGHT = "offsetHeight",
|
|
|
104 |
OFFSET_WIDTH = "offsetWidth",
|
|
|
105 |
PX = "px",
|
|
|
106 |
ID = "id",
|
|
|
107 |
PERIOD = ".",
|
|
|
108 |
HANDLED_MOUSEOUT = "handledMouseOut",
|
|
|
109 |
HANDLED_MOUSEOVER = "handledMouseOver",
|
|
|
110 |
ACTIVE = "active",
|
|
|
111 |
LABEL = "label",
|
|
|
112 |
LOWERCASE_A = "a",
|
|
|
113 |
MOUSEDOWN = "mousedown",
|
|
|
114 |
KEYDOWN = "keydown",
|
|
|
115 |
CLICK = "click",
|
|
|
116 |
EMPTY_STRING = "",
|
|
|
117 |
FIRST_OF_TYPE = "first-of-type",
|
|
|
118 |
ROLE = "role",
|
|
|
119 |
PRESENTATION = "presentation",
|
|
|
120 |
DESCENDANTS = "descendants",
|
|
|
121 |
UI = "UI",
|
|
|
122 |
ACTIVE_DESCENDANT = "activeDescendant",
|
|
|
123 |
USE_ARIA = "useARIA",
|
|
|
124 |
ARIA_HIDDEN = "aria-hidden",
|
|
|
125 |
CONTENT = "content",
|
|
|
126 |
HOST = "host",
|
|
|
127 |
ACTIVE_DESCENDANT_CHANGE = ACTIVE_DESCENDANT + "Change",
|
|
|
128 |
|
|
|
129 |
|
|
|
130 |
// Attribute keys
|
|
|
131 |
|
|
|
132 |
AUTO_SUBMENU_DISPLAY = "autoSubmenuDisplay",
|
|
|
133 |
MOUSEOUT_HIDE_DELAY = "mouseOutHideDelay",
|
|
|
134 |
|
|
|
135 |
|
|
|
136 |
// CSS class names
|
|
|
137 |
|
|
|
138 |
CSS_MENU = getClassName(MENU),
|
|
|
139 |
CSS_MENU_HIDDEN = getClassName(MENU, HIDDEN),
|
|
|
140 |
CSS_MENU_HORIZONTAL = getClassName(MENU, "horizontal"),
|
|
|
141 |
CSS_MENU_LABEL = getClassName(MENU, LABEL),
|
|
|
142 |
CSS_MENU_LABEL_ACTIVE = getClassName(MENU, LABEL, ACTIVE),
|
|
|
143 |
CSS_MENU_LABEL_MENUVISIBLE = getClassName(MENU, LABEL, (MENU + "visible")),
|
|
|
144 |
CSS_MENUITEM = getClassName(MENUITEM),
|
|
|
145 |
CSS_MENUITEM_ACTIVE = getClassName(MENUITEM, ACTIVE),
|
|
|
146 |
|
|
|
147 |
|
|
|
148 |
// CSS selectors
|
|
|
149 |
|
|
|
150 |
MENU_SELECTOR = PERIOD + CSS_MENU,
|
|
|
151 |
MENU_TOGGLE_SELECTOR = (PERIOD + getClassName(MENU, "toggle")),
|
|
|
152 |
MENU_CONTENT_SELECTOR = PERIOD + getClassName(MENU, CONTENT),
|
|
|
153 |
MENU_LABEL_SELECTOR = PERIOD + CSS_MENU_LABEL,
|
|
|
154 |
|
|
|
155 |
STANDARD_QUERY = ">" + MENU_CONTENT_SELECTOR + ">ul>li>a",
|
|
|
156 |
EXTENDED_QUERY = ">" + MENU_CONTENT_SELECTOR + ">ul>li>" + MENU_LABEL_SELECTOR + ">a:first-child";
|
|
|
157 |
|
|
|
158 |
// Utility functions
|
|
|
159 |
|
|
|
160 |
|
|
|
161 |
var getPreviousSibling = function (node) {
|
|
|
162 |
|
|
|
163 |
var oPrevious = node.previous(),
|
|
|
164 |
oChildren;
|
|
|
165 |
|
|
|
166 |
if (!oPrevious) {
|
|
|
167 |
oChildren = node.get(PARENT_NODE).get(CHILDREN);
|
|
|
168 |
oPrevious = oChildren.item(oChildren.size() - 1);
|
|
|
169 |
}
|
|
|
170 |
|
|
|
171 |
|
|
|
172 |
return oPrevious;
|
|
|
173 |
|
|
|
174 |
};
|
|
|
175 |
|
|
|
176 |
|
|
|
177 |
var getNextSibling = function (node) {
|
|
|
178 |
|
|
|
179 |
var oNext = node.next();
|
|
|
180 |
|
|
|
181 |
if (!oNext) {
|
|
|
182 |
oNext = node.get(PARENT_NODE).get(CHILDREN).item(0);
|
|
|
183 |
}
|
|
|
184 |
|
|
|
185 |
return oNext;
|
|
|
186 |
|
|
|
187 |
};
|
|
|
188 |
|
|
|
189 |
|
|
|
190 |
var isAnchor = function (node) {
|
|
|
191 |
|
|
|
192 |
var bReturnVal = false;
|
|
|
193 |
|
|
|
194 |
if (node) {
|
|
|
195 |
bReturnVal = node.get("nodeName").toLowerCase() === LOWERCASE_A;
|
|
|
196 |
}
|
|
|
197 |
|
|
|
198 |
return bReturnVal;
|
|
|
199 |
|
|
|
200 |
};
|
|
|
201 |
|
|
|
202 |
|
|
|
203 |
var isMenuItem = function (node) {
|
|
|
204 |
|
|
|
205 |
return node.hasClass(CSS_MENUITEM);
|
|
|
206 |
|
|
|
207 |
};
|
|
|
208 |
|
|
|
209 |
|
|
|
210 |
var isMenuLabel = function (node) {
|
|
|
211 |
|
|
|
212 |
return node.hasClass(CSS_MENU_LABEL);
|
|
|
213 |
|
|
|
214 |
};
|
|
|
215 |
|
|
|
216 |
|
|
|
217 |
var isHorizontalMenu = function (menu) {
|
|
|
218 |
|
|
|
219 |
return menu.hasClass(CSS_MENU_HORIZONTAL);
|
|
|
220 |
|
|
|
221 |
};
|
|
|
222 |
|
|
|
223 |
|
|
|
224 |
var hasVisibleSubmenu = function (menuLabel) {
|
|
|
225 |
|
|
|
226 |
return menuLabel.hasClass(CSS_MENU_LABEL_MENUVISIBLE);
|
|
|
227 |
|
|
|
228 |
};
|
|
|
229 |
|
|
|
230 |
|
|
|
231 |
var getItemAnchor = function (node) {
|
|
|
232 |
|
|
|
233 |
return isAnchor(node) ? node : node.one(LOWERCASE_A);
|
|
|
234 |
|
|
|
235 |
};
|
|
|
236 |
|
|
|
237 |
|
|
|
238 |
var getNodeWithClass = function (node, className, searchAncestors) {
|
|
|
239 |
|
|
|
240 |
var oItem;
|
|
|
241 |
|
|
|
242 |
if (node) {
|
|
|
243 |
|
|
|
244 |
if (node.hasClass(className)) {
|
|
|
245 |
oItem = node;
|
|
|
246 |
}
|
|
|
247 |
|
|
|
248 |
if (!oItem && searchAncestors) {
|
|
|
249 |
oItem = node.ancestor((PERIOD + className));
|
|
|
250 |
}
|
|
|
251 |
|
|
|
252 |
}
|
|
|
253 |
|
|
|
254 |
return oItem;
|
|
|
255 |
|
|
|
256 |
};
|
|
|
257 |
|
|
|
258 |
|
|
|
259 |
var getParentMenu = function (node) {
|
|
|
260 |
|
|
|
261 |
return node.ancestor(MENU_SELECTOR);
|
|
|
262 |
|
|
|
263 |
};
|
|
|
264 |
|
|
|
265 |
|
|
|
266 |
var getMenu = function (node, searchAncestors) {
|
|
|
267 |
|
|
|
268 |
return getNodeWithClass(node, CSS_MENU, searchAncestors);
|
|
|
269 |
|
|
|
270 |
};
|
|
|
271 |
|
|
|
272 |
|
|
|
273 |
var getMenuItem = function (node, searchAncestors) {
|
|
|
274 |
|
|
|
275 |
var oItem;
|
|
|
276 |
|
|
|
277 |
if (node) {
|
|
|
278 |
oItem = getNodeWithClass(node, CSS_MENUITEM, searchAncestors);
|
|
|
279 |
}
|
|
|
280 |
|
|
|
281 |
return oItem;
|
|
|
282 |
|
|
|
283 |
};
|
|
|
284 |
|
|
|
285 |
|
|
|
286 |
var getMenuLabel = function (node, searchAncestors) {
|
|
|
287 |
|
|
|
288 |
var oItem;
|
|
|
289 |
|
|
|
290 |
if (node) {
|
|
|
291 |
|
|
|
292 |
if (searchAncestors) {
|
|
|
293 |
oItem = getNodeWithClass(node, CSS_MENU_LABEL, searchAncestors);
|
|
|
294 |
}
|
|
|
295 |
else {
|
|
|
296 |
oItem = getNodeWithClass(node, CSS_MENU_LABEL) ||
|
|
|
297 |
node.one((PERIOD + CSS_MENU_LABEL));
|
|
|
298 |
}
|
|
|
299 |
|
|
|
300 |
}
|
|
|
301 |
|
|
|
302 |
return oItem;
|
|
|
303 |
|
|
|
304 |
};
|
|
|
305 |
|
|
|
306 |
|
|
|
307 |
var getItem = function (node, searchAncestors) {
|
|
|
308 |
|
|
|
309 |
var oItem;
|
|
|
310 |
|
|
|
311 |
if (node) {
|
|
|
312 |
oItem = getMenuItem(node, searchAncestors) ||
|
|
|
313 |
getMenuLabel(node, searchAncestors);
|
|
|
314 |
}
|
|
|
315 |
|
|
|
316 |
return oItem;
|
|
|
317 |
|
|
|
318 |
};
|
|
|
319 |
|
|
|
320 |
|
|
|
321 |
var getFirstItem = function (menu) {
|
|
|
322 |
|
|
|
323 |
return getItem(menu.one("li"));
|
|
|
324 |
|
|
|
325 |
};
|
|
|
326 |
|
|
|
327 |
|
|
|
328 |
var getActiveClass = function (node) {
|
|
|
329 |
|
|
|
330 |
return isMenuItem(node) ? CSS_MENUITEM_ACTIVE : CSS_MENU_LABEL_ACTIVE;
|
|
|
331 |
|
|
|
332 |
};
|
|
|
333 |
|
|
|
334 |
|
|
|
335 |
var handleMouseOverForNode = function (node, target) {
|
|
|
336 |
|
|
|
337 |
return node && !node[HANDLED_MOUSEOVER] &&
|
|
|
338 |
(node.compareTo(target) || node.contains(target));
|
|
|
339 |
|
|
|
340 |
};
|
|
|
341 |
|
|
|
342 |
|
|
|
343 |
var handleMouseOutForNode = function (node, relatedTarget) {
|
|
|
344 |
|
|
|
345 |
return node && !node[HANDLED_MOUSEOUT] &&
|
|
|
346 |
(!node.compareTo(relatedTarget) && !node.contains(relatedTarget));
|
|
|
347 |
|
|
|
348 |
};
|
|
|
349 |
|
|
|
350 |
/**
|
|
|
351 |
* The NodeMenuNav class is a plugin for a Node instance. The class is used via
|
|
|
352 |
* the <a href="Node.html#method_plug"><code>plug</code></a> method of Node and
|
|
|
353 |
* should not be instantiated directly.
|
|
|
354 |
* @namespace plugin
|
|
|
355 |
* @class NodeMenuNav
|
|
|
356 |
*/
|
|
|
357 |
var NodeMenuNav = function () {
|
|
|
358 |
|
|
|
359 |
NodeMenuNav.superclass.constructor.apply(this, arguments);
|
|
|
360 |
|
|
|
361 |
};
|
|
|
362 |
|
|
|
363 |
NodeMenuNav.NAME = "nodeMenuNav";
|
|
|
364 |
NodeMenuNav.NS = "menuNav";
|
|
|
365 |
|
|
|
366 |
|
|
|
367 |
/**
|
|
|
368 |
* @property SHIM_TEMPLATE_TITLE
|
|
|
369 |
* @description String representing the value for the <code>title</code>
|
|
|
370 |
* attribute for the shim used to prevent <code><select></code> elements
|
|
|
371 |
* from poking through menus in IE 6.
|
|
|
372 |
* @default "Menu Stacking Shim"
|
|
|
373 |
* @type String
|
|
|
374 |
*/
|
|
|
375 |
NodeMenuNav.SHIM_TEMPLATE_TITLE = "Menu Stacking Shim";
|
|
|
376 |
|
|
|
377 |
|
|
|
378 |
/**
|
|
|
379 |
* @property SHIM_TEMPLATE
|
|
|
380 |
* @description String representing the HTML used to create the
|
|
|
381 |
* <code><iframe></code> shim used to prevent
|
|
|
382 |
* <code><select></code> elements from poking through menus in IE 6.
|
|
|
383 |
* @default "<iframe frameborder="0" tabindex="-1"
|
|
|
384 |
* class="yui-shim" title="Menu Stacking Shim"
|
|
|
385 |
* src="javascript:false;"></iframe>"
|
|
|
386 |
* @type String
|
|
|
387 |
*/
|
|
|
388 |
|
|
|
389 |
// <iframe> shim notes:
|
|
|
390 |
//
|
|
|
391 |
// 1) Need to set the "frameBorder" property to 0 to suppress the default
|
|
|
392 |
// <iframe> border in IE. (Setting the CSS "border" property alone doesn't
|
|
|
393 |
// suppress it.)
|
|
|
394 |
//
|
|
|
395 |
// 2) The "src" attribute of the <iframe> is set to "javascript:false;" so
|
|
|
396 |
// that it won't load a page inside it, preventing the secure/nonsecure
|
|
|
397 |
// warning in IE when using HTTPS.
|
|
|
398 |
//
|
|
|
399 |
// 3) Since the role of the <iframe> shim is completely presentational, its
|
|
|
400 |
// "tabindex" attribute is set to "-1" and its title attribute is set to
|
|
|
401 |
// "Menu Stacking Shim". Both strategies help users of screen readers to
|
|
|
402 |
// avoid mistakenly interacting with the <iframe> shim.
|
|
|
403 |
|
|
|
404 |
NodeMenuNav.SHIM_TEMPLATE = '<iframe frameborder="0" tabindex="-1" class="' +
|
|
|
405 |
getClassName("shim") +
|
|
|
406 |
'" title="' + NodeMenuNav.SHIM_TEMPLATE_TITLE +
|
|
|
407 |
'" src="javascript:false;"></iframe>';
|
|
|
408 |
|
|
|
409 |
|
|
|
410 |
NodeMenuNav.ATTRS = {
|
|
|
411 |
|
|
|
412 |
/**
|
|
|
413 |
* Boolean indicating if use of the WAI-ARIA Roles and States should be
|
|
|
414 |
* enabled for the menu.
|
|
|
415 |
*
|
|
|
416 |
* @attribute useARIA
|
|
|
417 |
* @readOnly
|
|
|
418 |
* @writeOnce
|
|
|
419 |
* @default true
|
|
|
420 |
* @type boolean
|
|
|
421 |
*/
|
|
|
422 |
useARIA: {
|
|
|
423 |
|
|
|
424 |
value: true,
|
|
|
425 |
writeOnce: true,
|
|
|
426 |
lazyAdd: false,
|
|
|
427 |
setter: function (value) {
|
|
|
428 |
|
|
|
429 |
var oMenu = this.get(HOST),
|
|
|
430 |
oMenuLabel,
|
|
|
431 |
oMenuToggle,
|
|
|
432 |
oSubmenu,
|
|
|
433 |
sID;
|
|
|
434 |
|
|
|
435 |
if (value) {
|
|
|
436 |
|
|
|
437 |
oMenu.set(ROLE, MENU);
|
|
|
438 |
|
|
|
439 |
oMenu.all("ul,li," + MENU_CONTENT_SELECTOR).set(ROLE, PRESENTATION);
|
|
|
440 |
|
|
|
441 |
oMenu.all((PERIOD + getClassName(MENUITEM, CONTENT))).set(ROLE, MENUITEM);
|
|
|
442 |
|
|
|
443 |
oMenu.all((PERIOD + CSS_MENU_LABEL)).each(function (node) {
|
|
|
444 |
|
|
|
445 |
oMenuLabel = node;
|
|
|
446 |
oMenuToggle = node.one(MENU_TOGGLE_SELECTOR);
|
|
|
447 |
|
|
|
448 |
if (oMenuToggle) {
|
|
|
449 |
oMenuToggle.set(ROLE, PRESENTATION);
|
|
|
450 |
oMenuLabel = oMenuToggle.previous();
|
|
|
451 |
}
|
|
|
452 |
|
|
|
453 |
oMenuLabel.set(ROLE, MENUITEM);
|
|
|
454 |
oMenuLabel.set("aria-haspopup", true);
|
|
|
455 |
|
|
|
456 |
oSubmenu = node.next();
|
|
|
457 |
|
|
|
458 |
if (oSubmenu) {
|
|
|
459 |
|
|
|
460 |
oSubmenu.set(ROLE, MENU);
|
|
|
461 |
|
|
|
462 |
oMenuLabel = oSubmenu.previous();
|
|
|
463 |
oMenuToggle = oMenuLabel.one(MENU_TOGGLE_SELECTOR);
|
|
|
464 |
|
|
|
465 |
if (oMenuToggle) {
|
|
|
466 |
oMenuLabel = oMenuToggle;
|
|
|
467 |
}
|
|
|
468 |
|
|
|
469 |
sID = Y.stamp(oMenuLabel);
|
|
|
470 |
|
|
|
471 |
if (!oMenuLabel.get(ID)) {
|
|
|
472 |
oMenuLabel.set(ID, sID);
|
|
|
473 |
}
|
|
|
474 |
|
|
|
475 |
oSubmenu.set("aria-labelledby", sID);
|
|
|
476 |
oSubmenu.set(ARIA_HIDDEN, true);
|
|
|
477 |
|
|
|
478 |
}
|
|
|
479 |
|
|
|
480 |
});
|
|
|
481 |
|
|
|
482 |
}
|
|
|
483 |
|
|
|
484 |
}
|
|
|
485 |
|
|
|
486 |
},
|
|
|
487 |
|
|
|
488 |
|
|
|
489 |
/**
|
|
|
490 |
* Boolean indicating if submenus are automatically made visible when the
|
|
|
491 |
* user mouses over the menu's items.
|
|
|
492 |
*
|
|
|
493 |
* @attribute autoSubmenuDisplay
|
|
|
494 |
* @readOnly
|
|
|
495 |
* @writeOnce
|
|
|
496 |
* @default true
|
|
|
497 |
* @type boolean
|
|
|
498 |
*/
|
|
|
499 |
autoSubmenuDisplay: {
|
|
|
500 |
|
|
|
501 |
value: true,
|
|
|
502 |
writeOnce: true
|
|
|
503 |
|
|
|
504 |
},
|
|
|
505 |
|
|
|
506 |
|
|
|
507 |
/**
|
|
|
508 |
* Number indicating the time (in milliseconds) that should expire before a
|
|
|
509 |
* submenu is made visible when the user mouses over the menu's label.
|
|
|
510 |
*
|
|
|
511 |
* @attribute submenuShowDelay
|
|
|
512 |
* @readOnly
|
|
|
513 |
* @writeOnce
|
|
|
514 |
* @default 250
|
|
|
515 |
* @type Number
|
|
|
516 |
*/
|
|
|
517 |
submenuShowDelay: {
|
|
|
518 |
|
|
|
519 |
value: 250,
|
|
|
520 |
writeOnce: true
|
|
|
521 |
|
|
|
522 |
},
|
|
|
523 |
|
|
|
524 |
|
|
|
525 |
/**
|
|
|
526 |
* Number indicating the time (in milliseconds) that should expire before a
|
|
|
527 |
* submenu is hidden when the user mouses out of a menu label heading in the
|
|
|
528 |
* direction of a submenu.
|
|
|
529 |
*
|
|
|
530 |
* @attribute submenuHideDelay
|
|
|
531 |
* @readOnly
|
|
|
532 |
* @writeOnce
|
|
|
533 |
* @default 250
|
|
|
534 |
* @type Number
|
|
|
535 |
*/
|
|
|
536 |
submenuHideDelay: {
|
|
|
537 |
|
|
|
538 |
value: 250,
|
|
|
539 |
writeOnce: true
|
|
|
540 |
|
|
|
541 |
},
|
|
|
542 |
|
|
|
543 |
|
|
|
544 |
/**
|
|
|
545 |
* Number indicating the time (in milliseconds) that should expire before a
|
|
|
546 |
* submenu is hidden when the user mouses out of it.
|
|
|
547 |
*
|
|
|
548 |
* @attribute mouseOutHideDelay
|
|
|
549 |
* @readOnly
|
|
|
550 |
* @writeOnce
|
|
|
551 |
* @default 750
|
|
|
552 |
* @type Number
|
|
|
553 |
*/
|
|
|
554 |
mouseOutHideDelay: {
|
|
|
555 |
|
|
|
556 |
value: 750,
|
|
|
557 |
writeOnce: true
|
|
|
558 |
|
|
|
559 |
}
|
|
|
560 |
|
|
|
561 |
};
|
|
|
562 |
|
|
|
563 |
|
|
|
564 |
Y.extend(NodeMenuNav, Y.Plugin.Base, {
|
|
|
565 |
|
|
|
566 |
// Protected properties
|
|
|
567 |
|
|
|
568 |
/**
|
|
|
569 |
* @property _rootMenu
|
|
|
570 |
* @description Node instance representing the root menu in the menu.
|
|
|
571 |
* @default null
|
|
|
572 |
* @protected
|
|
|
573 |
* @type Node
|
|
|
574 |
*/
|
|
|
575 |
_rootMenu: null,
|
|
|
576 |
|
|
|
577 |
|
|
|
578 |
/**
|
|
|
579 |
* @property _activeItem
|
|
|
580 |
* @description Node instance representing the menu's active descendent:
|
|
|
581 |
* the menuitem or menu label the user is currently interacting with.
|
|
|
582 |
* @default null
|
|
|
583 |
* @protected
|
|
|
584 |
* @type Node
|
|
|
585 |
*/
|
|
|
586 |
_activeItem: null,
|
|
|
587 |
|
|
|
588 |
|
|
|
589 |
/**
|
|
|
590 |
* @property _activeMenu
|
|
|
591 |
* @description Node instance representing the menu that is the parent of
|
|
|
592 |
* the menu's active descendent.
|
|
|
593 |
* @default null
|
|
|
594 |
* @protected
|
|
|
595 |
* @type Node
|
|
|
596 |
*/
|
|
|
597 |
_activeMenu: null,
|
|
|
598 |
|
|
|
599 |
|
|
|
600 |
/**
|
|
|
601 |
* @property _hasFocus
|
|
|
602 |
* @description Boolean indicating if the menu has focus.
|
|
|
603 |
* @default false
|
|
|
604 |
* @protected
|
|
|
605 |
* @type Boolean
|
|
|
606 |
*/
|
|
|
607 |
_hasFocus: false,
|
|
|
608 |
|
|
|
609 |
|
|
|
610 |
// In gecko-based browsers a mouseover and mouseout event will fire even
|
|
|
611 |
// if a DOM element moves out from under the mouse without the user
|
|
|
612 |
// actually moving the mouse. This bug affects NodeMenuNav because the
|
|
|
613 |
// user can hit the Esc key to hide a menu, and if the mouse is over the
|
|
|
614 |
// menu when the user presses Esc, the _onMenuMouseOut handler will be
|
|
|
615 |
// called. To fix this bug the following flag (_blockMouseEvent) is used
|
|
|
616 |
// to block the code in the _onMenuMouseOut handler from executing.
|
|
|
617 |
|
|
|
618 |
/**
|
|
|
619 |
* @property _blockMouseEvent
|
|
|
620 |
* @description Boolean indicating whether or not to handle the
|
|
|
621 |
* "mouseover" event.
|
|
|
622 |
* @default false
|
|
|
623 |
* @protected
|
|
|
624 |
* @type Boolean
|
|
|
625 |
*/
|
|
|
626 |
_blockMouseEvent: false,
|
|
|
627 |
|
|
|
628 |
|
|
|
629 |
/**
|
|
|
630 |
* @property _currentMouseX
|
|
|
631 |
* @description Number representing the current x coordinate of the mouse
|
|
|
632 |
* inside the menu.
|
|
|
633 |
* @default 0
|
|
|
634 |
* @protected
|
|
|
635 |
* @type Number
|
|
|
636 |
*/
|
|
|
637 |
_currentMouseX: 0,
|
|
|
638 |
|
|
|
639 |
|
|
|
640 |
/**
|
|
|
641 |
* @property _movingToSubmenu
|
|
|
642 |
* @description Boolean indicating if the mouse is moving from a menu
|
|
|
643 |
* label to its corresponding submenu.
|
|
|
644 |
* @default false
|
|
|
645 |
* @protected
|
|
|
646 |
* @type Boolean
|
|
|
647 |
*/
|
|
|
648 |
_movingToSubmenu: false,
|
|
|
649 |
|
|
|
650 |
|
|
|
651 |
/**
|
|
|
652 |
* @property _showSubmenuTimer
|
|
|
653 |
* @description Timer used to show a submenu.
|
|
|
654 |
* @default null
|
|
|
655 |
* @protected
|
|
|
656 |
* @type Object
|
|
|
657 |
*/
|
|
|
658 |
_showSubmenuTimer: null,
|
|
|
659 |
|
|
|
660 |
|
|
|
661 |
/**
|
|
|
662 |
* @property _hideSubmenuTimer
|
|
|
663 |
* @description Timer used to hide a submenu.
|
|
|
664 |
* @default null
|
|
|
665 |
* @protected
|
|
|
666 |
* @type Object
|
|
|
667 |
*/
|
|
|
668 |
_hideSubmenuTimer: null,
|
|
|
669 |
|
|
|
670 |
|
|
|
671 |
/**
|
|
|
672 |
* @property _hideAllSubmenusTimer
|
|
|
673 |
* @description Timer used to hide a all submenus.
|
|
|
674 |
* @default null
|
|
|
675 |
* @protected
|
|
|
676 |
* @type Object
|
|
|
677 |
*/
|
|
|
678 |
_hideAllSubmenusTimer: null,
|
|
|
679 |
|
|
|
680 |
|
|
|
681 |
/**
|
|
|
682 |
* @property _firstItem
|
|
|
683 |
* @description Node instance representing the first item (menuitem or menu
|
|
|
684 |
* label) in the root menu of a menu.
|
|
|
685 |
* @default null
|
|
|
686 |
* @protected
|
|
|
687 |
* @type Node
|
|
|
688 |
*/
|
|
|
689 |
_firstItem: null,
|
|
|
690 |
|
|
|
691 |
|
|
|
692 |
// Public methods
|
|
|
693 |
|
|
|
694 |
|
|
|
695 |
initializer: function (config) {
|
|
|
696 |
|
|
|
697 |
var menuNav = this,
|
|
|
698 |
oRootMenu = this.get(HOST),
|
|
|
699 |
aHandlers = [],
|
|
|
700 |
oDoc;
|
|
|
701 |
|
|
|
702 |
|
|
|
703 |
if (oRootMenu) {
|
|
|
704 |
|
|
|
705 |
menuNav._rootMenu = oRootMenu;
|
|
|
706 |
|
|
|
707 |
oRootMenu.all("ul:first-child").addClass(FIRST_OF_TYPE);
|
|
|
708 |
|
|
|
709 |
// Hide all visible submenus
|
|
|
710 |
|
|
|
711 |
oRootMenu.all(MENU_SELECTOR).addClass(CSS_MENU_HIDDEN);
|
|
|
712 |
|
|
|
713 |
|
|
|
714 |
// Wire up all event handlers
|
|
|
715 |
|
|
|
716 |
aHandlers.push(oRootMenu.on("mouseover", menuNav._onMouseOver, menuNav));
|
|
|
717 |
aHandlers.push(oRootMenu.on("mouseout", menuNav._onMouseOut, menuNav));
|
|
|
718 |
aHandlers.push(oRootMenu.on("mousemove", menuNav._onMouseMove, menuNav));
|
|
|
719 |
aHandlers.push(oRootMenu.on(MOUSEDOWN, menuNav._toggleSubmenuDisplay, menuNav));
|
|
|
720 |
aHandlers.push(Y.on("key", menuNav._toggleSubmenuDisplay, oRootMenu, "down:13", menuNav));
|
|
|
721 |
aHandlers.push(oRootMenu.on(CLICK, menuNav._toggleSubmenuDisplay, menuNav));
|
|
|
722 |
aHandlers.push(oRootMenu.on("keypress", menuNav._onKeyPress, menuNav));
|
|
|
723 |
aHandlers.push(oRootMenu.on(KEYDOWN, menuNav._onKeyDown, menuNav));
|
|
|
724 |
|
|
|
725 |
oDoc = oRootMenu.get("ownerDocument");
|
|
|
726 |
|
|
|
727 |
aHandlers.push(oDoc.on(MOUSEDOWN, menuNav._onDocMouseDown, menuNav));
|
|
|
728 |
aHandlers.push(oDoc.on("focus", menuNav._onDocFocus, menuNav));
|
|
|
729 |
|
|
|
730 |
this._eventHandlers = aHandlers;
|
|
|
731 |
|
|
|
732 |
menuNav._initFocusManager();
|
|
|
733 |
|
|
|
734 |
}
|
|
|
735 |
|
|
|
736 |
|
|
|
737 |
},
|
|
|
738 |
|
|
|
739 |
destructor: function () {
|
|
|
740 |
|
|
|
741 |
var aHandlers = this._eventHandlers;
|
|
|
742 |
|
|
|
743 |
if (aHandlers) {
|
|
|
744 |
|
|
|
745 |
Y.Array.each(aHandlers, function (handle) {
|
|
|
746 |
handle.detach();
|
|
|
747 |
});
|
|
|
748 |
|
|
|
749 |
this._eventHandlers = null;
|
|
|
750 |
|
|
|
751 |
}
|
|
|
752 |
|
|
|
753 |
this.get(HOST).unplug("focusManager");
|
|
|
754 |
|
|
|
755 |
},
|
|
|
756 |
|
|
|
757 |
|
|
|
758 |
|
|
|
759 |
// Protected methods
|
|
|
760 |
|
|
|
761 |
/**
|
|
|
762 |
* @method _isRoot
|
|
|
763 |
* @description Returns a boolean indicating if the specified menu is the
|
|
|
764 |
* root menu in the menu.
|
|
|
765 |
* @protected
|
|
|
766 |
* @param {Node} menu Node instance representing a menu.
|
|
|
767 |
* @return {Boolean} Boolean indicating if the specified menu is the root
|
|
|
768 |
* menu in the menu.
|
|
|
769 |
*/
|
|
|
770 |
_isRoot: function (menu) {
|
|
|
771 |
|
|
|
772 |
return this._rootMenu.compareTo(menu);
|
|
|
773 |
|
|
|
774 |
},
|
|
|
775 |
|
|
|
776 |
|
|
|
777 |
/**
|
|
|
778 |
* @method _getTopmostSubmenu
|
|
|
779 |
* @description Returns the topmost submenu of a submenu hierarchy.
|
|
|
780 |
* @protected
|
|
|
781 |
* @param {Node} menu Node instance representing a menu.
|
|
|
782 |
* @return {Node} Node instance representing a menu.
|
|
|
783 |
*/
|
|
|
784 |
_getTopmostSubmenu: function (menu) {
|
|
|
785 |
|
|
|
786 |
var menuNav = this,
|
|
|
787 |
oMenu = getParentMenu(menu),
|
|
|
788 |
returnVal;
|
|
|
789 |
|
|
|
790 |
|
|
|
791 |
if (!oMenu) {
|
|
|
792 |
returnVal = menu;
|
|
|
793 |
}
|
|
|
794 |
else if (menuNav._isRoot(oMenu)) {
|
|
|
795 |
returnVal = menu;
|
|
|
796 |
}
|
|
|
797 |
else {
|
|
|
798 |
returnVal = menuNav._getTopmostSubmenu(oMenu);
|
|
|
799 |
}
|
|
|
800 |
|
|
|
801 |
return returnVal;
|
|
|
802 |
|
|
|
803 |
},
|
|
|
804 |
|
|
|
805 |
|
|
|
806 |
/**
|
|
|
807 |
* @method _clearActiveItem
|
|
|
808 |
* @description Clears the menu's active descendent.
|
|
|
809 |
* @protected
|
|
|
810 |
*/
|
|
|
811 |
_clearActiveItem: function () {
|
|
|
812 |
|
|
|
813 |
var menuNav = this,
|
|
|
814 |
oActiveItem = menuNav._activeItem;
|
|
|
815 |
|
|
|
816 |
if (oActiveItem) {
|
|
|
817 |
oActiveItem.removeClass(getActiveClass(oActiveItem));
|
|
|
818 |
}
|
|
|
819 |
|
|
|
820 |
menuNav._activeItem = null;
|
|
|
821 |
|
|
|
822 |
},
|
|
|
823 |
|
|
|
824 |
|
|
|
825 |
/**
|
|
|
826 |
* @method _setActiveItem
|
|
|
827 |
* @description Sets the specified menuitem or menu label as the menu's
|
|
|
828 |
* active descendent.
|
|
|
829 |
* @protected
|
|
|
830 |
* @param {Node} item Node instance representing a menuitem or menu label.
|
|
|
831 |
*/
|
|
|
832 |
_setActiveItem: function (item) {
|
|
|
833 |
|
|
|
834 |
var menuNav = this;
|
|
|
835 |
|
|
|
836 |
if (item) {
|
|
|
837 |
|
|
|
838 |
menuNav._clearActiveItem();
|
|
|
839 |
|
|
|
840 |
item.addClass(getActiveClass(item));
|
|
|
841 |
|
|
|
842 |
menuNav._activeItem = item;
|
|
|
843 |
|
|
|
844 |
}
|
|
|
845 |
|
|
|
846 |
},
|
|
|
847 |
|
|
|
848 |
|
|
|
849 |
/**
|
|
|
850 |
* @method _focusItem
|
|
|
851 |
* @description Focuses the specified menuitem or menu label.
|
|
|
852 |
* @protected
|
|
|
853 |
* @param {Node} item Node instance representing a menuitem or menu label.
|
|
|
854 |
*/
|
|
|
855 |
_focusItem: function (item) {
|
|
|
856 |
|
|
|
857 |
var menuNav = this,
|
|
|
858 |
oMenu,
|
|
|
859 |
oItem;
|
|
|
860 |
|
|
|
861 |
if (item && menuNav._hasFocus) {
|
|
|
862 |
|
|
|
863 |
oMenu = getParentMenu(item);
|
|
|
864 |
oItem = getItemAnchor(item);
|
|
|
865 |
|
|
|
866 |
if (oMenu && !oMenu.compareTo(menuNav._activeMenu)) {
|
|
|
867 |
menuNav._activeMenu = oMenu;
|
|
|
868 |
menuNav._initFocusManager();
|
|
|
869 |
}
|
|
|
870 |
|
|
|
871 |
menuNav._focusManager.focus(oItem);
|
|
|
872 |
|
|
|
873 |
}
|
|
|
874 |
|
|
|
875 |
},
|
|
|
876 |
|
|
|
877 |
|
|
|
878 |
/**
|
|
|
879 |
* @method _showMenu
|
|
|
880 |
* @description Shows the specified menu.
|
|
|
881 |
* @protected
|
|
|
882 |
* @param {Node} menu Node instance representing a menu.
|
|
|
883 |
*/
|
|
|
884 |
_showMenu: function (menu) {
|
|
|
885 |
|
|
|
886 |
var oParentMenu = getParentMenu(menu),
|
|
|
887 |
oLI = menu.get(PARENT_NODE),
|
|
|
888 |
aXY = oLI.getXY();
|
|
|
889 |
|
|
|
890 |
|
|
|
891 |
if (this.get(USE_ARIA)) {
|
|
|
892 |
menu.set(ARIA_HIDDEN, false);
|
|
|
893 |
}
|
|
|
894 |
|
|
|
895 |
|
|
|
896 |
if (isHorizontalMenu(oParentMenu)) {
|
|
|
897 |
aXY[1] = aXY[1] + oLI.get(OFFSET_HEIGHT);
|
|
|
898 |
}
|
|
|
899 |
else {
|
|
|
900 |
aXY[0] = aXY[0] + oLI.get(OFFSET_WIDTH);
|
|
|
901 |
}
|
|
|
902 |
|
|
|
903 |
menu.setXY(aXY);
|
|
|
904 |
|
|
|
905 |
if (UA.ie && UA.ie < 8) {
|
|
|
906 |
|
|
|
907 |
if (UA.ie === 6 && !menu.hasIFrameShim) {
|
|
|
908 |
|
|
|
909 |
menu.appendChild(Y.Node.create(NodeMenuNav.SHIM_TEMPLATE));
|
|
|
910 |
menu.hasIFrameShim = true;
|
|
|
911 |
|
|
|
912 |
}
|
|
|
913 |
|
|
|
914 |
// Clear previous values for height and width
|
|
|
915 |
|
|
|
916 |
menu.setStyles({ height: EMPTY_STRING, width: EMPTY_STRING });
|
|
|
917 |
|
|
|
918 |
// Set the width and height of the menu's bounding box - this is
|
|
|
919 |
// necessary for IE 6 so that the CSS for the <iframe> shim can
|
|
|
920 |
// simply set the <iframe>'s width and height to 100% to ensure
|
|
|
921 |
// that dimensions of an <iframe> shim are always sync'd to the
|
|
|
922 |
// that of its parent menu. Specifying a width and height also
|
|
|
923 |
// helps when positioning decorator elements (for creating effects
|
|
|
924 |
// like rounded corners) inside a menu's bounding box in IE 7.
|
|
|
925 |
|
|
|
926 |
menu.setStyles({
|
|
|
927 |
height: (menu.get(OFFSET_HEIGHT) + PX),
|
|
|
928 |
width: (menu.get(OFFSET_WIDTH) + PX) });
|
|
|
929 |
|
|
|
930 |
}
|
|
|
931 |
|
|
|
932 |
menu.previous().addClass(CSS_MENU_LABEL_MENUVISIBLE);
|
|
|
933 |
menu.removeClass(CSS_MENU_HIDDEN);
|
|
|
934 |
|
|
|
935 |
},
|
|
|
936 |
|
|
|
937 |
|
|
|
938 |
/**
|
|
|
939 |
* @method _hideMenu
|
|
|
940 |
* @description Hides the specified menu.
|
|
|
941 |
* @protected
|
|
|
942 |
* @param {Node} menu Node instance representing a menu.
|
|
|
943 |
* @param {Boolean} activateAndFocusLabel Boolean indicating if the label
|
|
|
944 |
* for the specified
|
|
|
945 |
* menu should be focused and set as active.
|
|
|
946 |
*/
|
|
|
947 |
_hideMenu: function (menu, activateAndFocusLabel) {
|
|
|
948 |
|
|
|
949 |
var menuNav = this,
|
|
|
950 |
oLabel = menu.previous(),
|
|
|
951 |
oActiveItem;
|
|
|
952 |
|
|
|
953 |
oLabel.removeClass(CSS_MENU_LABEL_MENUVISIBLE);
|
|
|
954 |
|
|
|
955 |
|
|
|
956 |
if (activateAndFocusLabel) {
|
|
|
957 |
menuNav._focusItem(oLabel);
|
|
|
958 |
menuNav._setActiveItem(oLabel);
|
|
|
959 |
}
|
|
|
960 |
|
|
|
961 |
oActiveItem = menu.one((PERIOD + CSS_MENUITEM_ACTIVE));
|
|
|
962 |
|
|
|
963 |
if (oActiveItem) {
|
|
|
964 |
oActiveItem.removeClass(CSS_MENUITEM_ACTIVE);
|
|
|
965 |
}
|
|
|
966 |
|
|
|
967 |
// Clear the values for top and left that were set by the call to
|
|
|
968 |
// "setXY" when the menu was shown so that the hidden position
|
|
|
969 |
// specified in the core CSS file will take affect.
|
|
|
970 |
|
|
|
971 |
menu.setStyles({ left: EMPTY_STRING, top: EMPTY_STRING });
|
|
|
972 |
|
|
|
973 |
menu.addClass(CSS_MENU_HIDDEN);
|
|
|
974 |
|
|
|
975 |
if (menuNav.get(USE_ARIA)) {
|
|
|
976 |
menu.set(ARIA_HIDDEN, true);
|
|
|
977 |
}
|
|
|
978 |
|
|
|
979 |
},
|
|
|
980 |
|
|
|
981 |
|
|
|
982 |
/**
|
|
|
983 |
* @method _hideAllSubmenus
|
|
|
984 |
* @description Hides all submenus of the specified menu.
|
|
|
985 |
* @protected
|
|
|
986 |
* @param {Node} menu Node instance representing a menu.
|
|
|
987 |
*/
|
|
|
988 |
_hideAllSubmenus: function (menu) {
|
|
|
989 |
|
|
|
990 |
var menuNav = this;
|
|
|
991 |
|
|
|
992 |
menu.all(MENU_SELECTOR).each(Y.bind(function (submenuNode) {
|
|
|
993 |
|
|
|
994 |
menuNav._hideMenu(submenuNode);
|
|
|
995 |
|
|
|
996 |
}, menuNav));
|
|
|
997 |
|
|
|
998 |
},
|
|
|
999 |
|
|
|
1000 |
|
|
|
1001 |
/**
|
|
|
1002 |
* @method _cancelShowSubmenuTimer
|
|
|
1003 |
* @description Cancels the timer used to show a submenu.
|
|
|
1004 |
* @protected
|
|
|
1005 |
*/
|
|
|
1006 |
_cancelShowSubmenuTimer: function () {
|
|
|
1007 |
|
|
|
1008 |
var menuNav = this,
|
|
|
1009 |
oShowSubmenuTimer = menuNav._showSubmenuTimer;
|
|
|
1010 |
|
|
|
1011 |
if (oShowSubmenuTimer) {
|
|
|
1012 |
oShowSubmenuTimer.cancel();
|
|
|
1013 |
menuNav._showSubmenuTimer = null;
|
|
|
1014 |
}
|
|
|
1015 |
|
|
|
1016 |
},
|
|
|
1017 |
|
|
|
1018 |
|
|
|
1019 |
/**
|
|
|
1020 |
* @method _cancelHideSubmenuTimer
|
|
|
1021 |
* @description Cancels the timer used to hide a submenu.
|
|
|
1022 |
* @protected
|
|
|
1023 |
*/
|
|
|
1024 |
_cancelHideSubmenuTimer: function () {
|
|
|
1025 |
|
|
|
1026 |
var menuNav = this,
|
|
|
1027 |
oHideSubmenuTimer = menuNav._hideSubmenuTimer;
|
|
|
1028 |
|
|
|
1029 |
|
|
|
1030 |
if (oHideSubmenuTimer) {
|
|
|
1031 |
oHideSubmenuTimer.cancel();
|
|
|
1032 |
menuNav._hideSubmenuTimer = null;
|
|
|
1033 |
}
|
|
|
1034 |
|
|
|
1035 |
},
|
|
|
1036 |
|
|
|
1037 |
|
|
|
1038 |
/**
|
|
|
1039 |
* @method _initFocusManager
|
|
|
1040 |
* @description Initializes and updates the Focus Manager so that is is
|
|
|
1041 |
* always managing descendants of the active menu.
|
|
|
1042 |
* @protected
|
|
|
1043 |
*/
|
|
|
1044 |
_initFocusManager: function () {
|
|
|
1045 |
|
|
|
1046 |
var menuNav = this,
|
|
|
1047 |
oRootMenu = menuNav._rootMenu,
|
|
|
1048 |
oMenu = menuNav._activeMenu || oRootMenu,
|
|
|
1049 |
sSelectorBase =
|
|
|
1050 |
menuNav._isRoot(oMenu) ? EMPTY_STRING : ("#" + oMenu.get("id")),
|
|
|
1051 |
oFocusManager = menuNav._focusManager,
|
|
|
1052 |
sKeysVal,
|
|
|
1053 |
sDescendantSelector,
|
|
|
1054 |
sQuery;
|
|
|
1055 |
|
|
|
1056 |
if (isHorizontalMenu(oMenu)) {
|
|
|
1057 |
|
|
|
1058 |
sDescendantSelector = sSelectorBase + STANDARD_QUERY + "," +
|
|
|
1059 |
sSelectorBase + EXTENDED_QUERY;
|
|
|
1060 |
|
|
|
1061 |
sKeysVal = { next: "down:39", previous: "down:37" };
|
|
|
1062 |
|
|
|
1063 |
}
|
|
|
1064 |
else {
|
|
|
1065 |
|
|
|
1066 |
sDescendantSelector = sSelectorBase + STANDARD_QUERY;
|
|
|
1067 |
sKeysVal = { next: "down:40", previous: "down:38" };
|
|
|
1068 |
|
|
|
1069 |
}
|
|
|
1070 |
|
|
|
1071 |
|
|
|
1072 |
if (!oFocusManager) {
|
|
|
1073 |
|
|
|
1074 |
oRootMenu.plug(Y.Plugin.NodeFocusManager, {
|
|
|
1075 |
descendants: sDescendantSelector,
|
|
|
1076 |
keys: sKeysVal,
|
|
|
1077 |
circular: true
|
|
|
1078 |
});
|
|
|
1079 |
|
|
|
1080 |
oFocusManager = oRootMenu.focusManager;
|
|
|
1081 |
|
|
|
1082 |
sQuery = "#" + oRootMenu.get("id") + MENU_SELECTOR + " a," +
|
|
|
1083 |
MENU_TOGGLE_SELECTOR;
|
|
|
1084 |
|
|
|
1085 |
oRootMenu.all(sQuery).set("tabIndex", -1);
|
|
|
1086 |
|
|
|
1087 |
oFocusManager.on(ACTIVE_DESCENDANT_CHANGE,
|
|
|
1088 |
this._onActiveDescendantChange, oFocusManager, this);
|
|
|
1089 |
|
|
|
1090 |
oFocusManager.after(ACTIVE_DESCENDANT_CHANGE,
|
|
|
1091 |
this._afterActiveDescendantChange, oFocusManager, this);
|
|
|
1092 |
|
|
|
1093 |
menuNav._focusManager = oFocusManager;
|
|
|
1094 |
|
|
|
1095 |
}
|
|
|
1096 |
else {
|
|
|
1097 |
|
|
|
1098 |
oFocusManager.set(ACTIVE_DESCENDANT, -1);
|
|
|
1099 |
oFocusManager.set(DESCENDANTS, sDescendantSelector);
|
|
|
1100 |
oFocusManager.set("keys", sKeysVal);
|
|
|
1101 |
|
|
|
1102 |
}
|
|
|
1103 |
|
|
|
1104 |
},
|
|
|
1105 |
|
|
|
1106 |
|
|
|
1107 |
// Event handlers for discrete pieces of pieces of the menu
|
|
|
1108 |
|
|
|
1109 |
|
|
|
1110 |
/**
|
|
|
1111 |
* @method _onActiveDescendantChange
|
|
|
1112 |
* @description "activeDescendantChange" event handler for menu's
|
|
|
1113 |
* Focus Manager.
|
|
|
1114 |
* @protected
|
|
|
1115 |
* @param {Object} event Object representing the Attribute change event.
|
|
|
1116 |
* @param {NodeMenuNav} menuNav Object representing the NodeMenuNav instance.
|
|
|
1117 |
*/
|
|
|
1118 |
_onActiveDescendantChange: function (event, menuNav) {
|
|
|
1119 |
|
|
|
1120 |
if (event.src === UI && menuNav._activeMenu &&
|
|
|
1121 |
!menuNav._movingToSubmenu) {
|
|
|
1122 |
|
|
|
1123 |
menuNav._hideAllSubmenus(menuNav._activeMenu);
|
|
|
1124 |
|
|
|
1125 |
}
|
|
|
1126 |
|
|
|
1127 |
},
|
|
|
1128 |
|
|
|
1129 |
|
|
|
1130 |
/**
|
|
|
1131 |
* @method _afterActiveDescendantChange
|
|
|
1132 |
* @description "activeDescendantChange" event handler for menu's
|
|
|
1133 |
* Focus Manager.
|
|
|
1134 |
* @protected
|
|
|
1135 |
* @param {Object} event Object representing the Attribute change event.
|
|
|
1136 |
* @param {NodeMenuNav} menuNav Object representing the NodeMenuNav instance.
|
|
|
1137 |
*/
|
|
|
1138 |
_afterActiveDescendantChange: function (event, menuNav) {
|
|
|
1139 |
|
|
|
1140 |
var oItem;
|
|
|
1141 |
|
|
|
1142 |
if (event.src === UI) {
|
|
|
1143 |
oItem = getItem(this.get(DESCENDANTS).item(event.newVal), true);
|
|
|
1144 |
menuNav._setActiveItem(oItem);
|
|
|
1145 |
}
|
|
|
1146 |
|
|
|
1147 |
},
|
|
|
1148 |
|
|
|
1149 |
|
|
|
1150 |
/**
|
|
|
1151 |
* @method _onDocFocus
|
|
|
1152 |
* @description "focus" event handler for the owner document of the MenuNav.
|
|
|
1153 |
* @protected
|
|
|
1154 |
* @param {Object} event Object representing the DOM event.
|
|
|
1155 |
*/
|
|
|
1156 |
_onDocFocus: function (event) {
|
|
|
1157 |
|
|
|
1158 |
var menuNav = this,
|
|
|
1159 |
oActiveItem = menuNav._activeItem,
|
|
|
1160 |
oTarget = event.target,
|
|
|
1161 |
oMenu;
|
|
|
1162 |
|
|
|
1163 |
|
|
|
1164 |
if (menuNav._rootMenu.contains(oTarget)) { // The menu has focus
|
|
|
1165 |
|
|
|
1166 |
if (menuNav._hasFocus) {
|
|
|
1167 |
|
|
|
1168 |
oMenu = getParentMenu(oTarget);
|
|
|
1169 |
|
|
|
1170 |
// If the element that was focused is a descendant of the
|
|
|
1171 |
// root menu, but is in a submenu not currently being
|
|
|
1172 |
// managed by the Focus Manager, update the Focus Manager so
|
|
|
1173 |
// that it is now managing the submenu that is the parent of
|
|
|
1174 |
// the element that was focused.
|
|
|
1175 |
|
|
|
1176 |
if (!menuNav._activeMenu.compareTo(oMenu)) {
|
|
|
1177 |
|
|
|
1178 |
menuNav._activeMenu = oMenu;
|
|
|
1179 |
menuNav._initFocusManager();
|
|
|
1180 |
menuNav._focusManager.set(ACTIVE_DESCENDANT, oTarget);
|
|
|
1181 |
menuNav._setActiveItem(getItem(oTarget, true));
|
|
|
1182 |
|
|
|
1183 |
}
|
|
|
1184 |
|
|
|
1185 |
}
|
|
|
1186 |
else { // Initial focus
|
|
|
1187 |
|
|
|
1188 |
// First time the menu has been focused, need to setup focused
|
|
|
1189 |
// state and established active active descendant
|
|
|
1190 |
|
|
|
1191 |
menuNav._hasFocus = true;
|
|
|
1192 |
|
|
|
1193 |
oActiveItem = getItem(oTarget, true);
|
|
|
1194 |
|
|
|
1195 |
if (oActiveItem) {
|
|
|
1196 |
menuNav._setActiveItem(oActiveItem);
|
|
|
1197 |
}
|
|
|
1198 |
|
|
|
1199 |
}
|
|
|
1200 |
|
|
|
1201 |
}
|
|
|
1202 |
else { // The menu has lost focus
|
|
|
1203 |
|
|
|
1204 |
menuNav._clearActiveItem();
|
|
|
1205 |
|
|
|
1206 |
menuNav._cancelShowSubmenuTimer();
|
|
|
1207 |
menuNav._hideAllSubmenus(menuNav._rootMenu);
|
|
|
1208 |
|
|
|
1209 |
menuNav._activeMenu = menuNav._rootMenu;
|
|
|
1210 |
menuNav._initFocusManager();
|
|
|
1211 |
|
|
|
1212 |
menuNav._focusManager.set(ACTIVE_DESCENDANT, 0);
|
|
|
1213 |
|
|
|
1214 |
menuNav._hasFocus = false;
|
|
|
1215 |
|
|
|
1216 |
}
|
|
|
1217 |
|
|
|
1218 |
},
|
|
|
1219 |
|
|
|
1220 |
|
|
|
1221 |
/**
|
|
|
1222 |
* @method _onMenuMouseOver
|
|
|
1223 |
* @description "mouseover" event handler for a menu.
|
|
|
1224 |
* @protected
|
|
|
1225 |
* @param {Node} menu Node instance representing a menu.
|
|
|
1226 |
* @param {Object} event Object representing the DOM event.
|
|
|
1227 |
*/
|
|
|
1228 |
_onMenuMouseOver: function (menu, event) {
|
|
|
1229 |
|
|
|
1230 |
var menuNav = this,
|
|
|
1231 |
oHideAllSubmenusTimer = menuNav._hideAllSubmenusTimer;
|
|
|
1232 |
|
|
|
1233 |
if (oHideAllSubmenusTimer) {
|
|
|
1234 |
oHideAllSubmenusTimer.cancel();
|
|
|
1235 |
menuNav._hideAllSubmenusTimer = null;
|
|
|
1236 |
}
|
|
|
1237 |
|
|
|
1238 |
menuNav._cancelHideSubmenuTimer();
|
|
|
1239 |
|
|
|
1240 |
// Need to update the FocusManager in advance of focus a new
|
|
|
1241 |
// Menu in order to avoid the FocusManager thinking that
|
|
|
1242 |
// it has lost focus
|
|
|
1243 |
|
|
|
1244 |
if (menu && !menu.compareTo(menuNav._activeMenu)) {
|
|
|
1245 |
menuNav._activeMenu = menu;
|
|
|
1246 |
|
|
|
1247 |
if (menuNav._hasFocus) {
|
|
|
1248 |
menuNav._initFocusManager();
|
|
|
1249 |
}
|
|
|
1250 |
|
|
|
1251 |
}
|
|
|
1252 |
|
|
|
1253 |
if (menuNav._movingToSubmenu && isHorizontalMenu(menu)) {
|
|
|
1254 |
menuNav._movingToSubmenu = false;
|
|
|
1255 |
}
|
|
|
1256 |
|
|
|
1257 |
},
|
|
|
1258 |
|
|
|
1259 |
|
|
|
1260 |
/**
|
|
|
1261 |
* @method _hideAndFocusLabel
|
|
|
1262 |
* @description Hides all of the submenus of the root menu and focuses the
|
|
|
1263 |
* label of the topmost submenu
|
|
|
1264 |
* @protected
|
|
|
1265 |
*/
|
|
|
1266 |
_hideAndFocusLabel: function () {
|
|
|
1267 |
|
|
|
1268 |
var menuNav = this,
|
|
|
1269 |
oActiveMenu = menuNav._activeMenu,
|
|
|
1270 |
oSubmenu;
|
|
|
1271 |
|
|
|
1272 |
menuNav._hideAllSubmenus(menuNav._rootMenu);
|
|
|
1273 |
|
|
|
1274 |
if (oActiveMenu) {
|
|
|
1275 |
|
|
|
1276 |
// Focus the label element for the topmost submenu
|
|
|
1277 |
oSubmenu = menuNav._getTopmostSubmenu(oActiveMenu);
|
|
|
1278 |
menuNav._focusItem(oSubmenu.previous());
|
|
|
1279 |
|
|
|
1280 |
}
|
|
|
1281 |
|
|
|
1282 |
},
|
|
|
1283 |
|
|
|
1284 |
|
|
|
1285 |
/**
|
|
|
1286 |
* @method _onMenuMouseOut
|
|
|
1287 |
* @description "mouseout" event handler for a menu.
|
|
|
1288 |
* @protected
|
|
|
1289 |
* @param {Node} menu Node instance representing a menu.
|
|
|
1290 |
* @param {Object} event Object representing the DOM event.
|
|
|
1291 |
*/
|
|
|
1292 |
_onMenuMouseOut: function (menu, event) {
|
|
|
1293 |
|
|
|
1294 |
var menuNav = this,
|
|
|
1295 |
oActiveMenu = menuNav._activeMenu,
|
|
|
1296 |
oRelatedTarget = event.relatedTarget,
|
|
|
1297 |
oActiveItem = menuNav._activeItem,
|
|
|
1298 |
oParentMenu,
|
|
|
1299 |
oMenu;
|
|
|
1300 |
|
|
|
1301 |
|
|
|
1302 |
if (oActiveMenu && !oActiveMenu.contains(oRelatedTarget)) {
|
|
|
1303 |
|
|
|
1304 |
oParentMenu = getParentMenu(oActiveMenu);
|
|
|
1305 |
|
|
|
1306 |
|
|
|
1307 |
if (oParentMenu && !oParentMenu.contains(oRelatedTarget)) {
|
|
|
1308 |
|
|
|
1309 |
if (menuNav.get(MOUSEOUT_HIDE_DELAY) > 0) {
|
|
|
1310 |
|
|
|
1311 |
menuNav._cancelShowSubmenuTimer();
|
|
|
1312 |
|
|
|
1313 |
menuNav._hideAllSubmenusTimer =
|
|
|
1314 |
|
|
|
1315 |
later(menuNav.get(MOUSEOUT_HIDE_DELAY),
|
|
|
1316 |
menuNav, menuNav._hideAndFocusLabel);
|
|
|
1317 |
|
|
|
1318 |
}
|
|
|
1319 |
|
|
|
1320 |
}
|
|
|
1321 |
else {
|
|
|
1322 |
|
|
|
1323 |
if (oActiveItem) {
|
|
|
1324 |
|
|
|
1325 |
oMenu = getParentMenu(oActiveItem);
|
|
|
1326 |
|
|
|
1327 |
if (!menuNav._isRoot(oMenu)) {
|
|
|
1328 |
menuNav._focusItem(oMenu.previous());
|
|
|
1329 |
}
|
|
|
1330 |
|
|
|
1331 |
}
|
|
|
1332 |
|
|
|
1333 |
}
|
|
|
1334 |
|
|
|
1335 |
}
|
|
|
1336 |
|
|
|
1337 |
},
|
|
|
1338 |
|
|
|
1339 |
|
|
|
1340 |
/**
|
|
|
1341 |
* @method _onMenuLabelMouseOver
|
|
|
1342 |
* @description "mouseover" event handler for a menu label.
|
|
|
1343 |
* @protected
|
|
|
1344 |
* @param {Node} menuLabel Node instance representing a menu label.
|
|
|
1345 |
* @param {Object} event Object representing the DOM event.
|
|
|
1346 |
*/
|
|
|
1347 |
_onMenuLabelMouseOver: function (menuLabel, event) {
|
|
|
1348 |
|
|
|
1349 |
var menuNav = this,
|
|
|
1350 |
oActiveMenu = menuNav._activeMenu,
|
|
|
1351 |
bIsRoot = menuNav._isRoot(oActiveMenu),
|
|
|
1352 |
bUseAutoSubmenuDisplay =
|
|
|
1353 |
(menuNav.get(AUTO_SUBMENU_DISPLAY) && bIsRoot || !bIsRoot),
|
|
|
1354 |
submenuShowDelay = menuNav.get("submenuShowDelay"),
|
|
|
1355 |
oSubmenu;
|
|
|
1356 |
|
|
|
1357 |
|
|
|
1358 |
var showSubmenu = function (delay) {
|
|
|
1359 |
|
|
|
1360 |
menuNav._cancelHideSubmenuTimer();
|
|
|
1361 |
menuNav._cancelShowSubmenuTimer();
|
|
|
1362 |
|
|
|
1363 |
if (!hasVisibleSubmenu(menuLabel)) {
|
|
|
1364 |
|
|
|
1365 |
oSubmenu = menuLabel.next();
|
|
|
1366 |
|
|
|
1367 |
if (oSubmenu) {
|
|
|
1368 |
menuNav._hideAllSubmenus(oActiveMenu);
|
|
|
1369 |
menuNav._showSubmenuTimer = later(delay, menuNav, menuNav._showMenu, oSubmenu);
|
|
|
1370 |
}
|
|
|
1371 |
|
|
|
1372 |
}
|
|
|
1373 |
|
|
|
1374 |
};
|
|
|
1375 |
|
|
|
1376 |
|
|
|
1377 |
menuNav._focusItem(menuLabel);
|
|
|
1378 |
menuNav._setActiveItem(menuLabel);
|
|
|
1379 |
|
|
|
1380 |
|
|
|
1381 |
if (bUseAutoSubmenuDisplay) {
|
|
|
1382 |
|
|
|
1383 |
if (menuNav._movingToSubmenu) {
|
|
|
1384 |
|
|
|
1385 |
// If the user is moving diagonally from a submenu to
|
|
|
1386 |
// another submenu and they then stop and pause on a
|
|
|
1387 |
// menu label for an amount of time equal to the amount of
|
|
|
1388 |
// time defined for the display of a submenu then show the
|
|
|
1389 |
// submenu immediately.
|
|
|
1390 |
// http://yuilibrary.com/projects/yui3/ticket/2528316
|
|
|
1391 |
|
|
|
1392 |
//Y.message("Pause path");
|
|
|
1393 |
|
|
|
1394 |
menuNav._hoverTimer = later(submenuShowDelay, menuNav, function () {
|
|
|
1395 |
showSubmenu(0);
|
|
|
1396 |
});
|
|
|
1397 |
|
|
|
1398 |
}
|
|
|
1399 |
else {
|
|
|
1400 |
showSubmenu(submenuShowDelay);
|
|
|
1401 |
}
|
|
|
1402 |
|
|
|
1403 |
}
|
|
|
1404 |
|
|
|
1405 |
},
|
|
|
1406 |
|
|
|
1407 |
|
|
|
1408 |
/**
|
|
|
1409 |
* @method _onMenuLabelMouseOut
|
|
|
1410 |
* @description "mouseout" event handler for a menu label.
|
|
|
1411 |
* @protected
|
|
|
1412 |
* @param {Node} menuLabel Node instance representing a menu label.
|
|
|
1413 |
* @param {Object} event Object representing the DOM event.
|
|
|
1414 |
*/
|
|
|
1415 |
_onMenuLabelMouseOut: function (menuLabel, event) {
|
|
|
1416 |
|
|
|
1417 |
var menuNav = this,
|
|
|
1418 |
bIsRoot = menuNav._isRoot(menuNav._activeMenu),
|
|
|
1419 |
bUseAutoSubmenuDisplay =
|
|
|
1420 |
(menuNav.get(AUTO_SUBMENU_DISPLAY) && bIsRoot || !bIsRoot),
|
|
|
1421 |
|
|
|
1422 |
oRelatedTarget = event.relatedTarget,
|
|
|
1423 |
oSubmenu = menuLabel.next(),
|
|
|
1424 |
hoverTimer = menuNav._hoverTimer;
|
|
|
1425 |
|
|
|
1426 |
if (hoverTimer) {
|
|
|
1427 |
hoverTimer.cancel();
|
|
|
1428 |
}
|
|
|
1429 |
|
|
|
1430 |
menuNav._clearActiveItem();
|
|
|
1431 |
|
|
|
1432 |
if (bUseAutoSubmenuDisplay) {
|
|
|
1433 |
|
|
|
1434 |
if (menuNav._movingToSubmenu &&
|
|
|
1435 |
!menuNav._showSubmenuTimer && oSubmenu) {
|
|
|
1436 |
|
|
|
1437 |
// If the mouse is moving diagonally toward the submenu and
|
|
|
1438 |
// another submenu isn't in the process of being displayed
|
|
|
1439 |
// (via a timer), then hide the submenu via a timer to give
|
|
|
1440 |
// the user some time to reach the submenu.
|
|
|
1441 |
|
|
|
1442 |
menuNav._hideSubmenuTimer =
|
|
|
1443 |
later(menuNav.get("submenuHideDelay"), menuNav,
|
|
|
1444 |
menuNav._hideMenu, oSubmenu);
|
|
|
1445 |
|
|
|
1446 |
}
|
|
|
1447 |
else if (!menuNav._movingToSubmenu && oSubmenu && (!oRelatedTarget ||
|
|
|
1448 |
(oRelatedTarget &&
|
|
|
1449 |
!oSubmenu.contains(oRelatedTarget) &&
|
|
|
1450 |
!oRelatedTarget.compareTo(oSubmenu)))) {
|
|
|
1451 |
|
|
|
1452 |
// If the mouse is not moving toward the submenu, cancel any
|
|
|
1453 |
// submenus that might be in the process of being displayed
|
|
|
1454 |
// (via a timer) and hide this submenu immediately.
|
|
|
1455 |
|
|
|
1456 |
menuNav._cancelShowSubmenuTimer();
|
|
|
1457 |
|
|
|
1458 |
menuNav._hideMenu(oSubmenu);
|
|
|
1459 |
|
|
|
1460 |
}
|
|
|
1461 |
|
|
|
1462 |
}
|
|
|
1463 |
|
|
|
1464 |
},
|
|
|
1465 |
|
|
|
1466 |
|
|
|
1467 |
/**
|
|
|
1468 |
* @method _onMenuItemMouseOver
|
|
|
1469 |
* @description "mouseover" event handler for a menuitem.
|
|
|
1470 |
* @protected
|
|
|
1471 |
* @param {Node} menuItem Node instance representing a menuitem.
|
|
|
1472 |
* @param {Object} event Object representing the DOM event.
|
|
|
1473 |
*/
|
|
|
1474 |
_onMenuItemMouseOver: function (menuItem, event) {
|
|
|
1475 |
|
|
|
1476 |
var menuNav = this,
|
|
|
1477 |
oActiveMenu = menuNav._activeMenu,
|
|
|
1478 |
bIsRoot = menuNav._isRoot(oActiveMenu),
|
|
|
1479 |
bUseAutoSubmenuDisplay =
|
|
|
1480 |
(menuNav.get(AUTO_SUBMENU_DISPLAY) && bIsRoot || !bIsRoot);
|
|
|
1481 |
|
|
|
1482 |
|
|
|
1483 |
menuNav._focusItem(menuItem);
|
|
|
1484 |
menuNav._setActiveItem(menuItem);
|
|
|
1485 |
|
|
|
1486 |
|
|
|
1487 |
if (bUseAutoSubmenuDisplay && !menuNav._movingToSubmenu) {
|
|
|
1488 |
|
|
|
1489 |
menuNav._hideAllSubmenus(oActiveMenu);
|
|
|
1490 |
|
|
|
1491 |
}
|
|
|
1492 |
|
|
|
1493 |
},
|
|
|
1494 |
|
|
|
1495 |
|
|
|
1496 |
/**
|
|
|
1497 |
* @method _onMenuItemMouseOut
|
|
|
1498 |
* @description "mouseout" event handler for a menuitem.
|
|
|
1499 |
* @protected
|
|
|
1500 |
* @param {Node} menuItem Node instance representing a menuitem.
|
|
|
1501 |
* @param {Object} event Object representing the DOM event.
|
|
|
1502 |
*/
|
|
|
1503 |
_onMenuItemMouseOut: function (menuItem, event) {
|
|
|
1504 |
|
|
|
1505 |
this._clearActiveItem();
|
|
|
1506 |
|
|
|
1507 |
},
|
|
|
1508 |
|
|
|
1509 |
|
|
|
1510 |
/**
|
|
|
1511 |
* @method _onVerticalMenuKeyDown
|
|
|
1512 |
* @description "keydown" event handler for vertical menus.
|
|
|
1513 |
* @protected
|
|
|
1514 |
* @param {Object} event Object representing the DOM event.
|
|
|
1515 |
*/
|
|
|
1516 |
_onVerticalMenuKeyDown: function (event) {
|
|
|
1517 |
|
|
|
1518 |
var menuNav = this,
|
|
|
1519 |
oActiveMenu = menuNav._activeMenu,
|
|
|
1520 |
oRootMenu = menuNav._rootMenu,
|
|
|
1521 |
oTarget = event.target,
|
|
|
1522 |
bPreventDefault = false,
|
|
|
1523 |
nKeyCode = event.keyCode,
|
|
|
1524 |
oSubmenu,
|
|
|
1525 |
oParentMenu,
|
|
|
1526 |
oLI,
|
|
|
1527 |
oItem;
|
|
|
1528 |
|
|
|
1529 |
|
|
|
1530 |
switch (nKeyCode) {
|
|
|
1531 |
|
|
|
1532 |
case 37: // left arrow
|
|
|
1533 |
|
|
|
1534 |
oParentMenu = getParentMenu(oActiveMenu);
|
|
|
1535 |
|
|
|
1536 |
if (oParentMenu && isHorizontalMenu(oParentMenu)) {
|
|
|
1537 |
|
|
|
1538 |
menuNav._hideMenu(oActiveMenu);
|
|
|
1539 |
oLI = getPreviousSibling(oActiveMenu.get(PARENT_NODE));
|
|
|
1540 |
oItem = getItem(oLI);
|
|
|
1541 |
|
|
|
1542 |
if (oItem) {
|
|
|
1543 |
|
|
|
1544 |
if (isMenuLabel(oItem)) { // Menu label
|
|
|
1545 |
|
|
|
1546 |
oSubmenu = oItem.next();
|
|
|
1547 |
|
|
|
1548 |
|
|
|
1549 |
if (oSubmenu) {
|
|
|
1550 |
|
|
|
1551 |
menuNav._showMenu(oSubmenu);
|
|
|
1552 |
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
|
1553 |
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
1554 |
|
|
|
1555 |
}
|
|
|
1556 |
else {
|
|
|
1557 |
|
|
|
1558 |
menuNav._focusItem(oItem);
|
|
|
1559 |
menuNav._setActiveItem(oItem);
|
|
|
1560 |
|
|
|
1561 |
}
|
|
|
1562 |
|
|
|
1563 |
}
|
|
|
1564 |
else { // MenuItem
|
|
|
1565 |
|
|
|
1566 |
menuNav._focusItem(oItem);
|
|
|
1567 |
menuNav._setActiveItem(oItem);
|
|
|
1568 |
|
|
|
1569 |
}
|
|
|
1570 |
|
|
|
1571 |
}
|
|
|
1572 |
|
|
|
1573 |
}
|
|
|
1574 |
else if (!menuNav._isRoot(oActiveMenu)) {
|
|
|
1575 |
menuNav._hideMenu(oActiveMenu, true);
|
|
|
1576 |
}
|
|
|
1577 |
|
|
|
1578 |
|
|
|
1579 |
bPreventDefault = true;
|
|
|
1580 |
|
|
|
1581 |
break;
|
|
|
1582 |
|
|
|
1583 |
case 39: // right arrow
|
|
|
1584 |
|
|
|
1585 |
if (isMenuLabel(oTarget)) {
|
|
|
1586 |
|
|
|
1587 |
oSubmenu = oTarget.next();
|
|
|
1588 |
|
|
|
1589 |
if (oSubmenu) {
|
|
|
1590 |
|
|
|
1591 |
menuNav._showMenu(oSubmenu);
|
|
|
1592 |
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
|
1593 |
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
1594 |
|
|
|
1595 |
}
|
|
|
1596 |
|
|
|
1597 |
}
|
|
|
1598 |
else if (isHorizontalMenu(oRootMenu)) {
|
|
|
1599 |
|
|
|
1600 |
oSubmenu = menuNav._getTopmostSubmenu(oActiveMenu);
|
|
|
1601 |
oLI = getNextSibling(oSubmenu.get(PARENT_NODE));
|
|
|
1602 |
oItem = getItem(oLI);
|
|
|
1603 |
|
|
|
1604 |
menuNav._hideAllSubmenus(oRootMenu);
|
|
|
1605 |
|
|
|
1606 |
if (oItem) {
|
|
|
1607 |
|
|
|
1608 |
if (isMenuLabel(oItem)) { // Menu label
|
|
|
1609 |
|
|
|
1610 |
oSubmenu = oItem.next();
|
|
|
1611 |
|
|
|
1612 |
if (oSubmenu) {
|
|
|
1613 |
|
|
|
1614 |
menuNav._showMenu(oSubmenu);
|
|
|
1615 |
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
|
1616 |
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
1617 |
|
|
|
1618 |
}
|
|
|
1619 |
else {
|
|
|
1620 |
|
|
|
1621 |
menuNav._focusItem(oItem);
|
|
|
1622 |
menuNav._setActiveItem(oItem);
|
|
|
1623 |
|
|
|
1624 |
}
|
|
|
1625 |
|
|
|
1626 |
}
|
|
|
1627 |
else { // MenuItem
|
|
|
1628 |
|
|
|
1629 |
menuNav._focusItem(oItem);
|
|
|
1630 |
menuNav._setActiveItem(oItem);
|
|
|
1631 |
|
|
|
1632 |
}
|
|
|
1633 |
|
|
|
1634 |
}
|
|
|
1635 |
|
|
|
1636 |
}
|
|
|
1637 |
|
|
|
1638 |
bPreventDefault = true;
|
|
|
1639 |
|
|
|
1640 |
break;
|
|
|
1641 |
|
|
|
1642 |
}
|
|
|
1643 |
|
|
|
1644 |
|
|
|
1645 |
if (bPreventDefault) {
|
|
|
1646 |
|
|
|
1647 |
// Prevent the browser from scrolling the window
|
|
|
1648 |
|
|
|
1649 |
event.preventDefault();
|
|
|
1650 |
|
|
|
1651 |
}
|
|
|
1652 |
|
|
|
1653 |
},
|
|
|
1654 |
|
|
|
1655 |
|
|
|
1656 |
/**
|
|
|
1657 |
* @method _onHorizontalMenuKeyDown
|
|
|
1658 |
* @description "keydown" event handler for horizontal menus.
|
|
|
1659 |
* @protected
|
|
|
1660 |
* @param {Object} event Object representing the DOM event.
|
|
|
1661 |
*/
|
|
|
1662 |
_onHorizontalMenuKeyDown: function (event) {
|
|
|
1663 |
|
|
|
1664 |
var menuNav = this,
|
|
|
1665 |
oActiveMenu = menuNav._activeMenu,
|
|
|
1666 |
oTarget = event.target,
|
|
|
1667 |
oFocusedItem = getItem(oTarget, true),
|
|
|
1668 |
bPreventDefault = false,
|
|
|
1669 |
nKeyCode = event.keyCode,
|
|
|
1670 |
oSubmenu;
|
|
|
1671 |
|
|
|
1672 |
|
|
|
1673 |
if (nKeyCode === 40) {
|
|
|
1674 |
|
|
|
1675 |
menuNav._hideAllSubmenus(oActiveMenu);
|
|
|
1676 |
|
|
|
1677 |
if (isMenuLabel(oFocusedItem)) {
|
|
|
1678 |
|
|
|
1679 |
oSubmenu = oFocusedItem.next();
|
|
|
1680 |
|
|
|
1681 |
if (oSubmenu) {
|
|
|
1682 |
|
|
|
1683 |
menuNav._showMenu(oSubmenu);
|
|
|
1684 |
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
|
1685 |
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
1686 |
|
|
|
1687 |
}
|
|
|
1688 |
|
|
|
1689 |
bPreventDefault = true;
|
|
|
1690 |
|
|
|
1691 |
}
|
|
|
1692 |
|
|
|
1693 |
}
|
|
|
1694 |
|
|
|
1695 |
|
|
|
1696 |
if (bPreventDefault) {
|
|
|
1697 |
|
|
|
1698 |
// Prevent the browser from scrolling the window
|
|
|
1699 |
|
|
|
1700 |
event.preventDefault();
|
|
|
1701 |
|
|
|
1702 |
}
|
|
|
1703 |
|
|
|
1704 |
},
|
|
|
1705 |
|
|
|
1706 |
|
|
|
1707 |
// Generic DOM Event handlers
|
|
|
1708 |
|
|
|
1709 |
|
|
|
1710 |
/**
|
|
|
1711 |
* @method _onMouseMove
|
|
|
1712 |
* @description "mousemove" event handler for the menu.
|
|
|
1713 |
* @protected
|
|
|
1714 |
* @param {Object} event Object representing the DOM event.
|
|
|
1715 |
*/
|
|
|
1716 |
_onMouseMove: function (event) {
|
|
|
1717 |
|
|
|
1718 |
var menuNav = this;
|
|
|
1719 |
|
|
|
1720 |
// Using a timer to set the value of the "_currentMouseX" property
|
|
|
1721 |
// helps improve the reliability of the calculation used to set the
|
|
|
1722 |
// value of the "_movingToSubmenu" property - especially in Opera.
|
|
|
1723 |
|
|
|
1724 |
later(10, menuNav, function () {
|
|
|
1725 |
|
|
|
1726 |
menuNav._currentMouseX = event.pageX;
|
|
|
1727 |
|
|
|
1728 |
});
|
|
|
1729 |
|
|
|
1730 |
},
|
|
|
1731 |
|
|
|
1732 |
|
|
|
1733 |
/**
|
|
|
1734 |
* @method _onMouseOver
|
|
|
1735 |
* @description "mouseover" event handler for the menu.
|
|
|
1736 |
* @protected
|
|
|
1737 |
* @param {Object} event Object representing the DOM event.
|
|
|
1738 |
*/
|
|
|
1739 |
_onMouseOver: function (event) {
|
|
|
1740 |
|
|
|
1741 |
var menuNav = this,
|
|
|
1742 |
oTarget,
|
|
|
1743 |
oMenu,
|
|
|
1744 |
oMenuLabel,
|
|
|
1745 |
oParentMenu,
|
|
|
1746 |
oMenuItem;
|
|
|
1747 |
|
|
|
1748 |
|
|
|
1749 |
if (menuNav._blockMouseEvent) {
|
|
|
1750 |
menuNav._blockMouseEvent = false;
|
|
|
1751 |
}
|
|
|
1752 |
else {
|
|
|
1753 |
|
|
|
1754 |
oTarget = event.target;
|
|
|
1755 |
oMenu = getMenu(oTarget, true);
|
|
|
1756 |
oMenuLabel = getMenuLabel(oTarget, true);
|
|
|
1757 |
oMenuItem = getMenuItem(oTarget, true);
|
|
|
1758 |
|
|
|
1759 |
|
|
|
1760 |
if (handleMouseOverForNode(oMenu, oTarget)) {
|
|
|
1761 |
|
|
|
1762 |
menuNav._onMenuMouseOver(oMenu, event);
|
|
|
1763 |
|
|
|
1764 |
oMenu[HANDLED_MOUSEOVER] = true;
|
|
|
1765 |
oMenu[HANDLED_MOUSEOUT] = false;
|
|
|
1766 |
|
|
|
1767 |
oParentMenu = getParentMenu(oMenu);
|
|
|
1768 |
|
|
|
1769 |
if (oParentMenu) {
|
|
|
1770 |
|
|
|
1771 |
oParentMenu[HANDLED_MOUSEOUT] = true;
|
|
|
1772 |
oParentMenu[HANDLED_MOUSEOVER] = false;
|
|
|
1773 |
|
|
|
1774 |
}
|
|
|
1775 |
|
|
|
1776 |
}
|
|
|
1777 |
|
|
|
1778 |
if (handleMouseOverForNode(oMenuLabel, oTarget)) {
|
|
|
1779 |
|
|
|
1780 |
menuNav._onMenuLabelMouseOver(oMenuLabel, event);
|
|
|
1781 |
|
|
|
1782 |
oMenuLabel[HANDLED_MOUSEOVER] = true;
|
|
|
1783 |
oMenuLabel[HANDLED_MOUSEOUT] = false;
|
|
|
1784 |
|
|
|
1785 |
}
|
|
|
1786 |
|
|
|
1787 |
if (handleMouseOverForNode(oMenuItem, oTarget)) {
|
|
|
1788 |
|
|
|
1789 |
menuNav._onMenuItemMouseOver(oMenuItem, event);
|
|
|
1790 |
|
|
|
1791 |
oMenuItem[HANDLED_MOUSEOVER] = true;
|
|
|
1792 |
oMenuItem[HANDLED_MOUSEOUT] = false;
|
|
|
1793 |
|
|
|
1794 |
}
|
|
|
1795 |
|
|
|
1796 |
}
|
|
|
1797 |
|
|
|
1798 |
},
|
|
|
1799 |
|
|
|
1800 |
|
|
|
1801 |
/**
|
|
|
1802 |
* @method _onMouseOut
|
|
|
1803 |
* @description "mouseout" event handler for the menu.
|
|
|
1804 |
* @protected
|
|
|
1805 |
* @param {Object} event Object representing the DOM event.
|
|
|
1806 |
*/
|
|
|
1807 |
_onMouseOut: function (event) {
|
|
|
1808 |
|
|
|
1809 |
var menuNav = this,
|
|
|
1810 |
oActiveMenu = menuNav._activeMenu,
|
|
|
1811 |
bMovingToSubmenu = false,
|
|
|
1812 |
oTarget,
|
|
|
1813 |
oRelatedTarget,
|
|
|
1814 |
oMenu,
|
|
|
1815 |
oMenuLabel,
|
|
|
1816 |
oSubmenu,
|
|
|
1817 |
oMenuItem;
|
|
|
1818 |
|
|
|
1819 |
|
|
|
1820 |
menuNav._movingToSubmenu =
|
|
|
1821 |
(oActiveMenu && !isHorizontalMenu(oActiveMenu) &&
|
|
|
1822 |
((event.pageX - 5) > menuNav._currentMouseX));
|
|
|
1823 |
|
|
|
1824 |
oTarget = event.target;
|
|
|
1825 |
oRelatedTarget = event.relatedTarget;
|
|
|
1826 |
oMenu = getMenu(oTarget, true);
|
|
|
1827 |
oMenuLabel = getMenuLabel(oTarget, true);
|
|
|
1828 |
oMenuItem = getMenuItem(oTarget, true);
|
|
|
1829 |
|
|
|
1830 |
|
|
|
1831 |
if (handleMouseOutForNode(oMenuLabel, oRelatedTarget)) {
|
|
|
1832 |
|
|
|
1833 |
menuNav._onMenuLabelMouseOut(oMenuLabel, event);
|
|
|
1834 |
|
|
|
1835 |
oMenuLabel[HANDLED_MOUSEOUT] = true;
|
|
|
1836 |
oMenuLabel[HANDLED_MOUSEOVER] = false;
|
|
|
1837 |
|
|
|
1838 |
}
|
|
|
1839 |
|
|
|
1840 |
if (handleMouseOutForNode(oMenuItem, oRelatedTarget)) {
|
|
|
1841 |
|
|
|
1842 |
menuNav._onMenuItemMouseOut(oMenuItem, event);
|
|
|
1843 |
|
|
|
1844 |
oMenuItem[HANDLED_MOUSEOUT] = true;
|
|
|
1845 |
oMenuItem[HANDLED_MOUSEOVER] = false;
|
|
|
1846 |
|
|
|
1847 |
}
|
|
|
1848 |
|
|
|
1849 |
|
|
|
1850 |
if (oMenuLabel) {
|
|
|
1851 |
|
|
|
1852 |
oSubmenu = oMenuLabel.next();
|
|
|
1853 |
|
|
|
1854 |
if (oSubmenu && oRelatedTarget &&
|
|
|
1855 |
(oRelatedTarget.compareTo(oSubmenu) ||
|
|
|
1856 |
oSubmenu.contains(oRelatedTarget))) {
|
|
|
1857 |
|
|
|
1858 |
bMovingToSubmenu = true;
|
|
|
1859 |
|
|
|
1860 |
}
|
|
|
1861 |
|
|
|
1862 |
}
|
|
|
1863 |
|
|
|
1864 |
|
|
|
1865 |
if (handleMouseOutForNode(oMenu, oRelatedTarget) || bMovingToSubmenu) {
|
|
|
1866 |
|
|
|
1867 |
menuNav._onMenuMouseOut(oMenu, event);
|
|
|
1868 |
|
|
|
1869 |
oMenu[HANDLED_MOUSEOUT] = true;
|
|
|
1870 |
oMenu[HANDLED_MOUSEOVER] = false;
|
|
|
1871 |
|
|
|
1872 |
}
|
|
|
1873 |
|
|
|
1874 |
},
|
|
|
1875 |
|
|
|
1876 |
|
|
|
1877 |
/**
|
|
|
1878 |
* @method _toggleSubmenuDisplay
|
|
|
1879 |
* @description "mousedown," "keydown," and "click" event handler for the
|
|
|
1880 |
* menu used to toggle the display of a submenu.
|
|
|
1881 |
* @protected
|
|
|
1882 |
* @param {Object} event Object representing the DOM event.
|
|
|
1883 |
*/
|
|
|
1884 |
_toggleSubmenuDisplay: function (event) {
|
|
|
1885 |
|
|
|
1886 |
var menuNav = this,
|
|
|
1887 |
oTarget = event.target,
|
|
|
1888 |
oMenuLabel = getMenuLabel(oTarget, true),
|
|
|
1889 |
sType = event.type,
|
|
|
1890 |
oAnchor,
|
|
|
1891 |
oSubmenu,
|
|
|
1892 |
sHref,
|
|
|
1893 |
nHashPos,
|
|
|
1894 |
nLen,
|
|
|
1895 |
sId;
|
|
|
1896 |
|
|
|
1897 |
|
|
|
1898 |
if (oMenuLabel) {
|
|
|
1899 |
|
|
|
1900 |
oAnchor = isAnchor(oTarget) ? oTarget : oTarget.ancestor(isAnchor);
|
|
|
1901 |
|
|
|
1902 |
|
|
|
1903 |
if (oAnchor) {
|
|
|
1904 |
|
|
|
1905 |
// Need to pass "2" as a second argument to "getAttribute" for
|
|
|
1906 |
// IE otherwise IE will return a fully qualified URL for the
|
|
|
1907 |
// value of the "href" attribute.
|
|
|
1908 |
// http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
|
|
|
1909 |
|
|
|
1910 |
sHref = oAnchor.getAttribute("href", 2);
|
|
|
1911 |
nHashPos = sHref.indexOf("#");
|
|
|
1912 |
nLen = sHref.length;
|
|
|
1913 |
|
|
|
1914 |
if (nHashPos === 0 && nLen > 1) {
|
|
|
1915 |
|
|
|
1916 |
sId = sHref.substr(1, nLen);
|
|
|
1917 |
oSubmenu = oMenuLabel.next();
|
|
|
1918 |
|
|
|
1919 |
if (oSubmenu && (oSubmenu.get(ID) === sId)) {
|
|
|
1920 |
|
|
|
1921 |
if (sType === MOUSEDOWN || sType === KEYDOWN) {
|
|
|
1922 |
|
|
|
1923 |
if ((UA.opera || UA.gecko || UA.ie) && sType === KEYDOWN && !menuNav._preventClickHandle) {
|
|
|
1924 |
|
|
|
1925 |
// Prevent the browser from following the URL of
|
|
|
1926 |
// the anchor element
|
|
|
1927 |
|
|
|
1928 |
menuNav._preventClickHandle = menuNav._rootMenu.on("click", function (event) {
|
|
|
1929 |
|
|
|
1930 |
event.preventDefault();
|
|
|
1931 |
|
|
|
1932 |
menuNav._preventClickHandle.detach();
|
|
|
1933 |
menuNav._preventClickHandle = null;
|
|
|
1934 |
|
|
|
1935 |
});
|
|
|
1936 |
|
|
|
1937 |
}
|
|
|
1938 |
|
|
|
1939 |
if (sType == MOUSEDOWN) {
|
|
|
1940 |
|
|
|
1941 |
// Prevent the target from getting focused by
|
|
|
1942 |
// default, since the element to be focused will
|
|
|
1943 |
// be determined by weather or not the submenu
|
|
|
1944 |
// is visible.
|
|
|
1945 |
event.preventDefault();
|
|
|
1946 |
|
|
|
1947 |
// FocusManager will attempt to focus any
|
|
|
1948 |
// descendant that is the target of the mousedown
|
|
|
1949 |
// event. Since we want to explicitly control
|
|
|
1950 |
// where focus is going, we need to call
|
|
|
1951 |
// "stopImmediatePropagation" to stop the
|
|
|
1952 |
// FocusManager from doing its thing.
|
|
|
1953 |
event.stopImmediatePropagation();
|
|
|
1954 |
|
|
|
1955 |
// The "_focusItem" method relies on the
|
|
|
1956 |
// "_hasFocus" property being set to true. The
|
|
|
1957 |
// "_hasFocus" property is normally set via a
|
|
|
1958 |
// "focus" event listener, but since we've
|
|
|
1959 |
// blocked focus from happening, we need to set
|
|
|
1960 |
// this property manually.
|
|
|
1961 |
menuNav._hasFocus = true;
|
|
|
1962 |
|
|
|
1963 |
}
|
|
|
1964 |
|
|
|
1965 |
|
|
|
1966 |
if (menuNav._isRoot(getParentMenu(oTarget))) { // Event target is a submenu label in the root menu
|
|
|
1967 |
|
|
|
1968 |
// Menu label toggle functionality
|
|
|
1969 |
|
|
|
1970 |
if (hasVisibleSubmenu(oMenuLabel)) {
|
|
|
1971 |
|
|
|
1972 |
menuNav._hideMenu(oSubmenu);
|
|
|
1973 |
menuNav._focusItem(oMenuLabel);
|
|
|
1974 |
menuNav._setActiveItem(oMenuLabel);
|
|
|
1975 |
|
|
|
1976 |
}
|
|
|
1977 |
else {
|
|
|
1978 |
|
|
|
1979 |
menuNav._hideAllSubmenus(menuNav._rootMenu);
|
|
|
1980 |
menuNav._showMenu(oSubmenu);
|
|
|
1981 |
|
|
|
1982 |
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
|
1983 |
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
1984 |
|
|
|
1985 |
}
|
|
|
1986 |
|
|
|
1987 |
}
|
|
|
1988 |
else { // Event target is a submenu label within a submenu
|
|
|
1989 |
|
|
|
1990 |
if (menuNav._activeItem == oMenuLabel) {
|
|
|
1991 |
|
|
|
1992 |
menuNav._showMenu(oSubmenu);
|
|
|
1993 |
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
|
1994 |
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
1995 |
|
|
|
1996 |
}
|
|
|
1997 |
else {
|
|
|
1998 |
|
|
|
1999 |
if (!oMenuLabel._clickHandle) {
|
|
|
2000 |
|
|
|
2001 |
oMenuLabel._clickHandle = oMenuLabel.on("click", function () {
|
|
|
2002 |
|
|
|
2003 |
menuNav._hideAllSubmenus(menuNav._rootMenu);
|
|
|
2004 |
|
|
|
2005 |
menuNav._hasFocus = false;
|
|
|
2006 |
menuNav._clearActiveItem();
|
|
|
2007 |
|
|
|
2008 |
|
|
|
2009 |
oMenuLabel._clickHandle.detach();
|
|
|
2010 |
|
|
|
2011 |
oMenuLabel._clickHandle = null;
|
|
|
2012 |
|
|
|
2013 |
});
|
|
|
2014 |
|
|
|
2015 |
}
|
|
|
2016 |
|
|
|
2017 |
}
|
|
|
2018 |
|
|
|
2019 |
}
|
|
|
2020 |
|
|
|
2021 |
}
|
|
|
2022 |
|
|
|
2023 |
|
|
|
2024 |
if (sType === CLICK) {
|
|
|
2025 |
|
|
|
2026 |
// Prevent the browser from following the URL of
|
|
|
2027 |
// the anchor element
|
|
|
2028 |
|
|
|
2029 |
event.preventDefault();
|
|
|
2030 |
|
|
|
2031 |
}
|
|
|
2032 |
|
|
|
2033 |
}
|
|
|
2034 |
|
|
|
2035 |
}
|
|
|
2036 |
|
|
|
2037 |
|
|
|
2038 |
}
|
|
|
2039 |
|
|
|
2040 |
}
|
|
|
2041 |
|
|
|
2042 |
},
|
|
|
2043 |
|
|
|
2044 |
|
|
|
2045 |
/**
|
|
|
2046 |
* @method _onKeyPress
|
|
|
2047 |
* @description "keypress" event handler for the menu.
|
|
|
2048 |
* @protected
|
|
|
2049 |
* @param {Object} event Object representing the DOM event.
|
|
|
2050 |
*/
|
|
|
2051 |
_onKeyPress: function (event) {
|
|
|
2052 |
|
|
|
2053 |
switch (event.keyCode) {
|
|
|
2054 |
|
|
|
2055 |
case 37: // left arrow
|
|
|
2056 |
case 38: // up arrow
|
|
|
2057 |
case 39: // right arrow
|
|
|
2058 |
case 40: // down arrow
|
|
|
2059 |
|
|
|
2060 |
// Prevent the browser from scrolling the window
|
|
|
2061 |
|
|
|
2062 |
event.preventDefault();
|
|
|
2063 |
|
|
|
2064 |
break;
|
|
|
2065 |
|
|
|
2066 |
}
|
|
|
2067 |
|
|
|
2068 |
},
|
|
|
2069 |
|
|
|
2070 |
|
|
|
2071 |
/**
|
|
|
2072 |
* @method _onKeyDown
|
|
|
2073 |
* @description "keydown" event handler for the menu.
|
|
|
2074 |
* @protected
|
|
|
2075 |
* @param {Object} event Object representing the DOM event.
|
|
|
2076 |
*/
|
|
|
2077 |
_onKeyDown: function (event) {
|
|
|
2078 |
|
|
|
2079 |
var menuNav = this,
|
|
|
2080 |
oActiveItem = menuNav._activeItem,
|
|
|
2081 |
oTarget = event.target,
|
|
|
2082 |
oActiveMenu = getParentMenu(oTarget),
|
|
|
2083 |
oSubmenu;
|
|
|
2084 |
|
|
|
2085 |
if (oActiveMenu) {
|
|
|
2086 |
|
|
|
2087 |
menuNav._activeMenu = oActiveMenu;
|
|
|
2088 |
|
|
|
2089 |
if (isHorizontalMenu(oActiveMenu)) {
|
|
|
2090 |
menuNav._onHorizontalMenuKeyDown(event);
|
|
|
2091 |
}
|
|
|
2092 |
else {
|
|
|
2093 |
menuNav._onVerticalMenuKeyDown(event);
|
|
|
2094 |
}
|
|
|
2095 |
|
|
|
2096 |
|
|
|
2097 |
if (event.keyCode === 27) {
|
|
|
2098 |
|
|
|
2099 |
if (!menuNav._isRoot(oActiveMenu)) {
|
|
|
2100 |
|
|
|
2101 |
if (UA.opera) {
|
|
|
2102 |
later(0, menuNav, function () {
|
|
|
2103 |
menuNav._hideMenu(oActiveMenu, true);
|
|
|
2104 |
});
|
|
|
2105 |
}
|
|
|
2106 |
else {
|
|
|
2107 |
menuNav._hideMenu(oActiveMenu, true);
|
|
|
2108 |
}
|
|
|
2109 |
|
|
|
2110 |
event.stopPropagation();
|
|
|
2111 |
menuNav._blockMouseEvent = UA.gecko ? true : false;
|
|
|
2112 |
|
|
|
2113 |
}
|
|
|
2114 |
else if (oActiveItem) {
|
|
|
2115 |
|
|
|
2116 |
if (isMenuLabel(oActiveItem) &&
|
|
|
2117 |
hasVisibleSubmenu(oActiveItem)) {
|
|
|
2118 |
|
|
|
2119 |
oSubmenu = oActiveItem.next();
|
|
|
2120 |
|
|
|
2121 |
if (oSubmenu) {
|
|
|
2122 |
menuNav._hideMenu(oSubmenu);
|
|
|
2123 |
}
|
|
|
2124 |
|
|
|
2125 |
}
|
|
|
2126 |
else {
|
|
|
2127 |
|
|
|
2128 |
menuNav._focusManager.blur();
|
|
|
2129 |
|
|
|
2130 |
// This is necessary for Webkit since blurring the
|
|
|
2131 |
// active menuitem won't result in the document
|
|
|
2132 |
// gaining focus, meaning the that _onDocFocus
|
|
|
2133 |
// listener won't clear the active menuitem.
|
|
|
2134 |
|
|
|
2135 |
menuNav._clearActiveItem();
|
|
|
2136 |
|
|
|
2137 |
menuNav._hasFocus = false;
|
|
|
2138 |
|
|
|
2139 |
}
|
|
|
2140 |
|
|
|
2141 |
}
|
|
|
2142 |
|
|
|
2143 |
}
|
|
|
2144 |
|
|
|
2145 |
}
|
|
|
2146 |
|
|
|
2147 |
},
|
|
|
2148 |
|
|
|
2149 |
/**
|
|
|
2150 |
* @method _onDocMouseDown
|
|
|
2151 |
* @description "mousedown" event handler for the owner document of
|
|
|
2152 |
* the menu.
|
|
|
2153 |
* @protected
|
|
|
2154 |
* @param {Object} event Object representing the DOM event.
|
|
|
2155 |
*/
|
|
|
2156 |
_onDocMouseDown: function (event) {
|
|
|
2157 |
|
|
|
2158 |
var menuNav = this,
|
|
|
2159 |
oRoot = menuNav._rootMenu,
|
|
|
2160 |
oTarget = event.target;
|
|
|
2161 |
|
|
|
2162 |
|
|
|
2163 |
if (!(oRoot.compareTo(oTarget) || oRoot.contains(oTarget))) {
|
|
|
2164 |
|
|
|
2165 |
menuNav._hideAllSubmenus(oRoot);
|
|
|
2166 |
|
|
|
2167 |
// Document doesn't receive focus in Webkit when the user mouses
|
|
|
2168 |
// down on it, so the "_hasFocus" property won't get set to the
|
|
|
2169 |
// correct value. The following line corrects the problem.
|
|
|
2170 |
|
|
|
2171 |
if (UA.webkit) {
|
|
|
2172 |
menuNav._hasFocus = false;
|
|
|
2173 |
menuNav._clearActiveItem();
|
|
|
2174 |
}
|
|
|
2175 |
|
|
|
2176 |
}
|
|
|
2177 |
|
|
|
2178 |
}
|
|
|
2179 |
|
|
|
2180 |
});
|
|
|
2181 |
|
|
|
2182 |
|
|
|
2183 |
Y.namespace('Plugin');
|
|
|
2184 |
|
|
|
2185 |
Y.Plugin.NodeMenuNav = NodeMenuNav;
|
|
|
2186 |
|
|
|
2187 |
|
|
|
2188 |
}, '3.18.1', {"requires": ["node", "classnamemanager", "plugin", "node-focusmanager"], "skinnable": true});
|