| OLD | NEW |
| 1 | 1 |
| 2 /** | |
| 3 * Fired when the slider's value changes. | |
| 4 * | |
| 5 * @event value-change | |
| 6 */ | |
| 7 | |
| 8 /** | |
| 9 * Fired when the slider's immediateValue changes. | |
| 10 * | |
| 11 * @event immediate-value-change | |
| 12 */ | |
| 13 | |
| 14 /** | |
| 15 * Fired when the slider's value changes due to user interaction. | |
| 16 * | |
| 17 * Changes to the slider's value due to changes in an underlying | |
| 18 * bound variable will not trigger this event. | |
| 19 * | |
| 20 * @event change | |
| 21 */ | |
| 22 | 2 |
| 23 Polymer({ | 3 Polymer({ |
| 24 is: 'paper-slider', | 4 is: 'paper-slider', |
| 25 | 5 |
| 26 behaviors: [ | 6 behaviors: [ |
| 27 Polymer.IronRangeBehavior, | |
| 28 Polymer.IronA11yKeysBehavior, | 7 Polymer.IronA11yKeysBehavior, |
| 8 Polymer.PaperInkyFocusBehavior, |
| 29 Polymer.IronFormElementBehavior, | 9 Polymer.IronFormElementBehavior, |
| 30 Polymer.PaperInkyFocusBehavior | 10 Polymer.IronRangeBehavior |
| 31 ], | 11 ], |
| 32 | 12 |
| 33 properties: { | 13 properties: { |
| 14 |
| 34 /** | 15 /** |
| 35 * If true, the slider thumb snaps to tick marks evenly spaced based | 16 * If true, the slider thumb snaps to tick marks evenly spaced based |
| 36 * on the `step` property value. | 17 * on the `step` property value. |
| 37 */ | 18 */ |
| 38 snaps: { | 19 snaps: { |
| 39 type: Boolean, | 20 type: Boolean, |
| 40 value: false, | 21 value: false, |
| 41 notify: true | 22 notify: true |
| 42 }, | 23 }, |
| 43 | 24 |
| (...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 134 tabindex: 0 | 115 tabindex: 0 |
| 135 }, | 116 }, |
| 136 | 117 |
| 137 keyBindings: { | 118 keyBindings: { |
| 138 'left down pagedown home': '_decrementKey', | 119 'left down pagedown home': '_decrementKey', |
| 139 'right up pageup end': '_incrementKey' | 120 'right up pageup end': '_incrementKey' |
| 140 }, | 121 }, |
| 141 | 122 |
| 142 ready: function() { | 123 ready: function() { |
| 143 // issue polymer/polymer#1305 | 124 // issue polymer/polymer#1305 |
| 144 | |
| 145 this.async(function() { | 125 this.async(function() { |
| 146 this._updateKnob(this.value); | 126 this._updateKnob(this.value); |
| 147 this._updateInputValue(); | 127 this._updateInputValue(); |
| 148 }, 1); | 128 }, 1); |
| 149 }, | 129 }, |
| 150 | 130 |
| 151 /** | 131 /** |
| 152 * Increases value by `step` but not above `max`. | 132 * Increases value by `step` but not above `max`. |
| 153 * @method increment | 133 * @method increment |
| 154 */ | 134 */ |
| (...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 194 this.secondaryProgress = this._clampValue(this.secondaryProgress); | 174 this.secondaryProgress = this._clampValue(this.secondaryProgress); |
| 195 }, | 175 }, |
| 196 | 176 |
| 197 _updateInputValue: function() { | 177 _updateInputValue: function() { |
| 198 if (this.editable) { | 178 if (this.editable) { |
| 199 this.$$('#input').value = this.immediateValue.toString(); | 179 this.$$('#input').value = this.immediateValue.toString(); |
| 200 } | 180 } |
| 201 }, | 181 }, |
| 202 | 182 |
| 203 _expandKnob: function() { | 183 _expandKnob: function() { |
| 204 this.$.ink.holdDown = false; | |
| 205 this._setExpand(true); | 184 this._setExpand(true); |
| 206 }, | 185 }, |
| 207 | 186 |
| 208 _resetKnob: function() { | 187 _resetKnob: function() { |
| 209 this.cancelDebouncer('expandKnob'); | 188 this.cancelDebouncer('expandKnob'); |
| 210 this._setExpand(false); | 189 this._setExpand(false); |
| 211 this.$.ink.hidden = true; | |
| 212 }, | 190 }, |
| 213 | 191 |
| 214 _positionKnob: function(ratio) { | 192 _positionKnob: function(ratio) { |
| 215 this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio))); | 193 this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio))); |
| 216 this._setRatio(this._calcRatio(this.immediateValue)); | 194 this._setRatio(this._calcRatio(this.immediateValue)); |
| 217 | 195 |
| 218 this.$.sliderKnob.style.left = (this.ratio * 100) + '%'; | 196 this.$.sliderKnob.style.left = (this.ratio * 100) + '%'; |
| 219 }, | 197 }, |
| 220 | 198 |
| 221 _inputChange: function() { | 199 _inputChange: function() { |
| (...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 285 this._expandKnob(); | 263 this._expandKnob(); |
| 286 | 264 |
| 287 // cancel selection | 265 // cancel selection |
| 288 event.detail.sourceEvent.preventDefault(); | 266 event.detail.sourceEvent.preventDefault(); |
| 289 | 267 |
| 290 // set the focus manually because we will called prevent default | 268 // set the focus manually because we will called prevent default |
| 291 this.focus(); | 269 this.focus(); |
| 292 }, | 270 }, |
| 293 | 271 |
| 294 _bardown: function(event) { | 272 _bardown: function(event) { |
| 295 this.$.ink.hidden = true; | |
| 296 | |
| 297 event.preventDefault(); | |
| 298 | |
| 299 this._w = this.$.sliderBar.offsetWidth; | 273 this._w = this.$.sliderBar.offsetWidth; |
| 300 var rect = this.$.sliderBar.getBoundingClientRect(); | 274 var rect = this.$.sliderBar.getBoundingClientRect(); |
| 301 var ratio = (event.detail.x - rect.left) / this._w; | 275 var ratio = (event.detail.x - rect.left) / this._w; |
| 302 var prevRatio = this.ratio; | 276 var prevRatio = this.ratio; |
| 303 | 277 |
| 304 this._setTransiting(true); | 278 this._setTransiting(true); |
| 305 | 279 |
| 306 this._positionKnob(ratio); | 280 this._positionKnob(ratio); |
| 307 | 281 |
| 308 this.debounce('expandKnob', this._expandKnob, 60); | 282 this.debounce('expandKnob', this._expandKnob, 60); |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 366 }, | 340 }, |
| 367 | 341 |
| 368 _decrementKey: function(event) { | 342 _decrementKey: function(event) { |
| 369 if (event.detail.key === 'home') { | 343 if (event.detail.key === 'home') { |
| 370 this.value = this.min; | 344 this.value = this.min; |
| 371 } else { | 345 } else { |
| 372 this.decrement(); | 346 this.decrement(); |
| 373 } | 347 } |
| 374 this.fire('change'); | 348 this.fire('change'); |
| 375 } | 349 } |
| 376 }) | 350 }); |
| 351 |
| 352 /** |
| 353 * Fired when the slider's value changes. |
| 354 * |
| 355 * @event value-change |
| 356 */ |
| 357 |
| 358 /** |
| 359 * Fired when the slider's immediateValue changes. |
| 360 * |
| 361 * @event immediate-value-change |
| 362 */ |
| 363 |
| 364 /** |
| 365 * Fired when the slider's value changes due to user interaction. |
| 366 * |
| 367 * Changes to the slider's value due to changes in an underlying |
| 368 * bound variable will not trigger this event. |
| 369 * |
| 370 * @event change |
| 371 */ |
| 372 |
| OLD | NEW |