menu.js

GridSphere 门户 提供一个基于 portlet 的高级开放源代码门户。GridSphere 是在欧盟提供基金的 GridLab 项目下开发的

/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.txt
Version: 0.11.3
*/



/**
* @class The superclass of all menu containers.
* @constructor
* @extends YAHOO.widget.Overlay
* @base YAHOO.widget.Overlay
* @param {String or HTMLElement} p_oElement String id or HTMLElement
* (either HTMLSelectElement or HTMLDivElement) of the source HTMLElement node.
* @param {Object} p_oConfig Optional. The configuration object literal
* containing the configuration for a MenuModule instance. See
* configuration class documentation for more details.
*/
YAHOO.widget.MenuModule = function(p_oElement, p_oConfig) {

    YAHOO.widget.MenuModule.superclass.constructor.call(
        this,
        p_oElement,
        p_oConfig
    );

};

YAHOO.extend(YAHOO.widget.MenuModule, YAHOO.widget.Overlay);

// Private globals

/**
* Private global flag indicating if the DOM event handlers have been attached
* @private
* @type {Boolean}
*/
YAHOO.widget.MenuModule._initEventHandlers = true;

/**
* Private global collection of menus
* @private
* @type {Object}
*/
YAHOO.widget.MenuModule._menus = {};

/**
* Private global collection of menu items
* @private
* @type {Object}
*/
YAHOO.widget.MenuModule._menuItems = {};

/**
* Generic, global event handler for all of a menu's DOM-based events.  This
* listens for events against the document object.  If the target of a given
* event is a member of a menu or menu item's DOM, the instance's corresponding
* Custom Event is fired.
* @private
* @param {Event} p_oEvent Event object passed back by the event
* utility (YAHOO.util.Event).
*/
YAHOO.widget.MenuModule._onDOMEvent = function(p_oEvent) {

    // Create references to the DOM and Event utilities

    var Dom = YAHOO.util.Dom;
    var Event = YAHOO.util.Event;

    // The target node of the DOM event

    var oTarget = Event.getTarget(p_oEvent);

    // A reference to the root LI node of a menu item

    var oMenuItemRootElement;

    /**
    * Finds the root DIV node of a menu and the root LI node of a menu item
    * @private
    * @param {HTMLElement} p_oElement An HTML element
    */
    function getMenuRootElement(p_oElement) {

        var oParentNode;

        switch(p_oElement.tagName) {

            case "DIV":

                oParentNode = p_oElement.parentNode;

                // Check if the DIV is the inner "body" node of a menu
                if(
                    Dom.hasClass(p_oElement, "bd") &&
                    oParentNode &&
                    oParentNode.tagName == "DIV"
                ) {

                    return oParentNode;

                }
                else {

                    return p_oElement;

                }

            break;

            case "LI":

                /*
                    Capture the root LI node of the menu item and allow
                    fall through to keep climbing up to find the item's parent
                    root DIV
                */

                oMenuItemRootElement = p_oElement;

            default:

                oParentNode = p_oElement.parentNode;

                if(oParentNode) {

                    return getMenuRootElement(oParentNode);

                }

            break;

        }

    }

    // The root DIV node of a menu

    var oMenuRootElement = getMenuRootElement(oTarget);

    if(oMenuRootElement && oMenuRootElement.id) {

        var oMenuItem;
        var oMenu = YAHOO.widget.MenuModule._menus[oMenuRootElement.id];

        if(oMenuItemRootElement) {

            var sYUIId = oMenuItemRootElement.getAttribute("yuiid");

            if(sYUIId) {

                oMenuItem = YAHOO.widget.MenuModule._menuItems[sYUIId];

            }

        }

        if(oMenu) {

            // Map of DOM event names to CustomEvent names

            var oEventTypes =  {
                    "click": "clickEvent",
                    "mousedown": "mouseDownEvent",
                    "mouseup": "mouseUpEvent",
                    "mouseover": "mouseOverEvent",
                    "mouseout": "mouseOutEvent",
                    "keydown": "keyDownEvent",
                    "keyup": "keyUpEvent",
                    "keypress": "keyPressEvent"
                };

            var sCustomEventType = oEventTypes[p_oEvent.type];

            switch(p_oEvent.type) {

                case "mouseover":

                    if(
                        !oMenu._bFiredMouseOverEvent &&
                        (
                            oTarget == oMenu.element ||
                            Dom.isAncestor(oMenu.element, oTarget)
                        )
                    ) {

                        oMenu.mouseOverEvent.fire(p_oEvent);

                        oMenu._bFiredMouseOverEvent = true;
                        oMenu._bFiredMouseOutEvent = false;

                    }

                    if(
                        oMenuItem &&
                        !oMenuItem._bFiredMouseOverEvent &&
                        (
                            oTarget == oMenuItem.element ||
                            Dom.isAncestor(oMenuItem.element, oTarget)
                        ) &&
                        !oMenuItem.cfg.getProperty("disabled")
                    ) {

                        oMenuItem.mouseOverEvent.fire(p_oEvent);

                        oMenuItem._bFiredMouseOverEvent = true;
                        oMenuItem._bFiredMouseOutEvent = false;

                    }

                break;

                case "mouseout":

                    var oRelatedTarget = Event.getRelatedTarget(p_oEvent);
                    var bMovingToSubmenu = false;

                    if(oMenuItem) {

                        var oSubmenu = oMenuItem.cfg.getProperty("submenu");

                        if(
                            oSubmenu &&
                            (
                                oRelatedTarget == oSubmenu.element ||
                                Dom.isAncestor(oSubmenu.element, oRelatedTarget)
                            )
                        ) {

                            bMovingToSubmenu = true;

                        }

                    }

                    if(
                        oMenuItem &&
                        !oMenuItem._bFiredMouseOutEvent &&
                        (
                            (
                                oRelatedTarget != oMenuItem.element &&
                                !Dom.isAncestor(
                                    oMenuItem.element,
                                    oRelatedTarget
                                )
                            ) || bMovingToSubmenu
                        ) &&
                        !oMenuItem.cfg.getProperty("disabled")
                    ) {

                        // Fire the "mouseout" Custom Event for the item

                        oMenuItem.mouseOutEvent.fire(p_oEvent);

                        oMenuItem._bFiredMouseOutEvent = true;
                        oMenuItem._bFiredMouseOverEvent = false;

                    }

                    if(
                        !oMenu._bFiredMouseOutEvent &&
                        (
                            (
                                oRelatedTarget != oMenu.element &&
                                !Dom.isAncestor(oMenu.element, oRelatedTarget)
                            )
                            || bMovingToSubmenu
                        )
                    ) {

                        oMenu.mouseOutEvent.fire(p_oEvent);

                        oMenu._bFiredMouseOutEvent = true;
                        oMenu._bFiredMouseOverEvent = false;

                    }

                break;

                default:

                    if(oMenuItem && !oMenuItem.cfg.getProperty("disabled")) {

                        oMenuItem[sCustomEventType].fire(p_oEvent);

                    }

                    oMenu[sCustomEventType].fire(p_oEvent);

                break;

            }

        }

    }

};

