| OLD | NEW |
| (Empty) |
| 1 | |
| 2 | |
| 3 Polymer('paper-toggle-button', { | |
| 4 | |
| 5 /** | |
| 6 * Fired when the checked state changes due to user interaction. | |
| 7 * | |
| 8 * @event change | |
| 9 */ | |
| 10 | |
| 11 /** | |
| 12 * Fired when the checked state changes. | |
| 13 * | |
| 14 * @event core-change | |
| 15 */ | |
| 16 | |
| 17 /** | |
| 18 * Gets or sets the state, `true` is checked and `false` is unchecked. | |
| 19 * | |
| 20 * @attribute checked | |
| 21 * @type boolean | |
| 22 * @default false | |
| 23 */ | |
| 24 checked: false, | |
| 25 | |
| 26 /** | |
| 27 * If true, the toggle button is disabled. A disabled toggle button cannot | |
| 28 * be tapped or dragged to change the checked state. | |
| 29 * | |
| 30 * @attribute disabled | |
| 31 * @type boolean | |
| 32 * @default false | |
| 33 */ | |
| 34 disabled: false, | |
| 35 | |
| 36 eventDelegates: { | |
| 37 down: 'downAction', | |
| 38 up: 'upAction', | |
| 39 tap: 'tap', | |
| 40 trackstart: 'trackStart', | |
| 41 trackx: 'trackx', | |
| 42 trackend: 'trackEnd' | |
| 43 }, | |
| 44 | |
| 45 downAction: function(e) { | |
| 46 var rect = this.$.ink.getBoundingClientRect(); | |
| 47 this.$.ink.downAction({ | |
| 48 x: rect.left + rect.width / 2, | |
| 49 y: rect.top + rect.height / 2 | |
| 50 }); | |
| 51 }, | |
| 52 | |
| 53 upAction: function(e) { | |
| 54 this.$.ink.upAction(); | |
| 55 }, | |
| 56 | |
| 57 tap: function() { | |
| 58 if (this.disabled) { | |
| 59 return; | |
| 60 } | |
| 61 this.checked = !this.checked; | |
| 62 this.fire('change'); | |
| 63 }, | |
| 64 | |
| 65 trackStart: function(e) { | |
| 66 if (this.disabled) { | |
| 67 return; | |
| 68 } | |
| 69 this._w = this.$.toggleBar.offsetWidth / 2; | |
| 70 e.preventTap(); | |
| 71 }, | |
| 72 | |
| 73 trackx: function(e) { | |
| 74 this._x = Math.min(this._w, | |
| 75 Math.max(0, this.checked ? this._w + e.dx : e.dx)); | |
| 76 this.$.toggleButton.classList.add('dragging'); | |
| 77 var s = this.$.toggleButton.style; | |
| 78 s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)'; | |
| 79 }, | |
| 80 | |
| 81 trackEnd: function() { | |
| 82 var s = this.$.toggleButton.style; | |
| 83 s.transform = s.webkitTransform = ''; | |
| 84 this.$.toggleButton.classList.remove('dragging'); | |
| 85 var old = this.checked; | |
| 86 this.checked = Math.abs(this._x) > this._w / 2; | |
| 87 if (this.checked !== old) { | |
| 88 this.fire('change'); | |
| 89 } | |
| 90 }, | |
| 91 | |
| 92 checkedChanged: function() { | |
| 93 this.setAttribute('aria-pressed', Boolean(this.checked)); | |
| 94 this.fire('core-change'); | |
| 95 } | |
| 96 | |
| 97 }); | |
| 98 | |
| OLD | NEW |