render.menu.js

一个ajax富客户端的ajax类库

        
        var expandIcon = this.component.render("expandIcon", this.client.getResourceUrl("Extras", "image/menu/ArrowDown.gif"));
        var expandIconWidth = this.component.render("expandIconWidth", 10);
        
        var expandElement = document.createElement("span");
        expandElement.style.position = "absolute";
        expandElement.style.height = "100%";
        expandElement.style.top = "0px";
        expandElement.style.right = "0px";
        var imgElement = document.createElement("img");
        EchoAppRender.ImageReference.renderImg(expandIcon, imgElement);
        expandElement.appendChild(imgElement);
        relativeContainerDivElement.appendChild(expandElement);
        
        this._containerDivElement = document.createElement("div");
        this._containerDivElement.style.cssText = "position:absolute;top:0;left:0;right:" +
                EchoAppRender.Extent.toCssValue(expandIconWidth) + ";";
        var insets = this.component.render("insets");
        if (insets) {
            EchoAppRender.Insets.render(insets, this._containerDivElement, "padding");
            if (height) {
                var insetsPx = EchoAppRender.Insets.toPixels(insets);
                var compensatedHeight = Math.max(0, EchoAppRender.Extent.toPixels(height) - insetsPx.top - insetsPx.top);
                this._containerDivElement.style.height = compensatedHeight + "px";
            }
        } else {
            this._containerDivElement.style.height = "100%";
        }
        EchoAppRender.FillImage.render(this.component.render("backgroundImage"), this._containerDivElement); 
        
        this._selectionSpanElement = document.createElement("div");
        this._selectionSpanElement.style.cssText = "width:100%;height:100%;overflow:hidden;white-space:nowrap;";
        EchoAppRender.Font.render(this.component.render("font"), this._selectionSpanElement, null);
        this._containerDivElement.appendChild(this._selectionSpanElement);
        
        relativeContainerDivElement.appendChild(this._containerDivElement);
        dropDownDivElement.appendChild(relativeContainerDivElement);
    
        WebCore.EventProcessor.add(dropDownDivElement, "click", Core.method(this, this._processClick), false);
        WebCore.EventProcessor.Selection.disable(dropDownDivElement);
    
        if (this.component.render("selectionEnabled")) {
            var selection = this.component.render("selection");
            if (selection) {
                this._setSelection(this.menuModel.getItemModelFromPositions(selection.split(".")));
            }
        }
        if (!this._selectedItem) {
            var selectionText = this.component.render("selectionText");
            if (selectionText) {
                this._selectionSpanElement.appendChild(document.createTextNode(selectionText));
            }
        }
    
        return dropDownDivElement;
    },

    /**
     * Sets the selection to the given menu model.
     *
     * @param itemModel the model to select
     */
    _setSelection: function(itemModel) {
        this._selectedItem = itemModel;
        
        for (var i = this._selectionSpanElement.childNodes.length - 1; i >= 0; --i) {
            this._selectionSpanElement.removeChild(this._selectionSpanElement.childNodes[i]);
        }

        if (itemModel.text) {
            if (itemModel.icon) {
                // Render Text and Icon
                var tableElement = document.createElement("table");
                var tbodyElement = document.createElement("tbody");
                var trElement = document.createElement("tr");
                var tdElement = document.createElement("td");
                var imgElement = document.createElement("img");
                EchoAppRender.ImageReference.renderImg(itemModel.icon, imgElement);
                tdElement.appendChild(imgElement);
                trElement.appendChild(tdElement);
                tdElement = document.createElement("td");
                tdElement.style.width = "3px";
                trElement.appendChild(tdElement);
                tdElement = document.createElement("td");
                tdElement.appendChild(document.createTextNode(itemModel.text));
                trElement.appendChild(tdElement);
                tbodyElement.appendChild(trElement);
                tableElement.appendChild(tbodyElement);
                this._selectionSpanElement.appendChild(tableElement);
            } else {
                // Render Text Only
                this._selectionSpanElement.appendChild(document.createTextNode(itemModel.text));
            }
        } else if (itemModel.icon) {
            // Render Icon Only
            var imgElement = document.createElement("img");
            EchoAppRender.ImageReference.renderImg(itemModel.icon, imgElement);
            this._selectionSpanElement.appendChild(imgElement);
        }
    }
});    

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

    $static: {
        _defaultItemInsets: "0px 12px"
    },
    
    $load: function() {
       EchoRender.registerPeer("ExtrasApp.MenuBarPane", this);
    },
    
    _activeItem: null,
    itemElements: null,
    
    $construct: function() {
        ExtrasRender.ComponentSync.Menu.call(this);
        this.itemElements = {};
    },
    
    activate: function() {
        if (ExtrasRender.ComponentSync.Menu.prototype.activate.call(this)) {
            this.addMenu(this);
        }
    },
    
    close: function() {
        if (this._activeItem) {
            this._setItemHighlight(this._activeItem, false);
            this._activeItem = null;
        }
    },
    
    _getItemElement: function(element) {
        if (element == null) {
            return null;
        }
        // Find TD element.
        while (element.nodeName.toLowerCase() != "td") {
            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 itemElement = this.itemElements[menuModel.id];
        if (!itemElement) {
            throw new Error("Invalid menu: " + menuModel);
        }
        
        var containerBounds = new WebCore.Measure.Bounds(this.element);
        var itemBounds = new WebCore.Measure.Bounds(itemElement);

        var x = itemBounds.left
        var y = containerBounds.top + containerBounds.height;

        var availableWidth = document.body.offsetWidth;
        
        if (x + width > availableWidth) {
            x = availableWidth - width;
            if (x < 0) {
                x = 0;
            }
        }
        
        return { x: x, y: y };
    },
    
    _processClick: function(e) {
        if (!this.client.verifyInput(this.component)) {
            return;
        }
        
        WebCore.DOM.preventEventDefault(e);

        var itemModel = this._getItemModel(e.target);
        if (itemModel) {
            this.activate();
            this._setActiveItem(itemModel);
        } else {
            this.deactivate();
        }
    },
    
    _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 (this.stateModel && !this.stateModel.isEnabled(itemModel.modelId)) {
            return;
        }
        
        if (this.active) {
            if (state) {
                this._setActiveItem(itemModel);
            }
        } else {
            this._setItemHighlight(itemModel, state);
        }
    },
    
    _processItemEnter: function(e) {
        this._processRollover(e, true);
    },
    
    _processItemExit: function(e) {
        this._processRollover(e, false);
    },
    
    renderDisplay: function() {
        WebCore.VirtualPosition.redraw(this.element);
    },

    renderDispose: function(update) {
        WebCore.EventProcessor.removeAll(this.element);
        ExtrasRender.ComponentSync.Menu.prototype.renderDispose.call(this, update);
    },
    
    renderMain: function(update) {
        var menuBarDivElement = document.createElement("div");
        menuBarDivElement.id = this.component.renderId;
        menuBarDivElement.style.position = "absolute";
        menuBarDivElement.style.left = "0px";
        menuBarDivElement.style.right = "0px";
        menuBarDivElement.style.top = "0px";
        menuBarDivElement.style.bottom = "0px";
        
        EchoAppRender.Color.renderFB(this.component, menuBarDivElement);
        var border = this.component.render("border", ExtrasRender.ComponentSync.Menu._defaultBorder);
        EchoAppRender.Border.render(border, menuBarDivElement, "borderTop");
        EchoAppRender.Border.render(border, menuBarDivElement, "borderBottom");
        EchoAppRender.FillImage.render(this.component.render("backgroundImage"), menuBarDivElement); 
        EchoAppRender.Font.render(this.component.render("font"), menuBarDivElement, null);
        
        // This 100% high "inner div" element ensures the table will actually render to 100% height on all browsers.
        // IE7 has a peculiar issue here otherwise.
        var menuBarInnerDivElement = document.createElement("div");
        menuBarInnerDivElement.style.position = "absolute";
        menuBarInnerDivElement.style.height = "100%";
        menuBarDivElement.appendChild(menuBarInnerDivElement);
        
        var menuBarTableElement = document.createElement("table");
        menuBarTableElement.style.height = "100%";
        menuBarTableElement.style.borderCollapse = "collapse";
        menuBarInnerDivElement.appendChild(menuBarTableElement);
        
        var menuBarTbodyElement = document.createElement("tbody");
        menuBarTableElement.appendChild(menuBarTbodyElement);
        
        var menuBarTrElement = document.createElement("tr");
        menuBarTbodyElement.appendChild(menuBarTrElement);
        
        if (this.menuModel != null) {
            var items = this.menuModel.items;
            for (var i = 0; i < items.length; ++i) {
                var item = items[i];
                if (item instanceof ExtrasApp.OptionModel || item instanceof ExtrasApp.MenuModel) {
                    var menuBarItemTdElement = document.createElement("td");
                    this.itemElements[item.id] = menuBarItemTdElement;
                    menuBarItemTdElement.style.padding = "0px";
                    menuBarItemTdElement.style.height = "100%";
                    menuBarItemTdElement.style.cursor = "pointer";
                    menuBarTrElement.appendChild(menuBarItemTdElement);
                    var menuBarItemDivElement = document.createElement("div");
                    EchoAppRender.Insets.render(ExtrasRender.ComponentSync.MenuBarPane._defaultItemInsets, 
                            menuBarItemDivElement, "padding");
                    menuBarItemTdElement.appendChild(menuBarItemDivElement);
                    var textNode = document.createTextNode(item.text);
                    menuBarItemDivElement.appendChild(textNode);
                }
            }
        }
        
        WebCore.EventProcessor.add(menuBarDivElement, "click", Core.method(this, this._processClick), false);
        WebCore.EventProcessor.add(menuBarDivElement, "mouseover", Core.method(this, this._processItemEnter), false);
        WebCore.EventProcessor.add(menuBarDivElement, "mouseout", Core.method(this, this._processItemExit), false);
        WebCore.EventProcessor.Selection.disable(menuBarDivElement);
    
        return menuBarDivElement;
    },
    
    _setActiveItem: function(itemModel) {
        if (this._activeItem == itemModel) {
            return;
        }
        
        if (this._activeItem) {
            this._setItemHighlight(this._activeItem, false);
            this._activeItem = null;
        }
    
        this.activateItem(itemModel);

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