yui/examples/dragdrop/slider.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
   4                 xmlns:x2="http://www.w3.org/TR/xhtml2"
   5                 xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
   6                 xmlns:state="http://www.w3.org/2005/07/aaa">
   7 <head>
   8 <title>Yahoo! UI Library - Slider Widget</title>
   9 <link rel="stylesheet" type="text/css" href="css/screen.css">
  10 <style type="text/css">
  11 </style>
  12 </head>
  13 <body>
  14 <div id="pageTitle"><h3>Drag and Drop - Slider Widgets</h3></div>
  15
  16 <div id="container">
  17   <div id="containerTop">
  18     <div id="header"><img src="img/logo.gif" vspace="4" hspace="4" /></div>
  19         <div id="main">
  20
  21                 <div id="content">
  22                   <div class="newsItem">
  23                         <h3>Basic Sliders</h3>
  24                           <p>
  25                                 The slider widget is an implementation of YAHOO.util.DragDrop
  26                                 It also will use YAHOO.util.Animation if available to
  27                                 animate the movement of the thumb when you click the
  28                                 slider background.
  29
  30                                 The only difference between the two sliders aside from
  31                                 the fact that one is vertical and one horizontal is that
  32                                 the horizontal slider implements the "tick mark" feature
  33                                 of drag and drop; it will "snap" to the tick marks spaced
  34                                 25 pixels apart.
  35                           </p>
  36               <!--
  37                           <p>
  38                                 <a href="javascript:slider1.lock()">Lock</a>
  39                                 <a href="javascript:slider1.unlock()">Unlock</a>
  40                           </p>
  41               -->
  42
  43               <div id="vertWrapper">
  44               <div
  45                  id="vertBGDiv"
  46                  name="vertBGDiv"
  47                  tabindex="0"
  48                  x2:role="role:slider"
  49                  state:valuenow="0"
  50                  state:valuemin="0"
  51                  state:valuemax="200"
  52                  title="Vertical Slider"
  53                  onkeypress="return handleVertSliderKey(this, YAHOO.util.Event.getEvent(event))"
  54                >
  55               <div id="vertHandleDiv"><img src="img/vertSlider.png"></div>
  56               </div>
  57
  58                 <div id="vertValueDiv">
  59                     <form name="formV" onsubmit="return updateVert()">
  60                     <input name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
  61                     <input type="button" value="Update" onclick="updateVert()" />
  62                     </form>
  63                 </div>
  64
  65
  66               </div>
  67
  68            <div id="horizWrapper">
  69            <div
  70              id="horizBGDiv"
  71              name="horizBGDiv"
  72              tabindex="0"
  73              x2:role="role:slider"
  74              state:valuenow="0"
  75              state:valuemin="-100"
  76              state:valuemax="100"
  77              title="Horizontal Slider"
  78              onkeypress="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event))"
  79            >
  80              <div id="horizHandleDiv" ><img src="img/horizSlider.png"></div>
  81
  82           </div>
  83
  84             <div id="horizValueDiv">
  85                 <form name="formH" onsubmit="return updateHoriz()">
  86                 <input name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
  87                 <input type="button" value="Update" onclick="updateHoriz()" />
  88                 </form>
  89             </div>
  90
  91
  92           </div>
  93
  94
  95                 </div>
  96
  97     </div>
  98   </div>
  99 </div>
 100
 101 <div id="content">
 102     <h3>Color Picker</h3>
 103       <p>
 104       Implements a slider region and a vertical slider to implement an HSV color
 105       picker.
 106       </p>
 107
 108         <div id="pickerPanel" class="dragPanel">
 109             <h4 id="pickerHandle">&nbsp;</h4>
 110             <div id="pickerDiv">
 111               <img id="pickerbg" src="img/pickerbg.png" alt="">
 112               <div id="selector"><img src="img/select.gif"></div>
 113             </div>
 114
 115              <div id="hueBg">
 116               <div id="hueThumb"><img src="img/hline.png"></div>
 117             </div>
 118
 119             <div id="pickervaldiv">
 120                 <form name="pickerform" onsubmit="return pickerUpdate()">
 121                 <br />
 122                 R <input name="pickerrval" id="pickerrval" type="text" value="0" size="3" maxlength="3" />
 123                 H <input name="pickerhval" id="pickerhval" type="text" value="0" size="3" maxlength="3" />
 124                 <br />
 125                 G <input name="pickergval" id="pickergval" type="text" value="0" size="3" maxlength="3" />
 126                 S <input name="pickergsal" id="pickersval" type="text" value="0" size="3" maxlength="3" />
 127                 <br />
 128                 B <input name="pickerbval" id="pickerbval" type="text" value="0" size="3" maxlength="3" />
 129                 V <input name="pickervval" id="pickervval" type="text" value="0" size="3" maxlength="3" />
 130                 <br />
 131                 <br />
 132                 # <input name="pickerhexval" id="pickerhexval" type="text" value="0" size="6" maxlength="6" />
 133                 <br />
 134
 135                 </form>
 136             </div>
 137
 138             <div id="pickerSwatch">&nbsp;</div>
 139         </div>
 140
 141
 142                 </div>
 143
 144     </div>
 145   </div>
 146 </div>
 147
 148 <script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
 149 <script type="text/javascript" src="../../build/event/event.js" ></script>
 150 <script type="text/javascript" src="../../build/dom/dom.js"></script>
 151 <script type="text/javascript" src="../../build/logger/logger.js" ></script>
 152
 153 <script type="text/javascript" src="../../build/dragdrop/dragdrop.js" ></script>
 154 <script type="text/javascript" src="js/color.js" ></script>
 155 <script type="text/javascript" src="js/key.js" ></script>
 156 <script type="text/javascript" src="../../build/animation/animation.js" ></script>
 157 <script type="text/javascript" src="../../build/slider/slider.js" ></script>
 158 <script type="text/javascript">
 159
 160         var hue;
 161         var picker;
 162         var dd1, dd2;
 163         var r, g, b;
 164
 165         function init() {
 166         standardSliderInit();
 167         // rgbInit();
 168         pickerInit();
 169     }
 170
 171     // Picker ---------------------------------------------------------
 172
 173     function pickerInit() {
 174                 hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
 175                 hue.onChange = function(newVal) { hueUpdate(newVal); };
 176
 177                 picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector",
 178                                 0, 180, 0, 180);
 179                 picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
 180
 181                 hueUpdate();
 182
 183                 dd1 = new YAHOO.util.DD("pickerPanel");
 184                 dd1.setHandleElId("pickerHandle");
 185                 dd1.endDrag = function(e) {
 186                         // picker.thumb.resetConstraints();
 187                         // hue.thumb.resetConstraints();
 188         };
 189         }
 190
 191         window.onload = init;
 192
 193         function pickerUpdate(newX, newY) {
 194                 pickerSwatchUpdate();
 195         }
 196
 197         function hueUpdate(newVal) {
 198
 199                 var h = (180 - hue.getValue()) / 180;
 200                 if (h == 1) { h = 0; }
 201
 202                 YAHOO.log("hue " + hue.getValue());
 203
 204                 var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
 205
 206                 document.getElementById("pickerDiv").style.backgroundColor =
 207                         "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
 208
 209                 pickerSwatchUpdate();
 210         }
 211
 212         function pickerSwatchUpdate() {
 213                 var h = (180 - hue.getValue());
 214                 if (h == 180) { h = 0; }
 215                 document.getElementById("pickerhval").value = (h*2);
 216
 217                 h = h / 180;
 218                 YAHOO.log("h " + hue.getValue());
 219
 220                 var s = picker.getXValue() / 180;
 221                 document.getElementById("pickersval").value = Math.round(s * 100);
 222
 223                 YAHOO.log("s " + s);
 224
 225                 var v = (180 - picker.getYValue()) / 180;
 226                 document.getElementById("pickervval").value = Math.round(v * 100);
 227
 228                 YAHOO.log("v " + v);
 229
 230                 var a = YAHOO.util.Color.hsv2rgb( h, s, v );
 231
 232                 document.getElementById("pickerSwatch").style.backgroundColor =
 233                         "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
 234
 235                 document.getElementById("pickerrval").value = a[0];
 236                 document.getElementById("pickergval").value = a[1];
 237                 document.getElementById("pickerbval").value = a[2];
 238                 document.getElementById("pickerhexval").value =
 239                         YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
 240         }
 241
 242
 243     // RGB slider ---------------------------------------------------------
 244
 245         function rgbInit() {
 246
 247                 r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
 248                 r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };
 249
 250                 g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
 251                 g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };
 252
 253                 b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
 254                 b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };
 255
 256                 initColor();
 257
 258                 dd2 = new YAHOO.util.DD("rgbPanel");
 259                 dd2.setHandleElId("rgbHandle");
 260                 dd2.endDrag = function(e) {
 261                         // r.thumb.resetConstraints();
 262                         // g.thumb.resetConstraints();
 263                         // b.thumb.resetConstraints();
 264                 }
 265         }
 266
 267
 268         function initColor() {
 269                 var ch = " ";
 270
 271                 d = document.createElement("P");
 272                 d.className = "rb";
 273                 r.getEl().appendChild(d);
 274                 d = document.createElement("P");
 275                 d.className = "rb";
 276                 g.getEl().appendChild(d);
 277                 d = document.createElement("P");
 278                 d.className = "rb";
 279                 b.getEl().appendChild(d);
 280
 281                 for (var i=0; i<34; i++) {
 282                         d = document.createElement("SPAN");
 283                         d.id = "rBG" + i
 284                         // d.innerHTML = ch;
 285                         r.getEl().appendChild(d);
 286
 287                         d = document.createElement("SPAN");
 288                         d.id = "gBG" + i
 289                         // d.innerHTML = ch;
 290                         g.getEl().appendChild(d);
 291
 292                         d = document.createElement("SPAN");
 293                         d.id = "bBG" + i
 294                         // d.innerHTML = ch;
 295                         b.getEl().appendChild(d);
 296                 }
 297
 298                 d = document.createElement("P");
 299                 d.className = "lb";
 300                 r.getEl().appendChild(d);
 301                 d = document.createElement("P");
 302                 d.className = "lb";
 303                 g.getEl().appendChild(d);
 304                 d = document.createElement("P");
 305                 d.className = "lb";
 306                 b.getEl().appendChild(d);
 307
 308                 userUpdate();
 309         }
 310
 311         function updateSliderColors() {
 312                 var curr, curg, curb;
 313                 curr = Math.min(r.getValue() * 2, 255);
 314                 curg = Math.min(g.getValue() * 2, 255);
 315                 curb = Math.min(b.getValue() * 2, 255);
 316
 317         YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);
 318
 319                 var d;
 320                 for (var i=0; i<34; i++) {
 321                         d = document.getElementById("rBG" + i);
 322                         d.style.backgroundColor =
 323                                 "rgb(" + (i*8) + "," + curg + "," + curb + ")";
 324
 325                         d = document.getElementById("gBG" + i);
 326                         d.style.backgroundColor =
 327                                 "rgb(" + curr + "," + (i*8) + "," + curb + ")";
 328
 329                         d = document.getElementById("bBG" + i);
 330                         d.style.backgroundColor =
 331                                 "rgb(" + curr + "," + curg + "," + (i*8) + ")";
 332                 }
 333
 334                 document.getElementById("rgbSwatch").style.backgroundColor =
 335                         "rgb(" + curr + "," + curg + "," + curb + ")";
 336
 337                 document.getElementById("hexval").value =
 338                                         YAHOO.util.Color.rgb2hex(curr, curg, curb);
 339         }
 340
 341
 342         function listenerUpdate(whichSlider, newVal) {
 343                 if (newVal == 256) {
 344                         newVal = 255;
 345                 }
 346                 document.getElementById(whichSlider + "val").value = newVal;
 347                 updateSliderColors();
 348         }
 349
 350         function userUpdate(isHex) {
 351         YAHOO.log("userupdate");
 352                 var v;
 353                 var f = document.forms['rgbform'];
 354
 355                 if (isHex) {
 356                         var hexval = f["hexval"].value;
 357                         // shorthand #369
 358                         if (hexval.length == 3) {
 359                                 var newval = "";
 360                                 for (var i=0;i<3;i++) {
 361                                         var a = hexval.substr(i, 1);
 362                                         newval += a + a;
 363                                 }
 364
 365                                 hexval = newval;
 366                         }
 367
 368                         YAHOO.log("hexval:" + hexval);
 369
 370                         if (hexval.length != 6) {
 371                                 alert("illegal hex code: " + hexval);
 372                         } else {
 373                                 var rgb = YAHOO.util.Color.hex2rgb(hexval);
 374                                 // alert(rgb.toString());
 375                                 if (YAHOO.util.Color.isValidRGB(rgb)) {
 376                                         f['rval'].value = rgb[0];
 377                                         f['gval'].value = rgb[1];
 378                                         f['bval'].value = rgb[2];
 379                                 }
 380                         }
 381                 }
 382
 383                 // red
 384                 v = parseFloat(f['rval'].value);
 385                 v = ( isNaN(v) ) ? 0 : Math.round(v);
 386                 r.setValue(Math.round(v) / 2);
 387
 388                 v = parseFloat(f['gval'].value);
 389                 v = ( isNaN(v) ) ? 0 : Math.round(v);
 390                 g.setValue(Math.round(v) / 2);
 391
 392                 v = parseFloat(f['bval'].value);
 393                 v = ( isNaN(v) ) ? 0 : Math.round(v);
 394                 b.setValue(Math.round(v) / 2);
 395
 396                 updateSliderColors();
 397
 398                 return false;
 399         }
 400
 401         function userReset() {
 402                 var v;
 403                 var f = document.forms['rgbform'];
 404
 405                 r.setValue(0);
 406                 g.setValue(0);
 407                 b.setValue(0);
 408         }
 409
 410 var slider1, slider2;
 411         function standardSliderInit() {
 412
 413                 slider1 = YAHOO.widget.Slider.getVertSlider("vertBGDiv", "vertHandleDiv", 0, 200);
 414
 415                 slider1.onChange = function(offsetFromStart) {
 416                         document.getElementById("vertVal").value = offsetFromStart;
 417                 }
 418
 419                 slider2 = YAHOO.widget.Slider.getHorizSlider("horizBGDiv", "horizHandleDiv", 100, 100, 25);
 420
 421                 slider2.onChange = function(offsetFromStart) {
 422                         document.getElementById("horizVal").value = offsetFromStart;
 423                 }
 424
 425         // if (document.getElementById("vertBGDiv").getAttributeNS) {
 426             // slider1.focusOnClick = true;
 427             // slider2.focusOnClick = true;
 428         // }
 429         }
 430
 431         function updateVert() {
 432                 var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
 433                 if ( isNaN(v) ) v = 0;
 434                 slider1.setValue(Math.round(v));
 435                 return false;
 436         }
 437
 438         function updateHoriz() {
 439                 var v = parseFloat(document.forms['formH']['horizVal'].value, 10);
 440                 if ( isNaN(v) ) v = 0;
 441                 slider2.setValue(Math.round(v));
 442                 return false;
 443         }
 444
 445 // accessibility keypress test
 446 function handleHorizSliderKey(slider, ev) {
 447     YAHOO.log("horizontal slider keypress");
 448
 449     // Firefox 1.5+ only at this point
 450     if (!slider.getAttributeNS) {
 451         return true;
 452     }
 453
 454         // var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));
 455
 456         var valueNow = slider2.getValue();
 457
 458         var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
 459         var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));
 460
 461         var delta = 0;
 462
 463         var kc = ev.keyCode;
 464
 465         YAHOO.log("keycode: " + kc);
 466
 467         if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
 468                 delta = -25;
 469         } else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
 470                 delta = 25;
 471         } else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
 472                 delta = -( valueNow - valueMin );
 473         } else if (kc == YAHOO.util.Key.DOM_VK_END) {
 474                 delta = valueMax - valueNow;
 475         } else {
 476                 return true;
 477         }
 478
 479         valueNow += delta;
 480
 481         slider2.setValue(valueNow, true);
 482
 483         slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
 484
 485         // displaySlider(slider);
 486
 487         return false;
 488 }
 489
 490 function handleVertSliderKey(slider, ev) {
 491         YAHOO.log("vertical slider keypress");
 492
 493     // Firefox 1.5+ only at this point
 494     if (!slider.getAttributeNS) {
 495         return true;
 496     }
 497
 498         // var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));
 499
 500         var valueNow = slider1.getValue();
 501
 502         var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
 503         var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));
 504
 505         var delta = 0;
 506         var kc = ev.keyCode;
 507         if (kc == YAHOO.util.Key.DOM_VK_UP) {
 508                 delta = -20;
 509         }
 510         else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
 511                 delta = 20;
 512         }
 513         else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
 514                 delta = -( valueNow - valueMin );
 515         }
 516         else if (kc == YAHOO.util.Key.DOM_VK_END) {
 517                 delta = valueMax - valueNow;
 518         }
 519         else {
 520                 return true;
 521         }
 522
 523         valueNow += delta;
 524         if (valueNow < valueMin) {
 525                 valueNow = valueMin;
 526         }
 527
 528         if (valueNow > valueMax) {
 529                 valueNow = valueMax;
 530         }
 531         slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
 532
 533         // displaySlider(slider);
 534         slider1.setValue(valueNow, true);
 535
 536         return false;
 537 }
 538
 539 </script>
 540
 541
 542 <!--[if gte IE 5.5000]>
 543 <script type="text/javascript">
 544
 545 function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
 546    {
 547    for(var i=0; i<document.images.length; i++)
 548       {
 549           var img = document.images[i]
 550           var imgName = img.src.toUpperCase()
 551           if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 552              {
 553                  var imgID = (img.id) ? "id='" + img.id + "' " : ""
 554                  var imgClass = (img.className) ? "class='" + img.className + "' " : ""
 555                  var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
 556                  var imgStyle = "display:inline-block;" + img.style.cssText
 557                  if (img.align == "left") imgStyle = "float:left;" + imgStyle
 558                  if (img.align == "right") imgStyle = "float:right;" + imgStyle
 559                  if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
 560                  var strNewHTML = "<span " + imgID + imgClass + imgTitle
 561                  + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
 562              + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
 563                  + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
 564                  img.outerHTML = strNewHTML
 565                  i = i-1
 566              }
 567       }
 568    }
 569
 570 YAHOO.util.Event.addListener(window, "load", correctPNG);
 571
 572 </script>
 573 <![endif]-->
 574
 575 </body>
 576 </html>