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 |