[Summary view] [Print] [Text view]

   1  /*----------------------------------------------------------------------------\
   2  |                                Slider 1.02                                  |
   3  |-----------------------------------------------------------------------------|
   4  |                         Created by Erik Arvidsson                           |
   5  |                  (http://webfx.eae.net/contact.html#erik)                   |
   6  |                      For WebFX (http://webfx.eae.net/)                      |
   7  |-----------------------------------------------------------------------------|
   8  | A  slider  control that  degrades  to an  input control  for non  supported |
   9  | browsers.                                                                   |
  10  |-----------------------------------------------------------------------------|
  11  |                Copyright (c) 2002, 2003, 2006 Erik Arvidsson                |
  12  |-----------------------------------------------------------------------------|
  13  | Licensed under the Apache License, Version 2.0 (the "License"); you may not |
  14  | use this file except in compliance with the License.  You may obtain a copy |
  15  | of the License at http://www.apache.org/licenses/LICENSE-2.0                |
  16  | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
  17  | Unless  required  by  applicable law or  agreed  to  in  writing,  software |
  18  | distributed under the License is distributed on an  "AS IS" BASIS,  WITHOUT |
  19  | WARRANTIES OR  CONDITIONS OF ANY KIND,  either express or implied.  See the |
  20  | License  for the  specific language  governing permissions  and limitations |
  21  | under the License.                                                          |
  22  |-----------------------------------------------------------------------------|
  23  | Dependencies: timer.js - an OO abstraction of timers                        |
  24  |               range.js - provides the data model for the slider             |
  25  |               winclassic.css or any other css file describing the look      |
  26  |-----------------------------------------------------------------------------|
  27  | 2002-10-14 | Original version released                                      |
  28  | 2003-03-27 | Added a test in the constructor for missing oElement arg       |
  29  | 2003-11-27 | Only use mousewheel when focused                               |
  30  | 2006-05-28 | Changed license to Apache Software License 2.0.                |
  31  |-----------------------------------------------------------------------------|
  32  | Created 2002-10-14 | All changes are in the log above. | Updated 2006-05-28 |
  33  \----------------------------------------------------------------------------*/
  34  
  35  Slider.isSupported = typeof document.createElement != "undefined" &&
  36      typeof document.documentElement != "undefined" &&
  37      typeof document.documentElement.offsetWidth == "number";
  38  
  39  
  40  function Slider(oElement, oInput, sOrientation) {
  41      if (!oElement) return;
  42      this._orientation = sOrientation || "horizontal";
  43      this._range = new Range();
  44      this._range.setExtent(0);
  45      this._blockIncrement = 10;
  46      this._unitIncrement = 1;
  47      this._timer = new Timer(100);
  48  
  49  
  50      if (Slider.isSupported && oElement) {
  51  
  52          this.document = oElement.ownerDocument || oElement.document;
  53  
  54          this.element = oElement;
  55          this.element.slider = this;
  56          this.element.unselectable = "on";
  57  
  58          // add class name tag to class name
  59          this.element.className = this._orientation + " " + this.classNameTag + " " + this.element.className;
  60  
  61          // create line
  62          this.line = this.document.createElement("DIV");
  63          this.line.className = "line";
  64          this.line.unselectable = "on";
  65          this.line.appendChild(this.document.createElement("DIV"));
  66          this.element.appendChild(this.line);
  67  
  68          // create handle
  69          this.handle = this.document.createElement("DIV");
  70          this.handle.className = "handle";
  71          this.handle.unselectable = "on";
  72          this.handle.appendChild(this.document.createElement("DIV"));
  73          this.handle.firstChild.appendChild(
  74              this.document.createTextNode(String.fromCharCode(160)));
  75          this.element.appendChild(this.handle);
  76      }
  77  
  78      this.input = oInput;
  79  
  80      // events
  81      var oThis = this;
  82      this._range.onchange = function () {
  83          oThis.recalculate();
  84          if (typeof oThis.onchange == "function")
  85              oThis.onchange();
  86      };
  87  
  88      if (Slider.isSupported && oElement) {
  89          this.element.onfocus        = Slider.eventHandlers.onfocus;
  90          this.element.onblur            = Slider.eventHandlers.onblur;
  91          this.element.onmousedown    = Slider.eventHandlers.onmousedown;
  92          this.element.onmouseover    = Slider.eventHandlers.onmouseover;
  93          this.element.onmouseout        = Slider.eventHandlers.onmouseout;
  94          this.element.onkeydown        = Slider.eventHandlers.onkeydown;
  95          this.element.onkeypress        = Slider.eventHandlers.onkeypress;
  96          this.element.onmousewheel    = Slider.eventHandlers.onmousewheel;
  97          this.handle.onselectstart    =
  98          this.element.onselectstart    = function () { return false; };
  99  
 100          this._timer.ontimer = function () {
 101              oThis.ontimer();
 102          };
 103  
 104          // extra recalculate for ie
 105          window.setTimeout(function() {
 106              oThis.recalculate();
 107          }, 1);
 108      }
 109      else {
 110          this.input.onchange = function (e) {
 111              oThis.setValue(oThis.input.value);
 112          };
 113      }
 114  }
 115  
 116  Slider.eventHandlers = {
 117  
 118      // helpers to make events a bit easier
 119      getEvent:    function (e, el) {
 120          if (!e) {
 121              if (el)
 122                  e = el.document.parentWindow.event;
 123              else
 124                  e = window.event;
 125          }
 126          if (!e.srcElement) {
 127              var el = e.target;
 128              while (el != null && el.nodeType != 1)
 129                  el = el.parentNode;
 130              e.srcElement = el;
 131          }
 132          if (typeof e.offsetX == "undefined") {
 133              e.offsetX = e.layerX;
 134              e.offsetY = e.layerY;
 135          }
 136  
 137          return e;
 138      },
 139  
 140      getDocument:    function (e) {
 141          if (e.target)
 142              return e.target.ownerDocument;
 143          return e.srcElement.document;
 144      },
 145  
 146      getSlider:    function (e) {
 147          var el = e.target || e.srcElement;
 148          while (el != null && el.slider == null)    {
 149              el = el.parentNode;
 150          }
 151          if (el)
 152              return el.slider;
 153          return null;
 154      },
 155  
 156      getLine:    function (e) {
 157          var el = e.target || e.srcElement;
 158          while (el != null && el.className != "line")    {
 159              el = el.parentNode;
 160          }
 161          return el;
 162      },
 163  
 164      getHandle:    function (e) {
 165          var el = e.target || e.srcElement;
 166          var re = /handle/;
 167          while (el != null && !re.test(el.className))    {
 168              el = el.parentNode;
 169          }
 170          return el;
 171      },
 172      // end helpers
 173  
 174      onfocus:    function (e) {
 175          var s = this.slider;
 176          s._focused = true;
 177          s.handle.className = "handle hover";
 178      },
 179  
 180      onblur:    function (e) {
 181          var s = this.slider
 182          s._focused = false;
 183          s.handle.className = "handle";
 184      },
 185  
 186      onmouseover:    function (e) {
 187          e = Slider.eventHandlers.getEvent(e, this);
 188          var s = this.slider;
 189          if (e.srcElement == s.handle)
 190              s.handle.className = "handle hover";
 191      },
 192  
 193      onmouseout:    function (e) {
 194          e = Slider.eventHandlers.getEvent(e, this);
 195          var s = this.slider;
 196          if (e.srcElement == s.handle && !s._focused)
 197              s.handle.className = "handle";
 198      },
 199  
 200      onmousedown:    function (e) {
 201          e = Slider.eventHandlers.getEvent(e, this);
 202          var s = this.slider;
 203          if (s.element.focus)
 204              s.element.focus();
 205  
 206          Slider._currentInstance = s;
 207          var doc = s.document;
 208  
 209          if (doc.addEventListener) {
 210              doc.addEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
 211              doc.addEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
 212          }
 213          else if (doc.attachEvent) {
 214              doc.attachEvent("onmousemove", Slider.eventHandlers.onmousemove);
 215              doc.attachEvent("onmouseup", Slider.eventHandlers.onmouseup);
 216              doc.attachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
 217              s.element.setCapture();
 218          }
 219  
 220          if (Slider.eventHandlers.getHandle(e)) {    // start drag
 221              Slider._sliderDragData = {
 222                  screenX:    e.screenX,
 223                  screenY:    e.screenY,
 224                  dx:            e.screenX - s.handle.offsetLeft,
 225                  dy:            e.screenY - s.handle.offsetTop,
 226                  startValue:    s.getValue(),
 227                  slider:        s
 228              };
 229          }
 230          else {
 231              var lineEl = Slider.eventHandlers.getLine(e);
 232              s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
 233              s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
 234              s._increasing = null;
 235              s.ontimer();
 236          }
 237      },
 238  
 239      onmousemove:    function (e) {
 240          e = Slider.eventHandlers.getEvent(e, this);
 241  
 242          if (Slider._sliderDragData) {    // drag
 243              var s = Slider._sliderDragData.slider;
 244  
 245              var boundSize = s.getMaximum() - s.getMinimum();
 246              var size, pos, reset;
 247  
 248              if (s._orientation == "horizontal") {
 249                  size = s.element.offsetWidth - s.handle.offsetWidth;
 250                  pos = e.screenX - Slider._sliderDragData.dx;
 251                  reset = Math.abs(e.screenY - Slider._sliderDragData.screenY) > 100;
 252              }
 253              else {
 254                  size = s.element.offsetHeight - s.handle.offsetHeight;
 255                  pos = s.element.offsetHeight - s.handle.offsetHeight -
 256                      (e.screenY - Slider._sliderDragData.dy);
 257                  reset = Math.abs(e.screenX - Slider._sliderDragData.screenX) > 100;
 258              }
 259              s.setValue(reset ? Slider._sliderDragData.startValue :
 260                          s.getMinimum() + boundSize * pos / size);
 261              return false;
 262          }
 263          else {
 264              var s = Slider._currentInstance;
 265              if (s != null) {
 266                  var lineEl = Slider.eventHandlers.getLine(e);
 267                  s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
 268                  s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
 269              }
 270          }
 271  
 272      },
 273  
 274      onmouseup:    function (e) {
 275          e = Slider.eventHandlers.getEvent(e, this);
 276          var s = Slider._currentInstance;
 277          var doc = s.document;
 278          if (doc.removeEventListener) {
 279              doc.removeEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
 280              doc.removeEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
 281          }
 282          else if (doc.detachEvent) {
 283              doc.detachEvent("onmousemove", Slider.eventHandlers.onmousemove);
 284              doc.detachEvent("onmouseup", Slider.eventHandlers.onmouseup);
 285              doc.detachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
 286              s.element.releaseCapture();
 287          }
 288  
 289          if (Slider._sliderDragData) {    // end drag
 290              Slider._sliderDragData = null;
 291          }
 292          else {
 293              s._timer.stop();
 294              s._increasing = null;
 295          }
 296          Slider._currentInstance = null;
 297      },
 298  
 299      onkeydown:    function (e) {
 300          e = Slider.eventHandlers.getEvent(e, this);
 301          //var s = Slider.eventHandlers.getSlider(e);
 302          var s = this.slider;
 303          var kc = e.keyCode;
 304          switch (kc) {
 305              case 33:    // page up
 306                  s.setValue(s.getValue() + s.getBlockIncrement());
 307                  break;
 308              case 34:    // page down
 309                  s.setValue(s.getValue() - s.getBlockIncrement());
 310                  break;
 311              case 35:    // end
 312                  s.setValue(s.getOrientation() == "horizontal" ?
 313                      s.getMaximum() :
 314                      s.getMinimum());
 315                  break;
 316              case 36:    // home
 317                  s.setValue(s.getOrientation() == "horizontal" ?
 318                      s.getMinimum() :
 319                      s.getMaximum());
 320                  break;
 321              case 38:    // up
 322              case 39:    // right
 323                  s.setValue(s.getValue() + s.getUnitIncrement());
 324                  break;
 325  
 326              case 37:    // left
 327              case 40:    // down
 328                  s.setValue(s.getValue() - s.getUnitIncrement());
 329                  break;
 330          }
 331  
 332          if (kc >= 33 && kc <= 40) {
 333              return false;
 334          }
 335      },
 336  
 337      onkeypress:    function (e) {
 338          e = Slider.eventHandlers.getEvent(e, this);
 339          var kc = e.keyCode;
 340          if (kc >= 33 && kc <= 40) {
 341              return false;
 342          }
 343      },
 344  
 345      onmousewheel:    function (e) {
 346          e = Slider.eventHandlers.getEvent(e, this);
 347          var s = this.slider;
 348          if (s._focused) {
 349              s.setValue(s.getValue() + e.wheelDelta / 120 * s.getUnitIncrement());
 350              // windows inverts this on horizontal sliders. That does not
 351              // make sense to me
 352              return false;
 353          }
 354      }
 355  };
 356  
 357  
 358  
 359  Slider.prototype.classNameTag = "dynamic-slider-control",
 360  
 361  Slider.prototype.setValue = function (v) {
 362      this._range.setValue(v);
 363      this.input.value = this.getValue();
 364  };
 365  
 366  Slider.prototype.getValue = function () {
 367      return this._range.getValue();
 368  };
 369  
 370  Slider.prototype.setMinimum = function (v) {
 371      this._range.setMinimum(v);
 372      this.input.value = this.getValue();
 373  };
 374  
 375  Slider.prototype.getMinimum = function () {
 376      return this._range.getMinimum();
 377  };
 378  
 379  Slider.prototype.setMaximum = function (v) {
 380      this._range.setMaximum(v);
 381      this.input.value = this.getValue();
 382  };
 383  
 384  Slider.prototype.getMaximum = function () {
 385      return this._range.getMaximum();
 386  };
 387  
 388  Slider.prototype.setUnitIncrement = function (v) {
 389      this._unitIncrement = v;
 390  };
 391  
 392  Slider.prototype.getUnitIncrement = function () {
 393      return this._unitIncrement;
 394  };
 395  
 396  Slider.prototype.setBlockIncrement = function (v) {
 397      this._blockIncrement = v;
 398  };
 399  
 400  Slider.prototype.getBlockIncrement = function () {
 401      return this._blockIncrement;
 402  };
 403  
 404  Slider.prototype.getOrientation = function () {
 405      return this._orientation;
 406  };
 407  
 408  Slider.prototype.setOrientation = function (sOrientation) {
 409      if (sOrientation != this._orientation) {
 410          if (Slider.isSupported && this.element) {
 411              // add class name tag to class name
 412              this.element.className = this.element.className.replace(this._orientation,
 413                                      sOrientation);
 414          }
 415          this._orientation = sOrientation;
 416          this.recalculate();
 417  
 418      }
 419  };
 420  
 421  Slider.prototype.recalculate = function() {
 422      if (!Slider.isSupported || !this.element) return;
 423  
 424      var w = this.element.offsetWidth;
 425      var h = this.element.offsetHeight;
 426      var hw = this.handle.offsetWidth;
 427      var hh = this.handle.offsetHeight;
 428      var lw = this.line.offsetWidth;
 429      var lh = this.line.offsetHeight;
 430  
 431      // this assumes a border-box layout
 432  
 433      if (this._orientation == "horizontal") {
 434          this.handle.style.left = (w - hw) * (this.getValue() - this.getMinimum()) /
 435              (this.getMaximum() - this.getMinimum()) + "px";
 436          this.handle.style.top = (h - hh) / 2 + "px";
 437  
 438          this.line.style.top = (h - lh) / 2 + "px";
 439          this.line.style.left = hw / 2 + "px";
 440          //this.line.style.right = hw / 2 + "px";
 441          this.line.style.width = Math.max(0, w - hw - 2)+ "px";
 442          this.line.firstChild.style.width = Math.max(0, w - hw - 4)+ "px";
 443      }
 444      else {
 445          this.handle.style.left = (w - hw) / 2 + "px";
 446          this.handle.style.top = h - hh - (h - hh) * (this.getValue() - this.getMinimum()) /
 447              (this.getMaximum() - this.getMinimum()) + "px";
 448  
 449          this.line.style.left = (w - lw) / 2 + "px";
 450          this.line.style.top = hh / 2 + "px";
 451          this.line.style.height = Math.max(0, h - hh - 2) + "px";    //hard coded border width
 452          //this.line.style.bottom = hh / 2 + "px";
 453          this.line.firstChild.style.height = Math.max(0, h - hh - 4) + "px";    //hard coded border width
 454      }
 455  };
 456  
 457  Slider.prototype.ontimer = function () {
 458      var hw = this.handle.offsetWidth;
 459      var hh = this.handle.offsetHeight;
 460      var hl = this.handle.offsetLeft;
 461      var ht = this.handle.offsetTop;
 462  
 463      if (this._orientation == "horizontal") {
 464          if (this._mouseX > hl + hw &&
 465              (this._increasing == null || this._increasing)) {
 466              this.setValue(this.getValue() + this.getBlockIncrement());
 467              this._increasing = true;
 468          }
 469          else if (this._mouseX < hl &&
 470              (this._increasing == null || !this._increasing)) {
 471              this.setValue(this.getValue() - this.getBlockIncrement());
 472              this._increasing = false;
 473          }
 474      }
 475      else {
 476          if (this._mouseY > ht + hh &&
 477              (this._increasing == null || !this._increasing)) {
 478              this.setValue(this.getValue() - this.getBlockIncrement());
 479              this._increasing = false;
 480          }
 481          else if (this._mouseY < ht &&
 482              (this._increasing == null || this._increasing)) {
 483              this.setValue(this.getValue() + this.getBlockIncrement());
 484              this._increasing = true;
 485          }
 486      }
 487  
 488      this._timer.start();
 489  };