node-menunav-debug.js revision 9a2430d08e4d1b8b870cd3ba6c17ffc7881d16a6
/**
* <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, while only requiring
* 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>
*
* <code>
* var oMenuNav = Y.Node.get("#productsandservices");<br>
* oMenuNav.plug(Y.Plugin.NodeMenuNav);
* </code>
*
* <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>
*
* <code>
* var oMenuNav = Y.Node.get("#productsandservices");<br>
* oMenuNav.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: true });
* </code>
*
* <p> The complete list of The MenuNav Node Plugin configuration properties are:</p>
* <dl>
* <dt>useARIA</dt>
* <dd>Boolean indicating if use of the WAI-ARIA Roles and States should be enabled for the
* MenuNav. Set to true by default for Firefox 3 and Internet Explorer 8 as currently only
* these browsers have support for ARIA, and are supported by several screen readers for
* Windows that also offer support for ARIA.</dd>
*
* <dt>autoSubmenuDisplay</dt>
* <dd>Boolean indicating if submenus are automatically made visible when the user mouses over
* the menu's items. Set to true by default.</dd>
*
* <dt>submenuShowDelay</dt>
* <dd>Number indicating the time (in milliseconds) that should expire before a submenu is
* made visible when the user mouses over the menu's label. Set to 250 by default.</dd>
*
* <dt>submenuHideDelay</dt>
* <dd>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.
* Set to 250 by default.</dd>
*
* <dt>mouseOutHideDelay</dt>
* <dd>Number indicating the time (in milliseconds) that should expire before a submenu is
* hidden when the user mouses out of it. Set to 750 by default.</dd>
* </dl>
*
* @module nodemenunav
*/
// Util shortcuts
// Native types
TRUE = true,
FALSE = false,
NULL = null,
// Frequently used strings
MENU = "menu",
MENUITEM = "menuitem",
HIDDEN = "hidden",
TAB_INDEX = "tabIndex",
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",
// CSS class names
// CSS selectors
// Utility functions
// TO DO: Remove once Node implements circular functionality
var getPreviousSibling = function (node) {
if (!oPrevious) {
}
return oPrevious;
};
// TO DO: Remove once Node implements circular functionality
var getNextSibling = function (node) {
if (!oNext) {
}
return oNext;
};
};
};
var setARIAPresentation = function (node) {
};
var removeFromTabIndex = function (node) {
};
var placeInDefaultTabIndex = function (node) {
};
var bReturnVal = FALSE;
if (node) {
}
return bReturnVal;
};
var isMenuItem = function (node) {
};
var isMenuLabel = function (node) {
};
var isHorizontalMenu = function (menu) {
};
var hasVisibleSubmenu = function (menuLabel) {
};
var getItemAnchor = function (node) {
};
var oItem;
if (node) {
}
if (!oItem && searchAncestors) {
}
}
return oItem;
};
var getParentMenu = function (node) {
};
};
var oItem;
if (node) {
}
return oItem;
};
var oItem;
if (node) {
if (searchAncestors) {
}
else {
}
}
return oItem;
};
var oItem;
if (node) {
}
return oItem;
};
var oItemLI,
if (item) {
}
return oNextItem;
};
var getPreviousItem = function (item) {
return getNextItem(item, true);
};
var getFirstItem = function (menu) {
};
var getActiveClass = function (node) {
};
// TO DO: Remove once implemented in Node
try {
}
catch (ex) { }
};
// TO DO: Remove once implemented in Node
try {
}
catch (ex) { }
};
};
};
var menuNav = this,
sID,
oULs;
if (oRootMenu) {
// Enable ARIA for Firefox 3 and IE 8 by default since those are the two browsers
// that current support ARIA
// Hide all visible submenus
if (oMenuNodes) {
}
if (oULs) {
}
// Wire up all event handlers
if (oListNodes) {
});
}
if (oMenuItemContentNodes) {
});
}
if (oMenuLabelNodes) {
oMenuLabel = node;
if (oMenuToggle) {
}
if (!sID) {
}
});
}
if (oFirstItem) {
}
}
}
};
/**
* @property Y.Plugin.NodeMenuNav.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.
* @default null
* @type String
*/
// 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.
getClassName("shim") +
'" title="Menu Stacking Shim" src="javascript:false;"></iframe>';
// Protected properties
/**
* @property _rootMenu
* @description Node instance representing the root menu in the MenuNav.
* @default null
* @protected
* @type Node
*/
/**
* @property _activeItem
* @description Node instance representing the MenuNav's active descendent - the menuitem or
* menu label the user is currently interacting with.
* @default null
* @protected
* @type Node
*/
/**
* @property _activeMenu
* @description Node instance representing the menu that is the parent of the MenuNav's
* active descendent.
* @default null
* @protected
* @type Node
*/
/**
* @property _hasFocus
* @description Boolean indicating if the MenuNav has focus.
* @default false
* @protected
* @type Boolean
*/
// 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 MenuNav 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
*/
/**
* @property _currentMouseX
* @description Number representing the current x coordinate of the mouse inside the MenuNav.
* @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
*/
/**
* @property _showSubmenuTimer
* @description Timer used to show a submenu.
* @default null
* @protected
* @type Object
*/
/**
* @property _hideSubmenuTimer
* @description Timer used to hide a submenu.
* @default null
* @protected
* @type Object
*/
/**
* @property _hideAllSubmenusTimer
* @description Timer used to hide a all submenus.
* @default null
* @protected
* @type Object
*/
/**
* @property _firstItem
* @description Node instance representing the first item (menuitem or menu label) in the root
* menu of a MenuNav.
* @default null
* @protected
* @type Node
*/
/**
* @property _autoSubmenuDisplay
* @description Boolean indicating if submenus are automatically made visible when the user
* mouses over the menu's items.
* @default true
* @protected
* @type Boolean
*/
// Protected methods
/**
* @method _isRoot
* @description Returns a boolean indicating if the specified menu is the root menu in
* the MenuNav.
* @protected
* @param {Node} menu Node instance representing a menu.
* @return {Boolean} Boolean indicating if the specified menu is the root menu in the MenuNav.
*/
},
/**
* @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,
if (!oMenu) {
}
}
else {
}
return returnVal;
},
/**
* @method _clearActiveItem
* @description Clears the MenuNav's active descendent.
* @protected
*/
_clearActiveItem: function () {
var menuNav = this,
if (oActiveItem) {
}
}
},
/**
* @method _setActiveItem
* @description Sets the specified menuitem or menu label as the MenuNav's active descendent.
* @protected
* @param {Node} item Node instance representing a menuitem or menu label.
*/
_setActiveItem: function (item) {
var menuNav = this;
}
},
/**
* @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) {
if (this._hasFocus) {
// Need to focus using a zero-second timeout to get Apple's VoiceOver to
// recognize that the focused item has changed
}
},
/**
* @method _showMenu
* @description Shows the specified menu.
* @protected
* @param {Node} menu Node instance representing a menu.
*/
var menuNav = this,
if (isHorizontalMenu(oParentMenu)) {
}
else {
}
}
// Clear previous values for height and width
// 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.
}
}
},
/**
* @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.
*/
var menuNav = this,
if (activateAndFocusLabel) {
}
if (oActiveItem) {
}
// 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.
},
/**
* @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,
if (oSubmenus) {
}, menuNav));
}
},
/**
* @method _cancelShowSubmenuTimer
* @description Cancels the timer used to show a submenu.
* @protected
*/
_cancelShowSubmenuTimer: function () {
var menuNav = this,
if (oShowSubmenuTimer) {
}
},
/**
* @method _cancelHideSubmenuTimer
* @description Cancels the timer used to hide a submenu.
* @protected
*/
_cancelHideSubmenuTimer: function () {
var menuNav = this,
if (oHideSubmenuTimer) {
}
},
// Event handlers for discrete pieces of pieces of the menu
/**
* @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.
*/
var menuNav = this,
if (oHideAllSubmenusTimer) {
}
}
},
/**
* @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.
*/
var menuNav = this,
var oSubmenu;
if (oActiveMenu) {
// Focus the label element for the topmost submenu
}
});
}
}
else {
if (oActiveItem) {
}
}
}
}
},
/**
* @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.
*/
var menuNav = this,
if (!hasVisibleSubmenu(menuLabel)) {
if (oSubmenu) {
}
}
}
},
/**
* @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.
*/
var menuNav = this,
if (bUseAutoSubmenuDisplay) {
// 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.
}
// 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.
}
}
},
/**
* @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.
*/
var menuNav = this,
}
},
/**
* @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.
*/
this._clearActiveItem();
},
/**
* @method _onVerticalMenuKeyDown
* @description "keydown" event handler for vertical menus of a MenuNav.
* @protected
* @param {Object} event Object representing the DOM event.
*/
_onVerticalMenuKeyDown: function (event) {
var menuNav = this,
oLI,
switch (nKeyCode) {
case 37: // left arrow
if (oItem) {
if (oSubmenu) {
}
}
else { // MenuItem
}
}
}
}
break;
case 39: // right arrow
if (isMenuLabel(oTarget)) {
if (oSubmenu) {
}
}
else if (isHorizontalMenu(oRootMenu)) {
if (oItem) {
if (oSubmenu) {
}
}
else { // MenuItem
}
}
}
break;
case 38: // up arrow
case 40: // down arrow
break;
}
if (bPreventDefault) {
// Prevent the browser from scrolling the window
}
},
/**
* @method _onHorizontalMenuKeyDown
* @description "keydown" event handler for horizontal menus of a MenuNav.
* @protected
* @param {Object} event Object representing the DOM event.
*/
_onHorizontalMenuKeyDown: function (event) {
var menuNav = this,
switch (nKeyCode) {
case 37: // left arrow
case 39: // right arrow
break;
case 40: // down arrow
if (isMenuLabel(oFocusedItem)) {
if (oSubmenu) {
}
}
break;
}
if (bPreventDefault) {
// Prevent the browser from scrolling the window
}
},
// Generic DOM Event handlers
/**
* @method _onMouseMove
* @description "mousemove" event handler for the MenuNav.
* @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.
});
},
/**
* @method _onMouseOver
* @description "mouseover" event handler for the MenuNav.
* @protected
* @param {Object} event Object representing the DOM event.
*/
_onMouseOver: function (event) {
var menuNav = this,
if (menuNav._blockMouseEvent) {
}
else {
if (oParentMenu) {
}
}
}
}
}
},
/**
* @method _onMouseOut
* @description "mouseout" event handler for the MenuNav.
* @protected
* @param {Object} event Object representing the DOM event.
*/
_onMouseOut: function (event) {
var menuNav = this,
}
}
if (oMenuLabel) {
}
}
}
},
/**
* @method _toggleSubmenuDisplay
* @description "mousedown," "keydown," and "click" event handler for the MenuNav used to
* toggle the display of a submenu.
* @protected
* @param {Object} event Object representing the DOM event.
*/
_toggleSubmenuDisplay: function (event) {
var menuNav = this,
nLen,
sId;
if (oMenuLabel) {
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
// The call to "preventDefault" below results in the element
// serving as the menu's label to not receive focus in Webkit,
// therefore the "_hasFocus" flag never gets set to true, meaning the
// first item in the submenu isn't focused when the submenu is
// displayed. To fix this issue, it is necessary to set the
// "_hasFocus" flag to true.
}
if (hasVisibleSubmenu(oMenuLabel)) {
}
else {
}
}
// Prevent the browser from following the URL of the anchor element
}
}
}
}
}
},
/**
* @method _onKeyPress
* @description "keypress" event handler for the MenuNav.
* @protected
* @param {Object} event Object representing the DOM event.
*/
_onKeyPress: function (event) {
case 37: // left arrow
case 38: // up arrow
case 39: // right arrow
case 40: // down arrow
// Prevent the browser from scrolling the window
break;
}
},
/**
* @method _onKeyDown
* @description "keydown" event handler for the MenuNav.
* @protected
* @param {Object} event Object representing the DOM event.
*/
_onKeyDown: function (event) {
var menuNav = this,
if (oActiveMenu) {
if (isHorizontalMenu(oActiveMenu)) {
}
else {
}
}
else if (oActiveItem) {
}
}
}
},
/**
* @method _onDocMouseDown
* @description "mousedown" event handler for the owner document of the MenuNav.
* @protected
* @param {Object} event Object representing the DOM event.
*/
_onDocMouseDown: function (event) {
var menuNav = this,
// 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.
}
}
},
/**
* @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,
// First time the menu has been focused, need to setup focused state and
// established active active descendant
if (oActiveItem) {
}
}
}
else { // The menu has lost focus
if (oFirstItem && bUseARIA) {
}
}
}
};
Y.namespace('Plugin');