| 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 |