| OLD | NEW |
| 1 | 1 Polymer({ |
| 2 Polymer({ | |
| 3 is: 'paper-checkbox', | 2 is: 'paper-checkbox', |
| 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: 'checkbox', | 9 role: 'checkbox', |
| 12 'aria-checked': false, | 10 'aria-checked': 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 /** | 21 /** |
| 24 * Fired when the checked state changes. | 22 * Fired when the checked state changes. |
| 25 * | 23 * |
| 26 * @event iron-change | 24 * @event iron-change |
| 27 */ | 25 */ |
| 28 ariaActiveAttribute: { | 26 ariaActiveAttribute: { |
| 29 type: String, | 27 type: String, |
| 30 value: 'aria-checked' | 28 value: 'aria-checked' |
| 31 } | 29 } |
| 32 }, | 30 }, |
| 33 | 31 |
| 34 attached: function() { | |
| 35 this._isReady = true; | |
| 36 | |
| 37 // Don't stomp over a user-set aria-label. | |
| 38 if (!this.getAttribute('aria-label')) { | |
| 39 this.updateAriaLabel(); | |
| 40 } | |
| 41 }, | |
| 42 | |
| 43 /** | |
| 44 * Update the checkbox aria-label. This is a temporary workaround not | |
| 45 * being able to observe changes in <content> | |
| 46 * (see: https://github.com/Polymer/polymer/issues/1773) | |
| 47 * | |
| 48 * Call this if you manually change the contents of the checkbox | |
| 49 * and want the aria-label to match the new contents. | |
| 50 */ | |
| 51 updateAriaLabel: function() { | |
| 52 this.setAttribute('aria-label', Polymer.dom(this).textContent.trim()); | |
| 53 }, | |
| 54 | |
| 55 // button-behavior hook | |
| 56 _buttonStateChanged: function() { | |
| 57 if (this.disabled) { | |
| 58 return; | |
| 59 } | |
| 60 if (this._isReady) { | |
| 61 this.checked = this.active; | |
| 62 } | |
| 63 }, | |
| 64 | |
| 65 _computeCheckboxClass: function(checked, invalid) { | 32 _computeCheckboxClass: function(checked, invalid) { |
| 66 var className = ''; | 33 var className = ''; |
| 67 if (checked) { | 34 if (checked) { |
| 68 className += 'checked '; | 35 className += 'checked '; |
| 69 } | 36 } |
| 70 if (invalid) { | 37 if (invalid) { |
| 71 className += 'invalid'; | 38 className += 'invalid'; |
| 72 } | 39 } |
| 73 return className; | 40 return className; |
| 74 }, | 41 }, |
| 75 | 42 |
| 76 _computeCheckmarkClass: function(checked) { | 43 _computeCheckmarkClass: function(checked) { |
| 77 return checked ? '' : 'hidden'; | 44 return checked ? '' : 'hidden'; |
| 45 }, |
| 46 |
| 47 // create ripple inside the checkboxContainer |
| 48 _createRipple: function() { |
| 49 this._rippleContainer = this.$.checkboxContainer; |
| 50 return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this); |
| 78 } | 51 } |
| 79 }); | 52 |
| 80 | 53 }); |
| OLD | NEW |