sync.colorselect.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

        this._hLineDiv.style.width = (this._hueWidth + 14) + "px";
        this._div.appendChild(this._hLineDiv);
        
        if (arrowRightImageSrc) {
            var hLineLeftImg = document.createElement("img");
            hLineLeftImg.src = arrowRightImageSrc;
            hLineLeftImg.style.cssText = "position:absolute;left:0;top:0;";
            this._hLineDiv.appendChild(hLineLeftImg);
        }
    
        if (arrowLeftImageSrc) {
            var hLineRightImg = document.createElement("img");
            hLineRightImg.src = arrowLeftImageSrc;
            hLineRightImg.style.cssText = "position:absolute;top:0;";
            hLineRightImg.style.left = (this._hueWidth + 7) + "px";
            this._hLineDiv.appendChild(hLineRightImg);
        }
        
        var hLineBarDiv = document.createElement("div");
        hLineBarDiv.style.cssText =
                "position:absolute;left:7px;top:5px;height:1px;font-size:1px;border-top:1px #000000 solid;line-height:0;";
        hLineBarDiv.style.width = this._hueWidth + "px";
        this._hLineDiv.appendChild(hLineBarDiv);
        
        this._colorDiv = document.createElement("div");
        this._colorDiv.style.cssText = 
                "position:absolute;left:7px;color:#ffffff;background-color:#000000;text-align:center;vertical-align:middle;" +
                "overflow:hidden;border:1px #000000 outset;font-family:monospace;text-align:center;";
        this._colorDiv.style.height = displayHeight + "px";
        this._colorDiv.style.top = (this._saturationHeight + 16) + "px";
        this._colorDiv.style.width = (this._valueWidth + this._hueWidth + 13) + "px";
        if (this.component.render("displayValue")) {
            this._colorDiv.appendChild(document.createTextNode("#000000"));
        }
        this._div.appendChild(this._colorDiv);
        
        this._svListenerDiv = document.createElement("div");
        this._svListenerDiv.style.cssText = "position:absolute;z-index:1;left:0;top:0;cursor:crosshair;";
        this._svListenerDiv.style.width = (this._valueWidth + 14) + "px";
        this._svListenerDiv.style.height = (this._saturationHeight + 14) + "px";
        this._svListenerDiv.style.backgroundImage = "url(" +
                this.client.getResourceUrl("Echo", "resource/Transparent.gif") + ")";
        this._div.appendChild(this._svListenerDiv);
        
        this._hListenerDiv = document.createElement("div");
        this._hListenerDiv.style.cssText = "position:absolute;z-index:1;top:0;cursor:crosshair;";
        this._hListenerDiv.style.left = (this._valueWidth + 15) + "px";
        this._hListenerDiv.style.width = (this._hueWidth + 14) + "px";
        this._hListenerDiv.style.height = (this._saturationHeight + 16) + "px";
        this._hListenerDiv.style.backgroundImage = "url(" +
                this.client.getResourceUrl("Echo", "resource/Transparent.gif") + ")";
        this._div.appendChild(this._hListenerDiv);
    
        parentElement.appendChild(this._div);
        
        Core.Web.Event.add(this._svListenerDiv, "mousedown", Core.method(this, this._processSVMouseDown), false);
        Core.Web.Event.add(this._hListenerDiv, "mousedown", Core.method(this, this._processHMouseDown), false);
        this._setColor(this.component.get("color"));
    },
    
    renderDispose: function(update) { 
        Core.Web.Event.removeAll(this._svListenerDiv);
        Core.Web.Event.removeAll(this._hListenerDiv);
        this._div = null;
        this._svDiv = null;
        this._svListenerDiv = null;
        this._hListenerDiv = null;
        this._hLineDiv = null;
        this._sLineDiv = null;
        this._vLineDiv = null;
    },
    
    renderUpdate: function(update) {
        var div = this._div;
        var parentElement = div.parentNode;
        Echo.Render.renderComponentDispose(update, update.parent);
        parentElement.removeChild(div);
        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 = Math.floor(parseInt(color, 16) / 0x10000) / 255;
            g = (Math.floor(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.component.isRenderEnabled()) {
            baseColor = this._hsvToRgb(this._h, 1, 1);
        } else {
            baseColor = this._hsvToRgb(this._h, 0.3, 0.7);
        }
        this._svDiv.style.backgroundColor = baseColor.toHexTriplet();
    
        var renderColor = this._hsvToRgb(this._h, this._s, this._v);
        
        var renderHexTriplet = renderColor.toHexTriplet();
        this._colorDiv.style.backgroundColor = renderHexTriplet;
        this._colorDiv.style.borderColor = renderHexTriplet;
        this._colorDiv.style.color = this._v < 0.67 ? "#ffffff" : "#000000";
        if (this.component.render("displayValue")) {
            this._colorDiv.childNodes[0].nodeValue = renderHexTriplet;
        }
        
        var sLineTop = Math.floor((1 - this._s) * this._saturationHeight) + 2;
        if (sLineTop < 2) {
             sLineTop = 2;
        } else if (sLineTop > this._saturationHeight + 2) {
            sLineTop = this._saturationHeight + 2;
        }
        this._sLineDiv.style.top = sLineTop + "px";
        
        var vLineLeft = Math.floor(this._v * this._valueWidth) + 2;
        if (vLineLeft < 2) {
            vLineLeft = 2;
        } else if (vLineLeft > this._valueWidth + 2) {
            vLineLeft = this._valueWidth + 2;
        }
        this._vLineDiv.style.left = vLineLeft + "px";
        
        var hLineTop = Math.floor((360 - this._h) / 360 * this._saturationHeight) + 2;
        if (hLineTop < 2) {
            hLineTop = 2;
        } else if (hLineTop > this._saturationHeight + 2) {
            hLineTop = this._saturationHeight + 2;
        }
        this._hLineDiv.style.top = hLineTop + "px";
    }
});

Extras.Sync.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, 10) : 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();
    }
});