You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2195 lines
46 KiB
2195 lines
46 KiB
/*
|
|
YUI 3.17.2 (build 9c3c78e)
|
|
Copyright 2014 Yahoo! Inc. All rights reserved.
|
|
Licensed under the BSD License.
|
|
http://yuilibrary.com/license/
|
|
*/
|
|
|
|
YUI.add('node-menunav', function (Y, NAME) {
|
|
|
|
/**
|
|
* <p>The MenuNav Node Plugin makes it easy to transform existing list-based
|
|
* markup into traditional, drop down navigational menus that are both accessible
|
|
* and easy to customize, and only require a small set of dependencies.</p>
|
|
*
|
|
*
|
|
* <p>To use the MenuNav Node Plugin, simply pass a reference to the plugin to a
|
|
* Node instance's <code>plug</code> method.</p>
|
|
*
|
|
* <p>
|
|
* <code>
|
|
* <script type="text/javascript"> <br>
|
|
* <br>
|
|
* // Call the "use" method, passing in "node-menunav". This will <br>
|
|
* // load the script and CSS for the MenuNav Node Plugin and all of <br>
|
|
* // the required dependencies. <br>
|
|
* <br>
|
|
* YUI().use("node-menunav", function(Y) { <br>
|
|
* <br>
|
|
* // Use the "contentready" event to initialize the menu when <br>
|
|
* // the subtree of element representing the root menu <br>
|
|
* // (<div id="menu-1">) is ready to be scripted. <br>
|
|
* <br>
|
|
* Y.on("contentready", function () { <br>
|
|
* <br>
|
|
* // The scope of the callback will be a Node instance <br>
|
|
* // representing the root menu (<div id="menu-1">). <br>
|
|
* // Therefore, since "this" represents a Node instance, it <br>
|
|
* // is possible to just call "this.plug" passing in a <br>
|
|
* // reference to the MenuNav Node Plugin. <br>
|
|
* <br>
|
|
* this.plug(Y.Plugin.NodeMenuNav); <br>
|
|
* <br>
|
|
* }, "#menu-1"); <br>
|
|
* <br>
|
|
* }); <br>
|
|
* <br>
|
|
* </script> <br>
|
|
* </code>
|
|
* </p>
|
|
*
|
|
* <p>The MenuNav Node Plugin has several configuration properties that can be
|
|
* set via an object literal that is passed as a second argument to a Node
|
|
* instance's <code>plug</code> method.
|
|
* </p>
|
|
*
|
|
* <p>
|
|
* <code>
|
|
* <script type="text/javascript"> <br>
|
|
* <br>
|
|
* // Call the "use" method, passing in "node-menunav". This will <br>
|
|
* // load the script and CSS for the MenuNav Node Plugin and all of <br>
|
|
* // the required dependencies. <br>
|
|
* <br>
|
|
* YUI().use("node-menunav", function(Y) { <br>
|
|
* <br>
|
|
* // Use the "contentready" event to initialize the menu when <br>
|
|
* // the subtree of element representing the root menu <br>
|
|
* // (<div id="menu-1">) is ready to be scripted. <br>
|
|
* <br>
|
|
* Y.on("contentready", function () { <br>
|
|
* <br>
|
|
* // The scope of the callback will be a Node instance <br>
|
|
* // representing the root menu (<div id="menu-1">). <br>
|
|
* // Therefore, since "this" represents a Node instance, it <br>
|
|
* // is possible to just call "this.plug" passing in a <br>
|
|
* // reference to the MenuNav Node Plugin. <br>
|
|
* <br>
|
|
* this.plug(Y.Plugin.NodeMenuNav, { mouseOutHideDelay: 1000 });
|
|
* <br><br>
|
|
* }, "#menu-1"); <br>
|
|
* <br>
|
|
* }); <br>
|
|
* <br>
|
|
* </script> <br>
|
|
* </code>
|
|
* </p>
|
|
*
|
|
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/>.
|
|
|
|
@module node-menunav
|
|
@deprecated 3.9.0
|
|
*/
|
|
|
|
|
|
// Util shortcuts
|
|
|
|
var UA = Y.UA,
|
|
later = Y.later,
|
|
getClassName = Y.ClassNameManager.getClassName,
|
|
|
|
|
|
|
|
// Frequently used strings
|
|
|
|
MENU = "menu",
|
|
MENUITEM = "menuitem",
|
|
HIDDEN = "hidden",
|
|
PARENT_NODE = "parentNode",
|
|
CHILDREN = "children",
|
|
OFFSET_HEIGHT = "offsetHeight",
|
|
OFFSET_WIDTH = "offsetWidth",
|
|
PX = "px",
|
|
ID = "id",
|
|
PERIOD = ".",
|
|
HANDLED_MOUSEOUT = "handledMouseOut",
|
|
HANDLED_MOUSEOVER = "handledMouseOver",
|
|
ACTIVE = "active",
|
|
LABEL = "label",
|
|
LOWERCASE_A = "a",
|
|
MOUSEDOWN = "mousedown",
|
|
KEYDOWN = "keydown",
|
|
CLICK = "click",
|
|
EMPTY_STRING = "",
|
|
FIRST_OF_TYPE = "first-of-type",
|
|
ROLE = "role",
|
|
PRESENTATION = "presentation",
|
|
DESCENDANTS = "descendants",
|
|
UI = "UI",
|
|
ACTIVE_DESCENDANT = "activeDescendant",
|
|
USE_ARIA = "useARIA",
|
|
ARIA_HIDDEN = "aria-hidden",
|
|
CONTENT = "content",
|
|
HOST = "host",
|
|
ACTIVE_DESCENDANT_CHANGE = ACTIVE_DESCENDANT + "Change",
|
|
|
|
|
|
// Attribute keys
|
|
|
|
AUTO_SUBMENU_DISPLAY = "autoSubmenuDisplay",
|
|
MOUSEOUT_HIDE_DELAY = "mouseOutHideDelay",
|
|
|
|
|
|
// CSS class names
|
|
|
|
CSS_MENU = getClassName(MENU),
|
|
CSS_MENU_HIDDEN = getClassName(MENU, HIDDEN),
|
|
CSS_MENU_HORIZONTAL = getClassName(MENU, "horizontal"),
|
|
CSS_MENU_LABEL = getClassName(MENU, LABEL),
|
|
CSS_MENU_LABEL_ACTIVE = getClassName(MENU, LABEL, ACTIVE),
|
|
CSS_MENU_LABEL_MENUVISIBLE = getClassName(MENU, LABEL, (MENU + "visible")),
|
|
CSS_MENUITEM = getClassName(MENUITEM),
|
|
CSS_MENUITEM_ACTIVE = getClassName(MENUITEM, ACTIVE),
|
|
|
|
|
|
// CSS selectors
|
|
|
|
MENU_SELECTOR = PERIOD + CSS_MENU,
|
|
MENU_TOGGLE_SELECTOR = (PERIOD + getClassName(MENU, "toggle")),
|
|
MENU_CONTENT_SELECTOR = PERIOD + getClassName(MENU, CONTENT),
|
|
MENU_LABEL_SELECTOR = PERIOD + CSS_MENU_LABEL,
|
|
|
|
STANDARD_QUERY = ">" + MENU_CONTENT_SELECTOR + ">ul>li>a",
|
|
EXTENDED_QUERY = ">" + MENU_CONTENT_SELECTOR + ">ul>li>" + MENU_LABEL_SELECTOR + ">a:first-child";
|
|
|
|
// Utility functions
|
|
|
|
|
|
var getPreviousSibling = function (node) {
|
|
|
|
var oPrevious = node.previous(),
|
|
oChildren;
|
|
|
|
if (!oPrevious) {
|
|
oChildren = node.get(PARENT_NODE).get(CHILDREN);
|
|
oPrevious = oChildren.item(oChildren.size() - 1);
|
|
}
|
|
|
|
|
|
return oPrevious;
|
|
|
|
};
|
|
|
|
|
|
var getNextSibling = function (node) {
|
|
|
|
var oNext = node.next();
|
|
|
|
if (!oNext) {
|
|
oNext = node.get(PARENT_NODE).get(CHILDREN).item(0);
|
|
}
|
|
|
|
return oNext;
|
|
|
|
};
|
|
|
|
|
|
var isAnchor = function (node) {
|
|
|
|
var bReturnVal = false;
|
|
|
|
if (node) {
|
|
bReturnVal = node.get("nodeName").toLowerCase() === LOWERCASE_A;
|
|
}
|
|
|
|
return bReturnVal;
|
|
|
|
};
|
|
|
|
|
|
var isMenuItem = function (node) {
|
|
|
|
return node.hasClass(CSS_MENUITEM);
|
|
|
|
};
|
|
|
|
|
|
var isMenuLabel = function (node) {
|
|
|
|
return node.hasClass(CSS_MENU_LABEL);
|
|
|
|
};
|
|
|
|
|
|
var isHorizontalMenu = function (menu) {
|
|
|
|
return menu.hasClass(CSS_MENU_HORIZONTAL);
|
|
|
|
};
|
|
|
|
|
|
var hasVisibleSubmenu = function (menuLabel) {
|
|
|
|
return menuLabel.hasClass(CSS_MENU_LABEL_MENUVISIBLE);
|
|
|
|
};
|
|
|
|
|
|
var getItemAnchor = function (node) {
|
|
|
|
return isAnchor(node) ? node : node.one(LOWERCASE_A);
|
|
|
|
};
|
|
|
|
|
|
var getNodeWithClass = function (node, className, searchAncestors) {
|
|
|
|
var oItem;
|
|
|
|
if (node) {
|
|
|
|
if (node.hasClass(className)) {
|
|
oItem = node;
|
|
}
|
|
|
|
if (!oItem && searchAncestors) {
|
|
oItem = node.ancestor((PERIOD + className));
|
|
}
|
|
|
|
}
|
|
|
|
return oItem;
|
|
|
|
};
|
|
|
|
|
|
var getParentMenu = function (node) {
|
|
|
|
return node.ancestor(MENU_SELECTOR);
|
|
|
|
};
|
|
|
|
|
|
var getMenu = function (node, searchAncestors) {
|
|
|
|
return getNodeWithClass(node, CSS_MENU, searchAncestors);
|
|
|
|
};
|
|
|
|
|
|
var getMenuItem = function (node, searchAncestors) {
|
|
|
|
var oItem;
|
|
|
|
if (node) {
|
|
oItem = getNodeWithClass(node, CSS_MENUITEM, searchAncestors);
|
|
}
|
|
|
|
return oItem;
|
|
|
|
};
|
|
|
|
|
|
var getMenuLabel = function (node, searchAncestors) {
|
|
|
|
var oItem;
|
|
|
|
if (node) {
|
|
|
|
if (searchAncestors) {
|
|
oItem = getNodeWithClass(node, CSS_MENU_LABEL, searchAncestors);
|
|
}
|
|
else {
|
|
oItem = getNodeWithClass(node, CSS_MENU_LABEL) ||
|
|
node.one((PERIOD + CSS_MENU_LABEL));
|
|
}
|
|
|
|
}
|
|
|
|
return oItem;
|
|
|
|
};
|
|
|
|
|
|
var getItem = function (node, searchAncestors) {
|
|
|
|
var oItem;
|
|
|
|
if (node) {
|
|
oItem = getMenuItem(node, searchAncestors) ||
|
|
getMenuLabel(node, searchAncestors);
|
|
}
|
|
|
|
return oItem;
|
|
|
|
};
|
|
|
|
|
|
var getFirstItem = function (menu) {
|
|
|
|
return getItem(menu.one("li"));
|
|
|
|
};
|
|
|
|
|
|
var getActiveClass = function (node) {
|
|
|
|
return isMenuItem(node) ? CSS_MENUITEM_ACTIVE : CSS_MENU_LABEL_ACTIVE;
|
|
|
|
};
|
|
|
|
|
|
var handleMouseOverForNode = function (node, target) {
|
|
|
|
return node && !node[HANDLED_MOUSEOVER] &&
|
|
(node.compareTo(target) || node.contains(target));
|
|
|
|
};
|
|
|
|
|
|
var handleMouseOutForNode = function (node, relatedTarget) {
|
|
|
|
return node && !node[HANDLED_MOUSEOUT] &&
|
|
(!node.compareTo(relatedTarget) && !node.contains(relatedTarget));
|
|
|
|
};
|
|
|
|
/**
|
|
* The NodeMenuNav class is a plugin for a Node instance. The class is used via
|
|
* the <a href="Node.html#method_plug"><code>plug</code></a> method of Node and
|
|
* should not be instantiated directly.
|
|
* @namespace plugin
|
|
* @class NodeMenuNav
|
|
*/
|
|
var NodeMenuNav = function () {
|
|
|
|
NodeMenuNav.superclass.constructor.apply(this, arguments);
|
|
|
|
};
|
|
|
|
NodeMenuNav.NAME = "nodeMenuNav";
|
|
NodeMenuNav.NS = "menuNav";
|
|
|
|
|
|
/**
|
|
* @property SHIM_TEMPLATE_TITLE
|
|
* @description String representing the value for the <code>title</code>
|
|
* attribute for the shim used to prevent <code><select></code> elements
|
|
* from poking through menus in IE 6.
|
|
* @default "Menu Stacking Shim"
|
|
* @type String
|
|
*/
|
|
NodeMenuNav.SHIM_TEMPLATE_TITLE = "Menu Stacking Shim";
|
|
|
|
|
|
/**
|
|
* @property SHIM_TEMPLATE
|
|
* @description String representing the HTML used to create the
|
|
* <code><iframe></code> shim used to prevent
|
|
* <code><select></code> elements from poking through menus in IE 6.
|
|
* @default "<iframe frameborder="0" tabindex="-1"
|
|
* class="yui-shim" title="Menu Stacking Shim"
|
|
* src="javascript:false;"></iframe>"
|
|
* @type String
|
|
*/
|
|
|
|
// <iframe> shim notes:
|
|
//
|
|
// 1) Need to set the "frameBorder" property to 0 to suppress the default
|
|
// <iframe> border in IE. (Setting the CSS "border" property alone doesn't
|
|
// suppress it.)
|
|
//
|
|
// 2) The "src" attribute of the <iframe> is set to "javascript:false;" so
|
|
// that it won't load a page inside it, preventing the secure/nonsecure
|
|
// warning in IE when using HTTPS.
|
|
//
|
|
// 3) Since the role of the <iframe> shim is completely presentational, its
|
|
// "tabindex" attribute is set to "-1" and its title attribute is set to
|
|
// "Menu Stacking Shim". Both strategies help users of screen readers to
|
|
// avoid mistakenly interacting with the <iframe> shim.
|
|
|
|
NodeMenuNav.SHIM_TEMPLATE = '<iframe frameborder="0" tabindex="-1" class="' +
|
|
getClassName("shim") +
|
|
'" title="' + NodeMenuNav.SHIM_TEMPLATE_TITLE +
|
|
'" src="javascript:false;"></iframe>';
|
|
|
|
|
|
NodeMenuNav.ATTRS = {
|
|
|
|
/**
|
|
* Boolean indicating if use of the WAI-ARIA Roles and States should be
|
|
* enabled for the menu.
|
|
*
|
|
* @attribute useARIA
|
|
* @readOnly
|
|
* @writeOnce
|
|
* @default true
|
|
* @type boolean
|
|
*/
|
|
useARIA: {
|
|
|
|
value: true,
|
|
writeOnce: true,
|
|
lazyAdd: false,
|
|
setter: function (value) {
|
|
|
|
var oMenu = this.get(HOST),
|
|
oMenuLabel,
|
|
oMenuToggle,
|
|
oSubmenu,
|
|
sID;
|
|
|
|
if (value) {
|
|
|
|
oMenu.set(ROLE, MENU);
|
|
|
|
oMenu.all("ul,li," + MENU_CONTENT_SELECTOR).set(ROLE, PRESENTATION);
|
|
|
|
oMenu.all((PERIOD + getClassName(MENUITEM, CONTENT))).set(ROLE, MENUITEM);
|
|
|
|
oMenu.all((PERIOD + CSS_MENU_LABEL)).each(function (node) {
|
|
|
|
oMenuLabel = node;
|
|
oMenuToggle = node.one(MENU_TOGGLE_SELECTOR);
|
|
|
|
if (oMenuToggle) {
|
|
oMenuToggle.set(ROLE, PRESENTATION);
|
|
oMenuLabel = oMenuToggle.previous();
|
|
}
|
|
|
|
oMenuLabel.set(ROLE, MENUITEM);
|
|
oMenuLabel.set("aria-haspopup", true);
|
|
|
|
oSubmenu = node.next();
|
|
|
|
if (oSubmenu) {
|
|
|
|
oSubmenu.set(ROLE, MENU);
|
|
|
|
oMenuLabel = oSubmenu.previous();
|
|
oMenuToggle = oMenuLabel.one(MENU_TOGGLE_SELECTOR);
|
|
|
|
if (oMenuToggle) {
|
|
oMenuLabel = oMenuToggle;
|
|
}
|
|
|
|
sID = Y.stamp(oMenuLabel);
|
|
|
|
if (!oMenuLabel.get(ID)) {
|
|
oMenuLabel.set(ID, sID);
|
|
}
|
|
|
|
oSubmenu.set("aria-labelledby", sID);
|
|
oSubmenu.set(ARIA_HIDDEN, true);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* Boolean indicating if submenus are automatically made visible when the
|
|
* user mouses over the menu's items.
|
|
*
|
|
* @attribute autoSubmenuDisplay
|
|
* @readOnly
|
|
* @writeOnce
|
|
* @default true
|
|
* @type boolean
|
|
*/
|
|
autoSubmenuDisplay: {
|
|
|
|
value: true,
|
|
writeOnce: true
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* Number indicating the time (in milliseconds) that should expire before a
|
|
* submenu is made visible when the user mouses over the menu's label.
|
|
*
|
|
* @attribute submenuShowDelay
|
|
* @readOnly
|
|
* @writeOnce
|
|
* @default 250
|
|
* @type Number
|
|
*/
|
|
submenuShowDelay: {
|
|
|
|
value: 250,
|
|
writeOnce: true
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* Number indicating the time (in milliseconds) that should expire before a
|
|
* submenu is hidden when the user mouses out of a menu label heading in the
|
|
* direction of a submenu.
|
|
*
|
|
* @attribute submenuHideDelay
|
|
* @readOnly
|
|
* @writeOnce
|
|
* @default 250
|
|
* @type Number
|
|
*/
|
|
submenuHideDelay: {
|
|
|
|
value: 250,
|
|
writeOnce: true
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* Number indicating the time (in milliseconds) that should expire before a
|
|
* submenu is hidden when the user mouses out of it.
|
|
*
|
|
* @attribute mouseOutHideDelay
|
|
* @readOnly
|
|
* @writeOnce
|
|
* @default 750
|
|
* @type Number
|
|
*/
|
|
mouseOutHideDelay: {
|
|
|
|
value: 750,
|
|
writeOnce: true
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
Y.extend(NodeMenuNav, Y.Plugin.Base, {
|
|
|
|
// Protected properties
|
|
|
|
/**
|
|
* @property _rootMenu
|
|
* @description Node instance representing the root menu in the menu.
|
|
* @default null
|
|
* @protected
|
|
* @type Node
|
|
*/
|
|
_rootMenu: null,
|
|
|
|
|
|
/**
|
|
* @property _activeItem
|
|
* @description Node instance representing the menu's active descendent:
|
|
* the menuitem or menu label the user is currently interacting with.
|
|
* @default null
|
|
* @protected
|
|
* @type Node
|
|
*/
|
|
_activeItem: null,
|
|
|
|
|
|
/**
|
|
* @property _activeMenu
|
|
* @description Node instance representing the menu that is the parent of
|
|
* the menu's active descendent.
|
|
* @default null
|
|
* @protected
|
|
* @type Node
|
|
*/
|
|
_activeMenu: null,
|
|
|
|
|
|
/**
|
|
* @property _hasFocus
|
|
* @description Boolean indicating if the menu has focus.
|
|
* @default false
|
|
* @protected
|
|
* @type Boolean
|
|
*/
|
|
_hasFocus: false,
|
|
|
|
|
|
// In gecko-based browsers a mouseover and mouseout event will fire even
|
|
// if a DOM element moves out from under the mouse without the user
|
|
// actually moving the mouse. This bug affects NodeMenuNav because the
|
|
// user can hit the Esc key to hide a menu, and if the mouse is over the
|
|
// menu when the user presses Esc, the _onMenuMouseOut handler will be
|
|
// called. To fix this bug the following flag (_blockMouseEvent) is used
|
|
// to block the code in the _onMenuMouseOut handler from executing.
|
|
|
|
/**
|
|
* @property _blockMouseEvent
|
|
* @description Boolean indicating whether or not to handle the
|
|
* "mouseover" event.
|
|
* @default false
|
|
* @protected
|
|
* @type Boolean
|
|
*/
|
|
_blockMouseEvent: false,
|
|
|
|
|
|
/**
|
|
* @property _currentMouseX
|
|
* @description Number representing the current x coordinate of the mouse
|
|
* inside the menu.
|
|
* @default 0
|
|
* @protected
|
|
* @type Number
|
|
*/
|
|
_currentMouseX: 0,
|
|
|
|
|
|
/**
|
|
* @property _movingToSubmenu
|
|
* @description Boolean indicating if the mouse is moving from a menu
|
|
* label to its corresponding submenu.
|
|
* @default false
|
|
* @protected
|
|
* @type Boolean
|
|
*/
|
|
_movingToSubmenu: false,
|
|
|
|
|
|
/**
|
|
* @property _showSubmenuTimer
|
|
* @description Timer used to show a submenu.
|
|
* @default null
|
|
* @protected
|
|
* @type Object
|
|
*/
|
|
_showSubmenuTimer: null,
|
|
|
|
|
|
/**
|
|
* @property _hideSubmenuTimer
|
|
* @description Timer used to hide a submenu.
|
|
* @default null
|
|
* @protected
|
|
* @type Object
|
|
*/
|
|
_hideSubmenuTimer: null,
|
|
|
|
|
|
/**
|
|
* @property _hideAllSubmenusTimer
|
|
* @description Timer used to hide a all submenus.
|
|
* @default null
|
|
* @protected
|
|
* @type Object
|
|
*/
|
|
_hideAllSubmenusTimer: null,
|
|
|
|
|
|
/**
|
|
* @property _firstItem
|
|
* @description Node instance representing the first item (menuitem or menu
|
|
* label) in the root menu of a menu.
|
|
* @default null
|
|
* @protected
|
|
* @type Node
|
|
*/
|
|
_firstItem: null,
|
|
|
|
|
|
// Public methods
|
|
|
|
|
|
initializer: function (config) {
|
|
|
|
var menuNav = this,
|
|
oRootMenu = this.get(HOST),
|
|
aHandlers = [],
|
|
oDoc;
|
|
|
|
|
|
if (oRootMenu) {
|
|
|
|
menuNav._rootMenu = oRootMenu;
|
|
|
|
oRootMenu.all("ul:first-child").addClass(FIRST_OF_TYPE);
|
|
|
|
// Hide all visible submenus
|
|
|
|
oRootMenu.all(MENU_SELECTOR).addClass(CSS_MENU_HIDDEN);
|
|
|
|
|
|
// Wire up all event handlers
|
|
|
|
aHandlers.push(oRootMenu.on("mouseover", menuNav._onMouseOver, menuNav));
|
|
aHandlers.push(oRootMenu.on("mouseout", menuNav._onMouseOut, menuNav));
|
|
aHandlers.push(oRootMenu.on("mousemove", menuNav._onMouseMove, menuNav));
|
|
aHandlers.push(oRootMenu.on(MOUSEDOWN, menuNav._toggleSubmenuDisplay, menuNav));
|
|
aHandlers.push(Y.on("key", menuNav._toggleSubmenuDisplay, oRootMenu, "down:13", menuNav));
|
|
aHandlers.push(oRootMenu.on(CLICK, menuNav._toggleSubmenuDisplay, menuNav));
|
|
aHandlers.push(oRootMenu.on("keypress", menuNav._onKeyPress, menuNav));
|
|
aHandlers.push(oRootMenu.on(KEYDOWN, menuNav._onKeyDown, menuNav));
|
|
|
|
oDoc = oRootMenu.get("ownerDocument");
|
|
|
|
aHandlers.push(oDoc.on(MOUSEDOWN, menuNav._onDocMouseDown, menuNav));
|
|
aHandlers.push(oDoc.on("focus", menuNav._onDocFocus, menuNav));
|
|
|
|
this._eventHandlers = aHandlers;
|
|
|
|
menuNav._initFocusManager();
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
destructor: function () {
|
|
|
|
var aHandlers = this._eventHandlers;
|
|
|
|
if (aHandlers) {
|
|
|
|
Y.Array.each(aHandlers, function (handle) {
|
|
handle.detach();
|
|
});
|
|
|
|
this._eventHandlers = null;
|
|
|
|
}
|
|
|
|
this.get(HOST).unplug("focusManager");
|
|
|
|
},
|
|
|
|
|
|
|
|
// Protected methods
|
|
|
|
/**
|
|
* @method _isRoot
|
|
* @description Returns a boolean indicating if the specified menu is the
|
|
* root menu in the menu.
|
|
* @protected
|
|
* @param {Node} menu Node instance representing a menu.
|
|
* @return {Boolean} Boolean indicating if the specified menu is the root
|
|
* menu in the menu.
|
|
*/
|
|
_isRoot: function (menu) {
|
|
|
|
return this._rootMenu.compareTo(menu);
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _getTopmostSubmenu
|
|
* @description Returns the topmost submenu of a submenu hierarchy.
|
|
* @protected
|
|
* @param {Node} menu Node instance representing a menu.
|
|
* @return {Node} Node instance representing a menu.
|
|
*/
|
|
_getTopmostSubmenu: function (menu) {
|
|
|
|
var menuNav = this,
|
|
oMenu = getParentMenu(menu),
|
|
returnVal;
|
|
|
|
|
|
if (!oMenu) {
|
|
returnVal = menu;
|
|
}
|
|
else if (menuNav._isRoot(oMenu)) {
|
|
returnVal = menu;
|
|
}
|
|
else {
|
|
returnVal = menuNav._getTopmostSubmenu(oMenu);
|
|
}
|
|
|
|
return returnVal;
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _clearActiveItem
|
|
* @description Clears the menu's active descendent.
|
|
* @protected
|
|
*/
|
|
_clearActiveItem: function () {
|
|
|
|
var menuNav = this,
|
|
oActiveItem = menuNav._activeItem;
|
|
|
|
if (oActiveItem) {
|
|
oActiveItem.removeClass(getActiveClass(oActiveItem));
|
|
}
|
|
|
|
menuNav._activeItem = null;
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _setActiveItem
|
|
* @description Sets the specified menuitem or menu label as the menu's
|
|
* active descendent.
|
|
* @protected
|
|
* @param {Node} item Node instance representing a menuitem or menu label.
|
|
*/
|
|
_setActiveItem: function (item) {
|
|
|
|
var menuNav = this;
|
|
|
|
if (item) {
|
|
|
|
menuNav._clearActiveItem();
|
|
|
|
item.addClass(getActiveClass(item));
|
|
|
|
menuNav._activeItem = item;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _focusItem
|
|
* @description Focuses the specified menuitem or menu label.
|
|
* @protected
|
|
* @param {Node} item Node instance representing a menuitem or menu label.
|
|
*/
|
|
_focusItem: function (item) {
|
|
|
|
var menuNav = this,
|
|
oMenu,
|
|
oItem;
|
|
|
|
if (item && menuNav._hasFocus) {
|
|
|
|
oMenu = getParentMenu(item);
|
|
oItem = getItemAnchor(item);
|
|
|
|
if (oMenu && !oMenu.compareTo(menuNav._activeMenu)) {
|
|
menuNav._activeMenu = oMenu;
|
|
menuNav._initFocusManager();
|
|
}
|
|
|
|
menuNav._focusManager.focus(oItem);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _showMenu
|
|
* @description Shows the specified menu.
|
|
* @protected
|
|
* @param {Node} menu Node instance representing a menu.
|
|
*/
|
|
_showMenu: function (menu) {
|
|
|
|
var oParentMenu = getParentMenu(menu),
|
|
oLI = menu.get(PARENT_NODE),
|
|
aXY = oLI.getXY();
|
|
|
|
|
|
if (this.get(USE_ARIA)) {
|
|
menu.set(ARIA_HIDDEN, false);
|
|
}
|
|
|
|
|
|
if (isHorizontalMenu(oParentMenu)) {
|
|
aXY[1] = aXY[1] + oLI.get(OFFSET_HEIGHT);
|
|
}
|
|
else {
|
|
aXY[0] = aXY[0] + oLI.get(OFFSET_WIDTH);
|
|
}
|
|
|
|
menu.setXY(aXY);
|
|
|
|
if (UA.ie && UA.ie < 8) {
|
|
|
|
if (UA.ie === 6 && !menu.hasIFrameShim) {
|
|
|
|
menu.appendChild(Y.Node.create(NodeMenuNav.SHIM_TEMPLATE));
|
|
menu.hasIFrameShim = true;
|
|
|
|
}
|
|
|
|
// Clear previous values for height and width
|
|
|
|
menu.setStyles({ height: EMPTY_STRING, width: EMPTY_STRING });
|
|
|
|
// Set the width and height of the menu's bounding box - this is
|
|
// necessary for IE 6 so that the CSS for the <iframe> shim can
|
|
// simply set the <iframe>'s width and height to 100% to ensure
|
|
// that dimensions of an <iframe> shim are always sync'd to the
|
|
// that of its parent menu. Specifying a width and height also
|
|
// helps when positioning decorator elements (for creating effects
|
|
// like rounded corners) inside a menu's bounding box in IE 7.
|
|
|
|
menu.setStyles({
|
|
height: (menu.get(OFFSET_HEIGHT) + PX),
|
|
width: (menu.get(OFFSET_WIDTH) + PX) });
|
|
|
|
}
|
|
|
|
menu.previous().addClass(CSS_MENU_LABEL_MENUVISIBLE);
|
|
menu.removeClass(CSS_MENU_HIDDEN);
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _hideMenu
|
|
* @description Hides the specified menu.
|
|
* @protected
|
|
* @param {Node} menu Node instance representing a menu.
|
|
* @param {Boolean} activateAndFocusLabel Boolean indicating if the label
|
|
* for the specified
|
|
* menu should be focused and set as active.
|
|
*/
|
|
_hideMenu: function (menu, activateAndFocusLabel) {
|
|
|
|
var menuNav = this,
|
|
oLabel = menu.previous(),
|
|
oActiveItem;
|
|
|
|
oLabel.removeClass(CSS_MENU_LABEL_MENUVISIBLE);
|
|
|
|
|
|
if (activateAndFocusLabel) {
|
|
menuNav._focusItem(oLabel);
|
|
menuNav._setActiveItem(oLabel);
|
|
}
|
|
|
|
oActiveItem = menu.one((PERIOD + CSS_MENUITEM_ACTIVE));
|
|
|
|
if (oActiveItem) {
|
|
oActiveItem.removeClass(CSS_MENUITEM_ACTIVE);
|
|
}
|
|
|
|
// Clear the values for top and left that were set by the call to
|
|
// "setXY" when the menu was shown so that the hidden position
|
|
// specified in the core CSS file will take affect.
|
|
|
|
menu.setStyles({ left: EMPTY_STRING, top: EMPTY_STRING });
|
|
|
|
menu.addClass(CSS_MENU_HIDDEN);
|
|
|
|
if (menuNav.get(USE_ARIA)) {
|
|
menu.set(ARIA_HIDDEN, true);
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _hideAllSubmenus
|
|
* @description Hides all submenus of the specified menu.
|
|
* @protected
|
|
* @param {Node} menu Node instance representing a menu.
|
|
*/
|
|
_hideAllSubmenus: function (menu) {
|
|
|
|
var menuNav = this;
|
|
|
|
menu.all(MENU_SELECTOR).each(Y.bind(function (submenuNode) {
|
|
|
|
menuNav._hideMenu(submenuNode);
|
|
|
|
}, menuNav));
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _cancelShowSubmenuTimer
|
|
* @description Cancels the timer used to show a submenu.
|
|
* @protected
|
|
*/
|
|
_cancelShowSubmenuTimer: function () {
|
|
|
|
var menuNav = this,
|
|
oShowSubmenuTimer = menuNav._showSubmenuTimer;
|
|
|
|
if (oShowSubmenuTimer) {
|
|
oShowSubmenuTimer.cancel();
|
|
menuNav._showSubmenuTimer = null;
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _cancelHideSubmenuTimer
|
|
* @description Cancels the timer used to hide a submenu.
|
|
* @protected
|
|
*/
|
|
_cancelHideSubmenuTimer: function () {
|
|
|
|
var menuNav = this,
|
|
oHideSubmenuTimer = menuNav._hideSubmenuTimer;
|
|
|
|
|
|
if (oHideSubmenuTimer) {
|
|
oHideSubmenuTimer.cancel();
|
|
menuNav._hideSubmenuTimer = null;
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _initFocusManager
|
|
* @description Initializes and updates the Focus Manager so that is is
|
|
* always managing descendants of the active menu.
|
|
* @protected
|
|
*/
|
|
_initFocusManager: function () {
|
|
|
|
var menuNav = this,
|
|
oRootMenu = menuNav._rootMenu,
|
|
oMenu = menuNav._activeMenu || oRootMenu,
|
|
sSelectorBase =
|
|
menuNav._isRoot(oMenu) ? EMPTY_STRING : ("#" + oMenu.get("id")),
|
|
oFocusManager = menuNav._focusManager,
|
|
sKeysVal,
|
|
sDescendantSelector,
|
|
sQuery;
|
|
|
|
if (isHorizontalMenu(oMenu)) {
|
|
|
|
sDescendantSelector = sSelectorBase + STANDARD_QUERY + "," +
|
|
sSelectorBase + EXTENDED_QUERY;
|
|
|
|
sKeysVal = { next: "down:39", previous: "down:37" };
|
|
|
|
}
|
|
else {
|
|
|
|
sDescendantSelector = sSelectorBase + STANDARD_QUERY;
|
|
sKeysVal = { next: "down:40", previous: "down:38" };
|
|
|
|
}
|
|
|
|
|
|
if (!oFocusManager) {
|
|
|
|
oRootMenu.plug(Y.Plugin.NodeFocusManager, {
|
|
descendants: sDescendantSelector,
|
|
keys: sKeysVal,
|
|
circular: true
|
|
});
|
|
|
|
oFocusManager = oRootMenu.focusManager;
|
|
|
|
sQuery = "#" + oRootMenu.get("id") + MENU_SELECTOR + " a," +
|
|
MENU_TOGGLE_SELECTOR;
|
|
|
|
oRootMenu.all(sQuery).set("tabIndex", -1);
|
|
|
|
oFocusManager.on(ACTIVE_DESCENDANT_CHANGE,
|
|
this._onActiveDescendantChange, oFocusManager, this);
|
|
|
|
oFocusManager.after(ACTIVE_DESCENDANT_CHANGE,
|
|
this._afterActiveDescendantChange, oFocusManager, this);
|
|
|
|
menuNav._focusManager = oFocusManager;
|
|
|
|
}
|
|
else {
|
|
|
|
oFocusManager.set(ACTIVE_DESCENDANT, -1);
|
|
oFocusManager.set(DESCENDANTS, sDescendantSelector);
|
|
oFocusManager.set("keys", sKeysVal);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
// Event handlers for discrete pieces of pieces of the menu
|
|
|
|
|
|
/**
|
|
* @method _onActiveDescendantChange
|
|
* @description "activeDescendantChange" event handler for menu's
|
|
* Focus Manager.
|
|
* @protected
|
|
* @param {Object} event Object representing the Attribute change event.
|
|
* @param {NodeMenuNav} menuNav Object representing the NodeMenuNav instance.
|
|
*/
|
|
_onActiveDescendantChange: function (event, menuNav) {
|
|
|
|
if (event.src === UI && menuNav._activeMenu &&
|
|
!menuNav._movingToSubmenu) {
|
|
|
|
menuNav._hideAllSubmenus(menuNav._activeMenu);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _afterActiveDescendantChange
|
|
* @description "activeDescendantChange" event handler for menu's
|
|
* Focus Manager.
|
|
* @protected
|
|
* @param {Object} event Object representing the Attribute change event.
|
|
* @param {NodeMenuNav} menuNav Object representing the NodeMenuNav instance.
|
|
*/
|
|
_afterActiveDescendantChange: function (event, menuNav) {
|
|
|
|
var oItem;
|
|
|
|
if (event.src === UI) {
|
|
oItem = getItem(this.get(DESCENDANTS).item(event.newVal), true);
|
|
menuNav._setActiveItem(oItem);
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onDocFocus
|
|
* @description "focus" event handler for the owner document of the MenuNav.
|
|
* @protected
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onDocFocus: function (event) {
|
|
|
|
var menuNav = this,
|
|
oActiveItem = menuNav._activeItem,
|
|
oTarget = event.target,
|
|
oMenu;
|
|
|
|
|
|
if (menuNav._rootMenu.contains(oTarget)) { // The menu has focus
|
|
|
|
if (menuNav._hasFocus) {
|
|
|
|
oMenu = getParentMenu(oTarget);
|
|
|
|
// If the element that was focused is a descendant of the
|
|
// root menu, but is in a submenu not currently being
|
|
// managed by the Focus Manager, update the Focus Manager so
|
|
// that it is now managing the submenu that is the parent of
|
|
// the element that was focused.
|
|
|
|
if (!menuNav._activeMenu.compareTo(oMenu)) {
|
|
|
|
menuNav._activeMenu = oMenu;
|
|
menuNav._initFocusManager();
|
|
menuNav._focusManager.set(ACTIVE_DESCENDANT, oTarget);
|
|
menuNav._setActiveItem(getItem(oTarget, true));
|
|
|
|
}
|
|
|
|
}
|
|
else { // Initial focus
|
|
|
|
// First time the menu has been focused, need to setup focused
|
|
// state and established active active descendant
|
|
|
|
menuNav._hasFocus = true;
|
|
|
|
oActiveItem = getItem(oTarget, true);
|
|
|
|
if (oActiveItem) {
|
|
menuNav._setActiveItem(oActiveItem);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
else { // The menu has lost focus
|
|
|
|
menuNav._clearActiveItem();
|
|
|
|
menuNav._cancelShowSubmenuTimer();
|
|
menuNav._hideAllSubmenus(menuNav._rootMenu);
|
|
|
|
menuNav._activeMenu = menuNav._rootMenu;
|
|
menuNav._initFocusManager();
|
|
|
|
menuNav._focusManager.set(ACTIVE_DESCENDANT, 0);
|
|
|
|
menuNav._hasFocus = false;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onMenuMouseOver
|
|
* @description "mouseover" event handler for a menu.
|
|
* @protected
|
|
* @param {Node} menu Node instance representing a menu.
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onMenuMouseOver: function (menu, event) {
|
|
|
|
var menuNav = this,
|
|
oHideAllSubmenusTimer = menuNav._hideAllSubmenusTimer;
|
|
|
|
if (oHideAllSubmenusTimer) {
|
|
oHideAllSubmenusTimer.cancel();
|
|
menuNav._hideAllSubmenusTimer = null;
|
|
}
|
|
|
|
menuNav._cancelHideSubmenuTimer();
|
|
|
|
// Need to update the FocusManager in advance of focus a new
|
|
// Menu in order to avoid the FocusManager thinking that
|
|
// it has lost focus
|
|
|
|
if (menu && !menu.compareTo(menuNav._activeMenu)) {
|
|
menuNav._activeMenu = menu;
|
|
|
|
if (menuNav._hasFocus) {
|
|
menuNav._initFocusManager();
|
|
}
|
|
|
|
}
|
|
|
|
if (menuNav._movingToSubmenu && isHorizontalMenu(menu)) {
|
|
menuNav._movingToSubmenu = false;
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _hideAndFocusLabel
|
|
* @description Hides all of the submenus of the root menu and focuses the
|
|
* label of the topmost submenu
|
|
* @protected
|
|
*/
|
|
_hideAndFocusLabel: function () {
|
|
|
|
var menuNav = this,
|
|
oActiveMenu = menuNav._activeMenu,
|
|
oSubmenu;
|
|
|
|
menuNav._hideAllSubmenus(menuNav._rootMenu);
|
|
|
|
if (oActiveMenu) {
|
|
|
|
// Focus the label element for the topmost submenu
|
|
oSubmenu = menuNav._getTopmostSubmenu(oActiveMenu);
|
|
menuNav._focusItem(oSubmenu.previous());
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onMenuMouseOut
|
|
* @description "mouseout" event handler for a menu.
|
|
* @protected
|
|
* @param {Node} menu Node instance representing a menu.
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onMenuMouseOut: function (menu, event) {
|
|
|
|
var menuNav = this,
|
|
oActiveMenu = menuNav._activeMenu,
|
|
oRelatedTarget = event.relatedTarget,
|
|
oActiveItem = menuNav._activeItem,
|
|
oParentMenu,
|
|
oMenu;
|
|
|
|
|
|
if (oActiveMenu && !oActiveMenu.contains(oRelatedTarget)) {
|
|
|
|
oParentMenu = getParentMenu(oActiveMenu);
|
|
|
|
|
|
if (oParentMenu && !oParentMenu.contains(oRelatedTarget)) {
|
|
|
|
if (menuNav.get(MOUSEOUT_HIDE_DELAY) > 0) {
|
|
|
|
menuNav._cancelShowSubmenuTimer();
|
|
|
|
menuNav._hideAllSubmenusTimer =
|
|
|
|
later(menuNav.get(MOUSEOUT_HIDE_DELAY),
|
|
menuNav, menuNav._hideAndFocusLabel);
|
|
|
|
}
|
|
|
|
}
|
|
else {
|
|
|
|
if (oActiveItem) {
|
|
|
|
oMenu = getParentMenu(oActiveItem);
|
|
|
|
if (!menuNav._isRoot(oMenu)) {
|
|
menuNav._focusItem(oMenu.previous());
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onMenuLabelMouseOver
|
|
* @description "mouseover" event handler for a menu label.
|
|
* @protected
|
|
* @param {Node} menuLabel Node instance representing a menu label.
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onMenuLabelMouseOver: function (menuLabel, event) {
|
|
|
|
var menuNav = this,
|
|
oActiveMenu = menuNav._activeMenu,
|
|
bIsRoot = menuNav._isRoot(oActiveMenu),
|
|
bUseAutoSubmenuDisplay =
|
|
(menuNav.get(AUTO_SUBMENU_DISPLAY) && bIsRoot || !bIsRoot),
|
|
submenuShowDelay = menuNav.get("submenuShowDelay"),
|
|
oSubmenu;
|
|
|
|
|
|
var showSubmenu = function (delay) {
|
|
|
|
menuNav._cancelHideSubmenuTimer();
|
|
menuNav._cancelShowSubmenuTimer();
|
|
|
|
if (!hasVisibleSubmenu(menuLabel)) {
|
|
|
|
oSubmenu = menuLabel.next();
|
|
|
|
if (oSubmenu) {
|
|
menuNav._hideAllSubmenus(oActiveMenu);
|
|
menuNav._showSubmenuTimer = later(delay, menuNav, menuNav._showMenu, oSubmenu);
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
menuNav._focusItem(menuLabel);
|
|
menuNav._setActiveItem(menuLabel);
|
|
|
|
|
|
if (bUseAutoSubmenuDisplay) {
|
|
|
|
if (menuNav._movingToSubmenu) {
|
|
|
|
// If the user is moving diagonally from a submenu to
|
|
// another submenu and they then stop and pause on a
|
|
// menu label for an amount of time equal to the amount of
|
|
// time defined for the display of a submenu then show the
|
|
// submenu immediately.
|
|
// http://yuilibrary.com/projects/yui3/ticket/2528316
|
|
|
|
//Y.message("Pause path");
|
|
|
|
menuNav._hoverTimer = later(submenuShowDelay, menuNav, function () {
|
|
showSubmenu(0);
|
|
});
|
|
|
|
}
|
|
else {
|
|
showSubmenu(submenuShowDelay);
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onMenuLabelMouseOut
|
|
* @description "mouseout" event handler for a menu label.
|
|
* @protected
|
|
* @param {Node} menuLabel Node instance representing a menu label.
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onMenuLabelMouseOut: function (menuLabel, event) {
|
|
|
|
var menuNav = this,
|
|
bIsRoot = menuNav._isRoot(menuNav._activeMenu),
|
|
bUseAutoSubmenuDisplay =
|
|
(menuNav.get(AUTO_SUBMENU_DISPLAY) && bIsRoot || !bIsRoot),
|
|
|
|
oRelatedTarget = event.relatedTarget,
|
|
oSubmenu = menuLabel.next(),
|
|
hoverTimer = menuNav._hoverTimer;
|
|
|
|
if (hoverTimer) {
|
|
hoverTimer.cancel();
|
|
}
|
|
|
|
menuNav._clearActiveItem();
|
|
|
|
if (bUseAutoSubmenuDisplay) {
|
|
|
|
if (menuNav._movingToSubmenu &&
|
|
!menuNav._showSubmenuTimer && oSubmenu) {
|
|
|
|
// If the mouse is moving diagonally toward the submenu and
|
|
// another submenu isn't in the process of being displayed
|
|
// (via a timer), then hide the submenu via a timer to give
|
|
// the user some time to reach the submenu.
|
|
|
|
menuNav._hideSubmenuTimer =
|
|
later(menuNav.get("submenuHideDelay"), menuNav,
|
|
menuNav._hideMenu, oSubmenu);
|
|
|
|
}
|
|
else if (!menuNav._movingToSubmenu && oSubmenu && (!oRelatedTarget ||
|
|
(oRelatedTarget &&
|
|
!oSubmenu.contains(oRelatedTarget) &&
|
|
!oRelatedTarget.compareTo(oSubmenu)))) {
|
|
|
|
// If the mouse is not moving toward the submenu, cancel any
|
|
// submenus that might be in the process of being displayed
|
|
// (via a timer) and hide this submenu immediately.
|
|
|
|
menuNav._cancelShowSubmenuTimer();
|
|
|
|
menuNav._hideMenu(oSubmenu);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onMenuItemMouseOver
|
|
* @description "mouseover" event handler for a menuitem.
|
|
* @protected
|
|
* @param {Node} menuItem Node instance representing a menuitem.
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onMenuItemMouseOver: function (menuItem, event) {
|
|
|
|
var menuNav = this,
|
|
oActiveMenu = menuNav._activeMenu,
|
|
bIsRoot = menuNav._isRoot(oActiveMenu),
|
|
bUseAutoSubmenuDisplay =
|
|
(menuNav.get(AUTO_SUBMENU_DISPLAY) && bIsRoot || !bIsRoot);
|
|
|
|
|
|
menuNav._focusItem(menuItem);
|
|
menuNav._setActiveItem(menuItem);
|
|
|
|
|
|
if (bUseAutoSubmenuDisplay && !menuNav._movingToSubmenu) {
|
|
|
|
menuNav._hideAllSubmenus(oActiveMenu);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onMenuItemMouseOut
|
|
* @description "mouseout" event handler for a menuitem.
|
|
* @protected
|
|
* @param {Node} menuItem Node instance representing a menuitem.
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onMenuItemMouseOut: function (menuItem, event) {
|
|
|
|
this._clearActiveItem();
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onVerticalMenuKeyDown
|
|
* @description "keydown" event handler for vertical menus.
|
|
* @protected
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onVerticalMenuKeyDown: function (event) {
|
|
|
|
var menuNav = this,
|
|
oActiveMenu = menuNav._activeMenu,
|
|
oRootMenu = menuNav._rootMenu,
|
|
oTarget = event.target,
|
|
bPreventDefault = false,
|
|
nKeyCode = event.keyCode,
|
|
oSubmenu,
|
|
oParentMenu,
|
|
oLI,
|
|
oItem;
|
|
|
|
|
|
switch (nKeyCode) {
|
|
|
|
case 37: // left arrow
|
|
|
|
oParentMenu = getParentMenu(oActiveMenu);
|
|
|
|
if (oParentMenu && isHorizontalMenu(oParentMenu)) {
|
|
|
|
menuNav._hideMenu(oActiveMenu);
|
|
oLI = getPreviousSibling(oActiveMenu.get(PARENT_NODE));
|
|
oItem = getItem(oLI);
|
|
|
|
if (oItem) {
|
|
|
|
if (isMenuLabel(oItem)) { // Menu label
|
|
|
|
oSubmenu = oItem.next();
|
|
|
|
|
|
if (oSubmenu) {
|
|
|
|
menuNav._showMenu(oSubmenu);
|
|
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
|
}
|
|
else {
|
|
|
|
menuNav._focusItem(oItem);
|
|
menuNav._setActiveItem(oItem);
|
|
|
|
}
|
|
|
|
}
|
|
else { // MenuItem
|
|
|
|
menuNav._focusItem(oItem);
|
|
menuNav._setActiveItem(oItem);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
else if (!menuNav._isRoot(oActiveMenu)) {
|
|
menuNav._hideMenu(oActiveMenu, true);
|
|
}
|
|
|
|
|
|
bPreventDefault = true;
|
|
|
|
break;
|
|
|
|
case 39: // right arrow
|
|
|
|
if (isMenuLabel(oTarget)) {
|
|
|
|
oSubmenu = oTarget.next();
|
|
|
|
if (oSubmenu) {
|
|
|
|
menuNav._showMenu(oSubmenu);
|
|
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
|
}
|
|
|
|
}
|
|
else if (isHorizontalMenu(oRootMenu)) {
|
|
|
|
oSubmenu = menuNav._getTopmostSubmenu(oActiveMenu);
|
|
oLI = getNextSibling(oSubmenu.get(PARENT_NODE));
|
|
oItem = getItem(oLI);
|
|
|
|
menuNav._hideAllSubmenus(oRootMenu);
|
|
|
|
if (oItem) {
|
|
|
|
if (isMenuLabel(oItem)) { // Menu label
|
|
|
|
oSubmenu = oItem.next();
|
|
|
|
if (oSubmenu) {
|
|
|
|
menuNav._showMenu(oSubmenu);
|
|
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
|
}
|
|
else {
|
|
|
|
menuNav._focusItem(oItem);
|
|
menuNav._setActiveItem(oItem);
|
|
|
|
}
|
|
|
|
}
|
|
else { // MenuItem
|
|
|
|
menuNav._focusItem(oItem);
|
|
menuNav._setActiveItem(oItem);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
bPreventDefault = true;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
if (bPreventDefault) {
|
|
|
|
// Prevent the browser from scrolling the window
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onHorizontalMenuKeyDown
|
|
* @description "keydown" event handler for horizontal menus.
|
|
* @protected
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onHorizontalMenuKeyDown: function (event) {
|
|
|
|
var menuNav = this,
|
|
oActiveMenu = menuNav._activeMenu,
|
|
oTarget = event.target,
|
|
oFocusedItem = getItem(oTarget, true),
|
|
bPreventDefault = false,
|
|
nKeyCode = event.keyCode,
|
|
oSubmenu;
|
|
|
|
|
|
if (nKeyCode === 40) {
|
|
|
|
menuNav._hideAllSubmenus(oActiveMenu);
|
|
|
|
if (isMenuLabel(oFocusedItem)) {
|
|
|
|
oSubmenu = oFocusedItem.next();
|
|
|
|
if (oSubmenu) {
|
|
|
|
menuNav._showMenu(oSubmenu);
|
|
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
|
}
|
|
|
|
bPreventDefault = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
if (bPreventDefault) {
|
|
|
|
// Prevent the browser from scrolling the window
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
// Generic DOM Event handlers
|
|
|
|
|
|
/**
|
|
* @method _onMouseMove
|
|
* @description "mousemove" event handler for the menu.
|
|
* @protected
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onMouseMove: function (event) {
|
|
|
|
var menuNav = this;
|
|
|
|
// Using a timer to set the value of the "_currentMouseX" property
|
|
// helps improve the reliability of the calculation used to set the
|
|
// value of the "_movingToSubmenu" property - especially in Opera.
|
|
|
|
later(10, menuNav, function () {
|
|
|
|
menuNav._currentMouseX = event.pageX;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onMouseOver
|
|
* @description "mouseover" event handler for the menu.
|
|
* @protected
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onMouseOver: function (event) {
|
|
|
|
var menuNav = this,
|
|
oTarget,
|
|
oMenu,
|
|
oMenuLabel,
|
|
oParentMenu,
|
|
oMenuItem;
|
|
|
|
|
|
if (menuNav._blockMouseEvent) {
|
|
menuNav._blockMouseEvent = false;
|
|
}
|
|
else {
|
|
|
|
oTarget = event.target;
|
|
oMenu = getMenu(oTarget, true);
|
|
oMenuLabel = getMenuLabel(oTarget, true);
|
|
oMenuItem = getMenuItem(oTarget, true);
|
|
|
|
|
|
if (handleMouseOverForNode(oMenu, oTarget)) {
|
|
|
|
menuNav._onMenuMouseOver(oMenu, event);
|
|
|
|
oMenu[HANDLED_MOUSEOVER] = true;
|
|
oMenu[HANDLED_MOUSEOUT] = false;
|
|
|
|
oParentMenu = getParentMenu(oMenu);
|
|
|
|
if (oParentMenu) {
|
|
|
|
oParentMenu[HANDLED_MOUSEOUT] = true;
|
|
oParentMenu[HANDLED_MOUSEOVER] = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (handleMouseOverForNode(oMenuLabel, oTarget)) {
|
|
|
|
menuNav._onMenuLabelMouseOver(oMenuLabel, event);
|
|
|
|
oMenuLabel[HANDLED_MOUSEOVER] = true;
|
|
oMenuLabel[HANDLED_MOUSEOUT] = false;
|
|
|
|
}
|
|
|
|
if (handleMouseOverForNode(oMenuItem, oTarget)) {
|
|
|
|
menuNav._onMenuItemMouseOver(oMenuItem, event);
|
|
|
|
oMenuItem[HANDLED_MOUSEOVER] = true;
|
|
oMenuItem[HANDLED_MOUSEOUT] = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onMouseOut
|
|
* @description "mouseout" event handler for the menu.
|
|
* @protected
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onMouseOut: function (event) {
|
|
|
|
var menuNav = this,
|
|
oActiveMenu = menuNav._activeMenu,
|
|
bMovingToSubmenu = false,
|
|
oTarget,
|
|
oRelatedTarget,
|
|
oMenu,
|
|
oMenuLabel,
|
|
oSubmenu,
|
|
oMenuItem;
|
|
|
|
|
|
menuNav._movingToSubmenu =
|
|
(oActiveMenu && !isHorizontalMenu(oActiveMenu) &&
|
|
((event.pageX - 5) > menuNav._currentMouseX));
|
|
|
|
oTarget = event.target;
|
|
oRelatedTarget = event.relatedTarget;
|
|
oMenu = getMenu(oTarget, true);
|
|
oMenuLabel = getMenuLabel(oTarget, true);
|
|
oMenuItem = getMenuItem(oTarget, true);
|
|
|
|
|
|
if (handleMouseOutForNode(oMenuLabel, oRelatedTarget)) {
|
|
|
|
menuNav._onMenuLabelMouseOut(oMenuLabel, event);
|
|
|
|
oMenuLabel[HANDLED_MOUSEOUT] = true;
|
|
oMenuLabel[HANDLED_MOUSEOVER] = false;
|
|
|
|
}
|
|
|
|
if (handleMouseOutForNode(oMenuItem, oRelatedTarget)) {
|
|
|
|
menuNav._onMenuItemMouseOut(oMenuItem, event);
|
|
|
|
oMenuItem[HANDLED_MOUSEOUT] = true;
|
|
oMenuItem[HANDLED_MOUSEOVER] = false;
|
|
|
|
}
|
|
|
|
|
|
if (oMenuLabel) {
|
|
|
|
oSubmenu = oMenuLabel.next();
|
|
|
|
if (oSubmenu && oRelatedTarget &&
|
|
(oRelatedTarget.compareTo(oSubmenu) ||
|
|
oSubmenu.contains(oRelatedTarget))) {
|
|
|
|
bMovingToSubmenu = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
if (handleMouseOutForNode(oMenu, oRelatedTarget) || bMovingToSubmenu) {
|
|
|
|
menuNav._onMenuMouseOut(oMenu, event);
|
|
|
|
oMenu[HANDLED_MOUSEOUT] = true;
|
|
oMenu[HANDLED_MOUSEOVER] = false;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _toggleSubmenuDisplay
|
|
* @description "mousedown," "keydown," and "click" event handler for the
|
|
* menu used to toggle the display of a submenu.
|
|
* @protected
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_toggleSubmenuDisplay: function (event) {
|
|
|
|
var menuNav = this,
|
|
oTarget = event.target,
|
|
oMenuLabel = getMenuLabel(oTarget, true),
|
|
sType = event.type,
|
|
oAnchor,
|
|
oSubmenu,
|
|
sHref,
|
|
nHashPos,
|
|
nLen,
|
|
sId;
|
|
|
|
|
|
if (oMenuLabel) {
|
|
|
|
oAnchor = isAnchor(oTarget) ? oTarget : oTarget.ancestor(isAnchor);
|
|
|
|
|
|
if (oAnchor) {
|
|
|
|
// Need to pass "2" as a second argument to "getAttribute" for
|
|
// IE otherwise IE will return a fully qualified URL for the
|
|
// value of the "href" attribute.
|
|
// http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
|
|
|
|
sHref = oAnchor.getAttribute("href", 2);
|
|
nHashPos = sHref.indexOf("#");
|
|
nLen = sHref.length;
|
|
|
|
if (nHashPos === 0 && nLen > 1) {
|
|
|
|
sId = sHref.substr(1, nLen);
|
|
oSubmenu = oMenuLabel.next();
|
|
|
|
if (oSubmenu && (oSubmenu.get(ID) === sId)) {
|
|
|
|
if (sType === MOUSEDOWN || sType === KEYDOWN) {
|
|
|
|
if ((UA.opera || UA.gecko || UA.ie) && sType === KEYDOWN && !menuNav._preventClickHandle) {
|
|
|
|
// Prevent the browser from following the URL of
|
|
// the anchor element
|
|
|
|
menuNav._preventClickHandle = menuNav._rootMenu.on("click", function (event) {
|
|
|
|
event.preventDefault();
|
|
|
|
menuNav._preventClickHandle.detach();
|
|
menuNav._preventClickHandle = null;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (sType == MOUSEDOWN) {
|
|
|
|
// Prevent the target from getting focused by
|
|
// default, since the element to be focused will
|
|
// be determined by weather or not the submenu
|
|
// is visible.
|
|
event.preventDefault();
|
|
|
|
// FocusManager will attempt to focus any
|
|
// descendant that is the target of the mousedown
|
|
// event. Since we want to explicitly control
|
|
// where focus is going, we need to call
|
|
// "stopImmediatePropagation" to stop the
|
|
// FocusManager from doing its thing.
|
|
event.stopImmediatePropagation();
|
|
|
|
// The "_focusItem" method relies on the
|
|
// "_hasFocus" property being set to true. The
|
|
// "_hasFocus" property is normally set via a
|
|
// "focus" event listener, but since we've
|
|
// blocked focus from happening, we need to set
|
|
// this property manually.
|
|
menuNav._hasFocus = true;
|
|
|
|
}
|
|
|
|
|
|
if (menuNav._isRoot(getParentMenu(oTarget))) { // Event target is a submenu label in the root menu
|
|
|
|
// Menu label toggle functionality
|
|
|
|
if (hasVisibleSubmenu(oMenuLabel)) {
|
|
|
|
menuNav._hideMenu(oSubmenu);
|
|
menuNav._focusItem(oMenuLabel);
|
|
menuNav._setActiveItem(oMenuLabel);
|
|
|
|
}
|
|
else {
|
|
|
|
menuNav._hideAllSubmenus(menuNav._rootMenu);
|
|
menuNav._showMenu(oSubmenu);
|
|
|
|
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
|
}
|
|
|
|
}
|
|
else { // Event target is a submenu label within a submenu
|
|
|
|
if (menuNav._activeItem == oMenuLabel) {
|
|
|
|
menuNav._showMenu(oSubmenu);
|
|
menuNav._focusItem(getFirstItem(oSubmenu));
|
|
menuNav._setActiveItem(getFirstItem(oSubmenu));
|
|
|
|
}
|
|
else {
|
|
|
|
if (!oMenuLabel._clickHandle) {
|
|
|
|
oMenuLabel._clickHandle = oMenuLabel.on("click", function () {
|
|
|
|
menuNav._hideAllSubmenus(menuNav._rootMenu);
|
|
|
|
menuNav._hasFocus = false;
|
|
menuNav._clearActiveItem();
|
|
|
|
|
|
oMenuLabel._clickHandle.detach();
|
|
|
|
oMenuLabel._clickHandle = null;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
if (sType === CLICK) {
|
|
|
|
// Prevent the browser from following the URL of
|
|
// the anchor element
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onKeyPress
|
|
* @description "keypress" event handler for the menu.
|
|
* @protected
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onKeyPress: function (event) {
|
|
|
|
switch (event.keyCode) {
|
|
|
|
case 37: // left arrow
|
|
case 38: // up arrow
|
|
case 39: // right arrow
|
|
case 40: // down arrow
|
|
|
|
// Prevent the browser from scrolling the window
|
|
|
|
event.preventDefault();
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* @method _onKeyDown
|
|
* @description "keydown" event handler for the menu.
|
|
* @protected
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onKeyDown: function (event) {
|
|
|
|
var menuNav = this,
|
|
oActiveItem = menuNav._activeItem,
|
|
oTarget = event.target,
|
|
oActiveMenu = getParentMenu(oTarget),
|
|
oSubmenu;
|
|
|
|
if (oActiveMenu) {
|
|
|
|
menuNav._activeMenu = oActiveMenu;
|
|
|
|
if (isHorizontalMenu(oActiveMenu)) {
|
|
menuNav._onHorizontalMenuKeyDown(event);
|
|
}
|
|
else {
|
|
menuNav._onVerticalMenuKeyDown(event);
|
|
}
|
|
|
|
|
|
if (event.keyCode === 27) {
|
|
|
|
if (!menuNav._isRoot(oActiveMenu)) {
|
|
|
|
if (UA.opera) {
|
|
later(0, menuNav, function () {
|
|
menuNav._hideMenu(oActiveMenu, true);
|
|
});
|
|
}
|
|
else {
|
|
menuNav._hideMenu(oActiveMenu, true);
|
|
}
|
|
|
|
event.stopPropagation();
|
|
menuNav._blockMouseEvent = UA.gecko ? true : false;
|
|
|
|
}
|
|
else if (oActiveItem) {
|
|
|
|
if (isMenuLabel(oActiveItem) &&
|
|
hasVisibleSubmenu(oActiveItem)) {
|
|
|
|
oSubmenu = oActiveItem.next();
|
|
|
|
if (oSubmenu) {
|
|
menuNav._hideMenu(oSubmenu);
|
|
}
|
|
|
|
}
|
|
else {
|
|
|
|
menuNav._focusManager.blur();
|
|
|
|
// This is necessary for Webkit since blurring the
|
|
// active menuitem won't result in the document
|
|
// gaining focus, meaning the that _onDocFocus
|
|
// listener won't clear the active menuitem.
|
|
|
|
menuNav._clearActiveItem();
|
|
|
|
menuNav._hasFocus = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* @method _onDocMouseDown
|
|
* @description "mousedown" event handler for the owner document of
|
|
* the menu.
|
|
* @protected
|
|
* @param {Object} event Object representing the DOM event.
|
|
*/
|
|
_onDocMouseDown: function (event) {
|
|
|
|
var menuNav = this,
|
|
oRoot = menuNav._rootMenu,
|
|
oTarget = event.target;
|
|
|
|
|
|
if (!(oRoot.compareTo(oTarget) || oRoot.contains(oTarget))) {
|
|
|
|
menuNav._hideAllSubmenus(oRoot);
|
|
|
|
// Document doesn't receive focus in Webkit when the user mouses
|
|
// down on it, so the "_hasFocus" property won't get set to the
|
|
// correct value. The following line corrects the problem.
|
|
|
|
if (UA.webkit) {
|
|
menuNav._hasFocus = false;
|
|
menuNav._clearActiveItem();
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
Y.namespace('Plugin');
|
|
|
|
Y.Plugin.NodeMenuNav = NodeMenuNav;
|
|
|
|
|
|
}, '3.17.2', {"requires": ["node", "classnamemanager", "plugin", "node-focusmanager"], "skinnable": true});
|
|
|