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