render.menu.js

一个ajax富客户端的ajax类库

/**
 * Abstract base class for menu rendering peers.
 */
ExtrasRender.ComponentSync.Menu = Core.extend(EchoRender.ComponentSync, {
    
    $static: {
        _defaultForeground: "#000000",
        _defaultBackground: "#cfcfcf",
        _defaultDisabledForeground: "#7f7f7f",
        _defaultSelectionForeground: "#ffffff",
        _defaultSelectionBackground: "#3f3f3f",
        _defaultBorder: "1px outset #cfcfcf",
        MAX_Z_INDEX: 65535
    }, 
    
    menuModel: null,
    stateModel: null,
    element: null,
    active: false,

    /**
     * Array containing RenderedState objects for open menus.
     */
    _openMenuPath: null,
    
    /**
     * Flag indicating whether menu mask is deployed.
     */
    _maskDeployed: false,
    
    _processMaskClickRef: null,
    _processKeyPressRef: null,
    
    $construct: function() {
        this._processMaskClickRef = Core.method(this, this._processMaskClick);
        this._processKeyPressRef = Core.method(this, this.processKeyPress);
        this._openMenuPath = [];
    },

    $abstract: {
    
        /**
         * Returns an object containing 'x' and 'y' properties indicating the position at 
         * which a submenu should be placed.
         */
        getSubMenuPosition: function(menuModel, width, height) { },

        renderMain: function(update) { }
    },
    
    $virtual: {

        activate: function() {
            if (this.active) {
                return false;
            }
            this.active = true;
            this.addMask();
            
            WebCore.DOM.focusElement(this.element);
            WebCore.EventProcessor.add(this.element, 
                    WebCore.Environment.QUIRK_IE_KEY_DOWN_EVENT_REPEAT ? "keydown" : "keypress",
                    this._processKeyPressRef, true);
            
            return true;
        },

        activateItem: function(itemModel) {
            if (this.stateModel && !this.stateModel.isEnabled(itemModel.modelId)) {
                return;
            }
            if (itemModel instanceof ExtrasApp.OptionModel) {
                this.deactivate();
                this.processAction(itemModel);
            } else if (itemModel instanceof ExtrasApp.MenuModel) {
                this._openMenu(itemModel);
            }
        },
        
        processAction: function(itemModel) {
            var path = itemModel.getItemPositionPath().join(".");
            this.component.fireEvent({type: "action", source: this.component, data: path, modelId: itemModel.modelId});
        },
        
        processKeyPress: function(e) {
            switch (e.keyCode) {
            case 27:
                this.deactivate();
                return false;
            }
            return true;
        }
    },

    addMenu: function(menu) {
        this._openMenuPath.push(menu);
    },
    
    addMask: function() {
        if (this.maskDeployed) {
            return;
        }
        this.maskDeployed = true;
        
        WebCore.EventProcessor.add(document.body, "click", this._processMaskClickRef, false);
        WebCore.EventProcessor.add(document.body, "contextmenu", this._processMaskClickRef, false);
    },
    
    closeAll: function() {
        while (this._openMenuPath.length > 0) {
            var menu = this._openMenuPath.pop();
            menu.close();
        }
    },
    
    closeDescendants: function(parentMenu) {
        while (parentMenu != this._openMenuPath[this._openMenuPath.length - 1]) {
            var menu = this._openMenuPath.pop();
            menu.close();
        }
    },
    
    deactivate: function() {
        if (!this.active) {
            return;
        }
        this.active = false;

        WebCore.EventProcessor.remove(this.element, 
                WebCore.Environment.QUIRK_IE_KEY_DOWN_EVENT_REPEAT ? "keydown" : "keypress",
                this._processKeyPressRef, true);
        
        this.closeAll();
        this.removeMask();
    },
    
    isOpen: function(menuModel) {
        for (var i = 0; i < this._openMenuPath.length; ++i) {
            if (this._openMenuPath[i].menuModel == menuModel) {
                return true;
            }
        }
        return false;
    },
    
    _openMenu: function(menuModel) {
        if (this.isOpen(menuModel)) {
            return;
        }
        
        var subMenu = new ExtrasRender.ComponentSync.Menu.RenderedMenu(this, menuModel);
        subMenu.create();

        var parentMenu = null;
        for (var i = 0; i < this._openMenuPath.length; ++i) {
            if (this._openMenuPath[i].menuModel == menuModel.parent) {
                parentMenu = this._openMenuPath[i];
                break;
            }
        }
        
        if (parentMenu == null) {
            parentMenu = this;
        } else {
            this.closeDescendants(parentMenu);
        }

        var position = parentMenu.getSubMenuPosition(menuModel, subMenu.width, subMenu.height);
        subMenu.add(position.x, position.y);
        
        this.addMenu(subMenu);
    },

    _processMaskClick: function(e) {
        this.deactivate();
        return true;
    },
    
    removeMask: function() {
        if (!this.maskDeployed) {
            return;
        }
        this.maskDeployed = false;
        WebCore.EventProcessor.remove(document.body, "click", this._processMaskClickRef, false);
        WebCore.EventProcessor.remove(document.body, "contextmenu", this._processMaskClickRef, false);
    },
    
    renderAdd: function(update, parentElement) {
        this.menuModel = this.component.get("model");
        this.stateModel = this.component.get("stateModel");
        
        this.element = this.renderMain(update);
        this.element.tabIndex = "-1";
        this.element.style.outlineStyle = "none";
        parentElement.appendChild(this.element);
    },
    
    renderDispose: function(update) {
        this.deactivate();
    },
    
    renderUpdate: function(update) {
        var element = this.element;
        var containerElement = element.parentNode;
        EchoRender.renderComponentDispose(update, update.parent);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
        return false;
    }
});

