GUI Components JavaScript DHTML


                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    xmlns:x2="http://www.w3.org/TR/xhtml2"
    xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
    xmlns:state="http://www.w3.org/2005/07/aaa">

Yahoo! UI Library - Slider Widget




 
Drag and Drop - Slider Widgets


  
     
       
      Basic Sliders

        
        The slider widget is an implementation of YAHOO.util.DragDrop 
        It also will use YAHOO.util.Animation if available to
        animate the movement of the thumb when you click the 
        slider background.
        The only difference between the two sliders aside from
        the fact that one is vertical and one horizontal is that 
        the horizontal slider implements the "tick mark" feature
        of drag and drop; it will "snap" to the tick marks spaced
        25 pixels apart.
        

              
              
                               id="vertBGDiv"
                 name="vertBGDiv"
                 tabindex="0" 
                 x2:role="role:slider" 
                 state:valuenow="0" 
                 state:valuemin="0" 
                 state:valuemax="200"
                 title="Vertical Slider" 
                 onkeypress="return handleVertSliderKey(this, YAHOO.util.Event.getEvent(event))"
               >

 
              
                
                    
                    
                    
                    
                
              
 
           
                        id="horizBGDiv"
             name="horizBGDiv"
             tabindex="0" 
             x2:role="role:slider" 
             state:valuenow="0" 
             state:valuemin="-100" 
             state:valuemax="100"
             title="Horizontal Slider" 
             onkeypress="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event))"
           >
              
           
            
                
                
                
                
            
          
     
     
      
    
  

 
    Color Picker

      
      Implements a slider region and a vertical slider to implement an HSV color
      picker.
      

        
             
            
              
               
            
             
               
             
            
                
                
                R 
                H 
                
                G 
                S 
                
                B 
                V 
                
                
                # 
                
                
            
             
        
     
      
    
  











  var hue;
  var picker;
  var dd1, dd2;
  var r, g, b;
  function init() {
        standardSliderInit();
        // rgbInit();
        pickerInit();
    }
    // Picker ---------------------------------------------------------
    function pickerInit() {
    hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
    hue.onChange = function(newVal) { hueUpdate(newVal); };
    picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 
        0, 180, 0, 180);
    picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
    hueUpdate();
    dd1 = new YAHOO.util.DD("pickerPanel");
    dd1.setHandleElId("pickerHandle");
    dd1.endDrag = function(e) {
      // picker.thumb.resetConstraints();
      // hue.thumb.resetConstraints(); 
        };
  }
  window.onload = init;
  function pickerUpdate(newX, newY) {
    pickerSwatchUpdate();
  }
  function hueUpdate(newVal) {
    var h = (180 - hue.getValue()) / 180;
    if (h == 1) { h = 0; }
    YAHOO.log("hue " + hue.getValue());
    var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
    document.getElementById("pickerDiv").style.backgroundColor = 
      "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
    pickerSwatchUpdate();
  }
  function pickerSwatchUpdate() {
    var h = (180 - hue.getValue());
    if (h == 180) { h = 0; }
    document.getElementById("pickerhval").value = (h*2);
    h = h / 180;
    YAHOO.log("h " + hue.getValue());
    var s = picker.getXValue() / 180;
    document.getElementById("pickersval").value = Math.round(s * 100);
    YAHOO.log("s " + s);
    var v = (180 - picker.getYValue()) / 180;
    document.getElementById("pickervval").value = Math.round(v * 100);
    YAHOO.log("v " + v);
    var a = YAHOO.util.Color.hsv2rgb( h, s, v );
    document.getElementById("pickerSwatch").style.backgroundColor = 
      "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
    document.getElementById("pickerrval").value = a[0];
    document.getElementById("pickergval").value = a[1];
    document.getElementById("pickerbval").value = a[2];
    document.getElementById("pickerhexval").value = 
      YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
  }
    // RGB slider ---------------------------------------------------------
  function rgbInit() {
    r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
    r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };
    g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
    g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };
    b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
    b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };
    initColor();
    dd2 = new YAHOO.util.DD("rgbPanel");
    dd2.setHandleElId("rgbHandle");
    dd2.endDrag = function(e) {
      // r.thumb.resetConstraints();
      // g.thumb.resetConstraints();
      // b.thumb.resetConstraints();
    }
  }
  function initColor() {
    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);
    userUpdate();
  }
  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);
    var d;
    for (var i=0; i<34; i++) {
      d = document.getElementById("rBG" + i);
      d.style.backgroundColor = 
        "rgb(" + (i*8) + "," + curg + "," + curb + ")";
      d = document.getElementById("gBG" + i);
      d.style.backgroundColor = 
        "rgb(" + curr + "," + (i*8) + "," + curb + ")";
      d = document.getElementById("bBG" + i);
      d.style.backgroundColor = 
        "rgb(" + curr + "," + curg + "," + (i*8) + ")";
    }
    document.getElementById("rgbSwatch").style.backgroundColor =
      "rgb(" + curr + "," + curg + "," + curb + ")";
    document.getElementById("hexval").value = 
          YAHOO.util.Color.rgb2hex(curr, curg, curb);
  }
  function listenerUpdate(whichSlider, newVal) {
    if (newVal == 256) {
      newVal = 255;
    }
    document.getElementById(whichSlider + "val").value = newVal;
    updateSliderColors();
  }
  function userUpdate(isHex) {
        YAHOO.log("userupdate");
    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 = YAHOO.util.Color.hex2rgb(hexval);
        // alert(rgb.toString());
        if (YAHOO.util.Color.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);
    r.setValue(Math.round(v) / 2);
    v = parseFloat(f['gval'].value);
    v = ( isNaN(v) ) ? 0 : Math.round(v);
    g.setValue(Math.round(v) / 2);
    v = parseFloat(f['bval'].value);
    v = ( isNaN(v) ) ? 0 : Math.round(v);
    b.setValue(Math.round(v) / 2);
    updateSliderColors();
    return false;
  }
  function userReset() {
    var v;
    var f = document.forms['rgbform'];
    r.setValue(0);
    g.setValue(0);
    b.setValue(0);
  }
