The Menu family of components features a collection of * controls that make it easy to add menus to your website or web application. * With the Menu Controls you can create website fly-out menus, customized * context menus, or application-style menu bars with just a small amount of * scripting.
The Menu family of controls features:
*<div> element of the menu.
* @param {String} p_oElement String specifying the id attribute of the
* <select> element to be used as the data source
* for the menu.
* @param {HTMLDivElement} p_oElement Object
* specifying the <div> element of the menu.
* @param {HTMLSelectElement} p_oElement
* Object specifying the <select> element to be used as
* the data source for the menu.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the menu. See configuration class documentation for
* more details.
* @namespace YAHOO.widget
* @class Menu
* @constructor
* @extends YAHOO.widget.Overlay
*/
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
Lang = YAHOO.lang;
YAHOO.widget.Menu = function(p_oElement, p_oConfig) {
if(p_oConfig) {
this.parent = p_oConfig.parent;
this.lazyLoad = p_oConfig.lazyLoad || p_oConfig.lazyload;
this.itemData = p_oConfig.itemData || p_oConfig.itemdata;
}
YAHOO.widget.Menu.superclass.constructor.call(
this,
p_oElement,
p_oConfig
);
};
YAHOO.lang.extend(YAHOO.widget.Menu, YAHOO.widget.Overlay, {
// Constants
/**
* @property CSS_CLASS_NAME
* @description String representing the CSS class(es) to be applied to the
* menu's <div> element.
* @default "yuimenu"
* @final
* @type String
*/
CSS_CLASS_NAME: "yuimenu",
/**
* @property ITEM_TYPE
* @description Object representing the type of menu item to instantiate and
* add when parsing the child nodes (either <li> element,
* <optgroup> element or <option>)
* of the menu's source HTML element.
* @default YAHOO.widget.MenuItem
* @final
* @type YAHOO.widget.MenuItem
*/
ITEM_TYPE: null,
/**
* @property GROUP_TITLE_TAG_NAME
* @description String representing the tagname of the HTML element used to
* title the menu's item groups.
* @default H6
* @final
* @type String
*/
GROUP_TITLE_TAG_NAME: "h6",
// Private properties
/**
* @property _nHideDelayId
* @description Number representing the time-out setting used to cancel the
* hiding of a menu.
* @default null
* @private
* @type Number
*/
_nHideDelayId: null,
/**
* @property _nShowDelayId
* @description Number representing the time-out setting used to cancel the
* showing of a menu.
* @default null
* @private
* @type Number
*/
_nShowDelayId: null,
/**
* @property _nSubmenuHideDelayId
* @description Number representing the time-out setting used to cancel the
* hiding of a submenu.
* @default null
* @private
* @type Number
*/
_nSubmenuHideDelayId: null,
/**
* @property _nBodyScrollId
* @description Number representing the time-out setting used to cancel the
* scrolling of the menu's body element.
* @default null
* @private
* @type Number
*/
_nBodyScrollId: null,
/**
* @property _bHideDelayEventHandlersAssigned
* @description Boolean indicating if the "mouseover" and "mouseout" event
* handlers used for hiding the menu via a call to "window.setTimeout" have
* already been assigned.
* @default false
* @private
* @type Boolean
*/
_bHideDelayEventHandlersAssigned: false,
/**
* @property _bHandledMouseOverEvent
* @description Boolean indicating the current state of the menu's
* "mouseover" event.
* @default false
* @private
* @type Boolean
*/
_bHandledMouseOverEvent: false,
/**
* @property _bHandledMouseOutEvent
* @description Boolean indicating the current state of the menu's
* "mouseout" event.
* @default false
* @private
* @type Boolean
*/
_bHandledMouseOutEvent: false,
/**
* @property _aGroupTitleElements
* @description Array of HTML element used to title groups of menu items.
* @default []
* @private
* @type Array
*/
_aGroupTitleElements: null,
/**
* @property _aItemGroups
* @description Multi-dimensional Array representing the menu items as they
* are grouped in the menu.
* @default []
* @private
* @type Array
*/
_aItemGroups: null,
/**
* @property _aListElements
* @description Array of <ul> elements, each of which is
* the parent node for each item's <li> element.
* @default []
* @private
* @type Array
*/
_aListElements: null,
/**
* @property _nCurrentMouseX
* @description The current x coordinate of the mouse inside the area of
* the menu.
* @default 0
* @private
* @type Number
*/
_nCurrentMouseX: 0,
/**
* @property _nMaxHeight
* @description The original value of the "maxheight" configuration property
* as set by the user.
* @default -1
* @private
* @type Number
*/
_nMaxHeight: -1,
/**
* @property _bStopMouseEventHandlers
* @description Stops "mouseover," "mouseout," and "mousemove" event handlers
* from executing.
* @default false
* @private
* @type Boolean
*/
_bStopMouseEventHandlers: false,
/**
* @property _sClassName
* @description The current value of the "classname" configuration attribute.
* @default null
* @private
* @type String
*/
_sClassName: null,
// Public properties
/**
* @property lazyLoad
* @description Boolean indicating if the menu's "lazy load" feature is
* enabled. If set to "true," initialization and rendering of the menu's
* items will be deferred until the first time it is made visible. This
* property should be set via the constructor using the configuration
* object literal.
* @default false
* @type Boolean
*/
lazyLoad: false,
/**
* @property itemData
* @description Array of items to be added to the menu. The array can contain
* strings representing the text for each item to be created, object literals
* representing the menu item configuration properties, or MenuItem instances.
* This property should be set via the constructor using the configuration
* object literal.
* @default null
* @type Array
*/
itemData: null,
/**
* @property activeItem
* @description Object reference to the item in the menu that has focus.
* @default null
* @type YAHOO.widget.MenuItem
*/
activeItem: null,
/**
* @property parent
* @description Object reference to the menu's parent menu or menu item.
* This property can be set via the constructor using the configuration
* object literal.
* @default null
* @type YAHOO.widget.MenuItem
*/
parent: null,
/**
* @property srcElement
* @description Object reference to the HTML element (either
* <select> or <div>) used to
* create the menu.
* @default null
* @type HTMLSelectElement|HTMLDivElement
*/
srcElement: null,
// Events
/**
* @event mouseOverEvent
* @description Fires when the mouse has entered the menu. Passes back
* the DOM Event object as an argument.
*/
mouseOverEvent: null,
/**
* @event mouseOutEvent
* @description Fires when the mouse has left the menu. Passes back the DOM
* Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
mouseOutEvent: null,
/**
* @event mouseDownEvent
* @description Fires when the user mouses down on the menu. Passes back the
* DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
mouseDownEvent: null,
/**
* @event mouseUpEvent
* @description Fires when the user releases a mouse button while the mouse is
* over the menu. Passes back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
mouseUpEvent: null,
/**
* @event clickEvent
* @description Fires when the user clicks the on the menu. Passes back the
* DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
clickEvent: null,
/**
* @event keyPressEvent
* @description Fires when the user presses an alphanumeric key when one of the
* menu's items has focus. Passes back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
keyPressEvent: null,
/**
* @event keyDownEvent
* @description Fires when the user presses a key when one of the menu's items
* has focus. Passes back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
keyDownEvent: null,
/**
* @event keyUpEvent
* @description Fires when the user releases a key when one of the menu's items
* has focus. Passes back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
keyUpEvent: null,
/**
* @event itemAddedEvent
* @description Fires when an item is added to the menu.
* @type YAHOO.util.CustomEvent
*/
itemAddedEvent: null,
/**
* @event itemRemovedEvent
* @description Fires when an item is removed to the menu.
* @type YAHOO.util.CustomEvent
*/
itemRemovedEvent: null,
/**
* @method init
* @description The Menu class's initialization method. This method is
* automatically called by the constructor, and sets up all DOM references
* for pre-existing markup, and creates required markup if it is not
* already present.
* @param {String} p_oElement String specifying the id attribute of the
* <div> element of the menu.
* @param {String} p_oElement String specifying the id attribute of the
* <select> element to be used as the data source
* for the menu.
* @param {HTMLDivElement} p_oElement Object
* specifying the <div> element of the menu.
* @param {HTMLSelectElement} p_oElement
* Object specifying the <select> element to be used as
* the data source for the menu.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the menu. See configuration class documentation for
* more details.
*/
init: function(p_oElement, p_oConfig) {
this._aItemGroups = [];
this._aListElements = [];
this._aGroupTitleElements = [];
if(!this.ITEM_TYPE) {
this.ITEM_TYPE = YAHOO.widget.MenuItem;
}
var oElement;
if(typeof p_oElement == "string") {
oElement = document.getElementById(p_oElement);
}
else if(p_oElement.tagName) {
oElement = p_oElement;
}
if(oElement && oElement.tagName) {
switch(oElement.tagName.toUpperCase()) {
case "DIV":
this.srcElement = oElement;
if(!oElement.id) {
oElement.setAttribute("id", Dom.generateId());
}
/*
Note: we don't pass the user config in here yet
because we only want it executed once, at the lowest
subclass level.
*/
YAHOO.widget.Menu.superclass.init.call(this, oElement);
this.beforeInitEvent.fire(YAHOO.widget.Menu);
break;
case "SELECT":
this.srcElement = oElement;
/*
The source element is not something that we can use
outright, so we need to create a new Overlay
Note: we don't pass the user config in here yet
because we only want it executed once, at the lowest
subclass level.
*/
YAHOO.widget.Menu.superclass.init.call(this, Dom.generateId());
this.beforeInitEvent.fire(YAHOO.widget.Menu);
break;
}
}
else {
/*
Note: we don't pass the user config in here yet
because we only want it executed once, at the lowest
subclass level.
*/
YAHOO.widget.Menu.superclass.init.call(this, p_oElement);
this.beforeInitEvent.fire(YAHOO.widget.Menu);
}
if(this.element) {
var oEl = this.element;
Dom.addClass(oEl, this.CSS_CLASS_NAME);
// Subscribe to Custom Events
this.initEvent.subscribe(this._onInit, this, true);
this.beforeRenderEvent.subscribe(this._onBeforeRender, this, true);
this.renderEvent.subscribe(this._setWidth, this, true);
this.beforeShowEvent.subscribe(this._onBeforeShow, this, true);
this.showEvent.subscribe(this._onShow, this, true);
this.beforeHideEvent.subscribe(this._onBeforeHide, this, true);
this.hideEvent.subscribe(this._onHide, this, true);
this.mouseOverEvent.subscribe(this._onMouseOver, this, true);
this.mouseOutEvent.subscribe(this._onMouseOut, this, true);
this.clickEvent.subscribe(this._onClick, this, true);
this.keyDownEvent.subscribe(this._onKeyDown, this, true);
this.keyPressEvent.subscribe(this._onKeyPress, this, true);
YAHOO.widget.Module.textResizeEvent.subscribe(
this._onTextResize,
this,
true
);
if(p_oConfig) {
this.cfg.applyConfig(p_oConfig, true);
}
// Register the Menu instance with the MenuManager
YAHOO.widget.MenuManager.addMenu(this);
this.initEvent.fire(YAHOO.widget.Menu);
}
},
// Private methods
/**
* @method _initSubTree
* @description Iterates the childNodes of the source element to find nodes
* used to instantiate menu and menu items.
* @private
*/
_initSubTree: function() {
var oNode;
if(this.srcElement.tagName.toUpperCase() == "DIV") {
/*
Populate the collection of item groups and item
group titles
*/
oNode = this.body.firstChild;
var nGroup = 0,
sGroupTitleTagName = this.GROUP_TITLE_TAG_NAME.toUpperCase();
do {
if(oNode && oNode.tagName) {
switch(oNode.tagName.toUpperCase()) {
case sGroupTitleTagName:
this._aGroupTitleElements[nGroup] = oNode;
break;
case "UL":
this._aListElements[nGroup] = oNode;
this._aItemGroups[nGroup] = [];
nGroup++;
break;
}
}
}
while((oNode = oNode.nextSibling));
/*
Apply the "first-of-type" class to the first UL to mimic
the "first-of-type" CSS3 psuedo class.
*/
if(this._aListElements[0]) {
Dom.addClass(this._aListElements[0], "first-of-type");
}
}
oNode = null;
if(this.srcElement.tagName) {
var sSrcElementTagName = this.srcElement.tagName.toUpperCase();
switch(sSrcElementTagName) {
case "DIV":
if(this._aListElements.length > 0) {
var i = this._aListElements.length - 1;
do {
oNode = this._aListElements[i].firstChild;
do {
if(
oNode &&
oNode.tagName &&
oNode.tagName.toUpperCase() == "LI"
) {
this.addItem(
new this.ITEM_TYPE(
oNode,
{ parent: this }
),
i
);
}
}
while((oNode = oNode.nextSibling));
}
while(i--);
}
break;
case "SELECT":
oNode = this.srcElement.firstChild;
do {
if(oNode && oNode.tagName) {
switch(oNode.tagName.toUpperCase()) {
case "OPTGROUP":
case "OPTION":
this.addItem(
new this.ITEM_TYPE(
oNode,
{ parent: this }
)
);
break;
}
}
}
while((oNode = oNode.nextSibling));
break;
}
}
},
/**
* @method _getFirstEnabledItem
* @description Returns the first enabled item in the menu.
* @return {YAHOO.widget.MenuItem}
* @private
*/
_getFirstEnabledItem: function() {
var aItems = this.getItems(),
nItems = aItems.length,
oItem;
for(var i=0; i<ul> element. Returns an aray of menu item groups.
* @private
* @param {Number} p_nIndex Number indicating the group to create.
* @return {Array}
*/
_createItemGroup: function(p_nIndex) {
if(!this._aItemGroups[p_nIndex]) {
this._aItemGroups[p_nIndex] = [];
var oUL = document.createElement("ul");
this._aListElements[p_nIndex] = oUL;
return this._aItemGroups[p_nIndex];
}
},
/**
* @method _getItemGroup
* @description Returns the menu item group at the specified index.
* @private
* @param {Number} p_nIndex Number indicating the index of the menu item group
* to be retrieved.
* @return {Array}
*/
_getItemGroup: function(p_nIndex) {
var nIndex = ((typeof p_nIndex == "number") ? p_nIndex : 0);
return this._aItemGroups[nIndex];
},
/**
* @method _configureSubmenu
* @description Subscribes the menu item's submenu to its parent menu's events.
* @private
* @param {YAHOO.widget.MenuItem} p_oItem Object reference for the MenuItem
* instance with the submenu to be configured.
*/
_configureSubmenu: function(p_oItem) {
var oSubmenu = p_oItem.cfg.getProperty("submenu");
if(oSubmenu) {
/*
Listen for configuration changes to the parent menu
so they they can be applied to the submenu.
*/
this.cfg.configChangedEvent.subscribe(
this._onParentMenuConfigChange,
oSubmenu,
true
);
this.renderEvent.subscribe(
this._onParentMenuRender,
oSubmenu,
true
);
oSubmenu.beforeShowEvent.subscribe(
this._onSubmenuBeforeShow,
oSubmenu,
true
);
oSubmenu.showEvent.subscribe(
this._onSubmenuShow,
oSubmenu,
true
);
oSubmenu.hideEvent.subscribe(
this._onSubmenuHide,
oSubmenu,
true
);
}
},
/**
* @method _subscribeToItemEvents
* @description Subscribes a menu to a menu item's event.
* @private
* @param {YAHOO.widget.MenuItem} p_oItem Object reference for the MenuItem
* instance whose events should be subscribed to.
*/
_subscribeToItemEvents: function(p_oItem) {
p_oItem.focusEvent.subscribe(this._onMenuItemFocus, p_oItem, this);
p_oItem.blurEvent.subscribe(this._onMenuItemBlur, this, true);
p_oItem.cfg.configChangedEvent.subscribe(
this._onMenuItemConfigChange,
p_oItem,
this
);
},
/**
* @method _getOffsetWidth
* @description Returns the offset width of the menu's
* <div> element.
* @private
*/
_getOffsetWidth: function() {
var oClone = this.element.cloneNode(true);
Dom.setStyle(oClone, "width", "");
document.body.appendChild(oClone);
var sWidth = oClone.offsetWidth;
document.body.removeChild(oClone);
return sWidth;
},
/**
* @method _setWidth
* @description Sets the width of the menu's root <div>
* element to its offsetWidth.
* @private
*/
_setWidth: function() {
if(this.cfg.getProperty("position") == "dynamic") {
var sWidth;
if(this.element.parentNode.tagName.toUpperCase() == "BODY") {
if(this.browser == "opera") {
sWidth = this._getOffsetWidth();
}
else {
Dom.setStyle(this.element, "width", "auto");
sWidth = this.element.offsetWidth;
}
}
else {
sWidth = this._getOffsetWidth();
}
this.cfg.setProperty("width", (sWidth + "px"));
}
},
/**
* @method _cancelHideDelay
* @description Cancels the call to "hideMenu."
* @private
*/
_cancelHideDelay: function() {
var oRoot = this.getRoot();
if(oRoot._nHideDelayId) {
window.clearTimeout(oRoot._nHideDelayId);
}
},
/**
* @method _execHideDelay
* @description Hides the menu after the number of milliseconds specified by
* the "hidedelay" configuration property.
* @private
*/
_execHideDelay: function() {
this._cancelHideDelay();
var oRoot = this.getRoot(),
me = this;
function hideMenu() {
if(oRoot.activeItem) {
oRoot.clearActiveItem();
}
if(oRoot == me && me.cfg.getProperty("position") == "dynamic") {
me.hide();
}
}
oRoot._nHideDelayId =
window.setTimeout(hideMenu, oRoot.cfg.getProperty("hidedelay"));
},
/**
* @method _cancelShowDelay
* @description Cancels the call to the "showMenu."
* @private
*/
_cancelShowDelay: function() {
var oRoot = this.getRoot();
if(oRoot._nShowDelayId) {
window.clearTimeout(oRoot._nShowDelayId);
}
},
/**
* @method _execShowDelay
* @description Shows the menu after the number of milliseconds specified by
* the "showdelay" configuration property have ellapsed.
* @private
* @param {YAHOO.widget.Menu} p_oMenu Object specifying the menu that should
* be made visible.
*/
_execShowDelay: function(p_oMenu) {
var oRoot = this.getRoot();
function showMenu() {
if(p_oMenu.parent.cfg.getProperty("selected")) {
p_oMenu.show();
}
}
oRoot._nShowDelayId =
window.setTimeout(showMenu, oRoot.cfg.getProperty("showdelay"));
},
/**
* @method _execSubmenuHideDelay
* @description Hides a submenu after the number of milliseconds specified by
* the "submenuhidedelay" configuration property have ellapsed.
* @private
* @param {YAHOO.widget.Menu} p_oSubmenu Object specifying the submenu that
* should be hidden.
* @param {Number} p_nMouseX The x coordinate of the mouse when it left
* the specified submenu's parent menu item.
* @param {Number} p_nHideDelay The number of milliseconds that should ellapse
* before the submenu is hidden.
*/
_execSubmenuHideDelay: function(p_oSubmenu, p_nMouseX, p_nHideDelay) {
var me = this;
p_oSubmenu._nSubmenuHideDelayId = window.setTimeout(function () {
if(me._nCurrentMouseX > (p_nMouseX + 10)) {
p_oSubmenu._nSubmenuHideDelayId = window.setTimeout(function () {
p_oSubmenu.hide();
}, p_nHideDelay);
}
else {
p_oSubmenu.hide();
}
}, 50);
},
// Protected methods
/**
* @method _disableScrollHeader
* @description Disables the header used for scrolling the body of the menu.
* @protected
*/
_disableScrollHeader: function() {
if(!this._bHeaderDisabled) {
Dom.addClass(this.header, "topscrollbar_disabled");
this._bHeaderDisabled = true;
}
},
/**
* @method _disableScrollFooter
* @description Disables the footer used for scrolling the body of the menu.
* @protected
*/
_disableScrollFooter: function() {
if(!this._bFooterDisabled) {
Dom.addClass(this.footer, "bottomscrollbar_disabled");
this._bFooterDisabled = true;
}
},
/**
* @method _enableScrollHeader
* @description Enables the header used for scrolling the body of the menu.
* @protected
*/
_enableScrollHeader: function() {
if(this._bHeaderDisabled) {
Dom.removeClass(this.header, "topscrollbar_disabled");
this._bHeaderDisabled = false;
}
},
/**
* @method _enableScrollFooter
* @description Enables the footer used for scrolling the body of the menu.
* @protected
*/
_enableScrollFooter: function() {
if(this._bFooterDisabled) {
Dom.removeClass(this.footer, "bottomscrollbar_disabled");
this._bFooterDisabled = false;
}
},
/**
* @method _onMouseOver
* @description "mouseover" event handler for the menu.
* @protected
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onMouseOver: function(p_sType, p_aArgs, p_oMenu) {
if(this._bStopMouseEventHandlers) {
return false;
}
var oEvent = p_aArgs[0],
oItem = p_aArgs[1],
oTarget = Event.getTarget(oEvent);
if(
!this._bHandledMouseOverEvent &&
(oTarget == this.element || Dom.isAncestor(this.element, oTarget))
) {
// Menu mouseover logic
this._nCurrentMouseX = 0;
Event.addListener(
this.element,
"mousemove",
this._onMouseMove,
this,
true
);
this.clearActiveItem();
if(this.parent && this._nSubmenuHideDelayId) {
window.clearTimeout(this._nSubmenuHideDelayId);
this.parent.cfg.setProperty("selected", true);
var oParentMenu = this.parent.parent;
oParentMenu.activeItem = this.parent;
oParentMenu._bHandledMouseOutEvent = true;
oParentMenu._bHandledMouseOverEvent = false;
}
this._bHandledMouseOverEvent = true;
this._bHandledMouseOutEvent = false;
}
if(
oItem && !oItem.handledMouseOverEvent &&
!oItem.cfg.getProperty("disabled") &&
(oTarget == oItem.element || Dom.isAncestor(oItem.element, oTarget))
) {
// Menu Item mouseover logic
var nShowDelay = this.cfg.getProperty("showdelay"),
bShowDelay = (nShowDelay > 0);
if(bShowDelay) {
this._cancelShowDelay();
}
var oActiveItem = this.activeItem;
if(oActiveItem) {
oActiveItem.cfg.setProperty("selected", false);
}
var oItemCfg = oItem.cfg;
// Select and focus the current menu item
oItemCfg.setProperty("selected", true);
oItem.focus();
if(this.cfg.getProperty("autosubmenudisplay")) {
// Show the submenu this menu item
var oSubmenu = oItemCfg.getProperty("submenu");
if(oSubmenu) {
if(bShowDelay) {
this._execShowDelay(oSubmenu);
}
else {
oSubmenu.show();
}
}
}
oItem.handledMouseOverEvent = true;
oItem.handledMouseOutEvent = false;
}
},
/**
* @method _onMouseOut
* @description "mouseout" event handler for the menu.
* @protected
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onMouseOut: function(p_sType, p_aArgs, p_oMenu) {
if(this._bStopMouseEventHandlers) {
return false;
}
var oEvent = p_aArgs[0],
oItem = p_aArgs[1],
oRelatedTarget = Event.getRelatedTarget(oEvent),
bMovingToSubmenu = false;
if(oItem && !oItem.cfg.getProperty("disabled")) {
var oItemCfg = oItem.cfg,
oSubmenu = oItemCfg.getProperty("submenu");
if(
oSubmenu &&
(
oRelatedTarget == oSubmenu.element ||
Dom.isAncestor(oSubmenu.element, oRelatedTarget)
)
) {
bMovingToSubmenu = true;
}
if(
!oItem.handledMouseOutEvent &&
(
(
oRelatedTarget != oItem.element &&
!Dom.isAncestor(oItem.element, oRelatedTarget)
) || bMovingToSubmenu
)
) {
// Menu Item mouseout logic
if(!bMovingToSubmenu) {
oItem.cfg.setProperty("selected", false);
if(oSubmenu) {
var nSubmenuHideDelay =
this.cfg.getProperty("submenuhidedelay"),
nShowDelay = this.cfg.getProperty("showdelay");
if(
!(this instanceof YAHOO.widget.MenuBar) &&
nSubmenuHideDelay > 0 &&
nShowDelay >= nSubmenuHideDelay
) {
this._execSubmenuHideDelay(
oSubmenu,
Event.getPageX(oEvent),
nSubmenuHideDelay
);
}
else {
oSubmenu.hide();
}
}
}
oItem.handledMouseOutEvent = true;
oItem.handledMouseOverEvent = false;
}
}
if(
!this._bHandledMouseOutEvent &&
(
(
oRelatedTarget != this.element &&
!Dom.isAncestor(this.element, oRelatedTarget)
)
|| bMovingToSubmenu
)
) {
// Menu mouseout logic
Event.removeListener(this.element, "mousemove", this._onMouseMove);
this._nCurrentMouseX = Event.getPageX(oEvent);
this._bHandledMouseOutEvent = true;
this._bHandledMouseOverEvent = false;
}
},
/**
* @method _onMouseMove
* @description "click" event handler for the menu.
* @protected
* @param {Event} p_oEvent Object representing the DOM event object passed
* back by the event utility (YAHOO.util.Event).
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onMouseMove: function(p_oEvent, p_oMenu) {
if(this._bStopMouseEventHandlers) {
return false;
}
this._nCurrentMouseX = Event.getPageX(p_oEvent);
},
/**
* @method _onClick
* @description "click" event handler for the menu.
* @protected
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onClick: function(p_sType, p_aArgs, p_oMenu) {
var oEvent = p_aArgs[0],
oItem = p_aArgs[1],
oTarget = Event.getTarget(oEvent);
if(oItem && !oItem.cfg.getProperty("disabled")) {
var oItemCfg = oItem.cfg,
oSubmenu = oItemCfg.getProperty("submenu");
/*
ACCESSIBILITY FEATURE FOR SCREEN READERS:
Expand/collapse the submenu when the user clicks
on the submenu indicator image.
*/
if(oTarget == oItem.submenuIndicator && oSubmenu) {
if(oSubmenu.cfg.getProperty("visible")) {
oSubmenu.hide();
oSubmenu.parent.focus();
}
else {
this.clearActiveItem();
this.activeItem = oItem;
oItem.cfg.setProperty("selected", true);
oSubmenu.show();
}
}
else {
var sURL = oItemCfg.getProperty("url"),
bCurrentPageURL = (sURL.substr((sURL.length-1),1) == "#"),
sTarget = oItemCfg.getProperty("target"),
bHasTarget = (sTarget && sTarget.length > 0);
/*
Prevent the browser from following links
equal to "#"
*/
if(
oTarget.tagName.toUpperCase() == "A" &&
bCurrentPageURL && !bHasTarget
) {
Event.preventDefault(oEvent);
}
if(
oTarget.tagName.toUpperCase() != "A" &&
!bCurrentPageURL && !bHasTarget
) {
/*
Follow the URL of the item regardless of
whether or not the user clicked specifically
on the anchor element.
*/
document.location = sURL;
}
/*
If the item doesn't navigate to a URL and it doesn't have
a submenu, then collapse the menu tree.
*/
if(bCurrentPageURL && !oSubmenu) {
var oRoot = this.getRoot();
if(oRoot.cfg.getProperty("position") == "static") {
oRoot.clearActiveItem();
}
else if(oRoot.cfg.getProperty("clicktohide")) {
oRoot.hide();
}
}
}
}
},
/**
* @method _onKeyDown
* @description "keydown" event handler for the menu.
* @protected
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onKeyDown: function(p_sType, p_aArgs, p_oMenu) {
var oEvent = p_aArgs[0],
oItem = p_aArgs[1],
me = this,
oSubmenu;
/*
This function is called to prevent a bug in Firefox. In Firefox,
moving a DOM element into a stationary mouse pointer will cause the
browser to fire mouse events. This can result in the menu mouse
event handlers being called uncessarily, especially when menus are
moved into a stationary mouse pointer as a result of a
key event handler.
*/
function stopMouseEventHandlers() {
me._bStopMouseEventHandlers = true;
window.setTimeout(function() {
me._bStopMouseEventHandlers = false;
}, 10);
}
if(oItem && !oItem.cfg.getProperty("disabled")) {
var oItemCfg = oItem.cfg,
oParentItem = this.parent,
oRoot,
oNextItem;
switch(oEvent.keyCode) {
case 38: // Up arrow
case 40: // Down arrow
if(
oItem == this.activeItem &&
!oItemCfg.getProperty("selected")
) {
oItemCfg.setProperty("selected", true);
}
else {
oNextItem = (oEvent.keyCode == 38) ?
oItem.getPreviousEnabledSibling() :
oItem.getNextEnabledSibling();
if(oNextItem) {
this.clearActiveItem();
oNextItem.cfg.setProperty("selected", true);
oNextItem.focus();
if(this.cfg.getProperty("maxheight") > 0) {
var oBody = this.body;
oBody.scrollTop =
(
oNextItem.element.offsetTop +
oNextItem.element.offsetHeight
) - oBody.offsetHeight;
var nScrollTop = oBody.scrollTop,
nScrollTarget =
oBody.scrollHeight - oBody.offsetHeight;
if(nScrollTop === 0) {
this._disableScrollHeader();
this._enableScrollFooter();
}
else if(nScrollTop == nScrollTarget) {
this._enableScrollHeader();
this._disableScrollFooter();
}
else {
this._enableScrollHeader();
this._enableScrollFooter();
}
}
}
}
Event.preventDefault(oEvent);
stopMouseEventHandlers();
break;
case 39: // Right arrow
oSubmenu = oItemCfg.getProperty("submenu");
if(oSubmenu) {
if(!oItemCfg.getProperty("selected")) {
oItemCfg.setProperty("selected", true);
}
oSubmenu.show();
oSubmenu.setInitialSelection();
}
else {
oRoot = this.getRoot();
if(oRoot instanceof YAHOO.widget.MenuBar) {
oNextItem = oRoot.activeItem.getNextEnabledSibling();
if(oNextItem) {
oRoot.clearActiveItem();
oNextItem.cfg.setProperty("selected", true);
oSubmenu = oNextItem.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.show();
}
oNextItem.focus();
}
}
}
Event.preventDefault(oEvent);
stopMouseEventHandlers();
break;
case 37: // Left arrow
if(oParentItem) {
var oParentMenu = oParentItem.parent;
if(oParentMenu instanceof YAHOO.widget.MenuBar) {
oNextItem =
oParentMenu.activeItem.getPreviousEnabledSibling();
if(oNextItem) {
oParentMenu.clearActiveItem();
oNextItem.cfg.setProperty("selected", true);
oSubmenu = oNextItem.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.show();
}
oNextItem.focus();
}
}
else {
this.hide();
oParentItem.focus();
}
}
Event.preventDefault(oEvent);
stopMouseEventHandlers();
break;
}
}
if(oEvent.keyCode == 27) { // Esc key
if(this.cfg.getProperty("position") == "dynamic") {
this.hide();
if(this.parent) {
this.parent.focus();
}
}
else if(this.activeItem) {
oSubmenu = this.activeItem.cfg.getProperty("submenu");
if(oSubmenu && oSubmenu.cfg.getProperty("visible")) {
oSubmenu.hide();
this.activeItem.focus();
}
else {
this.activeItem.cfg.setProperty("selected", false);
this.activeItem.blur();
}
}
Event.preventDefault(oEvent);
}
},
/**
* @method _onKeyPress
* @description "keypress" event handler for a Menu instance.
* @protected
* @param {String} p_sType The name of the event that was fired.
* @param {Array} p_aArgs Collection of arguments sent when the event
* was fired.
* @param {YAHOO.widget.Menu} p_oMenu The Menu instance that fired the event.
*/
_onKeyPress: function(p_sType, p_aArgs, p_oMenu) {
var oEvent = p_aArgs[0];
if(oEvent.keyCode == 40 || oEvent.keyCode == 38) {
YAHOO.util.Event.preventDefault(oEvent);
}
},
/**
* @method _onTextResize
* @description "textresize" event handler for the menu.
* @protected
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onTextResize: function(p_sType, p_aArgs, p_oMenu) {
if(this.browser == "gecko" && !this._handleResize) {
this._handleResize = true;
return;
}
var oConfig = this.cfg;
if(oConfig.getProperty("position") == "dynamic") {
oConfig.setProperty("width", (this._getOffsetWidth() + "px"));
}
},
/**
* @method _onScrollTargetMouseOver
* @description "mouseover" event handler for the menu's "header" and "footer"
* elements. Used to scroll the body of the menu up and down when the
* menu's "maxheight" configuration property is set to a value greater than 0.
* @protected
* @param {Event} p_oEvent Object representing the DOM event object passed
* back by the event utility (YAHOO.util.Event).
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onScrollTargetMouseOver: function(p_oEvent, p_oMenu) {
this._cancelHideDelay();
var oTarget = Event.getTarget(p_oEvent),
oBody = this.body,
me = this,
nScrollTarget,
fnScrollFunction;
function scrollBodyDown() {
var nScrollTop = oBody.scrollTop;
if(nScrollTop < nScrollTarget) {
oBody.scrollTop = (nScrollTop + 1);
me._enableScrollHeader();
}
else {
oBody.scrollTop = nScrollTarget;
window.clearInterval(me._nBodyScrollId);
me._disableScrollFooter();
}
}
function scrollBodyUp() {
var nScrollTop = oBody.scrollTop;
if(nScrollTop > 0) {
oBody.scrollTop = (nScrollTop - 1);
me._enableScrollFooter();
}
else {
oBody.scrollTop = 0;
window.clearInterval(me._nBodyScrollId);
me._disableScrollHeader();
}
}
if(Dom.hasClass(oTarget, "hd")) {
fnScrollFunction = scrollBodyUp;
}
else {
nScrollTarget = oBody.scrollHeight - oBody.offsetHeight;
fnScrollFunction = scrollBodyDown;
}
this._nBodyScrollId = window.setInterval(fnScrollFunction, 10);
},
/**
* @method _onScrollTargetMouseOut
* @description "mouseout" event handler for the menu's "header" and "footer"
* elements. Used to stop scrolling the body of the menu up and down when the
* menu's "maxheight" configuration property is set to a value greater than 0.
* @protected
* @param {Event} p_oEvent Object representing the DOM event object passed
* back by the event utility (YAHOO.util.Event).
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onScrollTargetMouseOut: function(p_oEvent, p_oMenu) {
window.clearInterval(this._nBodyScrollId);
this._cancelHideDelay();
},
// Private methods
/**
* @method _onInit
* @description "init" event handler for the menu.
* @private
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onInit: function(p_sType, p_aArgs, p_oMenu) {
if(
(
(this.parent && !this.lazyLoad) ||
(!this.parent && this.cfg.getProperty("position") == "static") ||
(
!this.parent &&
!this.lazyLoad &&
this.cfg.getProperty("position") == "dynamic"
)
) &&
this.getItemGroups().length === 0
) {
if(this.srcElement) {
this._initSubTree();
}
if(this.itemData) {
this.addItems(this.itemData);
}
}
else if(this.lazyLoad) {
this.cfg.fireQueue();
}
},
/**
* @method _onBeforeRender
* @description "beforerender" event handler for the menu. Appends all of the
* <ul>, <li> and their accompanying
* title elements to the body element of the menu.
* @private
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onBeforeRender: function(p_sType, p_aArgs, p_oMenu) {
var oConfig = this.cfg,
oEl = this.element,
nListElements = this._aListElements.length;
if(nListElements > 0) {
var i = 0,
bFirstList = true,
oUL,
oGroupTitle;
do {
oUL = this._aListElements[i];
if(oUL) {
if(bFirstList) {
Dom.addClass(oUL, "first-of-type");
bFirstList = false;
}
if(!Dom.isAncestor(oEl, oUL)) {
this.appendToBody(oUL);
}
oGroupTitle = this._aGroupTitleElements[i];
if(oGroupTitle) {
if(!Dom.isAncestor(oEl, oGroupTitle)) {
oUL.parentNode.insertBefore(oGroupTitle, oUL);
}
Dom.addClass(oUL, "hastitle");
}
}
i++;
}
while(i < nListElements);
}
},
/**
* @method _onBeforeShow
* @description "beforeshow" event handler for the menu.
* @private
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.Menu} p_oMenu Object representing the menu that
* fired the event.
*/
_onBeforeShow: function(p_sType, p_aArgs, p_oMenu) {
if(this.lazyLoad && this.getItemGroups().length === 0) {
if(this.srcElement) {
this._initSubTree();
}
if(this.itemData) {
if(
this.parent && this.parent.parent &&
this.parent.parent.srcElement &&
this.parent.parent.srcElement.tagName.toUpperCase() == "SELECT"
) {
var nOptions = this.itemData.length;
for(var n=0; n<div> element
* (and accompanying child nodes) from the document.
*/
destroy: function() {
// Remove all DOM event listeners
Event.purgeElement(this.element);
// Remove Custom Event listeners
this.mouseOverEvent.unsubscribeAll();
this.mouseOutEvent.unsubscribeAll();
this.mouseDownEvent.unsubscribeAll();
this.mouseUpEvent.unsubscribeAll();
this.clickEvent.unsubscribeAll();
this.keyPressEvent.unsubscribeAll();
this.keyDownEvent.unsubscribeAll();
this.keyUpEvent.unsubscribeAll();
this.itemAddedEvent.unsubscribeAll();
this.itemRemovedEvent.unsubscribeAll();
YAHOO.widget.Module.textResizeEvent.unsubscribe(this._onTextResize, this);
// Remove all items
this.clearContent();
this._aItemGroups = null;
this._aListElements = null;
this._aGroupTitleElements = null;
// Continue with the superclass implementation of this method
YAHOO.widget.Menu.superclass.destroy.call(this);
},
/**
* @method setInitialFocus
* @description Sets focus to the menu's first enabled item.
*/
setInitialFocus: function() {
var oItem = this._getFirstEnabledItem();
if(oItem) {
oItem.focus();
}
},
/**
* @method setInitialSelection
* @description Sets the "selected" configuration property of the menu's first
* enabled item to "true."
*/
setInitialSelection: function() {
var oItem = this._getFirstEnabledItem();
if(oItem) {
oItem.cfg.setProperty("selected", true);
}
},
/**
* @method clearActiveItem
* @description Sets the "selected" configuration property of the menu's active
* item to "false" and hides the item's submenu.
* @param {Boolean} p_bBlur Boolean indicating if the menu's active item
* should be blurred.
*/
clearActiveItem: function(p_bBlur) {
if(this.cfg.getProperty("showdelay") > 0) {
this._cancelShowDelay();
}
var oActiveItem = this.activeItem;
if(oActiveItem) {
var oConfig = oActiveItem.cfg;
oConfig.setProperty("selected", false);
var oSubmenu = oConfig.getProperty("submenu");
if(oSubmenu) {
oSubmenu.hide();
}
if(p_bBlur) {
oActiveItem.blur();
}
}
},
/**
* @description Initializes the class's configurable properties which can be
* changed using the menu's Config object ("cfg").
* @method initDefaultConfig
*/
initDefaultConfig: function() {
YAHOO.widget.Menu.superclass.initDefaultConfig.call(this);
var oConfig = this.cfg;
// Add configuration attributes
/*
Change the default value for the "visible" configuration
property to "false" by re-adding the property.
*/
/**
* @config visible
* @description Boolean indicating whether or not the menu is visible. If
* the menu's "position" configuration property is set to "dynamic" (the
* default), this property toggles the menu's <div>
* element's "visibility" style property between "visible" (true) or
* "hidden" (false). If the menu's "position" configuration property is
* set to "static" this property toggles the menu's
* <div> element's "display" style property
* between "block" (true) or "none" (false).
* @default false
* @type Boolean
*/
oConfig.addProperty(
"visible",
{
value:false,
handler:this.configVisible,
validator:this.cfg.checkBoolean
}
);
/*
Change the default value for the "constraintoviewport" configuration
property to "true" by re-adding the property.
*/
/**
* @config constraintoviewport
* @description Boolean indicating if the menu will try to remain inside
* the boundaries of the size of viewport.
* @default true
* @type Boolean
*/
oConfig.addProperty(
"constraintoviewport",
{
value:true,
handler:this.configConstrainToViewport,
validator:this.cfg.checkBoolean,
supercedes:["iframe","x","y","xy"]
}
);
/**
* @config position
* @description String indicating how a menu should be positioned on the
* screen. Possible values are "static" and "dynamic." Static menus are
* visible by default and reside in the normal flow of the document
* (CSS position: static). Dynamic menus are hidden by default, reside
* out of the normal flow of the document (CSS position: absolute), and
* can overlay other elements on the screen.
* @default dynamic
* @type String
*/
oConfig.addProperty(
"position",
{
value: "dynamic",
handler: this.configPosition,
validator: this._checkPosition,
supercedes: ["visible"]
}
);
/**
* @config submenualignment
* @description Array defining how submenus should be aligned to their
* parent menu item. The format is: [itemCorner, submenuCorner]. By default
* a submenu's top left corner is aligned to its parent menu item's top
* right corner.
* @default ["tl","tr"]
* @type Array
*/
oConfig.addProperty("submenualignment", { value: ["tl","tr"] } );
/**
* @config autosubmenudisplay
* @description Boolean indicating if submenus are automatically made
* visible when the user mouses over the menu's items.
* @default true
* @type Boolean
*/
oConfig.addProperty(
"autosubmenudisplay",
{
value: true,
validator: oConfig.checkBoolean
}
);
/**
* @config showdelay
* @description Number indicating the time (in milliseconds) that should
* expire before a submenu is made visible when the user mouses over
* the menu's items.
* @default 250
* @type Number
*/
oConfig.addProperty(
"showdelay",
{
value: 250,
validator: oConfig.checkNumber
}
);
/**
* @config hidedelay
* @description Number indicating the time (in milliseconds) that should
* expire before the menu is hidden.
* @default 0
* @type Number
*/
oConfig.addProperty(
"hidedelay",
{
value: 0,
validator: oConfig.checkNumber,
handler: this.configHideDelay,
suppressEvent: true
}
);
/**
* @config submenuhidedelay
* @description Number indicating the time (in milliseconds) that should
* expire before a submenu is hidden when the user mouses out of a menu item
* heading in the direction of a submenu. The value must be greater than or
* equal to the value specified for the "showdelay" configuration property.
* @default 250
* @type Number
*/
oConfig.addProperty(
"submenuhidedelay",
{
value: 250,
validator: oConfig.checkNumber
}
);
/**
* @config clicktohide
* @description Boolean indicating if the menu will automatically be
* hidden if the user clicks outside of it.
* @default true
* @type Boolean
*/
oConfig.addProperty(
"clicktohide",
{
value: true,
validator: oConfig.checkBoolean
}
);
/**
* @config container
* @description HTML element reference or string specifying the id
* attribute of the HTML element that the menu's markup should be
* rendered into.
* @type HTMLElement|String
* @default document.body
*/
oConfig.addProperty(
"container",
{
value:document.body,
handler:this.configContainer
}
);
/**
* @config maxheight
* @description Defines the maximum height (in pixels) for a menu before the
* contents of the body are scrolled.
* @default 0
* @type Number
*/
oConfig.addProperty(
"maxheight",
{
value: 0,
validator: oConfig.checkNumber,
handler: this.configMaxHeight
}
);
/**
* @config classname
* @description CSS class to be applied to the menu's root
* <div> element. The specified class(es) are
* appended in addition to the default class as specified by the menu's
* CSS_CLASS_NAME constant.
* @default null
* @type String
*/
oConfig.addProperty(
"classname",
{
value: null,
handler: this.configClassName,
validator: this._checkString
}
);
}
}); // END YAHOO.lang.extend
})();
(function() {
var Dom = YAHOO.util.Dom,
Module = YAHOO.widget.Module,
Menu = YAHOO.widget.Menu,
m_oMenuItemElement = null,
m_oSubmenuIndicator = null,
m_oCheckedIndicator = null;
/**
* Creates an item for a menu.
*
* @param {String} p_oObject String specifying the text of the menu item.
* @param {HTMLLIElement} p_oObject Object specifying
* the <li> element of the menu item.
* @param {HTMLOptGroupElement} p_oObject Object
* specifying the <optgroup> element of the menu item.
* @param {HTMLOptionElement} p_oObject Object
* specifying the <option> element of the menu item.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the menu item. See configuration class documentation
* for more details.
* @class MenuItem
* @constructor
*/
YAHOO.widget.MenuItem = function(p_oObject, p_oConfig) {
if(p_oObject) {
if(p_oConfig) {
this.parent = p_oConfig.parent;
this.value = p_oConfig.value;
this.id = p_oConfig.id;
}
this.init(p_oObject, p_oConfig);
}
};
YAHOO.widget.MenuItem.prototype = {
// Constants
/**
* @property SUBMENU_INDICATOR_IMAGE_PATH
* @description String representing the path to the image to be used for the
* menu item's submenu arrow indicator.
* @default "nt/ic/ut/alt1/menuarorght8_nrm_1.gif"
* @final
* @type String
* @deprecated All submenu indicator images are applied via a CSS
* background image. See "submenuindicator" class name in menu.css.
*/
SUBMENU_INDICATOR_IMAGE_PATH: "nt/ic/ut/alt1/menuarorght8_nrm_1.gif",
/**
* @property SELECTED_SUBMENU_INDICATOR_IMAGE_PATH
* @description String representing the path to the image to be used for the
* submenu arrow indicator when the menu item is selected.
* @default "nt/ic/ut/alt1/menuarorght8_hov_1.gif"
* @final
* @type String
* @deprecated All submenu indicator images are applied via a CSS
* background image. See "submenuindicator" class name in menu.css.
*/
SELECTED_SUBMENU_INDICATOR_IMAGE_PATH:
"nt/ic/ut/alt1/menuarorght8_hov_1.gif",
/**
* @property DISABLED_SUBMENU_INDICATOR_IMAGE_PATH
* @description String representing the path to the image to be used for the
* submenu arrow indicator when the menu item is disabled.
* @default "nt/ic/ut/alt1/menuarorght8_dim_1.gif"
* @final
* @type String
* @deprecated All submenu indicator images are applied via a CSS
* background image. See "submenuindicator" class name in menu.css.
*/
DISABLED_SUBMENU_INDICATOR_IMAGE_PATH:
"nt/ic/ut/alt1/menuarorght8_dim_1.gif",
/**
* @property COLLAPSED_SUBMENU_INDICATOR_ALT_TEXT
* @description String representing the alt text for the image to be used
* for the submenu arrow indicator.
* @default "Collapsed. Click to expand."
* @final
* @type String
* @deprecated Use COLLAPSED_SUBMENU_INDICATOR_TEXT.
*/
COLLAPSED_SUBMENU_INDICATOR_ALT_TEXT: "Collapsed. Click to expand.",
/**
* @property EXPANDED_SUBMENU_INDICATOR_ALT_TEXT
* @description String representing the alt text for the image to be used
* for the submenu arrow indicator when the submenu is visible.
* @default "Expanded. Click to collapse."
* @final
* @type String
* @deprecated Use EXPANDED_SUBMENU_INDICATOR_TEXT.
*/
EXPANDED_SUBMENU_INDICATOR_ALT_TEXT: "Expanded. Click to collapse.",
/**
* @property DISABLED_SUBMENU_INDICATOR_ALT_TEXT
* @description String representing the alt text for the image to be used
* for the submenu arrow indicator when the menu item is disabled.
* @default "Disabled."
* @final
* @type String
* @deprecated Use DISABLED_SUBMENU_INDICATOR_TEXT.
*/
DISABLED_SUBMENU_INDICATOR_ALT_TEXT: "Disabled.",
/**
* @property COLLAPSED_SUBMENU_INDICATOR_TEXT
* @description String representing the text for the <em>
* element used for the submenu arrow indicator.
* @default "Submenu collapsed. Click to expand submenu."
* @final
* @type String
*/
COLLAPSED_SUBMENU_INDICATOR_TEXT:
"Submenu collapsed. Click to expand submenu.",
/**
* @property EXPANDED_SUBMENU_INDICATOR_TEXT
* @description String representing the text for the submenu arrow indicator
* element (<em>) when the submenu is visible.
* @default "Submenu expanded. Click to collapse submenu."
* @final
* @type String
*/
EXPANDED_SUBMENU_INDICATOR_TEXT:
"Submenu expanded. Click to collapse submenu.",
/**
* @property DISABLED_SUBMENU_INDICATOR_TEXT
* @description String representing the text for the submenu arrow indicator
* element (<em>) when the menu item is disabled.
* @default "Submenu collapsed. (Item disabled.)."
* @final
* @type String
*/
DISABLED_SUBMENU_INDICATOR_TEXT: "Submenu collapsed. (Item disabled.)",
/**
* @property CHECKED_IMAGE_PATH
* @description String representing the path to the image to be used for
* the checked state.
* @default "nt/ic/ut/bsc/menuchk8_nrm_1.gif"
* @final
* @type String
* @deprecated All checked indicator images are applied via a CSS
* background image. See "checkedindicator" class name in menu.css.
*/
CHECKED_IMAGE_PATH: "nt/ic/ut/bsc/menuchk8_nrm_1.gif",
/**
* @property SELECTED_CHECKED_IMAGE_PATH
* @description String representing the path to the image to be used for
* the selected checked state.
* @default "nt/ic/ut/bsc/menuchk8_hov_1.gif"
* @final
* @type String
* @deprecated All checked indicator images are applied via a CSS
* background image. See "checkedindicator" class name in menu.css.
*/
SELECTED_CHECKED_IMAGE_PATH: "nt/ic/ut/bsc/menuchk8_hov_1.gif",
/**
* @property DISABLED_CHECKED_IMAGE_PATH
* @description String representing the path to the image to be used for
* the disabled checked state.
* @default "nt/ic/ut/bsc/menuchk8_dim_1.gif"
* @final
* @type String
* @deprecated All checked indicator images are applied via a CSS
* background image.
*/
DISABLED_CHECKED_IMAGE_PATH: "nt/ic/ut/bsc/menuchk8_dim_1.gif",
/**
* @property CHECKED_IMAGE_ALT_TEXT
* @description String representing the alt text for the image to be used
* for the checked image.
* @default "Checked."
* @final
* @type String
* @deprecated Use CHECKED_TEXT.
*/
CHECKED_IMAGE_ALT_TEXT: "Checked.",
/**
* @property DISABLED_CHECKED_IMAGE_ALT_TEXT
* @description String representing the alt text for the image to be used
* for the checked image when the item is disabled.
* @default "Checked. (Item disabled.)"
* @final
* @type String
* @deprecated Use DISABLED_CHECKED_TEXT.
*/
DISABLED_CHECKED_IMAGE_ALT_TEXT: "Checked. (Item disabled.)",
/**
* @property CHECKED_TEXT
* @description String representing the text to be used for the checked
* indicator element (<em>).
* @default "Checked."
* @final
* @type String
*/
CHECKED_TEXT: "Menu item checked.",
/**
* @property DISABLED_CHECKED_TEXT
* @description String representing the text to be used for the checked
* indicator element (<em>) when the menu item
* is disabled.
* @default "Checked. (Item disabled.)"
* @final
* @type String
*/
DISABLED_CHECKED_TEXT: "Checked. (Item disabled.)",
/**
* @property CSS_CLASS_NAME
* @description String representing the CSS class(es) to be applied to the
* <li> element of the menu item.
* @default "yuimenuitem"
* @final
* @type String
*/
CSS_CLASS_NAME: "yuimenuitem",
/**
* @property SUBMENU_TYPE
* @description Object representing the type of menu to instantiate and
* add when parsing the child nodes of the menu item's source HTML element.
* @final
* @type YAHOO.widget.Menu
*/
SUBMENU_TYPE: null,
/**
* @property IMG_ROOT
* @description String representing the prefix path to use for
* non-secure images.
* @default "http://us.i1.yimg.com/us.yimg.com/i/"
* @type String
* @deprecated All menu item images are now applied via CSS
* background images.
*/
IMG_ROOT: "http://us.i1.yimg.com/us.yimg.com/i/",
/**
* @property IMG_ROOT_SSL
* @description String representing the prefix path to use for securely
* served images.
* @default "https://a248.e.akamai.net/sec.yimg.com/i/"
* @type String
* @deprecated All menu item images are now applied via CSS
* background images.
*/
IMG_ROOT_SSL: "https://a248.e.akamai.net/sec.yimg.com/i/",
// Private member variables
/**
* @property _oAnchor
* @description Object reference to the menu item's
* <a> element.
* @default null
* @private
* @type HTMLAnchorElement
*/
_oAnchor: null,
/**
* @property _oText
* @description Object reference to the menu item's text node.
* @default null
* @private
* @type TextNode
*/
_oText: null,
/**
* @property _oHelpTextEM
* @description Object reference to the menu item's help text
* <em> element.
* @default null
* @private
* @type HTMLElement
*/
_oHelpTextEM: null,
/**
* @property _oSubmenu
* @description Object reference to the menu item's submenu.
* @default null
* @private
* @type YAHOO.widget.Menu
*/
_oSubmenu: null,
/**
* @property _checkImage
* @description Object reference to the menu item's checkmark image.
* @default null
* @private
* @type HTMLImageElement
* @deprecated Use _oCheckedIndicator.
*/
_checkImage: null,
/**
* @property _oCheckedIndicator
* @description Object reference to the menu item's checkmark image.
* @default HTMLElement
* @private
* @type HTMLElement
*/
_oCheckedIndicator: null,
/**
* @property _oOnclickAttributeValue
* @description Object reference to the menu item's current value for the
* "onclick" configuration attribute.
* @default null
* @private
* @type Object
*/
_oOnclickAttributeValue: null,
/**
* @property _sClassName
* @description The current value of the "classname" configuration attribute.
* @default null
* @private
* @type String
*/
_sClassName: null,
// Public properties
/**
* @property constructor
* @description Object reference to the menu item's constructor function.
* @default YAHOO.widget.MenuItem
* @type YAHOO.widget.MenuItem
*/
constructor: YAHOO.widget.MenuItem,
/**
* @property imageRoot
* @description String representing the root path for all of the menu
* item's images.
* @type String
* @deprecated All menu item images are now applied via CSS
* background images.
*/
imageRoot: null,
/**
* @property isSecure
* @description Boolean representing whether or not the current browsing
* context is secure (HTTPS).
* @type Boolean
* @deprecated All menu item images are now applied via CSS
* background images.
*/
isSecure: Module.prototype.isSecure,
/**
* @property index
* @description Number indicating the ordinal position of the menu item in
* its group.
* @default null
* @type Number
*/
index: null,
/**
* @property groupIndex
* @description Number indicating the index of the group to which the menu
* item belongs.
* @default null
* @type Number
*/
groupIndex: null,
/**
* @property parent
* @description Object reference to the menu item's parent menu.
* @default null
* @type YAHOO.widget.Menu
*/
parent: null,
/**
* @property element
* @description Object reference to the menu item's
* <li> element.
* @default HTMLLIElement
* @type HTMLLIElement
*/
element: null,
/**
* @property srcElement
* @description Object reference to the HTML element (either
* <li>, <optgroup> or
* <option>) used create the menu item.
* @default HTMLLIElement|HTMLOptGroupElement|HTMLOptionElement
* @type HTMLLIElement|
* HTMLOptGroupElement|HTMLOptionElement
*/
srcElement: null,
/**
* @property value
* @description Object reference to the menu item's value.
* @default null
* @type Object
*/
value: null,
/**
* @property submenuIndicator
* @description Object reference to the <em> element
* used to create the submenu indicator for the menu item.
* @default HTMLElement
* @type HTMLElement
*/
submenuIndicator: null,
/**
* @property browser
* @description String representing the browser.
* @type String
*/
browser: Module.prototype.browser,
/**
* @property id
* @description Id of the menu item's root <li>
* element. This property should be set via the constructor using the
* configuration object literal. If an id is not specified, then one will
* be created using the "generateId" method of the Dom utility.
* @default null
* @type String
*/
id: null,
// Events
/**
* @event destroyEvent
* @description Fires when the menu item's <li>
* element is removed from its parent <ul> element.
* @type YAHOO.util.CustomEvent
*/
destroyEvent: null,
/**
* @event mouseOverEvent
* @description Fires when the mouse has entered the menu item. Passes
* back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
mouseOverEvent: null,
/**
* @event mouseOutEvent
* @description Fires when the mouse has left the menu item. Passes back
* the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
mouseOutEvent: null,
/**
* @event mouseDownEvent
* @description Fires when the user mouses down on the menu item. Passes
* back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
mouseDownEvent: null,
/**
* @event mouseUpEvent
* @description Fires when the user releases a mouse button while the mouse
* is over the menu item. Passes back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
mouseUpEvent: null,
/**
* @event clickEvent
* @description Fires when the user clicks the on the menu item. Passes
* back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
clickEvent: null,
/**
* @event keyPressEvent
* @description Fires when the user presses an alphanumeric key when the
* menu item has focus. Passes back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
keyPressEvent: null,
/**
* @event keyDownEvent
* @description Fires when the user presses a key when the menu item has
* focus. Passes back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
keyDownEvent: null,
/**
* @event keyUpEvent
* @description Fires when the user releases a key when the menu item has
* focus. Passes back the DOM Event object as an argument.
* @type YAHOO.util.CustomEvent
*/
keyUpEvent: null,
/**
* @event focusEvent
* @description Fires when the menu item receives focus.
* @type YAHOO.util.CustomEvent
*/
focusEvent: null,
/**
* @event blurEvent
* @description Fires when the menu item loses the input focus.
* @type YAHOO.util.CustomEvent
*/
blurEvent: null,
/**
* @method init
* @description The MenuItem class's initialization method. This method is
* automatically called by the constructor, and sets up all DOM references
* for pre-existing markup, and creates required markup if it is not
* already present.
* @param {String} p_oObject String specifying the text of the menu item.
* @param {HTMLLIElement} p_oObject Object specifying
* the <li> element of the menu item.
* @param {HTMLOptGroupElement} p_oObject Object
* specifying the <optgroup> element of the menu item.
* @param {HTMLOptionElement} p_oObject Object
* specifying the <option> element of the menu item.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the menu item. See configuration class documentation
* for more details.
*/
init: function(p_oObject, p_oConfig) {
if(!this.SUBMENU_TYPE) {
this.SUBMENU_TYPE = Menu;
}
// Create the config object
this.cfg = new YAHOO.util.Config(this);
this.initDefaultConfig();
var oConfig = this.cfg;
if(this._checkString(p_oObject)) {
this._createRootNodeStructure();
oConfig.setProperty("text", p_oObject);
}
else if(this._checkDOMNode(p_oObject)) {
switch(p_oObject.tagName.toUpperCase()) {
case "OPTION":
this._createRootNodeStructure();
oConfig.setProperty("text", p_oObject.text);
this.srcElement = p_oObject;
break;
case "OPTGROUP":
this._createRootNodeStructure();
oConfig.setProperty("text", p_oObject.label);
this.srcElement = p_oObject;
this._initSubTree();
break;
case "LI":
// Get the anchor node (if it exists)
var oAnchor = this._getFirstElement(p_oObject, "A"),
sURL = "#",
sTarget,
sText;
// Capture the "text" and/or the "URL"
if(oAnchor) {
sURL = oAnchor.getAttribute("href");
sTarget = oAnchor.getAttribute("target");
if(oAnchor.innerText) {
sText = oAnchor.innerText;
}
else {
var oRange = oAnchor.ownerDocument.createRange();
oRange.selectNodeContents(oAnchor);
sText = oRange.toString();
}
}
else {
var oText = p_oObject.firstChild;
sText = oText.nodeValue;
oAnchor = document.createElement("a");
oAnchor.setAttribute("href", sURL);
p_oObject.replaceChild(oAnchor, oText);
oAnchor.appendChild(oText);
}
this.srcElement = p_oObject;
this.element = p_oObject;
this._oAnchor = oAnchor;
// Check if emphasis has been applied to the MenuItem
var oEmphasisNode = this._getFirstElement(oAnchor),
bEmphasis = false,
bStrongEmphasis = false;
if(oEmphasisNode) {
// Set a reference to the text node
this._oText = oEmphasisNode.firstChild;
switch(oEmphasisNode.tagName.toUpperCase()) {
case "EM":
bEmphasis = true;
break;
case "STRONG":
bStrongEmphasis = true;
break;
}
}
else {
// Set a reference to the text node
this._oText = oAnchor.firstChild;
}
/*
Set these properties silently to sync up the
configuration object without making changes to the
element's DOM
*/
oConfig.setProperty("text", sText, true);
oConfig.setProperty("url", sURL, true);
oConfig.setProperty("target", sTarget, true);
oConfig.setProperty("emphasis", bEmphasis, true);
oConfig.setProperty(
"strongemphasis",
bStrongEmphasis,
true
);
this._initSubTree();
break;
}
}
if(this.element) {
var sId = this.element.id;
if(!sId) {
sId = this.id || Dom.generateId();
this.element.id = sId;
}
this.id = sId;
Dom.addClass(this.element, this.CSS_CLASS_NAME);
// Create custom events
var CustomEvent = YAHOO.util.CustomEvent;
this.destroyEvent = new CustomEvent("destroyEvent", this);
this.mouseOverEvent = new CustomEvent("mouseOverEvent", this);
this.mouseOutEvent = new CustomEvent("mouseOutEvent", this);
this.mouseDownEvent = new CustomEvent("mouseDownEvent", this);
this.mouseUpEvent = new CustomEvent("mouseUpEvent", this);
this.clickEvent = new CustomEvent("clickEvent", this);
this.keyPressEvent = new CustomEvent("keyPressEvent", this);
this.keyDownEvent = new CustomEvent("keyDownEvent", this);
this.keyUpEvent = new CustomEvent("keyUpEvent", this);
this.focusEvent = new CustomEvent("focusEvent", this);
this.blurEvent = new CustomEvent("blurEvent", this);
if(p_oConfig) {
oConfig.applyConfig(p_oConfig);
}
oConfig.fireQueue();
}
},
// Private methods
/**
* @method _getFirstElement
* @description Returns an HTML element's first HTML element node.
* @private
* @param {HTMLElement} p_oElement Object
* reference specifying the element to be evaluated.
* @param {String} p_sTagName Optional. String specifying the tagname of
* the element to be retrieved.
* @return {HTMLElement}
*/
_getFirstElement: function(p_oElement, p_sTagName) {
var oFirstChild = p_oElement.firstChild,
oElement;
if(oFirstChild) {
if(oFirstChild.nodeType == 1) {
oElement = oFirstChild;
}
else {
var oNextSibling = oFirstChild.nextSibling;
if(oNextSibling && oNextSibling.nodeType == 1) {
oElement = oNextSibling;
}
}
}
if(p_sTagName) {
return (oElement && oElement.tagName.toUpperCase() == p_sTagName) ?
oElement : false;
}
return oElement;
},
/**
* @method _checkString
* @description Determines if an object is a string.
* @private
* @param {Object} p_oObject Object to be evaluated.
* @return {Boolean}
*/
_checkString: function(p_oObject) {
return (typeof p_oObject == "string");
},
/**
* @method _checkDOMNode
* @description Determines if an object is an HTML element.
* @private
* @param {Object} p_oObject Object to be evaluated.
* @return {Boolean}
*/
_checkDOMNode: function(p_oObject) {
return (p_oObject && p_oObject.tagName);
},
/**
* @method _createRootNodeStructure
* @description Creates the core DOM structure for the menu item.
* @private
*/
_createRootNodeStructure: function () {
if(!m_oMenuItemElement) {
m_oMenuItemElement = document.createElement("li");
m_oMenuItemElement.innerHTML = "s";
}
this.element = m_oMenuItemElement.cloneNode(true);
this._oAnchor = this.element.firstChild;
this._oText = this._oAnchor.firstChild;
this.element.appendChild(this._oAnchor);
},
/**
* @method _initSubTree
* @description Iterates the source element's childNodes collection and uses
* the child nodes to instantiate other menus.
* @private
*/
_initSubTree: function() {
var oSrcEl = this.srcElement,
oConfig = this.cfg;
if(oSrcEl.childNodes.length > 0) {
if(
this.parent.lazyLoad &&
this.parent.srcElement &&
this.parent.srcElement.tagName.toUpperCase() == "SELECT"
) {
oConfig.setProperty(
"submenu",
{ id: Dom.generateId(), itemdata: oSrcEl.childNodes }
);
}
else {
var oNode = oSrcEl.firstChild,
aOptions = [];
do {
if(oNode && oNode.tagName) {
switch(oNode.tagName.toUpperCase()) {
case "DIV":
oConfig.setProperty("submenu", oNode);
break;
case "OPTION":
aOptions[aOptions.length] = oNode;
break;
}
}
}
while((oNode = oNode.nextSibling));
var nOptions = aOptions.length;
if(nOptions > 0) {
var oMenu = new this.SUBMENU_TYPE(Dom.generateId());
oConfig.setProperty("submenu", oMenu);
for(var n=0; n 0) {
oAnchor.setAttribute("target", sTarget);
}
else {
oAnchor.removeAttribute("target");
}
},
/**
* @method configEmphasis
* @description Event handler for when the "emphasis" configuration property
* of the menu item changes.
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.MenuItem} p_oItem Object representing the menu item
* that fired the event.
*/
configEmphasis: function(p_sType, p_aArgs, p_oItem) {
var bEmphasis = p_aArgs[0],
oAnchor = this._oAnchor,
oText = this._oText,
oConfig = this.cfg,
oEM;
if(bEmphasis && oConfig.getProperty("strongemphasis")) {
oConfig.setProperty("strongemphasis", false);
}
if(oAnchor) {
if(bEmphasis) {
oEM = document.createElement("em");
oEM.appendChild(oText);
oAnchor.appendChild(oEM);
}
else {
oEM = this._getFirstElement(oAnchor, "EM");
if(oEM) {
oAnchor.removeChild(oEM);
oAnchor.appendChild(oText);
}
}
}
},
/**
* @method configStrongEmphasis
* @description Event handler for when the "strongemphasis" configuration
* property of the menu item changes.
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.MenuItem} p_oItem Object representing the menu item
* that fired the event.
*/
configStrongEmphasis: function(p_sType, p_aArgs, p_oItem) {
var bStrongEmphasis = p_aArgs[0],
oAnchor = this._oAnchor,
oText = this._oText,
oConfig = this.cfg,
oStrong;
if(bStrongEmphasis && oConfig.getProperty("emphasis")) {
oConfig.setProperty("emphasis", false);
}
if(oAnchor) {
if(bStrongEmphasis) {
oStrong = document.createElement("strong");
oStrong.appendChild(oText);
oAnchor.appendChild(oStrong);
}
else {
oStrong = this._getFirstElement(oAnchor, "STRONG");
if(oStrong) {
oAnchor.removeChild(oStrong);
oAnchor.appendChild(oText);
}
}
}
},
/**
* @method configChecked
* @description Event handler for when the "checked" configuration property
* of the menu item changes.
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.MenuItem} p_oItem Object representing the menu item
* that fired the event.
*/
configChecked: function(p_sType, p_aArgs, p_oItem) {
var bChecked = p_aArgs[0],
oEl = this.element,
oConfig = this.cfg,
oEM;
if(bChecked) {
if(!m_oCheckedIndicator) {
m_oCheckedIndicator = document.createElement("em");
m_oCheckedIndicator.innerHTML = this.CHECKED_TEXT;
m_oCheckedIndicator.className = "checkedindicator";
}
oEM = m_oCheckedIndicator.cloneNode(true);
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu && oSubmenu.element) {
oEl.insertBefore(oEM, oSubmenu.element);
}
else {
oEl.appendChild(oEM);
}
Dom.addClass(oEl, "checked");
this._oCheckedIndicator = oEM;
if(oConfig.getProperty("disabled")) {
oConfig.refireEvent("disabled");
}
if(oConfig.getProperty("selected")) {
oConfig.refireEvent("selected");
}
}
else {
oEM = this._oCheckedIndicator;
Dom.removeClass(oEl, "checked");
if(oEM) {
oEl.removeChild(oEM);
}
this._oCheckedIndicator = null;
}
},
/**
* @method configDisabled
* @description Event handler for when the "disabled" configuration property
* of the menu item changes.
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.MenuItem} p_oItem Object representing the menu item
* that fired the event.
*/
configDisabled: function(p_sType, p_aArgs, p_oItem) {
var bDisabled = p_aArgs[0],
oConfig = this.cfg,
oAnchor = this._oAnchor,
aNodes = [this.element, oAnchor],
oHelpText = this._oHelpTextEM,
oCheckedIndicator = this._oCheckedIndicator,
oSubmenuIndicator = this.submenuIndicator,
i = 1;
if(oHelpText) {
i++;
aNodes[i] = oHelpText;
}
if(oCheckedIndicator) {
oCheckedIndicator.firstChild.nodeValue = bDisabled ?
this.DISABLED_CHECKED_TEXT :
this.CHECKED_TEXT;
i++;
aNodes[i] = oCheckedIndicator;
}
if(oSubmenuIndicator) {
oSubmenuIndicator.firstChild.nodeValue = bDisabled ?
this.DISABLED_SUBMENU_INDICATOR_TEXT :
this.COLLAPSED_SUBMENU_INDICATOR_TEXT;
i++;
aNodes[i] = oSubmenuIndicator;
}
if(bDisabled) {
if(oConfig.getProperty("selected")) {
oConfig.setProperty("selected", false);
}
oAnchor.removeAttribute("href");
Dom.addClass(aNodes, "disabled");
}
else {
oAnchor.setAttribute("href", oConfig.getProperty("url"));
Dom.removeClass(aNodes, "disabled");
}
},
/**
* @method configSelected
* @description Event handler for when the "selected" configuration property
* of the menu item changes.
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.MenuItem} p_oItem Object representing the menu item
* that fired the event.
*/
configSelected: function(p_sType, p_aArgs, p_oItem) {
if(!this.cfg.getProperty("disabled")) {
var bSelected = p_aArgs[0],
oHelpText = this._oHelpTextEM,
oSubmenuIndicator = this.submenuIndicator,
oCheckedIndicator = this._oCheckedIndicator,
aNodes = [this.element, this._oAnchor],
i = 1;
if(oHelpText) {
i++;
aNodes[i] = oHelpText;
}
if(oSubmenuIndicator) {
i++;
aNodes[i] = oSubmenuIndicator;
}
if(oCheckedIndicator) {
i++;
aNodes[i] = oCheckedIndicator;
}
if(bSelected) {
Dom.addClass(aNodes, "selected");
}
else {
Dom.removeClass(aNodes, "selected");
}
}
},
/**
* @method configSubmenu
* @description Event handler for when the "submenu" configuration property
* of the menu item changes.
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.MenuItem} p_oItem Object representing the menu item
* that fired the event.
*/
configSubmenu: function(p_sType, p_aArgs, p_oItem) {
var oEl = this.element,
oSubmenu = p_aArgs[0],
oSubmenuIndicator = this.submenuIndicator,
oConfig = this.cfg,
aNodes = [this.element, this._oAnchor],
bLazyLoad = this.parent && this.parent.lazyLoad,
oMenu;
if(oSubmenu) {
if(oSubmenu instanceof Menu) {
oMenu = oSubmenu;
oMenu.parent = this;
oMenu.lazyLoad = bLazyLoad;
}
else if(
typeof oSubmenu == "object" &&
oSubmenu.id &&
!oSubmenu.nodeType
) {
var sSubmenuId = oSubmenu.id,
oSubmenuConfig = oSubmenu;
oSubmenuConfig.lazyload = bLazyLoad;
oSubmenuConfig.parent = this;
oMenu = new this.SUBMENU_TYPE(sSubmenuId, oSubmenuConfig);
// Set the value of the property to the Menu instance
this.cfg.setProperty("submenu", oMenu, true);
}
else {
oMenu = new this.SUBMENU_TYPE(
oSubmenu,
{ lazyload: bLazyLoad, parent: this }
);
// Set the value of the property to the Menu instance
this.cfg.setProperty("submenu", oMenu, true);
}
if(oMenu) {
this._oSubmenu = oMenu;
if(!oSubmenuIndicator) {
if(!m_oSubmenuIndicator) {
m_oSubmenuIndicator = document.createElement("em");
m_oSubmenuIndicator.innerHTML =
this.COLLAPSED_SUBMENU_INDICATOR_TEXT;
m_oSubmenuIndicator.className = "submenuindicator";
}
oSubmenuIndicator = m_oSubmenuIndicator.cloneNode(true);
if(oMenu.element.parentNode == oEl) {
if(this.browser == "opera") {
oEl.appendChild(oSubmenuIndicator);
oMenu.renderEvent.subscribe(function() {
oSubmenuIndicator.parentNode.insertBefore(
oSubmenuIndicator,
oMenu.element
);
});
}
else {
oEl.insertBefore(oSubmenuIndicator, oMenu.element);
}
}
else {
oEl.appendChild(oSubmenuIndicator);
}
this.submenuIndicator = oSubmenuIndicator;
}
Dom.addClass(aNodes, "hassubmenu");
if(oConfig.getProperty("disabled")) {
oConfig.refireEvent("disabled");
}
if(oConfig.getProperty("selected")) {
oConfig.refireEvent("selected");
}
}
}
else {
Dom.removeClass(aNodes, "hassubmenu");
if(oSubmenuIndicator) {
oEl.removeChild(oSubmenuIndicator);
}
if(this._oSubmenu) {
this._oSubmenu.destroy();
}
}
},
/**
* @method configOnClick
* @description Event handler for when the "onclick" configuration property
* of the menu item changes.
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.MenuItem} p_oItem Object representing the menu item
* that fired the event.
*/
configOnClick: function(p_sType, p_aArgs, p_oItem) {
var oObject = p_aArgs[0];
/*
Remove any existing listeners if a "click" event handler has
already been specified.
*/
if(
this._oOnclickAttributeValue &&
(this._oOnclickAttributeValue != oObject)
) {
this.clickEvent.unsubscribe(
this._oOnclickAttributeValue.fn,
this._oOnclickAttributeValue.obj
);
this._oOnclickAttributeValue = null;
}
if(
!this._oOnclickAttributeValue &&
typeof oObject == "object" &&
typeof oObject.fn == "function"
) {
this.clickEvent.subscribe(
oObject.fn,
(oObject.obj || this),
oObject.scope
);
this._oOnclickAttributeValue = oObject;
}
},
/**
* @method configClassName
* @description Event handler for when the "classname" configuration
* property of a menu item changes.
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.MenuItem} p_oItem Object representing the menu item
* that fired the event.
*/
configClassName: function(p_sType, p_aArgs, p_oItem) {
var sClassName = p_aArgs[0];
if(this._sClassName) {
Dom.removeClass(this.element, this._sClassName);
}
Dom.addClass(this.element, sClassName);
this._sClassName = sClassName;
},
// Public methods
/**
* @method initDefaultConfig
* @description Initializes an item's configurable properties.
*/
initDefaultConfig : function() {
var oConfig = this.cfg,
CheckBoolean = oConfig.checkBoolean;
// Define the configuration attributes
/**
* @config text
* @description String specifying the text label for the menu item.
* When building a menu from existing HTML the value of this property
* will be interpreted from the menu's markup.
* @default ""
* @type String
*/
oConfig.addProperty(
"text",
{
value: "",
handler: this.configText,
validator: this._checkString,
suppressEvent: true
}
);
/**
* @config helptext
* @description String specifying additional instructional text to
* accompany the text for the nenu item.
* @default null
* @type String|
* HTMLElement
*/
oConfig.addProperty("helptext", { handler: this.configHelpText });
/**
* @config url
* @description String specifying the URL for the menu item's anchor's
* "href" attribute. When building a menu from existing HTML the value
* of this property will be interpreted from the menu's markup.
* @default "#"
* @type String
*/
oConfig.addProperty(
"url",
{ value: "#", handler: this.configURL, suppressEvent: true }
);
/**
* @config target
* @description String specifying the value for the "target" attribute
* of the menu item's anchor element. Specifying a target will
* require the user to click directly on the menu item's anchor node in
* order to cause the browser to navigate to the specified URL.
* When building a menu from existing HTML the value of this property
* will be interpreted from the menu's markup.
* @default null
* @type String
*/
oConfig.addProperty(
"target",
{ handler: this.configTarget, suppressEvent: true }
);
/**
* @config emphasis
* @description Boolean indicating if the text of the menu item will be
* rendered with emphasis. When building a menu from existing HTML the
* value of this property will be interpreted from the menu's markup.
* @default false
* @type Boolean
*/
oConfig.addProperty(
"emphasis",
{
value: false,
handler: this.configEmphasis,
validator: CheckBoolean,
suppressEvent: true
}
);
/**
* @config strongemphasis
* @description Boolean indicating if the text of the menu item will be
* rendered with strong emphasis. When building a menu from existing
* HTML the value of this property will be interpreted from the
* menu's markup.
* @default false
* @type Boolean
*/
oConfig.addProperty(
"strongemphasis",
{
value: false,
handler: this.configStrongEmphasis,
validator: CheckBoolean,
suppressEvent: true
}
);
/**
* @config checked
* @description Boolean indicating if the menu item should be rendered
* with a checkmark.
* @default false
* @type Boolean
*/
oConfig.addProperty(
"checked",
{
value: false,
handler: this.configChecked,
validator: this.cfg.checkBoolean,
suppressEvent: true,
supercedes:["disabled"]
}
);
/**
* @config disabled
* @description Boolean indicating if the menu item should be disabled.
* (Disabled menu items are dimmed and will not respond to user input
* or fire events.)
* @default false
* @type Boolean
*/
oConfig.addProperty(
"disabled",
{
value: false,
handler: this.configDisabled,
validator: CheckBoolean,
suppressEvent: true
}
);
/**
* @config selected
* @description Boolean indicating if the menu item should
* be highlighted.
* @default false
* @type Boolean
*/
oConfig.addProperty(
"selected",
{
value: false,
handler: this.configSelected,
validator: CheckBoolean,
suppressEvent: true
}
);
/**
* @config submenu
* @description Object specifying the submenu to be appended to the
* menu item. The value can be one of the following: - Object
* specifying a Menu instance.
- Object literal specifying the
* menu to be created. Format:
{ id: [menu id], itemdata:
* [array of values for
* items] }. - String specifying the id attribute
* of the
<div> element of the menu. -
* Object specifying the
<div> element of the
* menu.
* @default null
* @type Menu|String|Object|
* HTMLElement
*/
oConfig.addProperty("submenu", { handler: this.configSubmenu });
/**
* @config onclick
* @description Object literal representing the code to be executed when
* the button is clicked. Format:
{
* fn: Function, // The handler to call when
* the event fires.
obj: Object, // An
* object to pass back to the handler.
scope:
* Object // The object to use for the scope of the handler.
*
}
* @type Object
* @default null
*/
oConfig.addProperty("onclick", { handler: this.configOnClick });
/**
* @config classname
* @description CSS class to be applied to the menu item's root
* <li> element. The specified class(es) are
* appended in addition to the default class as specified by the menu
* item's CSS_CLASS_NAME constant.
* @default null
* @type String
*/
oConfig.addProperty(
"classname",
{
value: null,
handler: this.configClassName,
validator: this._checkString
}
);
},
/**
* @method getNextEnabledSibling
* @description Finds the menu item's next enabled sibling.
* @return YAHOO.widget.MenuItem
*/
getNextEnabledSibling: function() {
if(this.parent instanceof Menu) {
var nGroupIndex = this.groupIndex;
function getNextArrayItem(p_aArray, p_nStartIndex) {
return p_aArray[p_nStartIndex] ||
getNextArrayItem(p_aArray, (p_nStartIndex+1));
}
var aItemGroups = this.parent.getItemGroups(),
oNextItem;
if(this.index < (aItemGroups[nGroupIndex].length - 1)) {
oNextItem = getNextArrayItem(
aItemGroups[nGroupIndex],
(this.index+1)
);
}
else {
var nNextGroupIndex;
if(nGroupIndex < (aItemGroups.length - 1)) {
nNextGroupIndex = nGroupIndex + 1;
}
else {
nNextGroupIndex = 0;
}
var aNextGroup = getNextArrayItem(aItemGroups, nNextGroupIndex);
// Retrieve the first menu item in the next group
oNextItem = getNextArrayItem(aNextGroup, 0);
}
return (
oNextItem.cfg.getProperty("disabled") ||
oNextItem.element.style.display == "none"
) ?
oNextItem.getNextEnabledSibling() : oNextItem;
}
},
/**
* @method getPreviousEnabledSibling
* @description Finds the menu item's previous enabled sibling.
* @return {YAHOO.widget.MenuItem}
*/
getPreviousEnabledSibling: function() {
if(this.parent instanceof Menu) {
var nGroupIndex = this.groupIndex;
function getPreviousArrayItem(p_aArray, p_nStartIndex) {
return p_aArray[p_nStartIndex] ||
getPreviousArrayItem(p_aArray, (p_nStartIndex-1));
}
function getFirstItemIndex(p_aArray, p_nStartIndex) {
return p_aArray[p_nStartIndex] ?
p_nStartIndex :
getFirstItemIndex(p_aArray, (p_nStartIndex+1));
}
var aItemGroups = this.parent.getItemGroups(),
oPreviousItem;
if(
this.index > getFirstItemIndex(aItemGroups[nGroupIndex], 0)
) {
oPreviousItem =
getPreviousArrayItem(
aItemGroups[nGroupIndex],
(this.index-1)
);
}
else {
var nPreviousGroupIndex;
if(nGroupIndex > getFirstItemIndex(aItemGroups, 0)) {
nPreviousGroupIndex = nGroupIndex - 1;
}
else {
nPreviousGroupIndex = aItemGroups.length - 1;
}
var aPreviousGroup =
getPreviousArrayItem(aItemGroups, nPreviousGroupIndex);
oPreviousItem =
getPreviousArrayItem(
aPreviousGroup,
(aPreviousGroup.length - 1)
);
}
return (
oPreviousItem.cfg.getProperty("disabled") ||
oPreviousItem.element.style.display == "none"
) ?
oPreviousItem.getPreviousEnabledSibling() : oPreviousItem;
}
},
/**
* @method focus
* @description Causes the menu item to receive the focus and fires the
* focus event.
*/
focus: function() {
var oParent = this.parent,
oAnchor = this._oAnchor,
oActiveItem = oParent.activeItem;
function setFocus() {
try {
oAnchor.focus();
}
catch(e) {
}
}
if(
!this.cfg.getProperty("disabled") &&
oParent &&
oParent.cfg.getProperty("visible") &&
this.element.style.display != "none"
) {
if(oActiveItem) {
oActiveItem.blur();
}
/*
Setting focus via a timer fixes a race condition in Firefox, IE
and Opera where the browser viewport jumps as it trys to
position and focus the menu.
*/
window.setTimeout(setFocus, 0);
this.focusEvent.fire();
}
},
/**
* @method blur
* @description Causes the menu item to lose focus and fires the
* onblur event.
*/
blur: function() {
var oParent = this.parent;
if(
!this.cfg.getProperty("disabled") &&
oParent &&
Dom.getStyle(oParent.element, "visibility") == "visible"
) {
this._oAnchor.blur();
this.blurEvent.fire();
}
},
/**
* @method destroy
* @description Removes the menu item's <li> element
* from its parent <ul> element.
*/
destroy: function() {
var oEl = this.element;
if(oEl) {
// If the item has a submenu, destroy it first
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.destroy();
}
// Remove CustomEvent listeners
this.mouseOverEvent.unsubscribeAll();
this.mouseOutEvent.unsubscribeAll();
this.mouseDownEvent.unsubscribeAll();
this.mouseUpEvent.unsubscribeAll();
this.clickEvent.unsubscribeAll();
this.keyPressEvent.unsubscribeAll();
this.keyDownEvent.unsubscribeAll();
this.keyUpEvent.unsubscribeAll();
this.focusEvent.unsubscribeAll();
this.blurEvent.unsubscribeAll();
this.cfg.configChangedEvent.unsubscribeAll();
// Remove the element from the parent node
var oParentNode = oEl.parentNode;
if(oParentNode) {
oParentNode.removeChild(oEl);
this.destroyEvent.fire();
}
this.destroyEvent.unsubscribeAll();
}
},
/**
* @method toString
* @description Returns a string representing the menu item.
* @return {String}
*/
toString: function() {
return ("MenuItem: " + this.cfg.getProperty("text"));
}
};
})();
/**
* Creates a list of options or commands which are made visible in response to
* an HTML element's "contextmenu" event ("mousedown" for Opera).
*
* @param {String} p_oElement String specifying the id attribute of the
* <div> element of the context menu.
* @param {String} p_oElement String specifying the id attribute of the
* <select> element to be used as the data source for the
* context menu.
* @param {HTMLDivElement} p_oElement Object specifying the
* <div> element of the context menu.
* @param {HTMLSelectElement} p_oElement Object specifying
* the <select> element to be used as the data source for
* the context menu.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the context menu. See configuration class documentation
* for more details.
* @class ContextMenu
* @constructor
* @extends YAHOO.widget.Menu
* @namespace YAHOO.widget
*/
YAHOO.widget.ContextMenu = function(p_oElement, p_oConfig) {
YAHOO.widget.ContextMenu.superclass.constructor.call(
this,
p_oElement,
p_oConfig
);
};
YAHOO.lang.extend(YAHOO.widget.ContextMenu, YAHOO.widget.Menu, {
// Private properties
/**
* @property _oTrigger
* @description Object reference to the current value of the "trigger"
* configuration property.
* @default null
* @private
* @type String|HTMLElement|Array
*/
_oTrigger: null,
/**
* @property _bCancelled
* @description Boolean indicating if the display of the context menu should
* be cancelled.
* @default false
* @private
* @type Boolean
*/
_bCancelled: false,
// Public properties
/**
* @property contextEventTarget
* @description Object reference for the HTML element that was the target of the
* "contextmenu" DOM event ("mousedown" for Opera) that triggered the display of
* the context menu.
* @default null
* @type HTMLElement
*/
contextEventTarget: null,
// Events
/**
* @event triggerContextMenuEvent
* @description Custom Event wrapper for the "contextmenu" DOM event
* ("mousedown" for Opera) fired by the element(s) that trigger the display of
* the context menu.
*/
triggerContextMenuEvent: null,
/**
* @method init
* @description The ContextMenu class's initialization method. This method is
* automatically called by the constructor, and sets up all DOM references for
* pre-existing markup, and creates required markup if it is not already present.
* @param {String} p_oElement String specifying the id attribute of the
* <div> element of the context menu.
* @param {String} p_oElement String specifying the id attribute of the
* <select> element to be used as the data source for
* the context menu.
* @param {HTMLDivElement} p_oElement Object specifying the
* <div> element of the context menu.
* @param {HTMLSelectElement} p_oElement Object specifying
* the <select> element to be used as the data source for
* the context menu.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the context menu. See configuration class documentation
* for more details.
*/
init: function(p_oElement, p_oConfig) {
if(!this.ITEM_TYPE) {
this.ITEM_TYPE = YAHOO.widget.ContextMenuItem;
}
// Call the init of the superclass (YAHOO.widget.Menu)
YAHOO.widget.ContextMenu.superclass.init.call(this, p_oElement);
this.beforeInitEvent.fire(YAHOO.widget.ContextMenu);
if(p_oConfig) {
this.cfg.applyConfig(p_oConfig, true);
}
this.initEvent.fire(YAHOO.widget.ContextMenu);
},
/**
* @method initEvents
* @description Initializes the custom events for the context menu.
*/
initEvents: function() {
YAHOO.widget.ContextMenu.superclass.initEvents.call(this);
// Create custom events
this.triggerContextMenuEvent =
new YAHOO.util.CustomEvent("triggerContextMenuEvent", this);
},
/**
* @method cancel
* @description Cancels the display of the context menu.
*/
cancel: function() {
this._bCancelled = true;
},
// Private methods
/**
* @method _removeEventHandlers
* @description Removes all of the DOM event handlers from the HTML element(s)
* whose "context menu" event ("click" for Opera) trigger the display of
* the context menu.
* @private
*/
_removeEventHandlers: function() {
var Event = YAHOO.util.Event,
oTrigger = this._oTrigger,
bOpera = (this.browser == "opera");
// Remove the event handlers from the trigger(s)
Event.removeListener(
oTrigger,
(bOpera ? "mousedown" : "contextmenu"),
this._onTriggerContextMenu
);
if(bOpera) {
Event.removeListener(oTrigger, "click", this._onTriggerClick);
}
},
// Private event handlers
/**
* @method _onTriggerClick
* @description "click" event handler for the HTML element(s) identified as the
* "trigger" for the context menu. Used to cancel default behaviors in Opera.
* @private
* @param {Event} p_oEvent Object representing the DOM event object passed back
* by the event utility (YAHOO.util.Event).
* @param {YAHOO.widget.ContextMenu} p_oMenu Object representing the context
* menu that is handling the event.
*/
_onTriggerClick: function(p_oEvent, p_oMenu) {
if(p_oEvent.ctrlKey) {
YAHOO.util.Event.stopEvent(p_oEvent);
}
},
/**
* @method _onTriggerContextMenu
* @description "contextmenu" event handler ("mousedown" for Opera) for the HTML
* element(s) that trigger the display of the context menu.
* @private
* @param {Event} p_oEvent Object representing the DOM event object passed back
* by the event utility (YAHOO.util.Event).
* @param {YAHOO.widget.ContextMenu} p_oMenu Object representing the context
* menu that is handling the event.
*/
_onTriggerContextMenu: function(p_oEvent, p_oMenu) {
var Event = YAHOO.util.Event;
if(p_oEvent.type == "mousedown" && !p_oEvent.ctrlKey) {
return;
}
/*
Prevent the browser's default context menu from appearing and
stop the propagation of the "contextmenu" event so that
other ContextMenu instances are not displayed.
*/
Event.stopEvent(p_oEvent);
// Hide any other ContextMenu instances that might be visible
YAHOO.widget.MenuManager.hideVisible();
this.contextEventTarget = Event.getTarget(p_oEvent);
this.triggerContextMenuEvent.fire(p_oEvent);
if(!this._bCancelled) {
// Position and display the context menu
this.cfg.setProperty("xy", Event.getXY(p_oEvent));
this.show();
}
this._bCancelled = false;
},
// Public methods
/**
* @method toString
* @description Returns a string representing the context menu.
* @return {String}
*/
toString: function() {
return ("ContextMenu " + this.id);
},
/**
* @method initDefaultConfig
* @description Initializes the class's configurable properties which can be
* changed using the context menu's Config object ("cfg").
*/
initDefaultConfig: function() {
YAHOO.widget.ContextMenu.superclass.initDefaultConfig.call(this);
/**
* @config trigger
* @description The HTML element(s) whose "contextmenu" event ("mousedown"
* for Opera) trigger the display of the context menu. Can be a string
* representing the id attribute of the HTML element, an object reference
* for the HTML element, or an array of strings or HTML element references.
* @default null
* @type String|HTMLElement|Array
*/
this.cfg.addProperty("trigger", { handler: this.configTrigger });
},
/**
* @method destroy
* @description Removes the context menu's <div> element
* (and accompanying child nodes) from the document.
*/
destroy: function() {
// Remove the DOM event handlers from the current trigger(s)
this._removeEventHandlers();
// Continue with the superclass implementation of this method
YAHOO.widget.ContextMenu.superclass.destroy.call(this);
},
// Public event handlers for configuration properties
/**
* @method configTrigger
* @description Event handler for when the value of the "trigger" configuration
* property changes.
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.ContextMenu} p_oMenu Object representing the context
* menu that fired the event.
*/
configTrigger: function(p_sType, p_aArgs, p_oMenu) {
var Event = YAHOO.util.Event,
oTrigger = p_aArgs[0];
if(oTrigger) {
/*
If there is a current "trigger" - remove the event handlers
from that element(s) before assigning new ones
*/
if(this._oTrigger) {
this._removeEventHandlers();
}
this._oTrigger = oTrigger;
/*
Listen for the "mousedown" event in Opera b/c it does not
support the "contextmenu" event
*/
var bOpera = (this.browser == "opera");
Event.addListener(
oTrigger,
(bOpera ? "mousedown" : "contextmenu"),
this._onTriggerContextMenu,
this,
true
);
/*
Assign a "click" event handler to the trigger element(s) for
Opera to prevent default browser behaviors.
*/
if(bOpera) {
Event.addListener(
oTrigger,
"click",
this._onTriggerClick,
this,
true
);
}
}
else {
this._removeEventHandlers();
}
}
}); // END YAHOO.lang.extend
/**
* Creates an item for a context menu.
*
* @param {String} p_oObject String specifying the text of the context menu item.
* @param {HTMLLIElement} p_oObject Object specifying the
* <li> element of the context menu item.
* @param {HTMLOptGroupElement} p_oObject Object
* specifying the <optgroup> element of the context
* menu item.
* @param {HTMLOptionElement} p_oObject Object specifying
* the <option> element of the context menu item.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the context menu item. See configuration class
* documentation for more details.
* @class ContextMenuItem
* @constructor
* @extends YAHOO.widget.MenuItem
*/
YAHOO.widget.ContextMenuItem = function(p_oObject, p_oConfig) {
YAHOO.widget.ContextMenuItem.superclass.constructor.call(
this,
p_oObject,
p_oConfig
);
};
YAHOO.lang.extend(YAHOO.widget.ContextMenuItem, YAHOO.widget.MenuItem, {
/**
* @method init
* @description The ContextMenuItem class's initialization method. This method
* is automatically called by the constructor, and sets up all DOM references
* for pre-existing markup, and creates required markup if it is not
* already present.
* @param {String} p_oObject String specifying the text of the context menu item.
* @param {HTMLLIElement} p_oObject Object specifying the
* <li> element of the context menu item.
* @param {HTMLOptGroupElement} p_oObject Object
* specifying the <optgroup> element of the context
* menu item.
* @param {HTMLOptionElement} p_oObject Object specifying
* the <option> element of the context menu item.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the context menu item. See configuration class
* documentation for more details.
*/
init: function(p_oObject, p_oConfig) {
if(!this.SUBMENU_TYPE) {
this.SUBMENU_TYPE = YAHOO.widget.ContextMenu;
}
/*
Call the init of the superclass (YAHOO.widget.MenuItem)
Note: We don't pass the user config in here yet
because we only want it executed once, at the lowest
subclass level.
*/
YAHOO.widget.ContextMenuItem.superclass.init.call(this, p_oObject);
var oConfig = this.cfg;
if(p_oConfig) {
oConfig.applyConfig(p_oConfig, true);
}
oConfig.fireQueue();
},
// Public methods
/**
* @method toString
* @description Returns a string representing the context menu item.
* @return {String}
*/
toString: function() {
return ("ContextMenuItem: " + this.cfg.getProperty("text"));
}
}); // END YAHOO.lang.extend
/**
* Horizontal collection of items, each of which can contain a submenu.
*
* @param {String} p_oElement String specifying the id attribute of the
* <div> element of the menu bar.
* @param {String} p_oElement String specifying the id attribute of the
* <select> element to be used as the data source for the
* menu bar.
* @param {HTMLDivElement} p_oElement Object specifying
* the <div> element of the menu bar.
* @param {HTMLSelectElement} p_oElement Object
* specifying the <select> element to be used as the data
* source for the menu bar.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the menu bar. See configuration class documentation for
* more details.
* @class Menubar
* @constructor
* @extends YAHOO.widget.Menu
* @namespace YAHOO.widget
*/
YAHOO.widget.MenuBar = function(p_oElement, p_oConfig) {
YAHOO.widget.MenuBar.superclass.constructor.call(
this,
p_oElement,
p_oConfig
);
};
YAHOO.lang.extend(YAHOO.widget.MenuBar, YAHOO.widget.Menu, {
/**
* @method init
* @description The MenuBar class's initialization method. This method is
* automatically called by the constructor, and sets up all DOM references for
* pre-existing markup, and creates required markup if it is not already present.
* @param {String} p_oElement String specifying the id attribute of the
* <div> element of the menu bar.
* @param {String} p_oElement String specifying the id attribute of the
* <select> element to be used as the data source for the
* menu bar.
* @param {HTMLDivElement} p_oElement Object specifying
* the <div> element of the menu bar.
* @param {HTMLSelectElement} p_oElement Object
* specifying the <select> element to be used as the data
* source for the menu bar.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the menu bar. See configuration class documentation for
* more details.
*/
init: function(p_oElement, p_oConfig) {
if(!this.ITEM_TYPE) {
this.ITEM_TYPE = YAHOO.widget.MenuBarItem;
}
// Call the init of the superclass (YAHOO.widget.Menu)
YAHOO.widget.MenuBar.superclass.init.call(this, p_oElement);
this.beforeInitEvent.fire(YAHOO.widget.MenuBar);
if(p_oConfig) {
this.cfg.applyConfig(p_oConfig, true);
}
this.initEvent.fire(YAHOO.widget.MenuBar);
},
// Constants
/**
* @property CSS_CLASS_NAME
* @description String representing the CSS class(es) to be applied to the menu
* bar's <div> element.
* @default "yuimenubar"
* @final
* @type String
*/
CSS_CLASS_NAME: "yuimenubar",
// Protected event handlers
/**
* @method _onKeyDown
* @description "keydown" Custom Event handler for the menu bar.
* @private
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.MenuBar} p_oMenuBar Object representing the menu bar
* that fired the event.
*/
_onKeyDown: function(p_sType, p_aArgs, p_oMenuBar) {
var Event = YAHOO.util.Event,
oEvent = p_aArgs[0],
oItem = p_aArgs[1],
oSubmenu;
if(oItem && !oItem.cfg.getProperty("disabled")) {
var oItemCfg = oItem.cfg;
switch(oEvent.keyCode) {
case 37: // Left arrow
case 39: // Right arrow
if(
oItem == this.activeItem &&
!oItemCfg.getProperty("selected")
) {
oItemCfg.setProperty("selected", true);
}
else {
var oNextItem = (oEvent.keyCode == 37) ?
oItem.getPreviousEnabledSibling() :
oItem.getNextEnabledSibling();
if(oNextItem) {
this.clearActiveItem();
oNextItem.cfg.setProperty("selected", true);
if(this.cfg.getProperty("autosubmenudisplay")) {
oSubmenu = oNextItem.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.show();
oSubmenu.activeItem.blur();
oSubmenu.activeItem = null;
}
}
oNextItem.focus();
}
}
Event.preventDefault(oEvent);
break;
case 40: // Down arrow
if(this.activeItem != oItem) {
this.clearActiveItem();
oItemCfg.setProperty("selected", true);
oItem.focus();
}
oSubmenu = oItemCfg.getProperty("submenu");
if(oSubmenu) {
if(oSubmenu.cfg.getProperty("visible")) {
oSubmenu.setInitialSelection();
oSubmenu.setInitialFocus();
}
else {
oSubmenu.show();
}
}
Event.preventDefault(oEvent);
break;
}
}
if(oEvent.keyCode == 27 && this.activeItem) { // Esc key
oSubmenu = this.activeItem.cfg.getProperty("submenu");
if(oSubmenu && oSubmenu.cfg.getProperty("visible")) {
oSubmenu.hide();
this.activeItem.focus();
}
else {
this.activeItem.cfg.setProperty("selected", false);
this.activeItem.blur();
}
Event.preventDefault(oEvent);
}
},
/**
* @method _onClick
* @description "click" event handler for the menu bar.
* @protected
* @param {String} p_sType String representing the name of the event that
* was fired.
* @param {Array} p_aArgs Array of arguments sent when the event was fired.
* @param {YAHOO.widget.MenuBar} p_oMenuBar Object representing the menu bar
* that fired the event.
*/
_onClick: function(p_sType, p_aArgs, p_oMenuBar) {
YAHOO.widget.MenuBar.superclass._onClick.call(
this,
p_sType,
p_aArgs,
p_oMenuBar
);
var oItem = p_aArgs[1];
if(oItem && !oItem.cfg.getProperty("disabled")) {
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
oEvent = p_aArgs[0],
oTarget = Event.getTarget(oEvent),
oActiveItem = this.activeItem,
oConfig = this.cfg;
// Hide any other submenus that might be visible
if(oActiveItem && oActiveItem != oItem) {
this.clearActiveItem();
}
// Select and focus the current item
oItem.cfg.setProperty("selected", true);
oItem.focus();
// Show the submenu for the item
var oSubmenu = oItem.cfg.getProperty("submenu");
if(oSubmenu && oTarget != oItem.submenuIndicator) {
if(oSubmenu.cfg.getProperty("visible")) {
oSubmenu.hide();
}
else {
oSubmenu.show();
}
}
}
},
// Public methods
/**
* @method toString
* @description Returns a string representing the menu bar.
* @return {String}
*/
toString: function() {
return ("MenuBar " + this.id);
},
/**
* @description Initializes the class's configurable properties which can be
* changed using the menu bar's Config object ("cfg").
* @method initDefaultConfig
*/
initDefaultConfig: function() {
YAHOO.widget.MenuBar.superclass.initDefaultConfig.call(this);
var oConfig = this.cfg;
// Add configuration properties
/*
Set the default value for the "position" configuration property
to "static" by re-adding the property.
*/
/**
* @config position
* @description String indicating how a menu bar should be positioned on the
* screen. Possible values are "static" and "dynamic." Static menu bars
* are visible by default and reside in the normal flow of the document
* (CSS position: static). Dynamic menu bars are hidden by default, reside
* out of the normal flow of the document (CSS position: absolute), and can
* overlay other elements on the screen.
* @default static
* @type String
*/
oConfig.addProperty(
"position",
{
value: "static",
handler: this.configPosition,
validator: this._checkPosition,
supercedes: ["visible"]
}
);
/*
Set the default value for the "submenualignment" configuration property
to ["tl","bl"] by re-adding the property.
*/
/**
* @config submenualignment
* @description Array defining how submenus should be aligned to their
* parent menu bar item. The format is: [itemCorner, submenuCorner].
* @default ["tl","bl"]
* @type Array
*/
oConfig.addProperty("submenualignment", { value: ["tl","bl"] } );
/*
Change the default value for the "autosubmenudisplay" configuration
property to "false" by re-adding the property.
*/
/**
* @config autosubmenudisplay
* @description Boolean indicating if submenus are automatically made
* visible when the user mouses over the menu bar's items.
* @default false
* @type Boolean
*/
oConfig.addProperty(
"autosubmenudisplay",
{ value: false, validator: oConfig.checkBoolean }
);
}
}); // END YAHOO.lang.extend
/**
* Creates an item for a menu bar.
*
* @param {String} p_oObject String specifying the text of the menu bar item.
* @param {HTMLLIElement} p_oObject Object specifying the
* <li> element of the menu bar item.
* @param {HTMLOptGroupElement} p_oObject Object
* specifying the <optgroup> element of the menu bar item.
* @param {HTMLOptionElement} p_oObject Object specifying
* the <option> element of the menu bar item.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the menu bar item. See configuration class documentation
* for more details.
* @class MenuBarItem
* @constructor
* @extends YAHOO.widget.MenuItem
*/
YAHOO.widget.MenuBarItem = function(p_oObject, p_oConfig) {
YAHOO.widget.MenuBarItem.superclass.constructor.call(
this,
p_oObject,
p_oConfig
);
};
YAHOO.lang.extend(YAHOO.widget.MenuBarItem, YAHOO.widget.MenuItem, {
/**
* @method init
* @description The MenuBarItem class's initialization method. This method is
* automatically called by the constructor, and sets up all DOM references for
* pre-existing markup, and creates required markup if it is not already present.
* @param {String} p_oObject String specifying the text of the menu bar item.
* @param {HTMLLIElement} p_oObject Object specifying the
* <li> element of the menu bar item.
* @param {HTMLOptGroupElement} p_oObject Object
* specifying the <optgroup> element of the menu bar item.
* @param {HTMLOptionElement} p_oObject Object specifying
* the <option> element of the menu bar item.
* @param {Object} p_oConfig Optional. Object literal specifying the
* configuration for the menu bar item. See configuration class documentation
* for more details.
*/
init: function(p_oObject, p_oConfig) {
if(!this.SUBMENU_TYPE) {
this.SUBMENU_TYPE = YAHOO.widget.Menu;
}
/*
Call the init of the superclass (YAHOO.widget.MenuItem)
Note: We don't pass the user config in here yet
because we only want it executed once, at the lowest
subclass level.
*/
YAHOO.widget.MenuBarItem.superclass.init.call(this, p_oObject);
var oConfig = this.cfg;
if(p_oConfig) {
oConfig.applyConfig(p_oConfig, true);
}
oConfig.fireQueue();
},
// Constants
/**
* @property CSS_CLASS_NAME
* @description String representing the CSS class(es) to be applied to the
* <li> element of the menu bar item.
* @default "yuimenubaritem"
* @final
* @type String
*/
CSS_CLASS_NAME: "yuimenubaritem",
// Public methods
/**
* @method toString
* @description Returns a string representing the menu bar item.
* @return {String}
*/
toString: function() {
return ("MenuBarItem: " + this.cfg.getProperty("text"));
}
}); // END YAHOO.lang.extend
YAHOO.register("menu", YAHOO.widget.Menu, {version: "2.2.0", build: "127"});