YUI Library JavaScript DHTML


            



    
RBG Slider Control

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}









    .dragPanel { position: relative; background-color: #eee; border: 1px solid #336; top: 0px; left: 20px; width: 320px; height: 180px; }
    .dragPanel h4 { background-color: #336; height: 10px; margin: 0px; cursor: move; }
    input { font-size: 0.85em} .thumb { cursor:default; width:18px; height:18px; z-index: 9; position: absolute; left: 0px; }
    .bg { position:absolute; left:10px; height:18px; width:146px; border: 0px solid #aaaaaa; } 
    .bg span, .bg p { cursor:default; position: relative; font-size: 2px; overflow: hidden; color: #aaaaaa; top: 4px; height: 10px; width: 4px; display: block; float:left; }
    .bg span { border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; }
    .bg .lb { border-left:1px solid #cccccc; }
    .bg .rb { border-right:1px solid #cccccc; }
    #valdiv { position:absolute; top: 100px; left:10px; } 
    #rBG {-moz-outline: none; outline:0px none;top:30px}
    #gBG {-moz-outline: none; outline:0px none;top:50px}
    #bBG {-moz-outline: none; outline:0px none;top:70px}
    #swatch { position:absolute; left:160px; top:34px; height:50px; width:50px; border:1px solid #aaaaaa; }




RBG Slider Control


  The RGB slider implements the YUI Slider Control to create three sliders which, between them, generate an
RGB color.  The background color of each slider is also dynamically modified to reflect the colors that could be
generated by moving a single slider; this affords greater visual feedback to the user and allows her to have a quicker intuitive sense about how to get the desired result.

(Note:  YUI also includes a full Color Picker Control with a complete set of configurable options.)

 
  
     
   
  
     
   
  
    
      
        
          
          RGB
          
          
            
            
            
          
          
            
          
        
        
          
            Hex: #
          
          
            
          
          
            
          
        
        
          
            
          
        
      
    
  
     




YAHOO.example.RGBSlider = function() {
    var Event = YAHOO.util.Event,
        Dom = YAHOO.util.Dom,
        Color = YAHOO.util.Color,
        Slider = YAHOO.widget.Slider,
        r, g, b, dd;
    function updateSliderColors() {
        var curr, curg, curb;
        curr = Math.min(r.getValue() * 2, 255);
        curg = Math.min(g.getValue() * 2, 255);
        curb = Math.min(b.getValue() * 2, 255);
        YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);
        for (var i=0; i<34; i++) {
            Dom.setStyle("rBG" + i, "background-color", 
                "rgb(" + (i*8) + "," + curg + "," + curb + ")");
            Dom.setStyle("gBG" + i, "background-color", 
                "rgb(" + curr + "," + (i*8) + "," + curb + ")");
            Dom.setStyle("bBG" + i, "background-color", 
                "rgb(" + curr + "," + curg + "," + (i*8) + ")");
        }
        Dom.setStyle("swatch", "background-color", 
            "rgb(" + curr + "," + curg + "," + curb + ")");
        Dom.get("hexval").value = Color.rgb2hex(curr, curg, curb);
    }
    function isValidRGB(a) { 
        if ((!a[0] && a[0] !=0) || isNaN(a[0]) || a[0] < 0 || a[0] > 255) return false;
        if ((!a[1] && a[1] !=0) || isNaN(a[1]) || a[1] < 0 || a[1] > 255) return false;
        if ((!a[2] && a[2] !=0) || isNaN(a[2]) || a[2] < 0 || a[2] > 255) return false;
        return true;
    }
    function listenerUpdate(whichSlider, newVal) {
        newVal = Math.min(255, newVal);
        Dom.get(whichSlider + "val").value = newVal;
        updateSliderColors();
    }
    return {
        userReset: function() {
            var v;
            var f = document.forms['rgbform'];
            r.setValue(0);
            g.setValue(0);
            b.setValue(0);
        },
        rgbInit: function() {
            r = Slider.getHorizSlider("rBG", "rthumb", 0, 128);
            r.subscribe("change", function(newVal) { listenerUpdate("r", newVal*2); });
            g = Slider.getHorizSlider("gBG", "gthumb", 0, 128);
            g.subscribe("change", function(newVal) { listenerUpdate("g", newVal*2); });
            b = Slider.getHorizSlider("bBG", "bthumb", 0, 128);
            b.subscribe("change", function(newVal) { listenerUpdate("b", newVal*2); });
            this.initColor();
            dd = new YAHOO.util.DD("ddRGB");
            dd.setHandleElId("pickerHandle");
        },
        initColor: function() {
            var ch = " ";
            d = document.createElement("P");
            d.className = "rb";
            r.getEl().appendChild(d);
            d = document.createElement("P");
            d.className = "rb";
            g.getEl().appendChild(d);
            d = document.createElement("P");
            d.className = "rb";
            b.getEl().appendChild(d);
            for (var i=0; i<34; i++) {
                d = document.createElement("SPAN");
                d.id = "rBG" + i
                // d.innerHTML = ch;
                r.getEl().appendChild(d);
                d = document.createElement("SPAN");
                d.id = "gBG" + i
                // d.innerHTML = ch;
                g.getEl().appendChild(d);
                d = document.createElement("SPAN");
                d.id = "bBG" + i
                // d.innerHTML = ch;
                b.getEl().appendChild(d);
            }
            d = document.createElement("P");
            d.className = "lb";
            r.getEl().appendChild(d);
            d = document.createElement("P");
            d.className = "lb";
            g.getEl().appendChild(d);
            d = document.createElement("P");
            d.className = "lb";
            b.getEl().appendChild(d);
            this.userUpdate();
        },
        hexUpdate: function(e) {
            return this.userUpdate(e, true);
        },
        userUpdate: function(e, isHex) {
            var v;
            var f = document.forms['rgbform'];
            if (isHex) {
                var hexval = f["hexval"].value;
                // shorthand #369
                if (hexval.length == 3) {
                    var newval = "";
                    for (var i=0;i<3;i++) {
                        var a = hexval.substr(i, 1);
                        newval += a + a;
                    }
                    hexval = newval;
                }
                YAHOO.log("hexval:" + hexval);
                if (hexval.length != 6) {
                    alert("illegal hex code: " + hexval);
                } else {
                    var rgb = Color.hex2rgb(hexval);
                    // alert(rgb.toString());
                    if (isValidRGB(rgb)) {
                        f['rval'].value = rgb[0];
                        f['gval'].value = rgb[1];
                        f['bval'].value = rgb[2];
                    }
                }
            }
            // red
            v = parseFloat(f['rval'].value);
            v = ( isNaN(v) ) ? 0 : Math.round(v);
            YAHOO.log("setValue, r: " + v);
            r.setValue(Math.round(v) / 2);
            v = parseFloat(f['gval'].value);
            v = ( isNaN(v) ) ? 0 : Math.round(v);
            YAHOO.log("setValue, g: " + g);
            g.setValue(Math.round(v) / 2);
            v = parseFloat(f['bval'].value);
            v = ( isNaN(v) ) ? 0 : Math.round(v);
            YAHOO.log("setValue, b: " + b);
            b.setValue(Math.round(v) / 2);
            updateSliderColors();
            if (e) {
                Event.stopEvent(e);
            }
        },
        init: function() {
            this.rgbInit();
            Event.on("rgbForm", "submit", this.userUpdate);
            Event.on("rgbSubmit", "click", this.userUpdate);
            Event.on("hexSubmit", "click", this.hexUpdate, this, true);
            Event.on("resetButton", "click", this.userReset);
        }
    };
}();
YAHOO.util.Event.onDOMReady(YAHOO.example.RGBSlider.init, 
                            YAHOO.example.RGBSlider, true);





   
   
yui_2.7.0b.zip( 4,431 k)