render.menu.js

一个ajax富客户端的ajax类库

        }
        var textPadding, iconPadding;

        if (hasIcons) {
            var pixelInsets = EchoAppRender.Insets.toPixels(ExtrasRender.ComponentSync.Menu.RenderedMenu.defaultMenuItemInsets);
            iconPadding = "0px 0px 0px " + pixelInsets.left + "px";
            textPadding = pixelInsets.top + "px " + pixelInsets.right + "px " + 
                    pixelInsets.bottom + "px " + pixelInsets.left + "px";
        } else {
            textPadding = ExtrasRender.ComponentSync.Menu.RenderedMenu.defaultMenuItemInsets;
        }

        for (var i = 0; i < items.length; ++i) {
            var item = items[i];
            if (item instanceof ExtrasApp.OptionModel || item instanceof ExtrasApp.MenuModel) {
                var menuItemTrElement = document.createElement("tr");
                this.itemElements[item.id] = menuItemTrElement;
                menuItemTrElement.style.cursor = "pointer";
                menuTbodyElement.appendChild(menuItemTrElement);

                if (hasIcons) {
                    var menuItemIconTdElement = document.createElement("td");
                    EchoAppRender.Insets.render(iconPadding, menuItemIconTdElement, "padding");
                    if (item instanceof ExtrasApp.ToggleOptionModel) {
                        var iconIdentifier;
                        var selected = this.stateModel && this.stateModel.isSelected(item.modelId);
                        if (item instanceof ExtrasApp.RadioOptionModel) {
                            iconIdentifier = selected ? "image/menu/RadioOn.gif" : "image/menu/RadioOff.gif";
                        } else {
                            iconIdentifier = selected ? "image/menu/ToggleOn.gif" : "image/menu/ToggleOff.gif";
                        }
                        var imgElement = document.createElement("img");
                        imgElement.src = this.client.getResourceUrl("Extras", iconIdentifier);
                        menuItemIconTdElement.appendChild(imgElement);
                    } else if (item.icon) {
                        var imgElement = document.createElement("img");
                        EchoAppRender.ImageReference.renderImg(item.icon, imgElement);
                        menuItemIconTdElement.appendChild(imgElement);
                    }
                    menuItemTrElement.appendChild(menuItemIconTdElement);
                }

                var menuItemContentTdElement = document.createElement("td");
                EchoAppRender.Insets.render(textPadding, menuItemContentTdElement, "padding");
                var lineWrap = this.component.render("lineWrap");
                if (lineWrap != null && !lineWrap) {
                    menuItemContentTdElement.style.whiteSpace = "nowrap";
                }
                if (this.stateModel && !this.stateModel.isEnabled(item.modelId)) {
                    EchoAppRender.Color.render(this.component.render("disabledForeground", 
                            ExtrasRender.ComponentSync.Menu._defaultDisabledForeground), menuItemContentTdElement, "color");
                }
                menuItemContentTdElement.appendChild(document.createTextNode(item.text));
                menuItemTrElement.appendChild(menuItemContentTdElement);

                if (item instanceof ExtrasApp.MenuModel) {
                    // Submenus have adjacent column containing 'expand' icons.
                    var menuItemArrowTdElement = document.createElement("td");
                    menuItemArrowTdElement.style.textAlign = "right";
                    var imgElement = document.createElement("img");
                    var expandImage = this.component.render("menuExpandIcon", 
                            this.client.getResourceUrl("Extras", "image/menu/ArrowRight.gif"));
                    imgElement.setAttribute("src", expandImage.url ? expandImage.url : expandImage);
                    imgElement.setAttribute("alt", "");
                    menuItemArrowTdElement.appendChild(imgElement);
                    menuItemTrElement.appendChild(menuItemArrowTdElement);
                } else {
                    // Menu items fill both columns.
                    menuItemContentTdElement.colSpan = 2;
                }
            } else if (item instanceof ExtrasApp.SeparatorModel) {
                var menuItemTrElement = document.createElement("tr");
                menuTbodyElement.appendChild(menuItemTrElement);
                var menuItemContentTdElement = document.createElement("td");
                menuItemContentTdElement.colSpan = hasIcons ? 3 : 2;
                menuItemContentTdElement.style.padding = "3px 0px";
                var hrDivElement = document.createElement("div");
                hrDivElement.style.cssText = "border-top:1px solid #a7a7a7;height:0;font-size:1px;line-height:0";
                menuItemContentTdElement.appendChild(hrDivElement);
                menuItemTrElement.appendChild(menuItemContentTdElement);
            }
        }

        var bounds = new WebCore.Measure.Bounds(this.element);
        this.width = bounds.width;
        this.height = bounds.height;
    },

    _getItemElement: function(element) {
        if (element == null) {
            return null;
        }
        // Find TD element.
        while (element.nodeName.toLowerCase() != "tr") {
            if (element == this.element) {
                return null;
            }
            element = element.parentNode;
        }
        return element;
    },
    
    _getItemModel: function(element) {
        var itemModelId = null;
        element = this._getItemElement(element);
        if (element == null) {
            return null;
        }

        // Find item model id of clicked element.
        for (var x in this.itemElements) {
            if (this.itemElements[x] == element) {
                itemModelId = x;
                break;
            }
        }

        if (itemModelId == null) {
            return null;
        } else {
            return this.menuModel.getItem(itemModelId);
        }
    },
    
    getSubMenuPosition: function(menuModel, width, height) {
        var menuElement = this.itemElements[menuModel.id];
        
        var itemBounds = new WebCore.Measure.Bounds(menuElement);
        var menuBounds = new WebCore.Measure.Bounds(this.element);
        
        return { x: menuBounds.left + menuBounds.width, y: itemBounds.top };
    },
    
    _processClick: function(e) {
        WebCore.DOM.preventEventDefault(e);
        var itemModel = this._getItemModel(e.target);
        if (itemModel) {
            this._setActiveItem(itemModel, true);
        }
    },
    
    _processItemEnter: function(e) {
        this._processRollover(e, true);
    },

    _processItemExit: function(e) {
        this._processRollover(e, false);
    },
    
    _processRollover: function(e, state) {
        if (!this.client.verifyInput(this.component) || WebCore.dragInProgress) {
            return;
        }
        
        var element = this._getItemElement(e.target);
        if (!element) {
            return;
        }
        var itemModel = this._getItemModel(element);
        if (!itemModel) {
            return;
        }
        
        if (this.stateModel && !this.stateModel.isEnabled(itemModel.modelId)) {
            return;
        }
        
        if (state) {
            this._setActiveItem(itemModel, false);
        }
    },
    
    _setActiveItem: function(itemModel, execute) {
        if (this._activeItem) {
            this._setItemHighlight(this._activeItem, false);
            this._activeItem = null;
        }

        if (itemModel instanceof ExtrasApp.MenuModel) {
            this.menuSync.activateItem(itemModel);
        } else {
            if (execute) {
                this.menuSync.activateItem(itemModel);
                // Executing item, menu will close: return immediately.
                return;
            } else {
                this.menuSync.closeDescendants(this);
            }
        }

        if (itemModel) {
            this._activeItem = itemModel;
            this._setItemHighlight(this._activeItem, true);
        }
    },

    _setItemHighlight: function(itemModel, state) {
        var element = this.itemElements[itemModel.id];
        if (state) {
            EchoAppRender.FillImage.render(this.component.render("selectionBackgroundImage"), element);
            EchoAppRender.Color.render(this.component.render("selectionBackground", 
                    ExtrasRender.ComponentSync.Menu._defaultSelectionBackground), element, "backgroundColor");
            EchoAppRender.Color.render(this.component.render("selectionForeground", 
                    ExtrasRender.ComponentSync.Menu._defaultSelectionForeground), element, "color");
        } else {
            element.style.backgroundImage = "";
            element.style.backgroundColor = "";
            element.style.color = "";
        } 
    }
});

