menu.js

来自「国外很不错的一个开源OA系统Group-Office」· JavaScript 代码 · 共 2,751 行 · 第 1/5 页

        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.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 <code>&#60;div&#62;</code> 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 <code>&#60;li&#62;</code> element,
* <code>&#60;optgroup&#62;</code> element or <code>&#60;option&#62;</code>)
* 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 _hideDelayEventHandlersAssigned
* @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
*/
_hideDelayEventHandlersAssigned: 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 Array of menu items.
* @default []
* @private
* @type Array
*/
_aItemGroups: null,

/**
* @property _aListElements
* @description Array of <code>&#60;ul&#62;</code> elements, each of which is
* the parent node for each item's <code>&#60;li&#62;</code> element.
* @default []
* @private
* @type Array
*/
_aListElements: 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
* <code>&#60;select&#62;</code> or <code>&#60;div&#62;</code>) used to
* create the menu.
* @default null
* @type <a href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/
* level-one-html.html#ID-94282980">HTMLSelectElement</a>|<a
* href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.
* html#ID-22445964">HTMLDivElement</a>
*/
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
* <code>&#60;div&#62;</code> element of the menu.
* @param {String} p_oElement String specifying the id attribute of the
* <code>&#60;select&#62;</code> element to be used as the data source
* for the menu.
* @param {<a href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/
* level-one-html.html#ID-22445964">HTMLDivElement</a>} p_oElement Object
* specifying the <code>&#60;div&#62;</code> element of the menu.
* @param {<a href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/
* level-one-html.html#ID-94282980">HTMLSelectElement</a>} p_oElement
* Object specifying the <code>&#60;select&#62;</code> 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._onRender, this, true);
        this.beforeShowEvent.subscribe(this._onBeforeShow, this, true);
        this.showEvent.subscribe(this._onShow, this, true);
        this.beforeHideEvent.subscribe(this._onBeforeHide, 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);

        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 == "DIV") {

        /*
            Populate the collection of item groups and item
            group titles
        */

        oNode = this.body.firstChild;

        var nGroup = 0;
        var 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) {

        switch(this.srcElement.tagName.toUpperCase()) {

            case "DIV":

                if(this._aListElements.length > 0) {


                    var i = this._aListElements.length - 1;

                    do {

                        oNode = this._aListElements[i].firstChild;


                        do {

                            if(oNode && oNode.tagName) {

                                switch(oNode.tagName.toUpperCase()) {

                                    case "LI":


                                        this.addItem(
                                                new this.ITEM_TYPE(
                                                    oNode,
                                                    { parent: this }
                                                ),
                                                i
                                            );

                                    break;

                                }

                            }

                        }
                        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 }
                                            )
                                        );