Home | History | Annotate | Download | only in paper-slider 
      1 
      2 
      3   Polymer('paper-slider', {
      4     
      5     /**
      6      * Fired when the slider's value changes.
      7      *
      8      * @event change
      9      */
     10 
     11     /**
     12      * Fired when the slider's value changes due to manual interaction.
     13      *
     14      * Changes to the slider's value due to changes in an underlying
     15      * bound variable will not trigger this event.
     16      *
     17      * @event manual-change
     18      */
     19      
     20     /**
     21      * If true, the slider thumb snaps to tick marks evenly spaced based
     22      * on the `step` property value.
     23      *
     24      * @attribute snaps
     25      * @type boolean
     26      * @default false
     27      */
     28     snaps: false,
     29     
     30     /**
     31      * If true, a pin with numeric value label is shown when the slider thumb 
     32      * is pressed.  Use for settings for which users need to know the exact 
     33      * value of the setting.
     34      *
     35      * @attribute pin
     36      * @type boolean
     37      * @default false
     38      */
     39     pin: false,
     40     
     41     /**
     42      * If true, this slider is disabled.  A disabled slider cannot be tapped
     43      * or dragged to change the slider value.
     44      *
     45      * @attribute disabled
     46      * @type boolean
     47      * @default false
     48      */
     49     disabled: false,
     50     
     51     /**
     52      * The number that represents the current secondary progress.
     53      *
     54      * @attribute secondaryProgress
     55      * @type number
     56      * @default 0
     57      */
     58     secondaryProgress: 0,
     59     
     60     /**
     61      * If true, an input is shown and user can use it to set the slider value.
     62      *
     63      * @attribute editable
     64      * @type boolean
     65      * @default false
     66      */
     67     editable: false,
     68     
     69     /**
     70      * The immediate value of the slider.  This value is updated while the user
     71      * is dragging the slider.
     72      *
     73      * @attribute immediateValue
     74      * @type number
     75      * @default 0
     76      */
     77     
     78     observe: {
     79       'min max step snaps': 'update'
     80     },
     81     
     82     ready: function() {
     83       this.update();
     84     },
     85     
     86     update: function() {
     87       this.positionKnob(this.calcRatio(this.value));
     88       this.updateMarkers();
     89     },
     90     
     91     valueChanged: function() {
     92       this.update();
     93       this.fire('change');
     94     },
     95     
     96     expandKnob: function() {
     97       this.$.sliderKnob.classList.add('expand');
     98     },
     99     
    100     resetKnob: function() {
    101       this.expandJob && this.expandJob.stop();
    102       this.$.sliderKnob.classList.remove('expand');
    103     },
    104     
    105     positionKnob: function(ratio) {
    106       this._ratio = ratio;
    107       this.immediateValue = this.calcStep(this.calcKnobPosition()) || 0;
    108       if (this.snaps) {
    109         this._ratio = this.calcRatio(this.immediateValue);
    110       }
    111       this.$.sliderKnob.style.left = this._ratio * 100 + '%';
    112     },
    113     
    114     immediateValueChanged: function() {
    115       this.$.sliderKnob.classList.toggle('ring', this.immediateValue <= this.min);
    116     },
    117     
    118     inputChange: function() {
    119       this.value = this.$.input.value;
    120       this.fire('manual-change');
    121     },
    122     
    123     calcKnobPosition: function() {
    124       return (this.max - this.min) * this._ratio + this.min;
    125     },
    126     
    127     measureWidth: function() {
    128       this._w = this.$.sliderBar.offsetWidth;
    129     },
    130     
    131     trackStart: function(e) {
    132       this.measureWidth();
    133       this._x = this._ratio * this._w;
    134       this._startx = this._x || 0;
    135       this._minx = - this._startx;
    136       this._maxx = this._w - this._startx;
    137       this.$.sliderKnob.classList.add('dragging');
    138       e.preventTap();
    139     },
    140 
    141     trackx: function(e) {
    142       var x = Math.min(this._maxx, Math.max(this._minx, e.dx));
    143       this._x = this._startx + x;
    144       this._ratio = this._x / this._w;
    145       this.immediateValue = this.calcStep(this.calcKnobPosition()) || 0;
    146       var s =  this.$.sliderKnob.style;
    147       s.transform = s.webkitTransform = 'translate3d(' + (this.snaps ? 
    148           (this.calcRatio(this.immediateValue) * this._w) - this._startx : x) + 'px, 0, 0)';
    149     },
    150     
    151     trackEnd: function() {
    152       var s =  this.$.sliderKnob.style;
    153       s.transform = s.webkitTransform = '';
    154       this.$.sliderKnob.classList.remove('dragging');
    155       this.resetKnob();
    156       this.value = this.immediateValue;
    157       this.fire('manual-change');
    158     },
    159     
    160     bardown: function(e) {
    161       this.measureWidth();
    162       this.$.sliderKnob.classList.add('transiting');
    163       var rect = this.$.sliderBar.getBoundingClientRect();
    164       this.positionKnob((e.x - rect.left) / this._w);
    165       this.value = this.calcStep(this.calcKnobPosition());
    166       this.expandJob = this.job(this.expandJob, this.expandKnob, 60);
    167       this.fire('manual-change');
    168     },
    169     
    170     knobTransitionEnd: function() {
    171       this.$.sliderKnob.classList.remove('transiting');
    172     },
    173     
    174     updateMarkers: function() {
    175       this.markers = [], l = (this.max - this.min) / this.step;
    176       for (var i = 0; i < l; i++) {
    177         this.markers.push('');
    178       }
    179     },
    180     
    181     increment: function() {
    182       this.value = this.clampValue(this.value + this.step);
    183     },
    184     
    185     decrement: function() {
    186       this.value = this.clampValue(this.value - this.step);
    187     },
    188     
    189     keydown: function(e) {
    190       if (this.disabled) {
    191         return;
    192       }
    193       var c = e.keyCode;
    194       if (c === 37) {
    195         this.decrement();
    196         this.fire('manual-change');
    197       } else if (c === 39) {
    198         this.increment();
    199         this.fire('manual-change');
    200       }
    201     }
    202 
    203   });
    204 
    205