render.colorselect.js

一个ajax富客户端的ajax类库

ExtrasRender.ComponentSync.ColorSelect = Core.extend(EchoRender.ComponentSync, {

    $load: function() {
        EchoRender.registerPeer("ExtrasApp.ColorSelect", this);
    },
    
    _h: 0,
    _s: 0,
    _v: 0,

    _processHMouseMoveRef: null,
    _processHMouseUpRef: null,
    _processSVMouseMoveRef: null,
    _processSVMouseUpRef: null,

    $construct: function() {
        this._processHMouseMoveRef = Core.method(this, this._processHMouseMove);
        this._processHMouseUpRef = Core.method(this, this._processHMouseUp);
        this._processSVMouseMoveRef = Core.method(this, this._processSVMouseMove);
        this._processSVMouseUpRef = Core.method(this, this._processSVMouseUp);
    },
        
    _hsvToRgb: function(h, s, v) {
        var r, g, b;
        if (s == 0) {
            r = g = b = v;
        } else {
            h /= 60;
            var i = Math.floor(h);
            var f = h - i;
            var p = v * (1 - s);
            var q = v * (1 - s * f);
            var t = v * (1 - s * (1 - f));
            switch (i) {
            case 0:
                r = v;
                g = t;
                b = p;
                break;
            case 1:
                r = q;
                g = v;
                b = p;
                break;
            case 2:
                r = p;
                g = v;
                b = t;
                break;
            case 3:
                r = p;
                g = q;
                b = v;
                break;
            case 4:
                r = t;
                g = p;
                b = v;
                break;
            default:
                r = v;
                g = p;
                b = q;
                break;
            }
        }
        return new ExtrasRender.ComponentSync.ColorSelect.RGB(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
    },
    
    _processHMouseDown: function(e) {
        if (!this.client.verifyInput(this.component) || WebCore.dragInProgress) {
            return;
        }
        WebCore.EventProcessor.add(this._hListenerDivElement, "mousemove", this._processHMouseMoveRef, false);
        WebCore.EventProcessor.add(this._hListenerDivElement, "mouseup", this._processHMouseUpRef, false);
        this._processHUpdate(e);
    },
    
    _processHMouseMove: function(e) {
        this._processHUpdate(e);
    },
    
    _processHMouseUp: function(e) {
        WebCore.EventProcessor.remove(this._hListenerDivElement, "mousemove", this._processHMouseMoveRef, false);
        WebCore.EventProcessor.remove(this._hListenerDivElement, "mouseup", this._processHMouseUpRef, false);
        this._storeColor();
    },
    
    _processHUpdate: function(e) {
        var offset = WebCore.DOM.getEventOffset(e);
        this._h = (this._saturationHeight - (offset.y - 7)) * 360 / this._saturationHeight;
        this._updateDisplayedColor();
    },
    
    _processSVMouseDown: function(e) {
        if (!this.client.verifyInput(this.component) || WebCore.dragInProgress) {
            return;
        }
        WebCore.EventProcessor.add(this._svListenerDivElement, "mousemove", this._processSVMouseMoveRef, false);
        WebCore.EventProcessor.add(this._svListenerDivElement, "mouseup", this._processSVMouseUpRef, false);
        this._processSVUpdate(e);
    },
    
    _processSVMouseMove: function(e) {
        this._processSVUpdate(e);
    },
    
    _processSVMouseUp: function(e) {
        WebCore.EventProcessor.remove(this._svListenerDivElement, "mousemove", this._processSVMouseMoveRef, false);
        WebCore.EventProcessor.remove(this._svListenerDivElement, "mouseup", this._processSVMouseUpRef, false);
        this._storeColor();
    },
    
    _processSVUpdate: function(e) {
        var offset = WebCore.DOM.getEventOffset(e);
        this._v = (offset.x - 7) / this._valueWidth;
        this._s = 1 - ((offset.y - 7) / this._saturationHeight);
        this._updateDisplayedColor();
    },
    
    renderAdd: function(update, parentElement) {
        this._valueWidth = EchoAppRender.Extent.toPixels(
                this.component.render("valueWidth", ExtrasApp.ColorSelect.DEFAULT_VALUE_WIDTH), true);
        this._saturationHeight = EchoAppRender.Extent.toPixels(
                this.component.render("saturationHeight", ExtrasApp.ColorSelect.DEFAULT_SATURATION_HEIGHT), false);
        this._hueWidth = EchoAppRender.Extent.toPixels(
                this.component.render("hueWidth", ExtrasApp.ColorSelect.DEFAULT_HUE_WIDTH), true);
    
        var svGradientImageSrc = this.client.getResourceUrl("Extras", "image/colorselect/ColorSelectSVGradient.png");
        var hGradientImageSrc = this.client.getResourceUrl("Extras", "image/colorselect/ColorSelectHGradient.png");
        var arrowDownImageSrc = this.client.getResourceUrl("Extras", "image/colorselect/ColorSelectArrowDown.gif");
        var arrowUpImageSrc = this.client.getResourceUrl("Extras", "image/colorselect/ColorSelectArrowUp.gif");
        var arrowRightImageSrc = this.client.getResourceUrl("Extras", "image/colorselect/ColorSelectArrowRight.gif");
        var arrowLeftImageSrc = this.client.getResourceUrl("Extras", "image/colorselect/ColorSelectArrowLeft.gif");
        
        // Create container div element, relatively positioned.
        this._containerDivElement = document.createElement("div");
        this._containerDivElement.style.position = "relative";
        this._containerDivElement.style.left = "0px";
        this._containerDivElement.style.top = "0px";
        this._containerDivElement.style.width = (this._valueWidth + this._hueWidth + 29) + "px";
        this._containerDivElement.style.height = (this._saturationHeight + 36) +"px";
        this._containerDivElement.style.overflow = "hidden";
        
        // Create saturation / value selector.
        this._svDivElement = document.createElement("div");
        this._svDivElement.style.position = "absolute";
        this._svDivElement.style.left = "7px";
        this._svDivElement.style.top = "7px";
        this._svDivElement.style.width = this._valueWidth + "px";
        this._svDivElement.style.height = this._saturationHeight + "px";
        this._svDivElement.style.backgroundColor = "#ff0000";
        this._containerDivElement.appendChild(this._svDivElement);
        
        if (svGradientImageSrc) {
            if (WebCore.Environment.PROPRIETARY_IE_PNG_ALPHA_FILTER_REQUIRED) {
                this._svDivElement.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader("
                        + "src='" + svGradientImageSrc + "', sizingMethod='scale');";
            } else {
                var svGradientImgElement = document.createElement("img");
                svGradientImgElement.src = svGradientImageSrc;
                svGradientImgElement.style.width = this._valueWidth + "px";
                svGradientImgElement.style.height = this._saturationHeight + "px";
                this._svDivElement.appendChild(svGradientImgElement);
            }
        }
        
        // Create container for value selecion bar.
        this._vLineDivElement = document.createElement("div");
        this._vLineDivElement.style.position = "absolute";
        this._vLineDivElement.style.left = "2px";
        this._vLineDivElement.style.top = "0px";
        this._vLineDivElement.style.width = "11px";
        this._vLineDivElement.style.height = (this._saturationHeight + 14) + "px";
        this._vLineDivElement.style.overflow = "hidden";
        this._containerDivElement.appendChild(this._vLineDivElement);
    
        // Create value selection bar top arrow.
        if (arrowDownImageSrc) {
            var vLineTopImgElement = document.createElement("img");
            vLineTopImgElement.src = arrowDownImageSrc;
            vLineTopImgElement.style.position = "absolute";
            vLineTopImgElement.style.left = "0px";
            vLineTopImgElement.style.top = "0px";
            this._vLineDivElement.appendChild(vLineTopImgElement);
        }
        
        // Create value selection bar line.
        var vLineBarDivElement = document.createElement("div");
        vLineBarDivElement.style.position = "absolute";
        vLineBarDivElement.style.top = "7px";
        vLineBarDivElement.style.left = "5px";
        vLineBarDivElement.style.height = this._saturationHeight + "px";
        vLineBarDivElement.style.width = "1px";
        vLineBarDivElement.style.backgroundColor = "#000000";
        this._vLineDivElement.appendChild(vLineBarDivElement);
    
        // Create value selection bar bottom arrow.
        if (arrowUpImageSrc) {
            var vLineBottomImgElement = document.createElement("img");
            vLineBottomImgElement.src = arrowUpImageSrc;
            vLineBottomImgElement.style.position = "absolute";
            vLineBottomImgElement.style.left = "0px";
            vLineBottomImgElement.style.top = (this._saturationHeight + 7) + "px";
            this._vLineDivElement.appendChild(vLineBottomImgElement);
        }
        
        // Create saturation selection bar container.
        this._sLineDivElement = document.createElement("div");
        this._sLineDivElement.style.position = "absolute";
        this._sLineDivElement.style.left = "0px";
        this._sLineDivElement.style.top = (this._saturationHeight + 2) + "px";
        this._sLineDivElement.style.height = "11px";
        this._sLineDivElement.style.width = (this._valueWidth + 14) + "px";
        this._sLineDivElement.style.overflow = "hidden";
        this._containerDivElement.appendChild(this._sLineDivElement);
        
        // Create saturation selection bar left arrow.
        if (arrowRightImageSrc) {
            var sLineLeftImgElement = document.createElement("img");
            sLineLeftImgElement.src = arrowRightImageSrc;
            sLineLeftImgElement.style.position = "absolute";
            sLineLeftImgElement.style.left = "0px";
            sLineLeftImgElement.style.top = "0px";
            this._sLineDivElement.appendChild(sLineLeftImgElement);
        }
        
        // Create saturation selection bar line.
        var sLineBarDivElement = document.createElement("div");
        sLineBarDivElement.style.position = "absolute";
        sLineBarDivElement.style.left = "0px";
        sLineBarDivElement.style.left = "7px";
        sLineBarDivElement.style.top = "5px";
        sLineBarDivElement.style.width = this._valueWidth + "px";
        sLineBarDivElement.style.height = "1px";
        sLineBarDivElement.style.fontSize = "1px";
        sLineBarDivElement.style.borderTop = "1px #000000 solid";
        sLineBarDivElement.style.lineHeight = "0";
        this._sLineDivElement.appendChild(sLineBarDivElement);
    
        // Create saturation selection bar right arrow.
        if (arrowLeftImageSrc) {
            var sLineRightImgElement = document.createElement("img");
            sLineRightImgElement.src = arrowLeftImageSrc;
            sLineRightImgElement.style.position = "absolute";
            sLineRightImgElement.style.left = this._valueWidth + 7 + "px";
            sLineRightImgElement.style.top = "0px";
            this._sLineDivElement.appendChild(sLineRightImgElement);
        }
        
        // Create hue selector.
        var hDivElement = document.createElement("div");
        hDivElement.style.position = "absolute";
        hDivElement.style.left = (this._valueWidth + 22) + "px";
        hDivElement.style.top = "7px";
        hDivElement.style.width = this._hueWidth + "px";
        hDivElement.style.height = this._saturationHeight + "px";
        this._containerDivElement.appendChild(hDivElement);