render.colorselect.js

一个ajax富客户端的ajax类库

        if (hGradientImageSrc) {
            var hGradientImgElement = document.createElement("img");
            hGradientImgElement.src = hGradientImageSrc;
            hGradientImgElement.style.position = "absolute";
            hGradientImgElement.style.left = "0px";
            hGradientImgElement.style.top = "0px";
            hGradientImgElement.style.width = this._hueWidth + "px";
            hGradientImgElement.style.height = this._saturationHeight + "px";
            hDivElement.appendChild(hGradientImgElement);
        }
        
        this._hLineDivElement = document.createElement("div");
        this._hLineDivElement.style.position = "absolute";
        this._hLineDivElement.style.left = (this._valueWidth + 15) + "px";
        this._hLineDivElement.style.top = (this._saturationHeight + 2) + "px";
        this._hLineDivElement.style.height = "11px";
        this._hLineDivElement.style.width = (this._hueWidth + 14) + "px";
        this._hLineDivElement.style.overflow = "hidden";
        this._containerDivElement.appendChild(this._hLineDivElement);
        
        if (arrowRightImageSrc) {
            var hLineLeftImgElement = document.createElement("img");
            hLineLeftImgElement.src = arrowRightImageSrc;
            hLineLeftImgElement.style.position = "absolute";
            hLineLeftImgElement.style.left = "0px";
            hLineLeftImgElement.style.top = "0px";
            this._hLineDivElement.appendChild(hLineLeftImgElement);
        }
    
        if (arrowLeftImageSrc) {
            var hLineRightImgElement = document.createElement("img");
            hLineRightImgElement.src = arrowLeftImageSrc;
            hLineRightImgElement.style.position = "absolute";
            hLineRightImgElement.style.left = (this._hueWidth + 7) + "px";
            hLineRightImgElement.style.top = "0px";
            this._hLineDivElement.appendChild(hLineRightImgElement);
        }
        
        var hLineBarDivElement = document.createElement("div");
        hLineBarDivElement.style.position = "absolute";
        hLineBarDivElement.style.left = "0px";
        hLineBarDivElement.style.left = "7px";
        hLineBarDivElement.style.top = "5px";
        hLineBarDivElement.style.width = this._hueWidth + "px";
        hLineBarDivElement.style.height = "1px";
        hLineBarDivElement.style.fontSize = "1px";
        hLineBarDivElement.style.borderTop = "1px #000000 solid";
        hLineBarDivElement.style.lineHeight = "0";
        this._hLineDivElement.appendChild(hLineBarDivElement);
        
        this._colorDivElement = document.createElement("div");
        this._colorDivElement.style.position = "absolute";
        this._colorDivElement.style.left = "7px";
        this._colorDivElement.style.top = (this._saturationHeight + 16) + "px";
        this._colorDivElement.style.width = (this._valueWidth + this._hueWidth + 13) + "px";
        this._colorDivElement.style.height = "18px";
        this._colorDivElement.style.color = "#ffffff";
        this._colorDivElement.style.backgroundColor = "#000000";
        this._colorDivElement.style.borderColor = "#000000";
        this._colorDivElement.style.borderStyle = "outset";
        this._colorDivElement.style.borderWidth = "1px";
        this._colorDivElement.style.fontFamily = "monospace";
        this._colorDivElement.style.textAlign = "center";
        if (this.component.render("displayValue")) {
            this._colorDivElement.appendChild(document.createTextNode("#000000"));
        }
        this._containerDivElement.appendChild(this._colorDivElement);
        
        this._svListenerDivElement = document.createElement("div");
        this._svListenerDivElement.style.position = "absolute";
        this._svListenerDivElement.style.zIndex = "1";
        this._svListenerDivElement.style.left = "0px";
        this._svListenerDivElement.style.top = "0px";
        this._svListenerDivElement.style.width = (this._valueWidth + 14) + "px";
        this._svListenerDivElement.style.height = (this._saturationHeight + 14) + "px";
        this._svListenerDivElement.style.cursor = "crosshair";
        this._svListenerDivElement.style.backgroundImage = "url(" +
                this.client.getResourceUrl("Echo", "resource/Transparent.gif") + ")";
        this._containerDivElement.appendChild(this._svListenerDivElement);
        
        this._hListenerDivElement = document.createElement("div");
        this._hListenerDivElement.id = this.elementId + "_hlistener";
        this._hListenerDivElement.style.position = "absolute";
        this._hListenerDivElement.style.zIndex = "1";
        this._hListenerDivElement.style.left = (this._valueWidth + 15) + "px";
        this._hListenerDivElement.style.top = "0px";
        this._hListenerDivElement.style.width = (this._hueWidth + 14) + "px";
        this._hListenerDivElement.style.height = (this._saturationHeight + 16) + "px";
        this._hListenerDivElement.style.cursor = "crosshair";
        this._hListenerDivElement.style.backgroundImage = "url(" +
                this.client.getResourceUrl("Echo", "resource/Transparent.gif") + ")";
        this._containerDivElement.appendChild(this._hListenerDivElement);
    
        parentElement.appendChild(this._containerDivElement);
        
        WebCore.EventProcessor.add(this._svListenerDivElement, "mousedown", Core.method(this, this._processSVMouseDown), false);
        WebCore.EventProcessor.add(this._hListenerDivElement, "mousedown", Core.method(this, this._processHMouseDown), false);
        this._setColor(this.component.get("color"));
    },
    
    renderDispose: function(update) { 
        this._containerDivElement = null;
        this._svDivElement = null;
        this._svListenerDivElement = null;
        this._hListenerDivElement = null;
        this._hLineDivElement = null;
        this._sLineDivElement = null;
        this._vLineDivElement = null;
    },
    
    renderUpdate: function(update) {
        var containerDivElement = this._containerDivElement;
        var parentElement = containerDivElement.parentNode;
        EchoRender.renderComponentDispose(update, update.parent);
        parentElement.removeChild(containerDivElement);
        this.renderAdd(update, parentElement);
        return false;
    },
    
    /**
     * Sets the selected color.
     *
     * @param rgb the color to select as an 24 bit hexadecimal string color value
     * @private
     */
    _setColor: function(color) {
        var r, g, b;
        
        if (color) {
            // Remove leading #.
            color = color.substring(1); 
            r = (parseInt(parseInt(color, 16) / 0x10000)) / 255;
            g = (parseInt(parseInt(color, 16) / 0x100) % 0x100) / 255;
            b = (parseInt(color, 16) % 0x100) / 255;
        } else {
            r = g = b = 0;
        }
        
        var min = Math.min(r, g, b);
        var max = Math.max(r, g, b);
        this._v = max;
        
        var delta = max - min;
        if (max == 0 || delta == 0) {
            this._s = 0;
        } else {
            this._s = delta / max;
            if (r == max) {
                this._h = 60 * ((g - b) / delta);
            } else if (g == max) {
                this._h = 60 * (2 + (b - r) / delta);
            } else {
                this._h = 60 * (4 + (r - g) / delta);
            }
            if (this._h < 0) {
                this._h += 360;
            }
        }


        this._updateDisplayedColor();
    },
    
    /**
     * Stores color value in _h, _s, and _v in the component object.
     * @private
     */
    _storeColor: function() {
        var renderColor = this._hsvToRgb(this._h, this._s, this._v);
        var renderHexTriplet = renderColor.toHexTriplet();
        this.component.set("color", renderHexTriplet);
    },
    
    _updateDisplayedColor: function() {
        var baseColor;
    //    if (this.enabled) {
            baseColor = this._hsvToRgb(this._h, 1, 1);
    //    } else {
    //        baseColor = ExtrasColorSelect.hsvToRgb(this.h, 0.3, 0.7);
    //    }
        this._svDivElement.style.backgroundColor = baseColor.toHexTriplet();
    
        var renderColor = this._hsvToRgb(this._h, this._s, this._v);
        
        var renderHexTriplet = renderColor.toHexTriplet();
        this._colorDivElement.style.backgroundColor = renderHexTriplet;
        this._colorDivElement.style.borderColor = renderHexTriplet;
        this._colorDivElement.style.color = this._v < 0.67 ? "#ffffff" : "#000000";
        if (this.component.render("displayValue")) {
            this._colorDivElement.childNodes[0].nodeValue = renderHexTriplet;
        }
        
        var sLineTop = parseInt((1 - this._s) * this._saturationHeight) + 2;
        if (sLineTop < 2) {
             sLineTop = 2;
        } else if (sLineTop > this._saturationHeight + 2) {
            sLineTop = this._saturationHeight + 2;
        }
        this._sLineDivElement.style.top = sLineTop + "px";
        
        var vLineLeft = parseInt(this._v * this._valueWidth) + 2;
        if (vLineLeft < 2) {
            vLineLeft = 2;
        } else if (vLineLeft > this._valueWidth + 2) {
            vLineLeft = this._valueWidth + 2;
        }
        this._vLineDivElement.style.left = vLineLeft + "px";
        
        var hLineTop = parseInt((360 - this._h) / 360 * this._saturationHeight) + 2;
        if (hLineTop < 2) {
            hLineTop = 2;
        } else if (hLineTop > this._saturationHeight + 2) {
            hLineTop = this._saturationHeight + 2;
        }
        this._hLineDivElement.style.top = hLineTop + "px";
    }
});

ExtrasRender.ComponentSync.ColorSelect.RGB = Core.extend({

    $construct: function(r, g, b) {
        this.r = this._clean(r);
        this.g = this._clean(g);
        this.b = this._clean(b);
    },
    
    _clean: function(value) {
        value = value ? parseInt(value) : 0;
        if (value < 0) {
            return 0;
        } else if (value > 255) {
            return 255;
        } else {
            return value;
        }
    },
    
    toHexTriplet: function() {
        var rString = this.r.toString(16);
        if (rString.length == 1) {
            rString = "0" + rString;
        }
        var gString = this.g.toString(16);
        if (gString.length == 1) {
            gString = "0" + gString;
        }
        var bString = this.b.toString(16);
        if (bString.length == 1) {
            bString = "0" + bString;
        }
        return "#" + rString + gString + bString;
    },
    
    toString: function() {
        return this.toHexTriplet();
    }
});