[Summary view] [Print] [Text view]

   1  /*
   2  ---
   3  
   4  script: Slider.js
   5  
   6  name: Slider
   7  
   8  description: Class for creating horizontal and vertical slider controls.
   9  
  10  license: MIT-style license
  11  
  12  authors:
  13    - Valerio Proietti
  14  
  15  requires:
  16    - Core/Element.Dimensions
  17    - /Class.Binds
  18    - /Drag
  19    - /Element.Measure
  20  
  21  provides: [Slider]
  22  
  23  ...
  24  */
  25  
  26  var Slider = new Class({
  27  
  28      Implements: [Events, Options],
  29  
  30      Binds: ['clickedElement', 'draggedKnob', 'scrolledElement'],
  31  
  32      options: {/*
  33          onTick: $empty(intPosition),
  34          onChange: $empty(intStep),
  35          onComplete: $empty(strStep),*/
  36          onTick: function(position){
  37              if (this.options.snap) position = this.toPosition(this.step);
  38              this.knob.setStyle(this.property, position);
  39          },
  40          initialStep: 0,
  41          snap: false,
  42          offset: 0,
  43          range: false,
  44          wheel: false,
  45          steps: 100,
  46          mode: 'horizontal'
  47      },
  48  
  49      initialize: function(element, knob, options){
  50          this.setOptions(options);
  51          this.element = document.id(element);
  52          this.knob = document.id(knob);
  53          this.previousChange = this.previousEnd = this.step = -1;
  54          var offset, limit = {}, modifiers = {'x': false, 'y': false};
  55          switch (this.options.mode){
  56              case 'vertical':
  57                  this.axis = 'y';
  58                  this.property = 'top';
  59                  offset = 'offsetHeight';
  60                  break;
  61              case 'horizontal':
  62                  this.axis = 'x';
  63                  this.property = 'left';
  64                  offset = 'offsetWidth';
  65          }
  66          
  67          this.full = this.element.measure(function(){ 
  68              this.half = this.knob[offset] / 2; 
  69              return this.element[offset] - this.knob[offset] + (this.options.offset * 2); 
  70          }.bind(this));
  71          
  72          this.setRange(this.options.range);
  73  
  74          this.knob.setStyle('position', 'relative').setStyle(this.property, - this.options.offset);
  75          modifiers[this.axis] = this.property;
  76          limit[this.axis] = [- this.options.offset, this.full - this.options.offset];
  77  
  78          var dragOptions = {
  79              snap: 0,
  80              limit: limit,
  81              modifiers: modifiers,
  82              onDrag: this.draggedKnob,
  83              onStart: this.draggedKnob,
  84              onBeforeStart: (function(){
  85                  this.isDragging = true;
  86              }).bind(this),
  87              onCancel: function() {
  88                  this.isDragging = false;
  89              }.bind(this),
  90              onComplete: function(){
  91                  this.isDragging = false;
  92                  this.draggedKnob();
  93                  this.end();
  94              }.bind(this)
  95          };
  96          if (this.options.snap){
  97              dragOptions.grid = Math.ceil(this.stepWidth);
  98              dragOptions.limit[this.axis][1] = this.full;
  99          }
 100  
 101          this.drag = new Drag(this.knob, dragOptions);
 102          this.attach();
 103          if (this.options.initialStep) this.set(this.options.initialStep)
 104      },
 105  
 106      attach: function(){
 107          this.element.addEvent('mousedown', this.clickedElement);
 108          if (this.options.wheel) this.element.addEvent('mousewheel', this.scrolledElement);
 109          this.drag.attach();
 110          return this;
 111      },
 112  
 113      detach: function(){
 114          this.element.removeEvent('mousedown', this.clickedElement);
 115          this.element.removeEvent('mousewheel', this.scrolledElement);
 116          this.drag.detach();
 117          return this;
 118      },
 119  
 120      set: function(step){
 121          if (!((this.range > 0) ^ (step < this.min))) step = this.min;
 122          if (!((this.range > 0) ^ (step > this.max))) step = this.max;
 123  
 124          this.step = Math.round(step);
 125          this.checkStep();
 126          this.fireEvent('tick', this.toPosition(this.step));
 127          this.end();
 128          return this;
 129      },
 130      
 131      setRange: function(range, pos){
 132          this.min = $pick(range[0], 0);
 133          this.max = $pick(range[1], this.options.steps);
 134          this.range = this.max - this.min;
 135          this.steps = this.options.steps || this.full;
 136          this.stepSize = Math.abs(this.range) / this.steps;
 137          this.stepWidth = this.stepSize * this.full / Math.abs(this.range);
 138          this.set($pick(pos, this.step).floor(this.min).max(this.max));
 139          return this;
 140      },
 141  
 142      clickedElement: function(event){
 143          if (this.isDragging || event.target == this.knob) return;
 144  
 145          var dir = this.range < 0 ? -1 : 1;
 146          var position = event.page[this.axis] - this.element.getPosition()[this.axis] - this.half;
 147          position = position.limit(-this.options.offset, this.full -this.options.offset);
 148  
 149          this.step = Math.round(this.min + dir * this.toStep(position));
 150          this.checkStep();
 151          this.fireEvent('tick', position);
 152          this.end();
 153      },
 154  
 155      scrolledElement: function(event){
 156          var mode = (this.options.mode == 'horizontal') ? (event.wheel < 0) : (event.wheel > 0);
 157          this.set(mode ? this.step - this.stepSize : this.step + this.stepSize);
 158          event.stop();
 159      },
 160  
 161      draggedKnob: function(){
 162          var dir = this.range < 0 ? -1 : 1;
 163          var position = this.drag.value.now[this.axis];
 164          position = position.limit(-this.options.offset, this.full -this.options.offset);
 165          this.step = Math.round(this.min + dir * this.toStep(position));
 166          this.checkStep();
 167      },
 168  
 169      checkStep: function(){
 170          if (this.previousChange != this.step){
 171              this.previousChange = this.step;
 172              this.fireEvent('change', this.step);
 173          }
 174      },
 175  
 176      end: function(){
 177          if (this.previousEnd !== this.step){
 178              this.previousEnd = this.step;
 179              this.fireEvent('complete', this.step + '');
 180          }
 181      },
 182  
 183      toStep: function(position){
 184          var step = (position + this.options.offset) * this.stepSize / this.full * this.steps;
 185          return this.options.steps ? Math.round(step -= step % this.stepSize) : step;
 186      },
 187  
 188      toPosition: function(step){
 189          return (this.full * Math.abs(this.min - step)) / (this.steps * this.stepSize) - this.options.offset;
 190      }
 191  
 192  });