| OLD | NEW |
| 1 /** | 1 /** |
| 2 * Use `Polymer.IronCheckedElementBehavior` to implement a custom element | 2 * Use `Polymer.IronCheckedElementBehavior` to implement a custom element |
| 3 * that has a `checked` property, which can be used for validation if the | 3 * that has a `checked` property, which can be used for validation if the |
| 4 * element is also `required`. Element instances implementing this behavior | 4 * element is also `required`. Element instances implementing this behavior |
| 5 * will also be registered for use in an `iron-form` element. | 5 * will also be registered for use in an `iron-form` element. |
| 6 * | 6 * |
| 7 * @demo demo/index.html | 7 * @demo demo/index.html |
| 8 * @polymerBehavior Polymer.IronCheckedElementBehavior | 8 * @polymerBehavior Polymer.IronCheckedElementBehavior |
| 9 */ | 9 */ |
| 10 Polymer.IronCheckedElementBehaviorImpl = { | 10 Polymer.IronCheckedElementBehaviorImpl = { |
| (...skipping 22 matching lines...) Expand all Loading... |
| 33 */ | 33 */ |
| 34 toggles: { | 34 toggles: { |
| 35 type: Boolean, | 35 type: Boolean, |
| 36 value: true, | 36 value: true, |
| 37 reflectToAttribute: true | 37 reflectToAttribute: true |
| 38 }, | 38 }, |
| 39 | 39 |
| 40 /* Overriden from Polymer.IronFormElementBehavior */ | 40 /* Overriden from Polymer.IronFormElementBehavior */ |
| 41 value: { | 41 value: { |
| 42 type: String, | 42 type: String, |
| 43 value: '' | 43 value: 'on', |
| 44 observer: '_valueChanged' |
| 44 } | 45 } |
| 45 }, | 46 }, |
| 46 | 47 |
| 47 observers: [ | 48 observers: [ |
| 48 '_requiredChanged(required)' | 49 '_requiredChanged(required)' |
| 49 ], | 50 ], |
| 50 | 51 |
| 52 created: function() { |
| 53 // Used by `iron-form` to handle the case that an element with this behavi
or |
| 54 // doesn't have a role of 'checkbox' or 'radio', but should still only be |
| 55 // included when the form is serialized if `this.checked === true`. |
| 56 this._hasIronCheckedElementBehavior = true; |
| 57 }, |
| 58 |
| 51 /** | 59 /** |
| 52 * Returns false if the element is required and not checked, and true otherw
ise. | 60 * Returns false if the element is required and not checked, and true otherw
ise. |
| 53 * @return {boolean} true if `required` is false, or if `required` and `chec
ked` are both true. | 61 * @return {boolean} true if `required` is false, or if `required` and `chec
ked` are both true. |
| 54 */ | 62 */ |
| 55 _getValidity: function(_value) { | 63 _getValidity: function(_value) { |
| 56 return this.disabled || !this.required || (this.required && this.checked); | 64 return this.disabled || !this.required || (this.required && this.checked); |
| 57 }, | 65 }, |
| 58 | 66 |
| 59 /** | 67 /** |
| 60 * Update the aria-required label when `required` is changed. | 68 * Update the aria-required label when `required` is changed. |
| 61 */ | 69 */ |
| 62 _requiredChanged: function() { | 70 _requiredChanged: function() { |
| 63 if (this.required) { | 71 if (this.required) { |
| 64 this.setAttribute('aria-required', 'true'); | 72 this.setAttribute('aria-required', 'true'); |
| 65 } else { | 73 } else { |
| 66 this.removeAttribute('aria-required'); | 74 this.removeAttribute('aria-required'); |
| 67 } | 75 } |
| 68 }, | 76 }, |
| 69 | 77 |
| 70 /** | 78 /** |
| 71 * Update the element's value when checked. | 79 * Fire `iron-changed` when the checked state changes. |
| 72 */ | 80 */ |
| 73 _checkedChanged: function() { | 81 _checkedChanged: function() { |
| 74 this.active = this.checked; | 82 this.active = this.checked; |
| 75 // Unless the user has specified a value, a checked element has the | |
| 76 // default value "on" when checked. | |
| 77 if (this.value === '') | |
| 78 this.value = this.checked ? 'on' : ''; | |
| 79 this.fire('iron-change'); | 83 this.fire('iron-change'); |
| 84 }, |
| 85 |
| 86 /** |
| 87 * Reset value to 'on' if it is set to `undefined`. |
| 88 */ |
| 89 _valueChanged: function() { |
| 90 if (this.value === undefined || this.value === null) { |
| 91 this.value = 'on'; |
| 92 } |
| 80 } | 93 } |
| 81 }; | 94 }; |
| 82 | 95 |
| 83 /** @polymerBehavior Polymer.IronCheckedElementBehavior */ | 96 /** @polymerBehavior Polymer.IronCheckedElementBehavior */ |
| 84 Polymer.IronCheckedElementBehavior = [ | 97 Polymer.IronCheckedElementBehavior = [ |
| 85 Polymer.IronFormElementBehavior, | 98 Polymer.IronFormElementBehavior, |
| 86 Polymer.IronValidatableBehavior, | 99 Polymer.IronValidatableBehavior, |
| 87 Polymer.IronCheckedElementBehaviorImpl | 100 Polymer.IronCheckedElementBehaviorImpl |
| 88 ]; | 101 ]; |
| OLD | NEW |