var slider1, slider2;
  function standardSliderInit() {
    slider1 = YAHOO.widget.Slider.getVertSlider("vertBGDiv", "vertHandleDiv", 0, 200);
    slider1.onChange = function(offsetFromStart) {
      document.getElementById("vertVal").value = offsetFromStart;
    }
    slider2 = YAHOO.widget.Slider.getHorizSlider("horizBGDiv", "horizHandleDiv", 100, 100, 25);
    slider2.onChange = function(offsetFromStart) {
      document.getElementById("horizVal").value = offsetFromStart;
    }
        // if (document.getElementById("vertBGDiv").getAttributeNS) {
            // slider1.focusOnClick = true;
            // slider2.focusOnClick = true;
        // }
  }
  function updateVert() {
    var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
    if ( isNaN(v) ) v = 0;
    slider1.setValue(Math.round(v));
    return false;
  }
  
  function updateHoriz() {
    var v = parseFloat(document.forms['formH']['horizVal'].value, 10);
    if ( isNaN(v) ) v = 0;
    slider2.setValue(Math.round(v));
    return false;
  }
// accessibility keypress test
function handleHorizSliderKey(slider, ev) {
    YAHOO.log("horizontal slider keypress");
    // Firefox 1.5+ only at this point
    if (!slider.getAttributeNS) {
        return true;
    }
  // var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));
  var valueNow = slider2.getValue();
  var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
  var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));
  var delta = 0;
  var kc = ev.keyCode;
  YAHOO.log("keycode: " + kc);
  if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
    delta = -25;
  } else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
    delta = 25;
  } else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
    delta = -( valueNow - valueMin );
  } else if (kc == YAHOO.util.Key.DOM_VK_END) {
    delta = valueMax - valueNow;
  } else {
    return true;
  }
  
  valueNow += delta;
  slider2.setValue(valueNow, true);
  slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
  
  // displaySlider(slider);
  return false;
}
function handleVertSliderKey(slider, ev) {
  YAHOO.log("vertical slider keypress");
    // Firefox 1.5+ only at this point
    if (!slider.getAttributeNS) {
        return true;
    }
  // var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));
  var valueNow = slider1.getValue();
  var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
  var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));
  var delta = 0;
  var kc = ev.keyCode;
  if (kc == YAHOO.util.Key.DOM_VK_UP) {
    delta = -20;
  }
  else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
    delta = 20;
  }
  else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
    delta = -( valueNow - valueMin );
  }
  else if (kc == YAHOO.util.Key.DOM_VK_END) {
    delta = valueMax - valueNow;
  }
  else {
    return true;
  }
  
  valueNow += delta;
  if (valueNow < valueMin) {
    valueNow = valueMin;
  }
  if (valueNow > valueMax) {
    valueNow = valueMax;
  }  
  slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
  
  // displaySlider(slider);
  slider1.setValue(valueNow, true);
  return false;
}




           
        
yui.zip( 3,714 k)