| OLD | NEW |
| 1 | 1 Polymer({ |
| 2 Polymer({ | |
| 3 is: 'paper-toggle-button', | 2 is: 'paper-toggle-button', |
| 4 | 3 |
| 5 behaviors: [ | 4 behaviors: [ |
| 6 Polymer.PaperInkyFocusBehavior, | 5 Polymer.PaperCheckedElementBehavior |
| 7 Polymer.IronCheckedElementBehavior | |
| 8 ], | 6 ], |
| 9 | 7 |
| 10 hostAttributes: { | 8 hostAttributes: { |
| 11 role: 'button', | 9 role: 'button', |
| 12 'aria-pressed': 'false', | 10 'aria-pressed': 'false', |
| 13 tabindex: 0 | 11 tabindex: 0 |
| 14 }, | 12 }, |
| 15 | 13 |
| 16 properties: { | 14 properties: { |
| 17 /** | 15 /** |
| 18 * Fired when the checked state changes due to user interaction. | 16 * Fired when the checked state changes due to user interaction. |
| 19 * | 17 * |
| 20 * @event change | 18 * @event change |
| 21 */ | 19 */ |
| 22 /** | 20 /** |
| 23 * Fired when the checked state changes. | 21 * Fired when the checked state changes. |
| 24 * | 22 * |
| 25 * @event iron-change | 23 * @event iron-change |
| 26 */ | 24 */ |
| 27 }, | 25 }, |
| 28 | 26 |
| 29 listeners: { | 27 listeners: { |
| 30 track: '_ontrack' | 28 track: '_ontrack' |
| 31 }, | 29 }, |
| 32 | 30 |
| 33 ready: function() { | |
| 34 this._isReady = true; | |
| 35 }, | |
| 36 | |
| 37 // button-behavior hook | |
| 38 _buttonStateChanged: function() { | |
| 39 if (this.disabled) { | |
| 40 return; | |
| 41 } | |
| 42 if (this._isReady) { | |
| 43 this.checked = this.active; | |
| 44 } | |
| 45 }, | |
| 46 | |
| 47 _ontrack: function(event) { | 31 _ontrack: function(event) { |
| 48 var track = event.detail; | 32 var track = event.detail; |
| 49 if (track.state === 'start') { | 33 if (track.state === 'start') { |
| 50 this._trackStart(track); | 34 this._trackStart(track); |
| 51 } else if (track.state === 'track') { | 35 } else if (track.state === 'track') { |
| 52 this._trackMove(track); | 36 this._trackMove(track); |
| 53 } else if (track.state === 'end') { | 37 } else if (track.state === 'end') { |
| 54 this._trackEnd(track); | 38 this._trackEnd(track); |
| 55 } | 39 } |
| 56 }, | 40 }, |
| (...skipping 12 matching lines...) Expand all Loading... |
| 69 var dx = track.dx; | 53 var dx = track.dx; |
| 70 this._x = Math.min(this._width, | 54 this._x = Math.min(this._width, |
| 71 Math.max(0, this._trackChecked ? this._width + dx : dx)); | 55 Math.max(0, this._trackChecked ? this._width + dx : dx)); |
| 72 this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton); | 56 this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton); |
| 73 this._userActivate(this._x > (this._width / 2)); | 57 this._userActivate(this._x > (this._width / 2)); |
| 74 }, | 58 }, |
| 75 | 59 |
| 76 _trackEnd: function(track) { | 60 _trackEnd: function(track) { |
| 77 this.$.toggleButton.classList.remove('dragging'); | 61 this.$.toggleButton.classList.remove('dragging'); |
| 78 this.transform('', this.$.toggleButton); | 62 this.transform('', this.$.toggleButton); |
| 63 }, |
| 64 |
| 65 // customize the element's ripple |
| 66 _createRipple: function() { |
| 67 this._rippleContainer = this.$.toggleButton; |
| 68 var ripple = Polymer.PaperRippleBehavior._createRipple(); |
| 69 ripple.id = 'ink'; |
| 70 ripple.setAttribute('recenters', ''); |
| 71 ripple.classList.add('circle', 'toggle-ink'); |
| 72 return ripple; |
| 79 } | 73 } |
| 80 | 74 |
| 81 }); | 75 }); |
| 82 | |
| OLD | NEW |