AutorÃa | Ultima modificación | Ver Log |
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 shortcutsvar UA = Y.UA,later = Y.later,getClassName = Y.ClassNameManager.getClassName,// Frequently used stringsMENU = "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 keysAUTO_SUBMENU_DISPLAY = "autoSubmenuDisplay",MOUSEOUT_HIDE_DELAY = "mouseOutHideDelay",// CSS class namesCSS_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 selectorsMENU_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 functionsvar 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 methodsinitializer: function (config) {var menuNav = this,oRootMenu = this.get(HOST),aHandlers = [],oDoc;Y.log("WARNING: Node-MenuNav is a deprecated module as of YUI 3.9.0. This module will be removed from a later version of the library.", "warn");if (oRootMenu) {menuNav._rootMenu = oRootMenu;oRootMenu.all("ul:first-child").addClass(FIRST_OF_TYPE);// Hide all visible submenusoRootMenu.all(MENU_SELECTOR).addClass(CSS_MENU_HIDDEN);// Wire up all event handlersaHandlers.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 widthmenu.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 focusif (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 descendantmenuNav._hasFocus = true;oActiveItem = getItem(oTarget, true);if (oActiveItem) {menuNav._setActiveItem(oActiveItem);}}}else { // The menu has lost focusmenuNav._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 focusif (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 submenuoSubmenu = 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 arrowoParentMenu = getParentMenu(oActiveMenu);if (oParentMenu && isHorizontalMenu(oParentMenu)) {menuNav._hideMenu(oActiveMenu);oLI = getPreviousSibling(oActiveMenu.get(PARENT_NODE));oItem = getItem(oLI);if (oItem) {if (isMenuLabel(oItem)) { // Menu labeloSubmenu = oItem.next();if (oSubmenu) {menuNav._showMenu(oSubmenu);menuNav._focusItem(getFirstItem(oSubmenu));menuNav._setActiveItem(getFirstItem(oSubmenu));}else {menuNav._focusItem(oItem);menuNav._setActiveItem(oItem);}}else { // MenuItemmenuNav._focusItem(oItem);menuNav._setActiveItem(oItem);}}}else if (!menuNav._isRoot(oActiveMenu)) {menuNav._hideMenu(oActiveMenu, true);}bPreventDefault = true;break;case 39: // right arrowif (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 labeloSubmenu = oItem.next();if (oSubmenu) {menuNav._showMenu(oSubmenu);menuNav._focusItem(getFirstItem(oSubmenu));menuNav._setActiveItem(getFirstItem(oSubmenu));}else {menuNav._focusItem(oItem);menuNav._setActiveItem(oItem);}}else { // MenuItemmenuNav._focusItem(oItem);menuNav._setActiveItem(oItem);}}}bPreventDefault = true;break;}if (bPreventDefault) {// Prevent the browser from scrolling the windowevent.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 windowevent.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).aspxsHref = 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 elementmenuNav._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 functionalityif (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 submenuif (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 elementevent.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 arrowcase 38: // up arrowcase 39: // right arrowcase 40: // down arrow// Prevent the browser from scrolling the windowevent.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.18.1', {"requires": ["node", "classnamemanager", "plugin", "node-focusmanager"], "skinnable": true});