| OLD | NEW |
| 1 | 1 |
| 2 Polymer({ | 2 Polymer({ |
| 3 is: 'paper-toggle-button', | 3 is: 'paper-toggle-button', |
| 4 | 4 |
| 5 behaviors: [ | 5 behaviors: [ |
| 6 Polymer.PaperRadioButtonBehavior | 6 Polymer.PaperRadioButtonBehavior |
| 7 ], | 7 ], |
| 8 | 8 |
| 9 // The custom properties shim is currently an opt-in feature. | |
| 10 enableCustomStyleProperties: true, | |
| 11 | |
| 12 hostAttributes: { | 9 hostAttributes: { |
| 13 role: 'button', | 10 role: 'button', |
| 14 'aria-pressed': 'false', | 11 'aria-pressed': 'false', |
| 15 tabindex: 0 | 12 tabindex: 0 |
| 16 }, | 13 }, |
| 17 | 14 |
| 18 properties: { | 15 properties: { |
| 19 /** | 16 /** |
| 20 * Fired when the checked state changes due to user interaction. | 17 * Fired when the checked state changes due to user interaction. |
| 21 * | 18 * |
| (...skipping 28 matching lines...) Expand all Loading... |
| 50 * @default true | 47 * @default true |
| 51 */ | 48 */ |
| 52 toggles: { | 49 toggles: { |
| 53 type: Boolean, | 50 type: Boolean, |
| 54 value: true, | 51 value: true, |
| 55 reflectToAttribute: true | 52 reflectToAttribute: true |
| 56 } | 53 } |
| 57 }, | 54 }, |
| 58 | 55 |
| 59 listeners: { | 56 listeners: { |
| 60 // TODO(sjmiles): tracking feature disabled until we can control | 57 track: '_ontrack' |
| 61 // track/tap interaction with confidence | 58 }, |
| 62 //xtrack: '_ontrack' | 59 |
| 60 ready: function() { |
| 61 this._isReady = true; |
| 63 }, | 62 }, |
| 64 | 63 |
| 65 // button-behavior hook | 64 // button-behavior hook |
| 66 _buttonStateChanged: function() { | 65 _buttonStateChanged: function() { |
| 67 this.checked = this.active; | 66 if (this.disabled) { |
| 67 return; |
| 68 } |
| 69 if (this._isReady) { |
| 70 this.checked = this.active; |
| 71 } |
| 68 }, | 72 }, |
| 69 | 73 |
| 70 _checkedChanged: function(checked) { | 74 _checkedChanged: function(checked) { |
| 71 this.active = this.checked; | 75 this.active = this.checked; |
| 72 this.fire('iron-change'); | 76 this.fire('iron-change'); |
| 73 }, | 77 }, |
| 74 | 78 |
| 75 _ontrack: function(event) { | 79 _ontrack: function(event) { |
| 76 var track = event.detail; | 80 var track = event.detail; |
| 77 if (track.state === 'start' ) { | 81 if (track.state === 'start') { |
| 78 //this._preventTap = true; | |
| 79 this._trackStart(track); | 82 this._trackStart(track); |
| 80 } else if (track.state === 'move' ) { | 83 } else if (track.state === 'track') { |
| 81 this._trackMove(track); | 84 this._trackMove(track); |
| 82 } else if (track.state === 'end' ) { | 85 } else if (track.state === 'end') { |
| 83 this._trackEnd(track); | 86 this._trackEnd(track); |
| 84 } | 87 } |
| 85 }, | 88 }, |
| 86 | 89 |
| 87 _trackStart: function(track) { | 90 _trackStart: function(track) { |
| 88 this._width = this.$.toggleBar.offsetWidth / 2; | 91 this._width = this.$.toggleBar.offsetWidth / 2; |
| 89 this._startx = track.x; | 92 /* |
| 93 * keep an track-only check state to keep the dragging behavior smooth |
| 94 * while toggling activations |
| 95 */ |
| 96 this._trackChecked = this.checked; |
| 97 this.$.toggleButton.classList.add('dragging'); |
| 90 }, | 98 }, |
| 91 | 99 |
| 92 _trackMove: function(track) { | 100 _trackMove: function(track) { |
| 93 var dx = track.x - this._startx; | 101 var dx = track.dx; |
| 94 this._x = Math.min(this._width, | 102 this._x = Math.min(this._width, |
| 95 Math.max(0, this.checked ? this._width + dx : dx)); | 103 Math.max(0, this._trackChecked ? this._width + dx : dx)); |
| 96 this.$.toggleButton.classList.add('dragging'); | 104 this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton); |
| 97 this.translate3d(this, this._x + 'px', 0, 0); | 105 this._userActivate(this._x > (this._width / 2)); |
| 98 }, | 106 }, |
| 99 | 107 |
| 100 _trackEnd: function(track) { | 108 _trackEnd: function(track) { |
| 101 this.$.toggleButton.classList.remove('dragging'); | 109 this.$.toggleButton.classList.remove('dragging'); |
| 102 this.transform(this, ''); | 110 this.transform('', this.$.toggleButton); |
| 103 this._userActivate(Math.abs(this._x) > this._width / 2); | |
| 104 } | 111 } |
| 105 | 112 |
| 106 }); | 113 }); |
| 107 | 114 |
| OLD | NEW |