// Constants

/**
* Constant representing the CSS class(es) to be applied to the root
* HTMLDivElement of the MenuModule instance.
* @final
* @type String
*/
YAHOO.widget.MenuModule.prototype.CSS_CLASS_NAME = "yuimenu";

/**
* Constant representing the type of item to instantiate and add when parsing
* the child nodes (either HTMLLIElement, HTMLOptGroupElement or
* HTMLOptionElement) of a menu's DOM.  The default
* is YAHOO.widget.MenuModuleItem.
* @final
* @type YAHOO.widget.MenuModuleItem
*/
YAHOO.widget.MenuModule.prototype.ITEM_TYPE = null;

/**
* Constant representing the tagname of the HTMLElement used to title
* a group of items.
* @final
* @type String
*/
YAHOO.widget.MenuModule.prototype.GROUP_TITLE_TAG_NAME = "H6";

// Private properties

/**
* The current state of a MenuModule instance's "mouseover" event
* @private
* @type {Boolean}
*/
YAHOO.widget.MenuModule.prototype._bFiredMouseOverEvent = false;

/**
* The current state of a MenuModule instance's "mouseout" event
* @private
* @type {Boolean}
*/
YAHOO.widget.MenuModule.prototype._bFiredMouseOutEvent = false;

/**
* Array of HTMLElements used to title groups of items.
* @private
* @type {Array}
*/
YAHOO.widget.MenuModule.prototype._aGroupTitleElements = null;

/**
* Multi-dimensional array of items.
* @private
* @type {Array}
*/
YAHOO.widget.MenuModule.prototype._aItemGroups = null;

