3
Copyright 2012 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
7
YUI.add('node-menunav', function(Y) {
10
* <p>The MenuNav Node Plugin makes it easy to transform existing list-based
11
* markup into traditional, drop down navigational menus that are both accessible
12
* and easy to customize, and only require a small set of dependencies.</p>
15
* <p>To use the MenuNav Node Plugin, simply pass a reference to the plugin to a
16
* Node instance's <code>plug</code> method.</p>
20
* <script type="text/javascript"> <br>
22
* // Call the "use" method, passing in "node-menunav". This will <br>
23
* // load the script and CSS for the MenuNav Node Plugin and all of <br>
24
* // the required dependencies. <br>
26
* YUI().use("node-menunav", function(Y) { <br>
28
* // Use the "contentready" event to initialize the menu when <br>
29
* // the subtree of element representing the root menu <br>
30
* // (<div id="menu-1">) is ready to be scripted. <br>
32
* Y.on("contentready", function () { <br>
34
* // The scope of the callback will be a Node instance <br>
35
* // representing the root menu (<div id="menu-1">). <br>
36
* // Therefore, since "this" represents a Node instance, it <br>
37
* // is possible to just call "this.plug" passing in a <br>
38
* // reference to the MenuNav Node Plugin. <br>
40
* this.plug(Y.Plugin.NodeMenuNav); <br>
46
* </script> <br>
50
* <p>The MenuNav Node Plugin has several configuration properties that can be
51
* set via an object literal that is passed as a second argument to a Node
52
* instance's <code>plug</code> method.
57
* <script type="text/javascript"> <br>
59
* // Call the "use" method, passing in "node-menunav". This will <br>
60
* // load the script and CSS for the MenuNav Node Plugin and all of <br>
61
* // the required dependencies. <br>
63
* YUI().use("node-menunav", function(Y) { <br>
65
* // Use the "contentready" event to initialize the menu when <br>
66
* // the subtree of element representing the root menu <br>
67
* // (<div id="menu-1">) is ready to be scripted. <br>
69
* Y.on("contentready", function () { <br>
71
* // The scope of the callback will be a Node instance <br>
72
* // representing the root menu (<div id="menu-1">). <br>
73
* // Therefore, since "this" represents a Node instance, it <br>
74
* // is possible to just call "this.plug" passing in a <br>
75
* // reference to the MenuNav Node Plugin. <br>
77
* this.plug(Y.Plugin.NodeMenuNav, { mouseOutHideDelay: 1000 });
83
* </script> <br>
87
* @module node-menunav
95
getClassName = Y.ClassNameManager.getClassName,
99
// Frequently used strings
102
MENUITEM = "menuitem",
104
PARENT_NODE = "parentNode",
105
CHILDREN = "children",
106
OFFSET_HEIGHT = "offsetHeight",
107
OFFSET_WIDTH = "offsetWidth",
111
HANDLED_MOUSEOUT = "handledMouseOut",
112
HANDLED_MOUSEOVER = "handledMouseOver",
116
MOUSEDOWN = "mousedown",
120
FIRST_OF_TYPE = "first-of-type",
122
PRESENTATION = "presentation",
123
DESCENDANTS = "descendants",
125
ACTIVE_DESCENDANT = "activeDescendant",
126
USE_ARIA = "useARIA",
127
ARIA_HIDDEN = "aria-hidden",
130
ACTIVE_DESCENDANT_CHANGE = ACTIVE_DESCENDANT + "Change",
135
AUTO_SUBMENU_DISPLAY = "autoSubmenuDisplay",
136
MOUSEOUT_HIDE_DELAY = "mouseOutHideDelay",
141
CSS_MENU = getClassName(MENU),
142
CSS_MENU_HIDDEN = getClassName(MENU, HIDDEN),
143
CSS_MENU_HORIZONTAL = getClassName(MENU, "horizontal"),
144
CSS_MENU_LABEL = getClassName(MENU, LABEL),
145
CSS_MENU_LABEL_ACTIVE = getClassName(MENU, LABEL, ACTIVE),
146
CSS_MENU_LABEL_MENUVISIBLE = getClassName(MENU, LABEL, (MENU + "visible")),
147
CSS_MENUITEM = getClassName(MENUITEM),
148
CSS_MENUITEM_ACTIVE = getClassName(MENUITEM, ACTIVE),
153
MENU_SELECTOR = PERIOD + CSS_MENU,
154
MENU_TOGGLE_SELECTOR = (PERIOD + getClassName(MENU, "toggle")),
155
MENU_CONTENT_SELECTOR = PERIOD + getClassName(MENU, CONTENT),
156
MENU_LABEL_SELECTOR = PERIOD + CSS_MENU_LABEL,
158
STANDARD_QUERY = ">" + MENU_CONTENT_SELECTOR + ">ul>li>a",
159
EXTENDED_QUERY = ">" + MENU_CONTENT_SELECTOR + ">ul>li>" + MENU_LABEL_SELECTOR + ">a:first-child";
164
var getPreviousSibling = function (node) {
166
var oPrevious = node.previous(),
170
oChildren = node.get(PARENT_NODE).get(CHILDREN);
171
oPrevious = oChildren.item(oChildren.size() - 1);
179
var getNextSibling = function (node) {
181
var oNext = node.next();
184
oNext = node.get(PARENT_NODE).get(CHILDREN).item(0);
192
var isAnchor = function (node) {
194
var bReturnVal = false;
197
bReturnVal = node.get("nodeName").toLowerCase() === LOWERCASE_A;
205
var isMenuItem = function (node) {
207
return node.hasClass(CSS_MENUITEM);
212
var isMenuLabel = function (node) {
214
return node.hasClass(CSS_MENU_LABEL);
219
var isHorizontalMenu = function (menu) {
221
return menu.hasClass(CSS_MENU_HORIZONTAL);
226
var hasVisibleSubmenu = function (menuLabel) {
228
return menuLabel.hasClass(CSS_MENU_LABEL_MENUVISIBLE);
233
var getItemAnchor = function (node) {
235
return isAnchor(node) ? node : node.one(LOWERCASE_A);
240
var getNodeWithClass = function (node, className, searchAncestors) {
246
if (node.hasClass(className)) {
250
if (!oItem && searchAncestors) {
251
oItem = node.ancestor((PERIOD + className));
261
var getParentMenu = function (node) {
263
return node.ancestor(MENU_SELECTOR);
268
var getMenu = function (node, searchAncestors) {
270
return getNodeWithClass(node, CSS_MENU, searchAncestors);
275
var getMenuItem = function (node, searchAncestors) {
280
oItem = getNodeWithClass(node, CSS_MENUITEM, searchAncestors);
288
var getMenuLabel = function (node, searchAncestors) {
294
if (searchAncestors) {
295
oItem = getNodeWithClass(node, CSS_MENU_LABEL, searchAncestors);
298
oItem = getNodeWithClass(node, CSS_MENU_LABEL) ||
299
node.one((PERIOD + CSS_MENU_LABEL));
309
var getItem = function (node, searchAncestors) {
314
oItem = getMenuItem(node, searchAncestors) ||
315
getMenuLabel(node, searchAncestors);
323
var getFirstItem = function (menu) {
325
return getItem(menu.one("li"));
330
var getActiveClass = function (node) {
332
return isMenuItem(node) ? CSS_MENUITEM_ACTIVE : CSS_MENU_LABEL_ACTIVE;
337
var handleMouseOverForNode = function (node, target) {
339
return node && !node[HANDLED_MOUSEOVER] &&
340
(node.compareTo(target) || node.contains(target));
345
var handleMouseOutForNode = function (node, relatedTarget) {
347
return node && !node[HANDLED_MOUSEOUT] &&
348
(!node.compareTo(relatedTarget) && !node.contains(relatedTarget));
353
* The NodeMenuNav class is a plugin for a Node instance. The class is used via
354
* the <a href="Node.html#method_plug"><code>plug</code></a> method of Node and
355
* should not be instantiated directly.
359
var NodeMenuNav = function () {
361
NodeMenuNav.superclass.constructor.apply(this, arguments);
365
NodeMenuNav.NAME = "nodeMenuNav";
366
NodeMenuNav.NS = "menuNav";
370
* @property SHIM_TEMPLATE_TITLE
371
* @description String representing the value for the <code>title</code>
372
* attribute for the shim used to prevent <code><select></code> elements
373
* from poking through menus in IE 6.
374
* @default "Menu Stacking Shim"
377
NodeMenuNav.SHIM_TEMPLATE_TITLE = "Menu Stacking Shim";
381
* @property SHIM_TEMPLATE
382
* @description String representing the HTML used to create the
383
* <code><iframe></code> shim used to prevent
384
* <code><select></code> elements from poking through menus in IE 6.
385
* @default "<iframe frameborder="0" tabindex="-1"
386
* class="yui-shim" title="Menu Stacking Shim"
387
* src="javascript:false;"></iframe>"
391
// <iframe> shim notes:
393
// 1) Need to set the "frameBorder" property to 0 to suppress the default
394
// <iframe> border in IE. (Setting the CSS "border" property alone doesn't
397
// 2) The "src" attribute of the <iframe> is set to "javascript:false;" so
398
// that it won't load a page inside it, preventing the secure/nonsecure
399
// warning in IE when using HTTPS.
401
// 3) Since the role of the <iframe> shim is completely presentational, its
402
// "tabindex" attribute is set to "-1" and its title attribute is set to
403
// "Menu Stacking Shim". Both strategies help users of screen readers to
404
// avoid mistakenly interacting with the <iframe> shim.
406
NodeMenuNav.SHIM_TEMPLATE = '<iframe frameborder="0" tabindex="-1" class="' +
407
getClassName("shim") +
408
'" title="' + NodeMenuNav.SHIM_TEMPLATE_TITLE +
409
'" src="javascript:false;"></iframe>';
412
NodeMenuNav.ATTRS = {
415
* Boolean indicating if use of the WAI-ARIA Roles and States should be
416
* enabled for the menu.
429
setter: function (value) {
431
var oMenu = this.get(HOST),
439
oMenu.set(ROLE, MENU);
441
oMenu.all("ul,li," + MENU_CONTENT_SELECTOR).set(ROLE, PRESENTATION);
443
oMenu.all((PERIOD + getClassName(MENUITEM, CONTENT))).set(ROLE, MENUITEM);
445
oMenu.all((PERIOD + CSS_MENU_LABEL)).each(function (node) {
448
oMenuToggle = node.one(MENU_TOGGLE_SELECTOR);
451
oMenuToggle.set(ROLE, PRESENTATION);
452
oMenuLabel = oMenuToggle.previous();
455
oMenuLabel.set(ROLE, MENUITEM);
456
oMenuLabel.set("aria-haspopup", true);
458
oSubmenu = node.next();
462
oSubmenu.set(ROLE, MENU);
464
oMenuLabel = oSubmenu.previous();
465
oMenuToggle = oMenuLabel.one(MENU_TOGGLE_SELECTOR);
468
oMenuLabel = oMenuToggle;
471
sID = Y.stamp(oMenuLabel);
473
if (!oMenuLabel.get(ID)) {
474
oMenuLabel.set(ID, sID);
477
oSubmenu.set("aria-labelledby", sID);
478
oSubmenu.set(ARIA_HIDDEN, true);
492
* Boolean indicating if submenus are automatically made visible when the
493
* user mouses over the menu's items.
495
* @attribute autoSubmenuDisplay
501
autoSubmenuDisplay: {
510
* Number indicating the time (in milliseconds) that should expire before a
511
* submenu is made visible when the user mouses over the menu's label.
513
* @attribute submenuShowDelay
528
* Number indicating the time (in milliseconds) that should expire before a
529
* submenu is hidden when the user mouses out of a menu label heading in the
530
* direction of a submenu.
532
* @attribute submenuHideDelay
547
* Number indicating the time (in milliseconds) that should expire before a
548
* submenu is hidden when the user mouses out of it.
550
* @attribute mouseOutHideDelay
566
Y.extend(NodeMenuNav, Y.Plugin.Base, {
568
// Protected properties
571
* @property _rootMenu
572
* @description Node instance representing the root menu in the menu.
581
* @property _activeItem
582
* @description Node instance representing the menu's active descendent:
583
* the menuitem or menu label the user is currently interacting with.
592
* @property _activeMenu
593
* @description Node instance representing the menu that is the parent of
594
* the menu's active descendent.
603
* @property _hasFocus
604
* @description Boolean indicating if the menu has focus.
612
// In gecko-based browsers a mouseover and mouseout event will fire even
613
// if a DOM element moves out from under the mouse without the user
614
// actually moving the mouse. This bug affects NodeMenuNav because the
615
// user can hit the Esc key to hide a menu, and if the mouse is over the
616
// menu when the user presses Esc, the _onMenuMouseOut handler will be
617
// called. To fix this bug the following flag (_blockMouseEvent) is used
618
// to block the code in the _onMenuMouseOut handler from executing.
621
* @property _blockMouseEvent
622
* @description Boolean indicating whether or not to handle the
628
_blockMouseEvent: false,
632
* @property _currentMouseX
633
* @description Number representing the current x coordinate of the mouse
643
* @property _movingToSubmenu
644
* @description Boolean indicating if the mouse is moving from a menu
645
* label to its corresponding submenu.
650
_movingToSubmenu: false,
654
* @property _showSubmenuTimer
655
* @description Timer used to show a submenu.
660
_showSubmenuTimer: null,
664
* @property _hideSubmenuTimer
665
* @description Timer used to hide a submenu.
670
_hideSubmenuTimer: null,
674
* @property _hideAllSubmenusTimer
675
* @description Timer used to hide a all submenus.
680
_hideAllSubmenusTimer: null,
684
* @property _firstItem
685
* @description Node instance representing the first item (menuitem or menu
686
* label) in the root menu of a menu.
697
initializer: function (config) {
700
oRootMenu = this.get(HOST),
707
menuNav._rootMenu = oRootMenu;
709
oRootMenu.all("ul:first-child").addClass(FIRST_OF_TYPE);
711
// Hide all visible submenus
713
oRootMenu.all(MENU_SELECTOR).addClass(CSS_MENU_HIDDEN);
716
// Wire up all event handlers
718
aHandlers.push(oRootMenu.on("mouseover", menuNav._onMouseOver, menuNav));
719
aHandlers.push(oRootMenu.on("mouseout", menuNav._onMouseOut, menuNav));
720
aHandlers.push(oRootMenu.on("mousemove", menuNav._onMouseMove, menuNav));
721
aHandlers.push(oRootMenu.on(MOUSEDOWN, menuNav._toggleSubmenuDisplay, menuNav));
722
aHandlers.push(Y.on("key", menuNav._toggleSubmenuDisplay, oRootMenu, "down:13", menuNav));
723
aHandlers.push(oRootMenu.on(CLICK, menuNav._toggleSubmenuDisplay, menuNav));
724
aHandlers.push(oRootMenu.on("keypress", menuNav._onKeyPress, menuNav));
725
aHandlers.push(oRootMenu.on(KEYDOWN, menuNav._onKeyDown, menuNav));
727
oDoc = oRootMenu.get("ownerDocument");
729
aHandlers.push(oDoc.on(MOUSEDOWN, menuNav._onDocMouseDown, menuNav));
730
aHandlers.push(oDoc.on("focus", menuNav._onDocFocus, menuNav));
732
this._eventHandlers = aHandlers;
734
menuNav._initFocusManager();
741
destructor: function () {
743
var aHandlers = this._eventHandlers;
747
Y.Array.each(aHandlers, function (handle) {
751
this._eventHandlers = null;
755
this.get(HOST).unplug("focusManager");
765
* @description Returns a boolean indicating if the specified menu is the
766
* root menu in the menu.
768
* @param {Node} menu Node instance representing a menu.
769
* @return {Boolean} Boolean indicating if the specified menu is the root
772
_isRoot: function (menu) {
774
return this._rootMenu.compareTo(menu);
780
* @method _getTopmostSubmenu
781
* @description Returns the topmost submenu of a submenu hierarchy.
783
* @param {Node} menu Node instance representing a menu.
784
* @return {Node} Node instance representing a menu.
786
_getTopmostSubmenu: function (menu) {
789
oMenu = getParentMenu(menu),
796
else if (menuNav._isRoot(oMenu)) {
800
returnVal = menuNav._getTopmostSubmenu(oMenu);
809
* @method _clearActiveItem
810
* @description Clears the menu's active descendent.
813
_clearActiveItem: function () {
816
oActiveItem = menuNav._activeItem;
819
oActiveItem.removeClass(getActiveClass(oActiveItem));
822
menuNav._activeItem = null;
828
* @method _setActiveItem
829
* @description Sets the specified menuitem or menu label as the menu's
832
* @param {Node} item Node instance representing a menuitem or menu label.
834
_setActiveItem: function (item) {
840
menuNav._clearActiveItem();
842
item.addClass(getActiveClass(item));
844
menuNav._activeItem = item;
853
* @description Focuses the specified menuitem or menu label.
855
* @param {Node} item Node instance representing a menuitem or menu label.
857
_focusItem: function (item) {
863
if (item && menuNav._hasFocus) {
865
oMenu = getParentMenu(item);
866
oItem = getItemAnchor(item);
868
if (oMenu && !oMenu.compareTo(menuNav._activeMenu)) {
869
menuNav._activeMenu = oMenu;
870
menuNav._initFocusManager();
873
menuNav._focusManager.focus(oItem);
882
* @description Shows the specified menu.
884
* @param {Node} menu Node instance representing a menu.
886
_showMenu: function (menu) {
888
var oParentMenu = getParentMenu(menu),
889
oLI = menu.get(PARENT_NODE),
893
if (this.get(USE_ARIA)) {
894
menu.set(ARIA_HIDDEN, false);
898
if (isHorizontalMenu(oParentMenu)) {
899
aXY[1] = aXY[1] + oLI.get(OFFSET_HEIGHT);
902
aXY[0] = aXY[0] + oLI.get(OFFSET_WIDTH);
909
if (UA.ie === 6 && !menu.hasIFrameShim) {
911
menu.appendChild(Y.Node.create(NodeMenuNav.SHIM_TEMPLATE));
912
menu.hasIFrameShim = true;
916
// Clear previous values for height and width
918
menu.setStyles({ height: EMPTY_STRING, width: EMPTY_STRING });
920
// Set the width and height of the menu's bounding box - this is
921
// necessary for IE 6 so that the CSS for the <iframe> shim can
922
// simply set the <iframe>'s width and height to 100% to ensure
923
// that dimensions of an <iframe> shim are always sync'd to the
924
// that of its parent menu. Specifying a width and height also
925
// helps when positioning decorator elements (for creating effects
926
// like rounded corners) inside a menu's bounding box in IE 7.
929
height: (menu.get(OFFSET_HEIGHT) + PX),
930
width: (menu.get(OFFSET_WIDTH) + PX) });
934
menu.previous().addClass(CSS_MENU_LABEL_MENUVISIBLE);
935
menu.removeClass(CSS_MENU_HIDDEN);
942
* @description Hides the specified menu.
944
* @param {Node} menu Node instance representing a menu.
945
* @param {Boolean} activateAndFocusLabel Boolean indicating if the label
947
* menu should be focused and set as active.
949
_hideMenu: function (menu, activateAndFocusLabel) {
952
oLabel = menu.previous(),
955
oLabel.removeClass(CSS_MENU_LABEL_MENUVISIBLE);
958
if (activateAndFocusLabel) {
959
menuNav._focusItem(oLabel);
960
menuNav._setActiveItem(oLabel);
963
oActiveItem = menu.one((PERIOD + CSS_MENUITEM_ACTIVE));
966
oActiveItem.removeClass(CSS_MENUITEM_ACTIVE);
969
// Clear the values for top and left that were set by the call to
970
// "setXY" when the menu was shown so that the hidden position
971
// specified in the core CSS file will take affect.
973
menu.setStyles({ left: EMPTY_STRING, top: EMPTY_STRING });
975
menu.addClass(CSS_MENU_HIDDEN);
977
if (menuNav.get(USE_ARIA)) {
978
menu.set(ARIA_HIDDEN, true);
985
* @method _hideAllSubmenus
986
* @description Hides all submenus of the specified menu.
988
* @param {Node} menu Node instance representing a menu.
990
_hideAllSubmenus: function (menu) {
994
menu.all(MENU_SELECTOR).each(Y.bind(function (submenuNode) {
996
menuNav._hideMenu(submenuNode);
1004
* @method _cancelShowSubmenuTimer
1005
* @description Cancels the timer used to show a submenu.
1008
_cancelShowSubmenuTimer: function () {
1011
oShowSubmenuTimer = menuNav._showSubmenuTimer;
1013
if (oShowSubmenuTimer) {
1014
oShowSubmenuTimer.cancel();
1015
menuNav._showSubmenuTimer = null;
1022
* @method _cancelHideSubmenuTimer
1023
* @description Cancels the timer used to hide a submenu.
1026
_cancelHideSubmenuTimer: function () {
1029
oHideSubmenuTimer = menuNav._hideSubmenuTimer;
1032
if (oHideSubmenuTimer) {
1033
oHideSubmenuTimer.cancel();
1034
menuNav._hideSubmenuTimer = null;
1041
* @method _initFocusManager
1042
* @description Initializes and updates the Focus Manager so that is is
1043
* always managing descendants of the active menu.
1046
_initFocusManager: function () {
1049
oRootMenu = menuNav._rootMenu,
1050
oMenu = menuNav._activeMenu || oRootMenu,
1052
menuNav._isRoot(oMenu) ? EMPTY_STRING : ("#" + oMenu.get("id")),
1053
oFocusManager = menuNav._focusManager,
1055
sDescendantSelector,
1058
if (isHorizontalMenu(oMenu)) {
1060
sDescendantSelector = sSelectorBase + STANDARD_QUERY + "," +
1061
sSelectorBase + EXTENDED_QUERY;
1063
sKeysVal = { next: "down:39", previous: "down:37" };
1068
sDescendantSelector = sSelectorBase + STANDARD_QUERY;
1069
sKeysVal = { next: "down:40", previous: "down:38" };
1074
if (!oFocusManager) {
1076
oRootMenu.plug(Y.Plugin.NodeFocusManager, {
1077
descendants: sDescendantSelector,
1082
oFocusManager = oRootMenu.focusManager;
1084
sQuery = "#" + oRootMenu.get("id") + MENU_SELECTOR + " a," +
1085
MENU_TOGGLE_SELECTOR;
1087
oRootMenu.all(sQuery).set("tabIndex", -1);
1089
oFocusManager.on(ACTIVE_DESCENDANT_CHANGE,
1090
this._onActiveDescendantChange, oFocusManager, this);
1092
oFocusManager.after(ACTIVE_DESCENDANT_CHANGE,
1093
this._afterActiveDescendantChange, oFocusManager, this);
1095
menuNav._focusManager = oFocusManager;
1100
oFocusManager.set(ACTIVE_DESCENDANT, -1);
1101
oFocusManager.set(DESCENDANTS, sDescendantSelector);
1102
oFocusManager.set("keys", sKeysVal);
1109
// Event handlers for discrete pieces of pieces of the menu
1113
* @method _onActiveDescendantChange
1114
* @description "activeDescendantChange" event handler for menu's
1117
* @param {Object} event Object representing the Attribute change event.
1118
* @param {NodeMenuNav} menuNav Object representing the NodeMenuNav instance.
1120
_onActiveDescendantChange: function (event, menuNav) {
1122
if (event.src === UI && menuNav._activeMenu &&
1123
!menuNav._movingToSubmenu) {
1125
menuNav._hideAllSubmenus(menuNav._activeMenu);
1133
* @method _afterActiveDescendantChange
1134
* @description "activeDescendantChange" event handler for menu's
1137
* @param {Object} event Object representing the Attribute change event.
1138
* @param {NodeMenuNav} menuNav Object representing the NodeMenuNav instance.
1140
_afterActiveDescendantChange: function (event, menuNav) {
1144
if (event.src === UI) {
1145
oItem = getItem(this.get(DESCENDANTS).item(event.newVal), true);
1146
menuNav._setActiveItem(oItem);
1153
* @method _onDocFocus
1154
* @description "focus" event handler for the owner document of the MenuNav.
1156
* @param {Object} event Object representing the DOM event.
1158
_onDocFocus: function (event) {
1161
oActiveItem = menuNav._activeItem,
1162
oTarget = event.target,
1166
if (menuNav._rootMenu.contains(oTarget)) { // The menu has focus
1168
if (menuNav._hasFocus) {
1170
oMenu = getParentMenu(oTarget);
1172
// If the element that was focused is a descendant of the
1173
// root menu, but is in a submenu not currently being
1174
// managed by the Focus Manager, update the Focus Manager so
1175
// that it is now managing the submenu that is the parent of
1176
// the element that was focused.
1178
if (!menuNav._activeMenu.compareTo(oMenu)) {
1180
menuNav._activeMenu = oMenu;
1181
menuNav._initFocusManager();
1182
menuNav._focusManager.set(ACTIVE_DESCENDANT, oTarget);
1183
menuNav._setActiveItem(getItem(oTarget, true));
1188
else { // Initial focus
1190
// First time the menu has been focused, need to setup focused
1191
// state and established active active descendant
1193
menuNav._hasFocus = true;
1195
oActiveItem = getItem(oTarget, true);
1198
menuNav._setActiveItem(oActiveItem);
1204
else { // The menu has lost focus
1206
menuNav._clearActiveItem();
1208
menuNav._cancelShowSubmenuTimer();
1209
menuNav._hideAllSubmenus(menuNav._rootMenu);
1211
menuNav._activeMenu = menuNav._rootMenu;
1212
menuNav._initFocusManager();
1214
menuNav._focusManager.set(ACTIVE_DESCENDANT, 0);
1216
menuNav._hasFocus = false;
1224
* @method _onMenuMouseOver
1225
* @description "mouseover" event handler for a menu.
1227
* @param {Node} menu Node instance representing a menu.
1228
* @param {Object} event Object representing the DOM event.
1230
_onMenuMouseOver: function (menu, event) {
1233
oHideAllSubmenusTimer = menuNav._hideAllSubmenusTimer;
1235
if (oHideAllSubmenusTimer) {
1236
oHideAllSubmenusTimer.cancel();
1237
menuNav._hideAllSubmenusTimer = null;
1240
menuNav._cancelHideSubmenuTimer();
1242
// Need to update the FocusManager in advance of focus a new
1243
// Menu in order to avoid the FocusManager thinking that
1244
// it has lost focus
1246
if (menu && !menu.compareTo(menuNav._activeMenu)) {
1247
menuNav._activeMenu = menu;
1249
if (menuNav._hasFocus) {
1250
menuNav._initFocusManager();
1255
if (menuNav._movingToSubmenu && isHorizontalMenu(menu)) {
1256
menuNav._movingToSubmenu = false;
1263
* @method _hideAndFocusLabel
1264
* @description Hides all of the submenus of the root menu and focuses the
1265
* label of the topmost submenu
1268
_hideAndFocusLabel: function () {
1271
oActiveMenu = menuNav._activeMenu,
1274
menuNav._hideAllSubmenus(menuNav._rootMenu);
1278
// Focus the label element for the topmost submenu
1279
oSubmenu = menuNav._getTopmostSubmenu(oActiveMenu);
1280
menuNav._focusItem(oSubmenu.previous());
1288
* @method _onMenuMouseOut
1289
* @description "mouseout" event handler for a menu.
1291
* @param {Node} menu Node instance representing a menu.
1292
* @param {Object} event Object representing the DOM event.
1294
_onMenuMouseOut: function (menu, event) {
1297
oActiveMenu = menuNav._activeMenu,
1298
oRelatedTarget = event.relatedTarget,
1299
oActiveItem = menuNav._activeItem,
1304
if (oActiveMenu && !oActiveMenu.contains(oRelatedTarget)) {
1306
oParentMenu = getParentMenu(oActiveMenu);
1309
if (oParentMenu && !oParentMenu.contains(oRelatedTarget)) {
1311
if (menuNav.get(MOUSEOUT_HIDE_DELAY) > 0) {
1313
menuNav._cancelShowSubmenuTimer();
1315
menuNav._hideAllSubmenusTimer =
1317
later(menuNav.get(MOUSEOUT_HIDE_DELAY),
1318
menuNav, menuNav._hideAndFocusLabel);
1327
oMenu = getParentMenu(oActiveItem);
1329
if (!menuNav._isRoot(oMenu)) {
1330
menuNav._focusItem(oMenu.previous());
1343
* @method _onMenuLabelMouseOver
1344
* @description "mouseover" event handler for a menu label.
1346
* @param {Node} menuLabel Node instance representing a menu label.
1347
* @param {Object} event Object representing the DOM event.
1349
_onMenuLabelMouseOver: function (menuLabel, event) {
1352
oActiveMenu = menuNav._activeMenu,
1353
bIsRoot = menuNav._isRoot(oActiveMenu),
1354
bUseAutoSubmenuDisplay =
1355
(menuNav.get(AUTO_SUBMENU_DISPLAY) && bIsRoot || !bIsRoot),
1356
submenuShowDelay = menuNav.get("submenuShowDelay"),
1360
var showSubmenu = function (delay) {
1362
menuNav._cancelHideSubmenuTimer();
1363
menuNav._cancelShowSubmenuTimer();
1365
if (!hasVisibleSubmenu(menuLabel)) {
1367
oSubmenu = menuLabel.next();
1370
menuNav._hideAllSubmenus(oActiveMenu);
1371
menuNav._showSubmenuTimer = later(delay, menuNav, menuNav._showMenu, oSubmenu);
1379
menuNav._focusItem(menuLabel);
1380
menuNav._setActiveItem(menuLabel);
1383
if (bUseAutoSubmenuDisplay) {
1385
if (menuNav._movingToSubmenu) {
1387
// If the user is moving diagonally from a submenu to
1388
// another submenu and they then stop and pause on a
1389
// menu label for an amount of time equal to the amount of
1390
// time defined for the display of a submenu then show the
1391
// submenu immediately.
1392
// http://yuilibrary.com/projects/yui3/ticket/2528316
1394
Y.message("Pause path");
1396
menuNav._hoverTimer = later(submenuShowDelay, menuNav, function () {
1402
showSubmenu(submenuShowDelay);
1411
* @method _onMenuLabelMouseOut
1412
* @description "mouseout" event handler for a menu label.
1414
* @param {Node} menuLabel Node instance representing a menu label.
1415
* @param {Object} event Object representing the DOM event.
1417
_onMenuLabelMouseOut: function (menuLabel, event) {
1420
bIsRoot = menuNav._isRoot(menuNav._activeMenu),
1421
bUseAutoSubmenuDisplay =
1422
(menuNav.get(AUTO_SUBMENU_DISPLAY) && bIsRoot || !bIsRoot),
1424
oRelatedTarget = event.relatedTarget,
1425
oSubmenu = menuLabel.next(),
1426
hoverTimer = menuNav._hoverTimer;
1429
hoverTimer.cancel();
1432
menuNav._clearActiveItem();
1434
if (bUseAutoSubmenuDisplay) {
1436
if (menuNav._movingToSubmenu &&
1437
!menuNav._showSubmenuTimer && oSubmenu) {
1439
// If the mouse is moving diagonally toward the submenu and
1440
// another submenu isn't in the process of being displayed
1441
// (via a timer), then hide the submenu via a timer to give
1442
// the user some time to reach the submenu.
1444
menuNav._hideSubmenuTimer =
1445
later(menuNav.get("submenuHideDelay"), menuNav,
1446
menuNav._hideMenu, oSubmenu);
1449
else if (!menuNav._movingToSubmenu && oSubmenu && (!oRelatedTarget ||
1451
!oSubmenu.contains(oRelatedTarget) &&
1452
!oRelatedTarget.compareTo(oSubmenu)))) {
1454
// If the mouse is not moving toward the submenu, cancel any
1455
// submenus that might be in the process of being displayed
1456
// (via a timer) and hide this submenu immediately.
1458
menuNav._cancelShowSubmenuTimer();
1460
menuNav._hideMenu(oSubmenu);
1470
* @method _onMenuItemMouseOver
1471
* @description "mouseover" event handler for a menuitem.
1473
* @param {Node} menuItem Node instance representing a menuitem.
1474
* @param {Object} event Object representing the DOM event.
1476
_onMenuItemMouseOver: function (menuItem, event) {
1479
oActiveMenu = menuNav._activeMenu,
1480
bIsRoot = menuNav._isRoot(oActiveMenu),
1481
bUseAutoSubmenuDisplay =
1482
(menuNav.get(AUTO_SUBMENU_DISPLAY) && bIsRoot || !bIsRoot);
1485
menuNav._focusItem(menuItem);
1486
menuNav._setActiveItem(menuItem);
1489
if (bUseAutoSubmenuDisplay && !menuNav._movingToSubmenu) {
1491
menuNav._hideAllSubmenus(oActiveMenu);
1499
* @method _onMenuItemMouseOut
1500
* @description "mouseout" event handler for a menuitem.
1502
* @param {Node} menuItem Node instance representing a menuitem.
1503
* @param {Object} event Object representing the DOM event.
1505
_onMenuItemMouseOut: function (menuItem, event) {
1507
this._clearActiveItem();
1513
* @method _onVerticalMenuKeyDown
1514
* @description "keydown" event handler for vertical menus.
1516
* @param {Object} event Object representing the DOM event.
1518
_onVerticalMenuKeyDown: function (event) {
1521
oActiveMenu = menuNav._activeMenu,
1522
oRootMenu = menuNav._rootMenu,
1523
oTarget = event.target,
1524
bPreventDefault = false,
1525
nKeyCode = event.keyCode,
1534
case 37: // left arrow
1536
oParentMenu = getParentMenu(oActiveMenu);
1538
if (oParentMenu && isHorizontalMenu(oParentMenu)) {
1540
menuNav._hideMenu(oActiveMenu);
1541
oLI = getPreviousSibling(oActiveMenu.get(PARENT_NODE));
1542
oItem = getItem(oLI);
1546
if (isMenuLabel(oItem)) { // Menu label
1548
oSubmenu = oItem.next();
1553
menuNav._showMenu(oSubmenu);
1554
menuNav._focusItem(getFirstItem(oSubmenu));
1555
menuNav._setActiveItem(getFirstItem(oSubmenu));
1560
menuNav._focusItem(oItem);
1561
menuNav._setActiveItem(oItem);
1568
menuNav._focusItem(oItem);
1569
menuNav._setActiveItem(oItem);
1576
else if (!menuNav._isRoot(oActiveMenu)) {
1577
menuNav._hideMenu(oActiveMenu, true);
1581
bPreventDefault = true;
1585
case 39: // right arrow
1587
if (isMenuLabel(oTarget)) {
1589
oSubmenu = oTarget.next();
1593
menuNav._showMenu(oSubmenu);
1594
menuNav._focusItem(getFirstItem(oSubmenu));
1595
menuNav._setActiveItem(getFirstItem(oSubmenu));
1600
else if (isHorizontalMenu(oRootMenu)) {
1602
oSubmenu = menuNav._getTopmostSubmenu(oActiveMenu);
1603
oLI = getNextSibling(oSubmenu.get(PARENT_NODE));
1604
oItem = getItem(oLI);
1606
menuNav._hideAllSubmenus(oRootMenu);
1610
if (isMenuLabel(oItem)) { // Menu label
1612
oSubmenu = oItem.next();
1616
menuNav._showMenu(oSubmenu);
1617
menuNav._focusItem(getFirstItem(oSubmenu));
1618
menuNav._setActiveItem(getFirstItem(oSubmenu));
1623
menuNav._focusItem(oItem);
1624
menuNav._setActiveItem(oItem);
1631
menuNav._focusItem(oItem);
1632
menuNav._setActiveItem(oItem);
1640
bPreventDefault = true;
1647
if (bPreventDefault) {
1649
// Prevent the browser from scrolling the window
1651
event.preventDefault();
1659
* @method _onHorizontalMenuKeyDown
1660
* @description "keydown" event handler for horizontal menus.
1662
* @param {Object} event Object representing the DOM event.
1664
_onHorizontalMenuKeyDown: function (event) {
1667
oActiveMenu = menuNav._activeMenu,
1668
oTarget = event.target,
1669
oFocusedItem = getItem(oTarget, true),
1670
bPreventDefault = false,
1671
nKeyCode = event.keyCode,
1675
if (nKeyCode === 40) {
1677
menuNav._hideAllSubmenus(oActiveMenu);
1679
if (isMenuLabel(oFocusedItem)) {
1681
oSubmenu = oFocusedItem.next();
1685
menuNav._showMenu(oSubmenu);
1686
menuNav._focusItem(getFirstItem(oSubmenu));
1687
menuNav._setActiveItem(getFirstItem(oSubmenu));
1691
bPreventDefault = true;
1698
if (bPreventDefault) {
1700
// Prevent the browser from scrolling the window
1702
event.preventDefault();
1709
// Generic DOM Event handlers
1713
* @method _onMouseMove
1714
* @description "mousemove" event handler for the menu.
1716
* @param {Object} event Object representing the DOM event.
1718
_onMouseMove: function (event) {
1722
// Using a timer to set the value of the "_currentMouseX" property
1723
// helps improve the reliability of the calculation used to set the
1724
// value of the "_movingToSubmenu" property - especially in Opera.
1726
later(10, menuNav, function () {
1728
menuNav._currentMouseX = event.pageX;
1736
* @method _onMouseOver
1737
* @description "mouseover" event handler for the menu.
1739
* @param {Object} event Object representing the DOM event.
1741
_onMouseOver: function (event) {
1751
if (menuNav._blockMouseEvent) {
1752
menuNav._blockMouseEvent = false;
1756
oTarget = event.target;
1757
oMenu = getMenu(oTarget, true);
1758
oMenuLabel = getMenuLabel(oTarget, true);
1759
oMenuItem = getMenuItem(oTarget, true);
1762
if (handleMouseOverForNode(oMenu, oTarget)) {
1764
menuNav._onMenuMouseOver(oMenu, event);
1766
oMenu[HANDLED_MOUSEOVER] = true;
1767
oMenu[HANDLED_MOUSEOUT] = false;
1769
oParentMenu = getParentMenu(oMenu);
1773
oParentMenu[HANDLED_MOUSEOUT] = true;
1774
oParentMenu[HANDLED_MOUSEOVER] = false;
1780
if (handleMouseOverForNode(oMenuLabel, oTarget)) {
1782
menuNav._onMenuLabelMouseOver(oMenuLabel, event);
1784
oMenuLabel[HANDLED_MOUSEOVER] = true;
1785
oMenuLabel[HANDLED_MOUSEOUT] = false;
1789
if (handleMouseOverForNode(oMenuItem, oTarget)) {
1791
menuNav._onMenuItemMouseOver(oMenuItem, event);
1793
oMenuItem[HANDLED_MOUSEOVER] = true;
1794
oMenuItem[HANDLED_MOUSEOUT] = false;
1804
* @method _onMouseOut
1805
* @description "mouseout" event handler for the menu.
1807
* @param {Object} event Object representing the DOM event.
1809
_onMouseOut: function (event) {
1812
oActiveMenu = menuNav._activeMenu,
1813
bMovingToSubmenu = false,
1822
menuNav._movingToSubmenu =
1823
(oActiveMenu && !isHorizontalMenu(oActiveMenu) &&
1824
((event.pageX - 5) > menuNav._currentMouseX));
1826
oTarget = event.target;
1827
oRelatedTarget = event.relatedTarget;
1828
oMenu = getMenu(oTarget, true);
1829
oMenuLabel = getMenuLabel(oTarget, true);
1830
oMenuItem = getMenuItem(oTarget, true);
1833
if (handleMouseOutForNode(oMenuLabel, oRelatedTarget)) {
1835
menuNav._onMenuLabelMouseOut(oMenuLabel, event);
1837
oMenuLabel[HANDLED_MOUSEOUT] = true;
1838
oMenuLabel[HANDLED_MOUSEOVER] = false;
1842
if (handleMouseOutForNode(oMenuItem, oRelatedTarget)) {
1844
menuNav._onMenuItemMouseOut(oMenuItem, event);
1846
oMenuItem[HANDLED_MOUSEOUT] = true;
1847
oMenuItem[HANDLED_MOUSEOVER] = false;
1854
oSubmenu = oMenuLabel.next();
1856
if (oSubmenu && oRelatedTarget &&
1857
(oRelatedTarget.compareTo(oSubmenu) ||
1858
oSubmenu.contains(oRelatedTarget))) {
1860
bMovingToSubmenu = true;
1867
if (handleMouseOutForNode(oMenu, oRelatedTarget) || bMovingToSubmenu) {
1869
menuNav._onMenuMouseOut(oMenu, event);
1871
oMenu[HANDLED_MOUSEOUT] = true;
1872
oMenu[HANDLED_MOUSEOVER] = false;
1880
* @method _toggleSubmenuDisplay
1881
* @description "mousedown," "keydown," and "click" event handler for the
1882
* menu used to toggle the display of a submenu.
1884
* @param {Object} event Object representing the DOM event.
1886
_toggleSubmenuDisplay: function (event) {
1889
oTarget = event.target,
1890
oMenuLabel = getMenuLabel(oTarget, true),
1902
oAnchor = isAnchor(oTarget) ? oTarget : oTarget.ancestor(isAnchor);
1907
// Need to pass "2" as a second argument to "getAttribute" for
1908
// IE otherwise IE will return a fully qualified URL for the
1909
// value of the "href" attribute.
1910
// http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
1912
sHref = oAnchor.getAttribute("href", 2);
1913
nHashPos = sHref.indexOf("#");
1914
nLen = sHref.length;
1916
if (nHashPos === 0 && nLen > 1) {
1918
sId = sHref.substr(1, nLen);
1919
oSubmenu = oMenuLabel.next();
1921
if (oSubmenu && (oSubmenu.get(ID) === sId)) {
1923
if (sType === MOUSEDOWN || sType === KEYDOWN) {
1925
if ((UA.opera || UA.gecko || UA.ie) && sType === KEYDOWN && !menuNav._preventClickHandle) {
1927
// Prevent the browser from following the URL of
1928
// the anchor element
1930
menuNav._preventClickHandle = menuNav._rootMenu.on("click", function (event) {
1932
event.preventDefault();
1934
menuNav._preventClickHandle.detach();
1935
menuNav._preventClickHandle = null;
1941
if (sType == MOUSEDOWN) {
1943
// Prevent the target from getting focused by
1944
// default, since the element to be focused will
1945
// be determined by weather or not the submenu
1947
event.preventDefault();
1949
// FocusManager will attempt to focus any
1950
// descendant that is the target of the mousedown
1951
// event. Since we want to explicitly control
1952
// where focus is going, we need to call
1953
// "stopImmediatePropagation" to stop the
1954
// FocusManager from doing its thing.
1955
event.stopImmediatePropagation();
1957
// The "_focusItem" method relies on the
1958
// "_hasFocus" property being set to true. The
1959
// "_hasFocus" property is normally set via a
1960
// "focus" event listener, but since we've
1961
// blocked focus from happening, we need to set
1962
// this property manually.
1963
menuNav._hasFocus = true;
1968
if (menuNav._isRoot(getParentMenu(oTarget))) { // Event target is a submenu label in the root menu
1970
// Menu label toggle functionality
1972
if (hasVisibleSubmenu(oMenuLabel)) {
1974
menuNav._hideMenu(oSubmenu);
1975
menuNav._focusItem(oMenuLabel);
1976
menuNav._setActiveItem(oMenuLabel);
1981
menuNav._hideAllSubmenus(menuNav._rootMenu);
1982
menuNav._showMenu(oSubmenu);
1984
menuNav._focusItem(getFirstItem(oSubmenu));
1985
menuNav._setActiveItem(getFirstItem(oSubmenu));
1990
else { // Event target is a submenu label within a submenu
1992
if (menuNav._activeItem == oMenuLabel) {
1994
menuNav._showMenu(oSubmenu);
1995
menuNav._focusItem(getFirstItem(oSubmenu));
1996
menuNav._setActiveItem(getFirstItem(oSubmenu));
2001
if (!oMenuLabel._clickHandle) {
2003
oMenuLabel._clickHandle = oMenuLabel.on("click", function () {
2005
menuNav._hideAllSubmenus(menuNav._rootMenu);
2007
menuNav._hasFocus = false;
2008
menuNav._clearActiveItem();
2011
oMenuLabel._clickHandle.detach();
2013
oMenuLabel._clickHandle = null;
2026
if (sType === CLICK) {
2028
// Prevent the browser from following the URL of
2029
// the anchor element
2031
event.preventDefault();
2048
* @method _onKeyPress
2049
* @description "keypress" event handler for the menu.
2051
* @param {Object} event Object representing the DOM event.
2053
_onKeyPress: function (event) {
2055
switch (event.keyCode) {
2057
case 37: // left arrow
2058
case 38: // up arrow
2059
case 39: // right arrow
2060
case 40: // down arrow
2062
// Prevent the browser from scrolling the window
2064
event.preventDefault();
2074
* @method _onKeyDown
2075
* @description "keydown" event handler for the menu.
2077
* @param {Object} event Object representing the DOM event.
2079
_onKeyDown: function (event) {
2082
oActiveItem = menuNav._activeItem,
2083
oTarget = event.target,
2084
oActiveMenu = getParentMenu(oTarget),
2089
menuNav._activeMenu = oActiveMenu;
2091
if (isHorizontalMenu(oActiveMenu)) {
2092
menuNav._onHorizontalMenuKeyDown(event);
2095
menuNav._onVerticalMenuKeyDown(event);
2099
if (event.keyCode === 27) {
2101
if (!menuNav._isRoot(oActiveMenu)) {
2104
later(0, menuNav, function () {
2105
menuNav._hideMenu(oActiveMenu, true);
2109
menuNav._hideMenu(oActiveMenu, true);
2112
event.stopPropagation();
2113
menuNav._blockMouseEvent = UA.gecko ? true : false;
2116
else if (oActiveItem) {
2118
if (isMenuLabel(oActiveItem) &&
2119
hasVisibleSubmenu(oActiveItem)) {
2121
oSubmenu = oActiveItem.next();
2124
menuNav._hideMenu(oSubmenu);
2130
menuNav._focusManager.blur();
2132
// This is necessary for Webkit since blurring the
2133
// active menuitem won't result in the document
2134
// gaining focus, meaning the that _onDocFocus
2135
// listener won't clear the active menuitem.
2137
menuNav._clearActiveItem();
2139
menuNav._hasFocus = false;
2152
* @method _onDocMouseDown
2153
* @description "mousedown" event handler for the owner document of
2156
* @param {Object} event Object representing the DOM event.
2158
_onDocMouseDown: function (event) {
2161
oRoot = menuNav._rootMenu,
2162
oTarget = event.target;
2165
if (!(oRoot.compareTo(oTarget) || oRoot.contains(oTarget))) {
2167
menuNav._hideAllSubmenus(oRoot);
2169
// Document doesn't receive focus in Webkit when the user mouses
2170
// down on it, so the "_hasFocus" property won't get set to the
2171
// correct value. The following line corrects the problem.
2174
menuNav._hasFocus = false;
2175
menuNav._clearActiveItem();
2185
Y.namespace('Plugin');
2187
Y.Plugin.NodeMenuNav = NodeMenuNav;
2190
}, '3.5.1' ,{requires:['node', 'classnamemanager', 'node-focusmanager', 'plugin']});
added
removed
debian/extras/jslibs/yui/node-menunav/node-menunav-debug.js
