applicationrender.js

一个ajax富客户端的ajax类库

/**
 * @fileoverview
 * <ul> 
 *  <li>Provides core property renderers.</li>
 *  <li>Provides property rendering utilities.</li>
 *  <li>Provides TriCellTable rendering utility (used by buttons and labels).</li>
 *  <li>Provides a floating pane z-index management system.</li> 
 * </ul>
 */

EchoAppRender = { 

    getEffectProperty: function(component, defaultPropertyName, effectPropertyName, effectState,
            defaultDefaultPropertyValue, effectDefaultPropertyValue) {
        var property;
        if (effectState) {
            property = component.render(effectPropertyName, effectDefaultPropertyValue);
        }
        if (!property) {
            property = component.render(defaultPropertyName, defaultDefaultPropertyValue);
        }
        return property;
    }
};

EchoAppRender.Alignment = { 

    _HORIZONTALS: { left: true, center: true, right: true, leading: true, trailing: true },
    _VERTICALS: { top: true, middle: true, bottom: true },

    getRenderedHorizontal: function(alignment, layoutDirectionProvider) {
        if (alignment == null) {
            return null;
        }
    
        var layoutDirection = layoutDirectionProvider ? 
                layoutDirectionProvider.getRenderLayoutDirection() : EchoApp.LayoutDirection.LTR;
         
        var horizontal = typeof(alignment) == "object" ? alignment.horizontal : alignment; 
                
        switch (horizontal) {
        case "leading":
            return layoutDirection.isLeftToRight() ? "left" : "right";
        case "trailing":
            return layoutDirection.isLeftToRight() ? "right" : "left";
        default:
            return horizontal in this._HORIZONTALS ? horizontal : null;
        }
    },
    
    getHorizontal: function(alignment) {
        if (alignment == null) {
            return null;
        }
        if (typeof(alignment == "string")) {
            return alignment in this._HORIZONTALS ? alignment : null;
        } else {
            return alignment.horizontal;
        }
    },

    getVertical: function(alignment) {
        if (alignment == null) {
            return null;
        }
        if (typeof(alignment == "string")) {
            return alignment in this._VERTICALS ? alignment : null;
        } else {
            return alignment.vertical;
        }
    },

    render: function(alignment, element, renderToElement, layoutDirectionProvider) {
        if (alignment == null) {
            return;
        }
        
        var horizontal = EchoAppRender.Alignment.getRenderedHorizontal(alignment, layoutDirectionProvider);
        var vertical = typeof(alignment) == "object" ? alignment.vertical : alignment;
    
        var horizontalValue;
        switch (horizontal) {
        case "left":   horizontalValue = "left";   break;
        case "center": horizontalValue = "center"; break;
        case "right":  horizontalValue = "right";  break;
        default:       horizontalValue = "";       break;
        }
        var verticalValue;
        switch (vertical) {
        case "top":    verticalValue = "top";      break;
        case "middle": verticalValue = "middle";   break;
        case "bottom": verticalValue = "bottom";   break;
        default:       verticalValue = "";         break;
        }
        
        if (renderToElement) {
            element.align = horizontalValue;
            element.vAlign = verticalValue;
        } else {
            element.style.textAlign = horizontalValue;
            element.style.verticalAlign = verticalValue;
        }
    }
};