ExtrasRender.ComponentSync.Menu.RenderedMenu = Core.extend({

    $static: {
        defaultIconTextMargin: 5,
        defaultMenuInsets: "2px",
        defaultMenuItemInsets: "1px 12px"
    },
    
    menuSync: null,
    component: null,
    client: null,
    element: null,
    itemElements: null,
    menuModel: null,
    width: null,
    height: null,
    _activeItem: null,
    stateModel: null,
    
    $construct: function(menuSync, menuModel) {
        this.menuSync = menuSync;
        this.menuModel = menuModel;
        this.component = this.menuSync.component;
        this.client = this.menuSync.client;
        this.stateModel = this.menuSync.stateModel;
        this.itemElements = { };
    },

    add: function(x, y) {
        this.element.style.left = x + "px";
        this.element.style.top = y + "px";

        var animationTime = this.component.render("animationTime", 0);
        if (!animationTime || WebCore.Environment.NOT_SUPPORTED_CSS_OPACITY) {
            document.body.appendChild(this.element);
        } else {
            this.element.style.opacity = 0;
            var fullOpacity = (WebCore.Environment.NOT_SUPPORTED_CSS_OPACITY ? 
                    100 : this.component.render("menuOpacity", 100)) / 100;
            var fadeRunnable = new ExtrasRender.FadeRunnable(this.element, true, fullOpacity, animationTime);
            WebCore.Scheduler.add(fadeRunnable);
            document.body.appendChild(this.element);
        }

        WebCore.EventProcessor.add(this.element, "click", Core.method(this, this._processClick), false);
        WebCore.EventProcessor.add(this.element, "mouseover", Core.method(this, this._processItemEnter), false);
        WebCore.EventProcessor.add(this.element, "mouseout", Core.method(this, this._processItemExit), false);
        WebCore.EventProcessor.Selection.disable(this.element);
    },

    close: function() {
        document.body.removeChild(this.element);
        this.element = null;
        this.itemElements = null;
        this._activeItem = null;
    },

    create: function() {
        this.element = document.createElement("div");
        this.element.style.position = "absolute";
        this.element.style.zIndex = ExtrasRender.ComponentSync.Menu.MAX_Z_INDEX;

        var opacity = (WebCore.Environment.NOT_SUPPORTED_CSS_OPACITY ? 100 : this.component.render("menuOpacity", 100)) / 100;

        var menuContentDivElement = document.createElement("div");
        menuContentDivElement.style.cssText = "position:relative;z-index:10;";
        this.element.appendChild(menuContentDivElement);

        EchoAppRender.Insets.render(ExtrasRender.ComponentSync.Menu.RenderedMenu.defaultMenuInsets, 
                menuContentDivElement, "padding");
        EchoAppRender.Border.render(this.component.render("menuBorder", ExtrasRender.ComponentSync.Menu._defaultBorder),
                menuContentDivElement);
        var foreground;
        var menuForeground = this.component.render("menuForeground");
        if (menuForeground) {
            foreground = menuForeground;
        } else {
            foreground = this.component.render("foreground", ExtrasRender.ComponentSync.Menu._defaultForeground);
        }
        EchoAppRender.Color.render(foreground, menuContentDivElement, "color");

        // Apply menu font if it is set, or apply default font 
        // if it is set and the menu font is NOT set.
        var font = this.component.render("menuFont");
        if (!font) {
            font = this.component.render("font");
        }
        if (font) {
            EchoAppRender.Font.render(font, menuContentDivElement);
        }

        var backgroundDivElement;
        if (opacity < 1) {
            backgroundDivElement = document.createElement("div");
            backgroundDivElement.style.cssText = "position:absolute;z-index:1;width:100%;height:100%;top:0;bottom:0;";
            backgroundDivElement.style.opacity = opacity;
            this.element.appendChild(backgroundDivElement);
        } else {
            backgroundDivElement = this.element;
        }

        var background;
        var menuBackground = this.component.render("menuBackground");
        if (menuBackground) {
            background = menuBackground;
        } else {
            background = this.component.render("background", ExtrasRender.ComponentSync.Menu._defaultBackground);
        }
        EchoAppRender.Color.render(background, backgroundDivElement, "backgroundColor");

        // Apply menu background image if it is set, or apply default background 
        // image if it is set and the menu background is NOT set.
        var backgroundImage;
        var menuBackgroundImage = this.component.render("menuBackgroundImage");
        if (menuBackgroundImage) {
            backgroundImage = menuBackgroundImage;
        } else if (menuBackground == null) {
            backgroundImage = this.component.render("backgroundImage");
        }
        if (backgroundImage) {
            EchoAppRender.FillImage.render(backgroundImage, backgroundDivElement, null); 
        }

        var menuTableElement = document.createElement("table");
        menuTableElement.style.borderCollapse = "collapse";
        menuContentDivElement.appendChild(menuTableElement);

        var menuTbodyElement = document.createElement("tbody");
        menuTableElement.appendChild(menuTbodyElement);

        var items = this.menuModel.items;

        // Determine if any icons are present.
        var hasIcons = false;
        for (var i = 0; i < items.length; ++i) {
            var item = items[i];
            if (item.icon || item instanceof ExtrasApp.ToggleOptionModel) {
                hasIcons = true;
                break;
            }