/**
 * Component rendering peer: ContextMenu
 */
ExtrasRender.ComponentSync.ContextMenu = Core.extend(ExtrasRender.ComponentSync.Menu, {

    $static: {
        _supportedPartialProperties: ["model", "stateModel"]
    },
    
    $load: function() {
        EchoRender.registerPeer("ExtrasApp.ContextMenu", this);
    },
    
    _mouseX: null,
    _mouseY: null,
    
    getSubMenuPosition: function(menuModel, width, height) {
        return { x: this._mouseX, y: this._mouseY };
    },

    _processContextClick: function(e) {
        if (!this.client.verifyInput(this.component) || WebCore.dragInProgress) {
            return;
        }
    
        WebCore.DOM.preventEventDefault(e);
        
        this._mouseX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
        this._mouseY = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
        
        this.activate();
        this.activateItem(this.menuModel);
    },

    renderDispose: function(update) {
        WebCore.EventProcessor.removeAll(this.element);
        ExtrasRender.ComponentSync.Menu.prototype.renderDispose.call(this, update);
    },
    
    renderMain: function(update) {
        var contextMenuDivElement = document.createElement("div");
        contextMenuDivElement.id = this.component.renderId;
        
        WebCore.EventProcessor.add(contextMenuDivElement, "contextmenu", Core.method(this, this._processContextClick), false);
        
        var componentCount = this.component.getComponentCount();
        if (componentCount > 0) {
            EchoRender.renderComponentAdd(update, this.component.getComponent(0), contextMenuDivElement);
        }
        
        return contextMenuDivElement;
    }
});