EchoAppRender.Border = {

    /**
     * Regular expression to validate/parse a CSS border expression, e.g., "1px solid #abcdef".
     * Supports omission of any term, or empty strings.
     */
    _PARSER_PX: new RegExp("^(-?\\d+px)?(?:^|$|(?= )) ?(none|hidden|dotted|dashed|solid|" 
            + "double|groove|ridge|inset|outset)?(?:^|$|(?= )) ?(#[0-9a-fA-F]{6})?$"),

    /**
     * Regular expression to validate/parse a pixel-based CSS border expression, e.g., "1px solid #abcdef".
     * Supports omission of any term, or empty strings.
     */
    _PARSER: new RegExp("^(-?\\d+(?:px|pt|pc|cm|mm|in|em|ex))?(?:^|$|(?= )) ?(none|hidden|dotted|dashed|solid|"
            + "double|groove|ridge|inset|outset)?(?:^|$|(?= )) ?(#[0-9a-fA-F]{6})?$"),
            
    _TEST_EXTENT_PX: /^(-?\d+px*)$/,
    
    compose: function(size, style, color) {
        if (typeof size == "number") {
            size += "px";
        }
        var out = [];
        if (size) {
            out.push(size);
        }
        if (style) {
            out.push(style);
        }
        if (color) {
            out.push(color);
        }
        return out.join(" ");
    },
    
    parse: function(border) {
        if (!border) {
            return { };
        }
        if (typeof(border) == "string") {
            var parts = this._PARSER.exec(border);
            return { size: parts[1], style: parts[2], color: parts[3] } 
        } else {
            // FIXME support multisided borders.
            return { }
        }
    },

    render: function(border, element, styleName) {
        if (!border) {
            return;
        }
        styleName = styleName ? styleName : "border";
        if (typeof(border) == "string") {
            if (this._PARSER_PX.test(border)) {
                element.style[styleName] = border;
            } else {
                var elements = this._PARSER.exec(border);
                if (elements == null) {
                    throw new Error("Invalid border: \"" + border + "\"");
                }
            }
        } else {
            if (border.top) {
                if (border.right) {
                    // Top and right specified: render top and right directly.
                    this.render(border.top, element, styleName + "Top");
                    this.render(border.right, element, styleName + "Right");
                    if (border.bottom) {
                        // Bottom specified: render.
                        this.render(border.bottom, element, styleName + "Bottom");
                    } else {
                        // Bottom not specified: render top as bottom.
                        this.render(border.top, element, styleName + "Bottom");
                    }
                    if (border.left) {
                        // Left specified: render.
                        this.render(border.left, element, styleName + "Left");
                    } else {
                        // Left not specified: render right as left.
                        this.render(border.right, element, styleName + "Left");
                    }
                } else {
                    // Right not specified: just render entire border using top.
                    this.render(border.top, element, styleName);
                }
            }
        }
    },
    
    renderClear: function(border, element) {
        if (border) {
            this.render(border, element);
        } else {
            element.style.border = "";
        }
    },

    getPixelSize: function(border, sideName) {
        if (!border) {
            return 0;
        }
        
        if (typeof(border) == "string") {
            var extent = this._PARSER.exec(border)[1];
            if (extent == null) {
                return 0;
            } else if (this._TEST_EXTENT_PX.test(extent)) {
                return parseInt(extent);
            } else {
                return EchoAppRender.Extent.toPixels(extent);
            }
        } else if (typeof(border) == "object") {
            // Retrieve value for indivudal side.
            // Specified side is queried first, followed by alternatives.
            while (true) {
                var side = this.getPixelSize(border[sideName]);
                if (side == null) {
                    switch (sideName) {
                    case "left": 
                        // If left side specified but value null, try again with right.
                        sideName = "right"; 
                        continue;
                    case "right":
                    case "bottom": 
                        // If bottom or right side specified, try again with top.
                        sideName = "top";
                        continue; 
                    }
                }
                return side;
            }
        }
    }
};

EchoAppRender.Color = {

    /**
     * Adjusts the value of the color's RGB values by the
     * specified amounts, returning a new Color.
     * The original color is unchanged.
     * 
     * @param color the color to adjust (a 24 bit hex value, e.g., #1a2b3c)
     * @param r the amount to adjust the red value of the color (-255 to 255)
     * @param g the amount to adjust the green value of the color (-255 to 255)
     * @param b the amount to adjust the blue value of the color (-255 to 255)
     * @return the adjusted color (a 24 bit hex value)
     */
    adjust: function(value, r, g, b) {
        var colorInt = parseInt(value.substring(1), 16);
        var red = parseInt(colorInt / 0x10000) + r;
        if (red < 0) {
            red = 0;
        } else if (red > 255) {
            red = 255;
        }
        var green = parseInt(colorInt / 0x100) % 0x100 + g;
        if (green < 0) {
            green = 0;
        } else if (green > 255) {
            green = 255;
        }
        var blue = colorInt % 0x100 + b;
        if (blue < 0) {
            blue = 0;
        } else if (blue > 255) {
            blue = 255;
        }
        return "#" + (red < 16 ? "0" : "") + red.toString(16)
                + (green < 16 ? "0" : "") + green.toString(16)
                + (blue < 16 ? "0" : "") + blue.toString(16); 
    },

    render: function(color, element, styleProperty) {
        if (color) {
            element.style[styleProperty] = color;
        }
    },
    
    renderClear: function(color, element, styleProperty) {
        element.style[styleProperty] = color ? color : "";
    },
    
    renderFB: function(component, element) { 
        var color;
        if (color = component.render("foreground")) {
            element.style.color = color;
        }
        if (color = component.render("background")) {
            element.style.backgroundColor = color;
        }
    }
};

EchoAppRender.Extent = { 

    /**
     * Regular expression to parse an extent value, e.g., "12px" into its value and unit components.
     */
    _PARSER: /^(-?\d+(?:\.\d+)?)(.+)?$/,

    _FORMATTED_PIXEL_TEST: /^(-?\d+px *)$/,
    
    isPercent: function(extent) {
        if (extent == null || typeof(extent) == "number") {
            return false;
        } else {
            var parts = this._PARSER.exec(arguments[0]);
            if (!parts) {
                throw new Error("Invalid Extent: " + arguments[0]);
            }
            return parts[2] == "%";
        }
    },

    toCssValue: function(extent, horizontal, allowPercent) {
        switch(typeof(extent)) {
            case "number":
                return extent + "px";
                break;
            case "string":
                if (this._FORMATTED_PIXEL_TEST.test(extent)) {
                    return extent;
                } else {
                    if (allowPercent && this.isPercent(extent)) {
                        return extent;
                    } else {
                        var pixels = this.toPixels(extent, horizontal);
                        return pixels == null ? "" : this.toPixels(extent, horizontal) + "px";
                    }
                }
                break;