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