//FIXME 'selection' property should be an itemmodel id.  We should have a remote peer for this path-string business.
/**
 * Component rendering peer: DropDownMenu
 */
ExtrasRender.ComponentSync.DropDownMenu = Core.extend(ExtrasRender.ComponentSync.Menu, {

    $load: function() {
        EchoRender.registerPeer("ExtrasApp.DropDownMenu", this);
    },
    
    _containerDivElement: null,
    _selectionSpanElement: null,
    _selectedItem: null,

    getSubMenuPosition: function(menuModel, width, height) {
        var bounds = new WebCore.Measure.Bounds(this.element);
        var x = bounds.left
        var y = bounds.top + bounds.height;

        var availableWidth = document.body.offsetWidth;
        
        if (x + width > availableWidth) {
            x = availableWidth - width;
            if (x < 0) {
                x = 0;
            }
        }
        
        return { x: x, y: y };
    },
    
    processAction: function(itemModel) {
        if (this.component.render("selectionEnabled")) {
            this._setSelection(itemModel);
        }
        var path = itemModel.getItemPositionPath().join(".");
        this.component.set("selection", path);
        ExtrasRender.ComponentSync.Menu.prototype.processAction.call(this, itemModel);
    },

    _processClick: function(e) {
        if (!this.client.verifyInput(this.component) || WebCore.dragInProgress) {
            return;
        }
        
        WebCore.DOM.preventEventDefault(e);
    
        this.activate();
        this.activateItem(this.menuModel);
    },
    
    renderDisplay: function() {
        WebCore.VirtualPosition.redraw(this._containerDivElement);
    },
    
    renderDispose: function(update) {
        WebCore.EventProcessor.removeAll(this.element);
        this._containerDivElement = null;
        ExtrasRender.ComponentSync.Menu.prototype.renderDispose.call(this, update);
    },
    
    renderMain: function() {
        var dropDownDivElement = document.createElement("div");
        dropDownDivElement.id = this.component.renderId;
        dropDownDivElement.style.cursor = "pointer";
        dropDownDivElement.style.overflow = "hidden";
        var width = this.component.render("width");
        if (width) {
            dropDownDivElement.style.width = width.toString();
        } else {
            // if the width is not set, IE won't fire click events.
            dropDownDivElement.style.width = "100%";
        }
        var height = this.component.render("height");
        if (height) {
            dropDownDivElement.style.height = height.toString();
        }
        EchoAppRender.Color.renderFB(this.component, dropDownDivElement);
        
        var relativeContainerDivElement = document.createElement("div");
        relativeContainerDivElement.style.position = "relative";
        relativeContainerDivElement.style.height = "100%";
        //FIXME this was commented out...by whom, why?
        //EchoAppRender.Insets.render(this.component.render("insets"), relativeContainerDivElement, "padding");
        relativeContainerDivElement.appendChild(document.createTextNode("\u00a0"));