sync.colorselect.js

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

Extras.Sync.ColorSelect = Core.extend(Echo.Render.ComponentSync, {

    $load: function() {
        Echo.Render.registerPeer("Extras.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 Extras.Sync.ColorSelect.RGB(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
    },
    
    _processHMouseDown: function(e) {
        if (!this.client || !this.client.verifyInput(this.component) || Core.Web.dragInProgress) {
            return;
        }
        Core.Web.Event.add(this._hListenerDiv, "mousemove", this._processHMouseMoveRef, false);
        Core.Web.Event.add(this._hListenerDiv, "mouseup", this._processHMouseUpRef, false);
        this._processHUpdate(e);
    },
    
    _processHMouseMove: function(e) {
        this._processHUpdate(e);
    },
    
    _processHMouseUp: function(e) {
        Core.Web.Event.remove(this._hListenerDiv, "mousemove", this._processHMouseMoveRef, false);
        Core.Web.Event.remove(this._hListenerDiv, "mouseup", this._processHMouseUpRef, false);
        this._storeColor();
    },
    
    _processHUpdate: function(e) {
        var offset = Core.Web.DOM.getEventOffset(e);
        this._h = (this._saturationHeight - (offset.y - 7)) * 360 / this._saturationHeight;
        this._updateDisplayedColor();
    },
    
    _processSVMouseDown: function(e) {
        if (!this.client || !this.client.verifyInput(this.component) || Core.Web.dragInProgress) {
            return;
        }
        Core.Web.Event.add(this._svListenerDiv, "mousemove", this._processSVMouseMoveRef, false);
        Core.Web.Event.add(this._svListenerDiv, "mouseup", this._processSVMouseUpRef, false);
        this._processSVUpdate(e);
    },
    
    _processSVMouseMove: function(e) {
        this._processSVUpdate(e);
    },
    
    _processSVMouseUp: function(e) {
        Core.Web.Event.remove(this._svListenerDiv, "mousemove", this._processSVMouseMoveRef, false);
        Core.Web.Event.remove(this._svListenerDiv, "mouseup", this._processSVMouseUpRef, false);
        this._storeColor();
    },
    
    _processSVUpdate: function(e) {
        var offset = Core.Web.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 = Echo.Sync.Extent.toPixels(
                this.component.render("valueWidth", Extras.ColorSelect.DEFAULT_VALUE_WIDTH), true);
        this._saturationHeight = Echo.Sync.Extent.toPixels(
                this.component.render("saturationHeight", Extras.ColorSelect.DEFAULT_SATURATION_HEIGHT), false);
        this._hueWidth = Echo.Sync.Extent.toPixels(
                this.component.render("hueWidth", Extras.ColorSelect.DEFAULT_HUE_WIDTH), true);
        var displayHeight = Core.Web.Measure.extentToPixels("1em", false);
    
        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 main container div element, relatively positioned.
        this._div = document.createElement("div");
        this._div.id = this.component.renderId;
        this._div.style.cssText = "position:relative;left:0;top:0;overflow:hidden;";
        this._div.style.width = (this._valueWidth + this._hueWidth + 29) + "px";
        this._div.style.height = (this._saturationHeight + 18 + displayHeight) +"px";
        
        // Create saturation / value selector.
        this._svDiv = document.createElement("div");
        this._svDiv.style.cssText = "position:absolute;left:7px;top:7px;background-color:#ff0000";
        this._svDiv.style.width = this._valueWidth + "px";
        this._svDiv.style.height = this._saturationHeight + "px";
        this._div.appendChild(this._svDiv);
        
        if (svGradientImageSrc) {
            if (Core.Web.Env.PROPRIETARY_IE_PNG_ALPHA_FILTER_REQUIRED) {
                this._svDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(" +
                        "src='" + svGradientImageSrc + "', sizingMethod='scale');";
            } else {
                var svGradientImg = document.createElement("img");
                svGradientImg.src = svGradientImageSrc;
                svGradientImg.style.width = this._valueWidth + "px";
                svGradientImg.style.height = this._saturationHeight + "px";
                this._svDiv.appendChild(svGradientImg);
            }
        }
        
        // Create container for value selecion bar.
        this._vLineDiv = document.createElement("div");
        this._vLineDiv.style.cssText = "position:absolute;left:2px;top:0;width:11px;overflow:hidden;";
        this._vLineDiv.style.height = (this._saturationHeight + 14) + "px";
        this._div.appendChild(this._vLineDiv);
    
        // Create value selection bar top arrow.
        if (arrowDownImageSrc) {
            var vLineTopImg = document.createElement("img");
            vLineTopImg.src = arrowDownImageSrc;
            vLineTopImg.style.cssText = "position:absolute;left:0;top:0;";
            this._vLineDiv.appendChild(vLineTopImg);
        }
        
        // Create value selection bar line.
        var vLineBarDiv = document.createElement("div");
        vLineBarDiv.style.cssText = "position:absolute;top:7px;left:5px;width:1px;background-color:#000000;";
        vLineBarDiv.style.height = this._saturationHeight + "px";
        this._vLineDiv.appendChild(vLineBarDiv);
    
        // Create value selection bar bottom arrow.
        if (arrowUpImageSrc) {
            var vLineBottomImg = document.createElement("img");
            vLineBottomImg.src = arrowUpImageSrc;
            vLineBottomImg.style.cssText = "position:absolute;left:0;";
            vLineBottomImg.style.top = (this._saturationHeight + 7) + "px";
            this._vLineDiv.appendChild(vLineBottomImg);
        }
        
        // Create saturation selection bar container.
        this._sLineDiv = document.createElement("div");
        this._sLineDiv.style.cssText = "position:absolute;left:0;height:11px;overflow:hidden;";
        this._sLineDiv.style.top = (this._saturationHeight + 2) + "px";
        this._sLineDiv.style.width = (this._valueWidth + 14) + "px";
        this._div.appendChild(this._sLineDiv);
        
        // Create saturation selection bar left arrow.
        if (arrowRightImageSrc) {
            var sLineLeftImg = document.createElement("img");
            sLineLeftImg.src = arrowRightImageSrc;
            sLineLeftImg.style.cssText = "position:absolute;left:0;top:0;";
            this._sLineDiv.appendChild(sLineLeftImg);
        }
        
        // Create saturation selection bar line.
        var sLineBarDiv = document.createElement("div");
        sLineBarDiv.style.cssText = 
                "position:absolute;left:7px;top:5px;height:1px;font-size:1px;border-top:1px #000000 solid;line-height:0;";
        sLineBarDiv.style.width = this._valueWidth + "px";
        this._sLineDiv.appendChild(sLineBarDiv);
    
        // Create saturation selection bar right arrow.
        if (arrowLeftImageSrc) {
            var sLineRightImg = document.createElement("img");
            sLineRightImg.src = arrowLeftImageSrc;
            sLineRightImg.style.cssText = "position:absolute;top:0;";
            sLineRightImg.style.left = this._valueWidth + 7 + "px";
            this._sLineDiv.appendChild(sLineRightImg);
        }
        
        // Create hue selector.
        var hDiv = document.createElement("div");
        hDiv.style.cssText = "position:absolute;top:7px;";
        hDiv.style.left = (this._valueWidth + 22) + "px";
        hDiv.style.width = this._hueWidth + "px";
        hDiv.style.height = this._saturationHeight + "px";
        this._div.appendChild(hDiv);
    
        if (hGradientImageSrc) {
            var hGradientImg = document.createElement("img");
            hGradientImg.src = hGradientImageSrc;
            hGradientImg.style.cssText = "position:absolute;left:0;top:0;";
            hGradientImg.style.width = this._hueWidth + "px";
            hGradientImg.style.height = this._saturationHeight + "px";
            hDiv.appendChild(hGradientImg);
        }
        
        this._hLineDiv = document.createElement("div");
        this._hLineDiv.style.cssText = "position:absolute;height:11px;overflow:hidden;";
        this._hLineDiv.style.left = (this._valueWidth + 15) + "px";
        this._hLineDiv.style.top = (this._saturationHeight + 2) + "px";