[Summary view] [Print] [Text view]

   1  // Copyright (c) 2005-2008 Marty Haught, Thomas Fuchs
   2  //
   3  // script.aculo.us is freely distributable under the terms of an MIT-style license.
   4  // For details, see the script.aculo.us web site: http://script.aculo.us/
   5  
   6  if (!Control) var Control = { };
   7  
   8  // options:
   9  //  axis: 'vertical', or 'horizontal' (default)
  10  //
  11  // callbacks:
  12  //  onChange(value)
  13  //  onSlide(value)
  14  Control.Slider = Class.create({
  15    initialize: function(handle, track, options) {
  16      var slider = this;
  17  
  18      if (Object.isArray(handle)) {
  19        this.handles = handle.collect( function(e) { return $(e) });
  20      } else {
  21        this.handles = [$(handle)];
  22      }
  23  
  24      this.track   = $(track);
  25      this.options = options || { };
  26  
  27      this.axis      = this.options.axis || 'horizontal';
  28      this.increment = this.options.increment || 1;
  29      this.step      = parseInt(this.options.step || '1');
  30      this.range     = this.options.range || $R(0,1);
  31  
  32      this.value     = 0; // assure backwards compat
  33      this.values    = this.handles.map( function() { return 0 });
  34      this.spans     = this.options.spans ? this.options.spans.map(function(s){ return $(s) }) : false;
  35      this.options.startSpan = $(this.options.startSpan || null);
  36      this.options.endSpan   = $(this.options.endSpan || null);
  37  
  38      this.restricted = this.options.restricted || false;
  39  
  40      this.maximum   = this.options.maximum || this.range.end;
  41      this.minimum   = this.options.minimum || this.range.start;
  42  
  43      // Will be used to align the handle onto the track, if necessary
  44      this.alignX = parseInt(this.options.alignX || '0');
  45      this.alignY = parseInt(this.options.alignY || '0');
  46  
  47      this.trackLength = this.maximumOffset() - this.minimumOffset();
  48  
  49      this.handleLength = this.isVertical() ?
  50        (this.handles[0].offsetHeight != 0 ?
  51          this.handles[0].offsetHeight : this.handles[0].style.height.replace(/px$/,"")) :
  52        (this.handles[0].offsetWidth != 0 ? this.handles[0].offsetWidth :
  53          this.handles[0].style.width.replace(/px$/,""));
  54  
  55      this.active   = false;
  56      this.dragging = false;
  57      this.disabled = false;
  58  
  59      if (this.options.disabled) this.setDisabled();
  60  
  61      // Allowed values array
  62      this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false;
  63      if (this.allowedValues) {
  64        this.minimum = this.allowedValues.min();
  65        this.maximum = this.allowedValues.max();
  66      }
  67  
  68      this.eventMouseDown = this.startDrag.bindAsEventListener(this);
  69      this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
  70      this.eventMouseMove = this.update.bindAsEventListener(this);
  71  
  72      // Initialize handles in reverse (make sure first handle is active)
  73      this.handles.each( function(h,i) {
  74        i = slider.handles.length-1-i;
  75        slider.setValue(parseFloat(
  76          (Object.isArray(slider.options.sliderValue) ?
  77            slider.options.sliderValue[i] : slider.options.sliderValue) ||
  78           slider.range.start), i);
  79        h.makePositioned().observe("mousedown", slider.eventMouseDown);
  80      });
  81  
  82      this.track.observe("mousedown", this.eventMouseDown);
  83      document.observe("mouseup", this.eventMouseUp);
  84      document.observe("mousemove", this.eventMouseMove);
  85  
  86      this.initialized = true;
  87    },
  88    dispose: function() {
  89      var slider = this;
  90      Event.stopObserving(this.track, "mousedown", this.eventMouseDown);
  91      Event.stopObserving(document, "mouseup", this.eventMouseUp);
  92      Event.stopObserving(document, "mousemove", this.eventMouseMove);
  93      this.handles.each( function(h) {
  94        Event.stopObserving(h, "mousedown", slider.eventMouseDown);
  95      });
  96    },
  97    setDisabled: function(){
  98      this.disabled = true;
  99    },
 100    setEnabled: function(){
 101      this.disabled = false;
 102    },
 103    getNearestValue: function(value){
 104      if (this.allowedValues){
 105        if (value >= this.allowedValues.max()) return(this.allowedValues.max());
 106        if (value <= this.allowedValues.min()) return(this.allowedValues.min());
 107  
 108        var offset = Math.abs(this.allowedValues[0] - value);
 109        var newValue = this.allowedValues[0];
 110        this.allowedValues.each( function(v) {
 111          var currentOffset = Math.abs(v - value);
 112          if (currentOffset <= offset){
 113            newValue = v;
 114            offset = currentOffset;
 115          }
 116        });
 117        return newValue;
 118      }
 119      if (value > this.range.end) return this.range.end;
 120      if (value < this.range.start) return this.range.start;
 121      return value;
 122    },
 123    setValue: function(sliderValue, handleIdx){
 124      if (!this.active) {
 125        this.activeHandleIdx = handleIdx || 0;
 126        this.activeHandle    = this.handles[this.activeHandleIdx];
 127        this.updateStyles();
 128      }
 129      handleIdx = handleIdx || this.activeHandleIdx || 0;
 130      if (this.initialized && this.restricted) {
 131        if ((handleIdx>0) && (sliderValue<this.values[handleIdx-1]))
 132          sliderValue = this.values[handleIdx-1];
 133        if ((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1]))
 134          sliderValue = this.values[handleIdx+1];
 135      }
 136      sliderValue = this.getNearestValue(sliderValue);
 137      this.values[handleIdx] = sliderValue;
 138      this.value = this.values[0]; // assure backwards compat
 139  
 140      this.handles[handleIdx].style[this.isVertical() ? 'top' : 'left'] =
 141        this.translateToPx(sliderValue);
 142  
 143      this.drawSpans();
 144      if (!this.dragging || !this.event) this.updateFinished();
 145    },
 146    setValueBy: function(delta, handleIdx) {
 147      this.setValue(this.values[handleIdx || this.activeHandleIdx || 0] + delta,
 148        handleIdx || this.activeHandleIdx || 0);
 149    },
 150    translateToPx: function(value) {
 151      return Math.round(
 152        ((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) *
 153        (value - this.range.start)) + "px";
 154    },
 155    translateToValue: function(offset) {
 156      return ((offset/(this.trackLength-this.handleLength) *
 157        (this.range.end-this.range.start)) + this.range.start);
 158    },
 159    getRange: function(range) {
 160      var v = this.values.sortBy(Prototype.K);
 161      range = range || 0;
 162      return $R(v[range],v[range+1]);
 163    },
 164    minimumOffset: function(){
 165      return(this.isVertical() ? this.alignY : this.alignX);
 166    },
 167    maximumOffset: function(){
 168      return(this.isVertical() ?
 169        (this.track.offsetHeight != 0 ? this.track.offsetHeight :
 170          this.track.style.height.replace(/px$/,"")) - this.alignY :
 171        (this.track.offsetWidth != 0 ? this.track.offsetWidth :
 172          this.track.style.width.replace(/px$/,"")) - this.alignX);
 173    },
 174    isVertical:  function(){
 175      return (this.axis == 'vertical');
 176    },
 177    drawSpans: function() {
 178      var slider = this;
 179      if (this.spans)
 180        $R(0, this.spans.length-1).each(function(r) { slider.setSpan(slider.spans[r], slider.getRange(r)) });
 181      if (this.options.startSpan)
 182        this.setSpan(this.options.startSpan,
 183          $R(0, this.values.length>1 ? this.getRange(0).min() : this.value ));
 184      if (this.options.endSpan)
 185        this.setSpan(this.options.endSpan,
 186          $R(this.values.length>1 ? this.getRange(this.spans.length-1).max() : this.value, this.maximum));
 187    },
 188    setSpan: function(span, range) {
 189      if (this.isVertical()) {
 190        span.style.top = this.translateToPx(range.start);
 191        span.style.height = this.translateToPx(range.end - range.start + this.range.start);
 192      } else {
 193        span.style.left = this.translateToPx(range.start);
 194        span.style.width = this.translateToPx(range.end - range.start + this.range.start);
 195      }
 196    },
 197    updateStyles: function() {
 198      this.handles.each( function(h){ Element.removeClassName(h, 'selected') });
 199      Element.addClassName(this.activeHandle, 'selected');
 200    },
 201    startDrag: function(event) {
 202      if (Event.isLeftClick(event)) {
 203        if (!this.disabled){
 204          this.active = true;
 205  
 206          var handle = Event.element(event);
 207          var pointer  = [Event.pointerX(event), Event.pointerY(event)];
 208          var track = handle;
 209          if (track==this.track) {
 210            var offsets  = Position.cumulativeOffset(this.track);
 211            this.event = event;
 212            this.setValue(this.translateToValue(
 213             (this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)
 214            ));
 215            var offsets  = Position.cumulativeOffset(this.activeHandle);
 216            this.offsetX = (pointer[0] - offsets[0]);
 217            this.offsetY = (pointer[1] - offsets[1]);
 218          } else {
 219            // find the handle (prevents issues with Safari)
 220            while((this.handles.indexOf(handle) == -1) && handle.parentNode)
 221              handle = handle.parentNode;
 222  
 223            if (this.handles.indexOf(handle)!=-1) {
 224              this.activeHandle    = handle;
 225              this.activeHandleIdx = this.handles.indexOf(this.activeHandle);
 226              this.updateStyles();
 227  
 228              var offsets  = Position.cumulativeOffset(this.activeHandle);
 229              this.offsetX = (pointer[0] - offsets[0]);
 230              this.offsetY = (pointer[1] - offsets[1]);
 231            }
 232          }
 233        }
 234        Event.stop(event);
 235      }
 236    },
 237    update: function(event) {
 238     if (this.active) {
 239        if (!this.dragging) this.dragging = true;
 240        this.draw(event);
 241        if (Prototype.Browser.WebKit) window.scrollBy(0,0);
 242        Event.stop(event);
 243     }
 244    },
 245    draw: function(event) {
 246      var pointer = [Event.pointerX(event), Event.pointerY(event)];
 247      var offsets = Position.cumulativeOffset(this.track);
 248      pointer[0] -= this.offsetX + offsets[0];
 249      pointer[1] -= this.offsetY + offsets[1];
 250      this.event = event;
 251      this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));
 252      if (this.initialized && this.options.onSlide)
 253        this.options.onSlide(this.values.length>1 ? this.values : this.value, this);
 254    },
 255    endDrag: function(event) {
 256      if (this.active && this.dragging) {
 257        this.finishDrag(event, true);
 258        Event.stop(event);
 259      }
 260      this.active = false;
 261      this.dragging = false;
 262    },
 263    finishDrag: function(event, success) {
 264      this.active = false;
 265      this.dragging = false;
 266      this.updateFinished();
 267    },
 268    updateFinished: function() {
 269      if (this.initialized && this.options.onChange)
 270        this.options.onChange(this.values.length>1 ? this.values : this.value, this);
 271      this.event = null;
 272    }
 273  });