OLD | NEW |
1 | 1 Polymer({ |
2 | |
3 Polymer({ | |
4 is: 'paper-slider', | 2 is: 'paper-slider', |
5 | 3 |
6 behaviors: [ | 4 behaviors: [ |
7 Polymer.IronA11yKeysBehavior, | 5 Polymer.IronFormElementBehavior, |
8 Polymer.PaperInkyFocusBehavior, | 6 Polymer.PaperInkyFocusBehavior, |
9 Polymer.IronFormElementBehavior, | |
10 Polymer.IronRangeBehavior | 7 Polymer.IronRangeBehavior |
11 ], | 8 ], |
12 | 9 |
13 properties: { | 10 properties: { |
14 | 11 |
15 /** | 12 /** |
16 * If true, the slider thumb snaps to tick marks evenly spaced based | 13 * If true, the slider thumb snaps to tick marks evenly spaced based |
17 * on the `step` property value. | 14 * on the `step` property value. |
18 */ | 15 */ |
19 snaps: { | 16 snaps: { |
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
115 tabindex: 0 | 112 tabindex: 0 |
116 }, | 113 }, |
117 | 114 |
118 keyBindings: { | 115 keyBindings: { |
119 'left down pagedown home': '_decrementKey', | 116 'left down pagedown home': '_decrementKey', |
120 'right up pageup end': '_incrementKey' | 117 'right up pageup end': '_incrementKey' |
121 }, | 118 }, |
122 | 119 |
123 ready: function() { | 120 ready: function() { |
124 // issue polymer/polymer#1305 | 121 // issue polymer/polymer#1305 |
| 122 |
125 this.async(function() { | 123 this.async(function() { |
126 this._updateKnob(this.value); | 124 this._updateKnob(this.value); |
127 this._updateInputValue(); | |
128 }, 1); | 125 }, 1); |
129 }, | 126 }, |
130 | 127 |
131 /** | 128 /** |
132 * Increases value by `step` but not above `max`. | 129 * Increases value by `step` but not above `max`. |
133 * @method increment | 130 * @method increment |
134 */ | 131 */ |
135 increment: function() { | 132 increment: function() { |
136 this.value = this._clampValue(this.value + this.step); | 133 this.value = this._clampValue(this.value + this.step); |
137 }, | 134 }, |
(...skipping 22 matching lines...) Expand all Loading... |
160 this.setAttribute('aria-valuenow', this.value); | 157 this.setAttribute('aria-valuenow', this.value); |
161 this.fire('value-change'); | 158 this.fire('value-change'); |
162 }, | 159 }, |
163 | 160 |
164 _immediateValueChanged: function() { | 161 _immediateValueChanged: function() { |
165 if (this.dragging) { | 162 if (this.dragging) { |
166 this.fire('immediate-value-change'); | 163 this.fire('immediate-value-change'); |
167 } else { | 164 } else { |
168 this.value = this.immediateValue; | 165 this.value = this.immediateValue; |
169 } | 166 } |
170 this._updateInputValue(); | |
171 }, | 167 }, |
172 | 168 |
173 _secondaryProgressChanged: function() { | 169 _secondaryProgressChanged: function() { |
174 this.secondaryProgress = this._clampValue(this.secondaryProgress); | 170 this.secondaryProgress = this._clampValue(this.secondaryProgress); |
175 }, | 171 }, |
176 | 172 |
177 _updateInputValue: function() { | 173 _fixForInput: function(immediateValue) { |
178 if (this.editable) { | 174 // paper-input/issues/114 |
179 this.$$('#input').value = this.immediateValue.toString(); | 175 return this.immediateValue.toString(); |
180 } | |
181 }, | 176 }, |
182 | 177 |
183 _expandKnob: function() { | 178 _expandKnob: function() { |
184 this._setExpand(true); | 179 this._setExpand(true); |
185 }, | 180 }, |
186 | 181 |
187 _resetKnob: function() { | 182 _resetKnob: function() { |
188 this.cancelDebouncer('expandKnob'); | 183 this.cancelDebouncer('expandKnob'); |
189 this._setExpand(false); | 184 this._setExpand(false); |
190 }, | 185 }, |
191 | 186 |
192 _positionKnob: function(ratio) { | 187 _positionKnob: function(ratio) { |
193 this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio))); | 188 this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio))); |
194 this._setRatio(this._calcRatio(this.immediateValue)); | 189 this._setRatio(this._calcRatio(this.immediateValue)); |
195 | 190 |
196 this.$.sliderKnob.style.left = (this.ratio * 100) + '%'; | 191 this.$.sliderKnob.style.left = (this.ratio * 100) + '%'; |
197 }, | 192 }, |
198 | 193 |
199 _inputChange: function() { | 194 _inputChange: function() { |
200 this.value = this.$$('#input').value; | 195 this.value = this.$$('#input').value; |
201 this.fire('change'); | 196 this.fire('change'); |
202 }, | 197 }, |
203 | 198 |
204 _calcKnobPosition: function(ratio) { | 199 _calcKnobPosition: function(ratio) { |
205 return (this.max - this.min) * ratio + this.min; | 200 return (this.max - this.min) * ratio + this.min; |
206 }, | 201 }, |
207 | 202 |
208 _onTrack: function(event) { | 203 _onTrack: function(event) { |
| 204 event.stopPropagation(); |
209 switch (event.detail.state) { | 205 switch (event.detail.state) { |
210 case 'start': | 206 case 'start': |
211 this._trackStart(event); | 207 this._trackStart(event); |
212 break; | 208 break; |
213 case 'track': | 209 case 'track': |
214 this._trackX(event); | 210 this._trackX(event); |
215 break; | 211 break; |
216 case 'end': | 212 case 'end': |
217 this._trackEnd(); | 213 this._trackEnd(); |
218 break; | 214 break; |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
256 | 252 |
257 s.transform = s.webkitTransform = ''; | 253 s.transform = s.webkitTransform = ''; |
258 | 254 |
259 this.fire('change'); | 255 this.fire('change'); |
260 }, | 256 }, |
261 | 257 |
262 _knobdown: function(event) { | 258 _knobdown: function(event) { |
263 this._expandKnob(); | 259 this._expandKnob(); |
264 | 260 |
265 // cancel selection | 261 // cancel selection |
266 event.detail.sourceEvent.preventDefault(); | 262 event.preventDefault(); |
267 | 263 |
268 // set the focus manually because we will called prevent default | 264 // set the focus manually because we will called prevent default |
269 this.focus(); | 265 this.focus(); |
270 }, | 266 }, |
271 | 267 |
272 _bardown: function(event) { | 268 _bardown: function(event) { |
273 this._w = this.$.sliderBar.offsetWidth; | 269 this._w = this.$.sliderBar.offsetWidth; |
274 var rect = this.$.sliderBar.getBoundingClientRect(); | 270 var rect = this.$.sliderBar.getBoundingClientRect(); |
275 var ratio = (event.detail.x - rect.left) / this._w; | 271 var ratio = (event.detail.x - rect.left) / this._w; |
276 var prevRatio = this.ratio; | 272 var prevRatio = this.ratio; |
(...skipping 10 matching lines...) Expand all Loading... |
287 | 283 |
288 if (prevRatio === this.ratio) { | 284 if (prevRatio === this.ratio) { |
289 this._setTransiting(false); | 285 this._setTransiting(false); |
290 } | 286 } |
291 | 287 |
292 this.async(function() { | 288 this.async(function() { |
293 this.fire('change'); | 289 this.fire('change'); |
294 }); | 290 }); |
295 | 291 |
296 // cancel selection | 292 // cancel selection |
297 event.detail.sourceEvent.preventDefault(); | 293 event.preventDefault(); |
298 }, | 294 }, |
299 | 295 |
300 _knobTransitionEnd: function(event) { | 296 _knobTransitionEnd: function(event) { |
301 if (event.target === this.$.sliderKnob) { | 297 if (event.target === this.$.sliderKnob) { |
302 this._setTransiting(false); | 298 this._setTransiting(false); |
303 } | 299 } |
304 }, | 300 }, |
305 | 301 |
306 _maxMarkersChanged: function(maxMarkers) { | 302 _maxMarkersChanged: function(maxMarkers) { |
307 var l = (this.max - this.min) / this.step; | 303 var l = (this.max - this.min) / this.step; |
308 if (!this.snaps && l > maxMarkers) { | 304 if (!this.snaps && l > maxMarkers) { |
309 this._setMarkers([]); | 305 this._setMarkers([]); |
310 } else { | 306 } else { |
311 this._setMarkers(new Array(l)); | 307 this._setMarkers(new Array(l)); |
312 } | 308 } |
313 }, | 309 }, |
314 | 310 |
| 311 _mergeClasses: function(classes) { |
| 312 return Object.keys(classes).filter( |
| 313 function(className) { |
| 314 return classes[className]; |
| 315 }).join(' '); |
| 316 }, |
| 317 |
315 _getClassNames: function() { | 318 _getClassNames: function() { |
316 var classes = {}; | 319 var classes = {}; |
317 | 320 |
318 classes.disabled = this.disabled; | 321 classes.disabled = this.disabled; |
319 classes.pin = this.pin; | 322 classes.pin = this.pin; |
320 classes.snaps = this.snaps; | 323 classes.snaps = this.snaps; |
321 classes.ring = this.immediateValue <= this.min; | 324 classes.ring = this.immediateValue <= this.min; |
322 classes.expand = this.expand; | 325 classes.expand = this.expand; |
323 classes.dragging = this.dragging; | 326 classes.dragging = this.dragging; |
324 classes.transiting = this.transiting; | 327 classes.transiting = this.transiting; |
325 classes.editable = this.editable; | 328 classes.editable = this.editable; |
326 | 329 |
327 return Object.keys(classes).filter( | 330 return this._mergeClasses(classes); |
328 function(className) { | 331 }, |
329 return classes[className]; | 332 |
330 }).join(' '); | 333 _getProgressClass: function() { |
| 334 return this._mergeClasses({ |
| 335 transiting: this.transiting |
| 336 }); |
331 }, | 337 }, |
332 | 338 |
333 _incrementKey: function(event) { | 339 _incrementKey: function(event) { |
334 if (event.detail.key === 'end') { | 340 if (event.detail.key === 'end') { |
335 this.value = this.max; | 341 this.value = this.max; |
336 } else { | 342 } else { |
337 this.increment(); | 343 this.increment(); |
338 } | 344 } |
339 this.fire('change'); | 345 this.fire('change'); |
340 }, | 346 }, |
(...skipping 20 matching lines...) Expand all Loading... |
361 * @event immediate-value-change | 367 * @event immediate-value-change |
362 */ | 368 */ |
363 | 369 |
364 /** | 370 /** |
365 * Fired when the slider's value changes due to user interaction. | 371 * Fired when the slider's value changes due to user interaction. |
366 * | 372 * |
367 * Changes to the slider's value due to changes in an underlying | 373 * Changes to the slider's value due to changes in an underlying |
368 * bound variable will not trigger this event. | 374 * bound variable will not trigger this event. |
369 * | 375 * |
370 * @event change | 376 * @event change |
371 */ | 377 */ |
372 | |
OLD | NEW |