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 |