applicationrender.js

一个ajax富客户端的ajax类库

        LEADING_TRAILING: 0,
        TRAILING_LEADING: 1, // INVERTED
        TOP_BOTTOM: 2,       // VERTICAL
        BOTTOM_TOP: 3,       // VERTICAL | INVERTED

        //FIXME. verify this method will work with  RTL settings (not tested)
        getOrientation: function(component, propertyName) {
            var position = component.render(propertyName);
            var orientation;
            if (position) {
                switch (EchoAppRender.Alignment.getRenderedHorizontal(position, component)) {
                case "leading":  orientation = this.LEADING_TRAILING; break;
                case "trailing": orientation = this.TRAILING_LEADING; break;
                case "left":     orientation = this.LEADING_TRAILING; break;
                case "right":    orientation = this.TRAILING_LEADING; break;
                default:
                    switch (EchoAppRender.Alignment.getVertical(position, component)) {
                    case "top":    orientation = this.TOP_BOTTOM;       break;
                    case "bottom": orientation = this.BOTTOM_TOP;       break;
                    default:       orientation = this.TRAILING_LEADING; break;
                    }
                }
            } else {
                orientation = this.TRAILING_LEADING;
            }
            return orientation;
        },
        
        /**
         * @private
         */
        _createTablePrototype: function() {
            var tableElement = document.createElement("table");
            tableElement.style.borderCollapse = "collapse";
            tableElement.style.padding = "0px";
            
            tbodyElement = document.createElement("tbody");
            tableElement.appendChild(tbodyElement);
            
            return tableElement;
        }
    },
    
    $load: function() {
        this._tablePrototype = this._createTablePrototype(); 
    },
    
    /**
     * The rendered TABLE element.
     * @type Element
     */
    tableElement: null,
    
    /**
     * The rendered TBODY element.
     * @type Element
     */
    tbodyElement: null,

    /**
     * Creates a new <code>TriCellTable</code>
     * 
     * @param orientation0_1 the orientation of element 0 with respect to element 1, one of 
     *        the following values:
     *        <ul>
     *        <ul>
     *        <li>LEADING_TRAILING (element 0 is leading element 1)</li>
     *        <li>TRAILING_LEADING (element 1 is leading element 0)</li>
     *        <li>TOP_BOTTOM (element 0 is above element 1)</li>
     *        <li>BOTTOM_TOP (element 1 is above element 0)</li>
     *        </ul>
     * @param margin0_1 the margin size between element 0 and element 1
     * @param orientation01_2 (omitted for two-cell tables)
     *        the orientation of Elements 0 and 1 with 
     *        respect to Element 2, one of the following values:
     *        <ul>
     *        <li>LEADING_TRAILING (elements 0 and 1 are leading element 2)</li>
     *        <li>TRAILING_LEADING (element 2 is trailing elements 0 and 1)</li>
     *        <li>TOP_BOTTOM (elements 0 and 1 are above element 2)</li>
     *        <li>BOTTOM_TOP (element 2 is above elements 0 and 1)</li>
     *        </ul>
     * @param margin01_2 (omitted for two-cell tables)
     *        The margin size between the combination
     *        of elements 0 and 1 and element 2.
     */
    $construct: function(orientation0_1, margin0_1, orientation01_2, margin01_2) {
        this.tableElement = EchoAppRender.TriCellTable._tablePrototype.cloneNode(true);
        this.tbodyElement = this.tableElement.firstChild;
        
        if (orientation01_2 == null) {
            this.configure2(orientation0_1, margin0_1);
        } else {
            this.configure3(orientation0_1, margin0_1, orientation01_2, margin01_2);
        }
    },
    
    addColumn: function(trElement, tdElement) {
        if (tdElement != null) {
            trElement.appendChild(tdElement);
        }
    },
    
    addRow: function(tdElement) {
        if (tdElement == null) {
            return;
        }
        var trElement = document.createElement("tr");
        trElement.appendChild(tdElement);
        this.tbodyElement.appendChild(trElement);
    },
    
    addSpacer: function(parentElement, size, vertical) {
        var divElement = document.createElement("div");
        divElement.style.width = vertical ? "1px" : size + "px";
        divElement.style.height = vertical ? size + "px" : "1px";
        parentElement.appendChild(divElement);
    },
    
    /**
     * @param id the id of 
     */
    configure2: function(orientation0_1, margin0_1) {
        this.tdElements = [document.createElement("td"), document.createElement("td")];
        this.tdElements[0].style.padding = "0px";
        this.tdElements[1].style.padding = "0px";
        this.marginTdElements = new Array(1);
        
        if (margin0_1) {
            this.marginTdElements[0] = document.createElement("td");
            this.marginTdElements[0].style.padding = "0px";
            if ((orientation0_1 & EchoAppRender.TriCellTable.VERTICAL) == 0) {
                this.marginTdElements[0].style.width = margin0_1 + "px";
                this.addSpacer(this.marginTdElements[0], margin0_1, false);
            } else {
                this.marginTdElements[0].style.height = margin0_1 + "px";
                this.addSpacer(this.marginTdElements[0], margin0_1, true);
            }
        }
        
        if (orientation0_1 & EchoAppRender.TriCellTable.VERTICAL) {
            // Vertically oriented.
            if (orientation0_1 & EchoAppRender.TriCellTable.INVERTED) {
                // Inverted (bottom to top).
                this.addRow(this.tdElements[1]);
                this.addRow(this.marginTdElements[0]);
                this.addRow(this.tdElements[0]);
            } else {
                // Normal (top to bottom).
                this.addRow(this.tdElements[0]);
                this.addRow(this.marginTdElements[0]);
                this.addRow(this.tdElements[1]);
            }
        } else {
            // Horizontally oriented.
            var trElement = document.createElement("tr");
            if (orientation0_1 & EchoAppRender.TriCellTable.INVERTED) {
                // Trailing to leading.
                this.addColumn(trElement, this.tdElements[1]);
                this.addColumn(trElement, this.marginTdElements[0]);
                this.addColumn(trElement, this.tdElements[0]);
            } else {
                // Leading to trailing.
                this.addColumn(trElement, this.tdElements[0]);
                this.addColumn(trElement, this.marginTdElements[0]);
                this.addColumn(trElement, this.tdElements[1]);
            }
            this.tbodyElement.appendChild(trElement);
        }
    },
    
    configure3: function(orientation0_1, margin0_1, orientation01_2, margin01_2) {
        this.tdElements = new Array(3);
        for (var i = 0; i < 3; ++i) {
            this.tdElements[i] = document.createElement("td");
            this.tdElements[i].style.padding = "0px";
        }
        this.marginTdElements = new Array(2);
        
        if (margin0_1 || margin01_2 != null) {
            if (margin0_1 && margin0_1 > 0) {
                this.marginTdElements[0] = document.createElement("td");
                if (orientation0_1 & EchoAppRender.TriCellTable.VERTICAL) {
                    this.marginTdElements[0].style.height = margin0_1 + "px";
                    this.addSpacer(this.marginTdElements[0], margin0_1, true);
                } else {
                    this.marginTdElements[0].style.width = margin0_1 + "px";
                    this.addSpacer(this.marginTdElements[0], margin0_1, false);
                }
            }
            if (margin01_2 != null && margin01_2 > 0) {
                this.marginTdElements[1] = document.createElement("td");
                if (orientation0_1 & EchoAppRender.TriCellTable.VERTICAL) {
                    this.marginTdElements[1].style.height = margin01_2 + "px";
                    this.addSpacer(this.marginTdElements[1], margin01_2, true);
                } else {
                    this.marginTdElements[1].style.width = margin01_2 + "px";
                    this.addSpacer(this.marginTdElements[1], margin01_2, false);
                }
            }
        }
        
        if (orientation0_1 & EchoAppRender.TriCellTable.VERTICAL) {
            // Vertically oriented 0/1.
            if (orientation01_2 & EchoAppRender.TriCellTable.VERTICAL) {
                // Vertically oriented 01/2
                
                if (orientation01_2 & EchoAppRender.TriCellTable.INVERTED) {
                    // 2 before 01: render #2 and margin at beginning of TABLE.
                    this.addRow(this.tdElements[2]);
                    this.addRow(this.marginTdElements[1]);
                }
                
                // Render 01
                if (orientation0_1 & EchoAppRender.TriCellTable.INVERTED) {
                    // Inverted (bottom to top)
                    this.addRow(this.tdElements[1]);
                    this.addRow(this.marginTdElements[0]);
                    this.addRow(this.tdElements[0]);
                } else {
                    // Normal (top to bottom)
                    this.addRow(this.tdElements[0]);
                    this.addRow(this.marginTdElements[0]);
                    this.addRow(this.tdElements[1]);
                }
    
                if (!(orientation01_2 & EchoAppRender.TriCellTable.INVERTED)) {
                    // 01 before 2: render #2 and margin at end of TABLE.
                    this.addRow(this.marginTdElements[1]);
                    this.addRow(this.tdElements[2]);
                }
            } else {
                // Horizontally oriented 01/2
                
                // Determine and apply row span based on presence of margin between 0 and 1.
                var rows = (margin0_1 && margin0_1 > 0) ? 3 : 2;
                this.tdElements[2].rowSpan = rows;
                if (this.marginTdElements[1]) {
                    this.marginTdElements[1].rowSpan = rows;
                }
                
                var trElement = document.createElement("tr");
                if (orientation01_2 & EchoAppRender.TriCellTable.INVERTED) {
                    this.addColumn(trElement, this.tdElements[2]);
                    this.addColumn(trElement, this.marginTdElements[1]);
                    if (orientation0_1 & EchoAppRender.TriCellTable.INVERTED) {
                        this.addColumn(trElement, this.tdElements[1]);
                    } else {
                        this.addColumn(trElement, this.tdElements[0]);
                    }
                } else {
                    if (orientation0_1 & EchoAppRender.TriCellTable.INVERTED) {
                        this.addColumn(trElement, this.tdElements[1]);
                    } else {
                        this.addColumn(trElement, this.tdElements[0]);
                    }
                    this.addColumn(trElement, this.marginTdElements[1]);
                    this.addColumn(trElement, this.tdElements[2]);
                }
                this.tbodyElement.appendChild(trElement);
                
                this.addRow(this.marginTdElements[0]);
                if (orientation0_1 & EchoAppRender.TriCellTable.INVERTED) {
                    this.addRow(this.tdElements[0]);
                } else {
                    this.addRow(this.tdElements[1]);
                }
            }
        } else {
            // horizontally oriented 0/1
            if (orientation01_2 & EchoAppRender.TriCellTable.VERTICAL) {
                // vertically oriented 01/2
    
                // determine and apply column span based on presence of margin between 0 and 1
                var columns = margin0_1 ? 3 : 2;
                this.tdElements[2].setAttribute("colspan", columns);
                if (this.marginTdElements[1] != null) {
                    this.marginTdElements[1].setAttribute("colspan", Integer.toString(columns));
                }
                
                if (orientation01_2 & EchoAppRender.TriCellTable.INVERTED) {
                    // 2 before 01: render #2 and margin at beginning of TR.
                    this.addRow(this.tdElements[2]);
                    this.addRow(this.marginTdElements[1]);
                }
                
                // Render 01
                trElement = document.createElement("tr");
                if ((orientation0_1 & EchoAppRender.TriCellTable.INVERTED) == 0) {
                    // normal (left to right)
                    this.addColumn(trElement, this.tdElements[0]);
                    this.addColumn(trElement, this.marginTdElements[0]);
                    this.addColumn(trElement, this.tdElements[1]);
                } else {
                    // inverted (right to left)
                    this.addColumn(trElement, this.tdElements[1]);
                    this.addColumn(trElement, this.marginTdElements[0]);
                    this.addColumn(trElement, this.tdElements[0]);
                }
                this.tbodyElement.appendChild(trElement);
                
                if (!(orientation01_2 & EchoAppRender.TriCellTable.INVERTED)) {
                    // 01 before 2: render margin and #2 at end of TR.
                    this.addRow(this.marginTdElements[1]);
                    this.addRow(this.tdElements[2]);
                }
            } else {
                // horizontally oriented 01/2
                trElement = document.createElement("tr");
                if (orientation01_2 & EchoAppRender.TriCellTable.INVERTED) {
                    // 2 before 01: render #2 and margin at beginning of TR.
                    this.addColumn(trElement, this.tdElements[2]);
                    this.addColumn(trElement, this.marginTdElements[1]);
                }
                
                // Render 01
                if (orientation0_1 & EchoAppRender.TriCellTable.INVERTED) {
                    // inverted (right to left)
                    this.addColumn(trElement, this.tdElements[1]);
                    this.addColumn(trElement, this.marginTdElements[0]);
                    this.addColumn(trElement, this.tdElements[0]);
                } else {
                    // normal (left to right)
                    this.addColumn(trElement, this.tdElements[0]);
                    this.addColumn(trElement, this.marginTdElements[0]);
                    this.addColumn(trElement, this.tdElements[1]);
                }
                
                if (!(orientation01_2 & EchoAppRender.TriCellTable.INVERTED)) {
                    this.addColumn(trElement, this.marginTdElements[1]);
                    this.addColumn(trElement, this.tdElements[2]);
                }
                
                this.tbodyElement.appendChild(trElement);        
            }
        }
    }
});