/**
* An array of HTMLUListElements, each of which is the parent node of each
* items's HTMLLIElement node.
* @private
* @type {Array}
*/
YAHOO.widget.MenuModule.prototype._aListElements = null;

/**
* Reference to the Event utility singleton.
* @private
* @type {YAHOO.util.Event}
*/
YAHOO.widget.MenuModule.prototype._oEventUtil = YAHOO.util.Event;

/**
* Reference to the Dom utility singleton.
* @private
* @type {YAHOO.util.Dom}
*/
YAHOO.widget.MenuModule.prototype._oDom = YAHOO.util.Dom;

// Public properties

/**
* Reference to the item that has focus.
* @private
* @type {YAHOO.widget.MenuModuleItem}
*/
YAHOO.widget.MenuModule.prototype.activeItem = null;

/**
* Returns a MenuModule instance's parent object.
* @type {YAHOO.widget.MenuModuleItem}
*/
YAHOO.widget.MenuModule.prototype.parent = null;

/**
* Returns the HTMLElement (either HTMLSelectElement or HTMLDivElement)
* used create the MenuModule instance.
* @type {HTMLSelectElement/HTMLDivElement}
*/
YAHOO.widget.MenuModule.prototype.srcElement = null;

// Events

/**
* Fires when the mouse has entered a MenuModule instance.  Passes back the
* DOM Event object as an argument.
* @type {YAHOO.util.CustomEvent}
* @see YAHOO.util.CustomEvent
*/
YAHOO.widget.MenuModule.prototype.mouseOverEvent = null;

/**
* Fires when the mouse has left a MenuModule instance.  Passes back the DOM
* Event object as an argument.
* @type {YAHOO.util.CustomEvent}
* @see YAHOO.util.CustomEvent
*/
YAHOO.widget.MenuModule.prototype.mouseOutEvent = null;

/**
* Fires when the user mouses down on a MenuModule instance.  Passes back the
* DOM Event object as an argument.
* @type {YAHOO.util.CustomEvent}
* @see YAHOO.util.CustomEvent
*/
YAHOO.widget.MenuModule.prototype.mouseDownEvent = null;

/**
* Fires when the user releases a mouse button while the mouse is over
* a MenuModule instance.  Passes back the DOM Event object as an argument.
* @type {YAHOO.util.CustomEvent}
* @see YAHOO.util.CustomEvent
*/
YAHOO.widget.MenuModule.prototype.mouseUpEvent = null;

/**
* Fires when the user clicks the on a MenuModule instance.  Passes back the
* DOM Event object as an argument.
* @type {YAHOO.util.CustomEvent}
* @see YAHOO.util.CustomEvent
*/
YAHOO.widget.MenuModule.prototype.clickEvent = null;

/**
* Fires when the user presses an alphanumeric key.  Passes back the
* DOM Event object as an argument.
* @type {YAHOO.util.CustomEvent}
* @see YAHOO.util.CustomEvent
*/
YAHOO.widget.MenuModule.prototype.keyPressEvent = null;

/**
* Fires when the user presses a key.  Passes back the DOM Event
* object as an argument.
* @type {YAHOO.util.CustomEvent}
* @see YAHOO.util.CustomEvent
*/
YAHOO.widget.MenuModule.prototype.keyDownEvent = null;

/**
* Fires when the user releases a key.  Passes back the DOM Event
* object as an argument.
* @type {YAHOO.util.CustomEvent}
* @see YAHOO.util.CustomEvent
*/
YAHOO.widget.MenuModule.prototype.keyUpEvent = null;

/**
* The MenuModule 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 or HTMLElement} p_oElement String id or HTMLElement
* (either HTMLSelectElement or HTMLDivElement) of the source HTMLElement node.
* @param {Object} p_oConfig Optional. The configuration object literal
* containing the configuration for a MenuModule instance. See
* configuration class documentation for more details.
*/
YAHOO.widget.MenuModule.prototype.init = function(p_oElement, p_oConfig) {

    var Dom = this._oDom;
    var Event = this._oEventUtil;

    if(!this.ITEM_TYPE) {

        this.ITEM_TYPE = YAHOO.widget.MenuModuleItem;

    }

    this._aItemGroups = [];
    this._aListElements = [];
    this._aGroupTitleElements = [];

    var oElement;

    if(typeof p_oElement == "string") {

        oElement = document.getElementById(p_oElement);

    }
    else if(p_oElement.tagName) {

        oElement = p_oElement;

    }

    if(oElement) {