Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(329)

Side by Side Diff: third_party/polymer/v0_8/components-chromium/paper-input/paper-input-behavior-extracted.js

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 1
2 2
3 /**
4 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con tainer>`. This
5 * behavior is implemented by `<paper-input>`. It exposes a number of properti es from
6 * `<paper-input-container>` and `<input is="iron-input">` and they should be bound in your
7 * template.
8 *
9 * The input element can be accessed by the `inputElement` property if you nee d to access
10 * properties or methods that are not exposed.
11 * @polymerBehavior
12 */
3 Polymer.PaperInputBehavior = { 13 Polymer.PaperInputBehavior = {
4 14
5 properties: { 15 properties: {
6 16
7 /** 17 /**
8 * The label for this input. 18 * The label for this input. Bind this to `<paper-input-container>`'s `lab el` property.
9 */ 19 */
10 label: { 20 label: {
11 type: String 21 type: String
12 }, 22 },
13 23
14 /** 24 /**
15 * The value for this input. 25 * The value for this input. Bind this to the `<input is="iron-input">`'s `bindValue`
26 * property, or the value property of your input that is `notify:true`.
16 */ 27 */
17 value: { 28 value: {
18 notify: true, 29 notify: true,
19 type: String 30 type: String
20 }, 31 },
21 32
22 /** 33 /**
23 * Set to true to disable this input. 34 * Set to true to disable this input. Bind this to both the `<paper-input- container>`'s
35 * and the input's `disabled` property.
24 */ 36 */
25 disabled: { 37 disabled: {
26 type: Boolean, 38 type: Boolean,
27 value: false 39 value: false
28 }, 40 },
29 41
30 /** 42 /**
31 * Set to true to prevent the user from entering invalid input. 43 * Returns true if the value is invalid. Bind this to both the `<paper-inp ut-container>`'s
44 * and the input's `invalid` property.
45 */
46 invalid: {
47 type: Boolean,
48 value: false
49 },
50
51 /**
52 * Set to true to prevent the user from entering invalid input. Bind this to the
53 * `<input is="iron-input">`'s `preventInvalidInput` property.
32 */ 54 */
33 preventInvalidInput: { 55 preventInvalidInput: {
34 type: Boolean 56 type: Boolean
35 }, 57 },
36 58
37 /** 59 /**
38 * The type of the input. The supported types are `text`, `number` and `pa ssword`. 60 * Set this to specify the pattern allowed by `preventInvalidInput`. Bind this to the
61 * `<input is="iron-input">`'s `allowedPattern` property.
62 */
63 allowedPattern: {
64 type: String
65 },
66
67 /**
68 * The type of the input. The supported types are `text`, `number` and `pa ssword`. Bind this
69 * to the `<input is="iron-input">`'s `type` property.
39 */ 70 */
40 type: { 71 type: {
41 type: String 72 type: String
42 }, 73 },
43 74
44 /** 75 /**
45 * A pattern to validate the `input` with. 76 * A pattern to validate the `input` with. Bind this to the `<input is="ir on-input">`'s
77 * `pattern` property.
46 */ 78 */
47 pattern: { 79 pattern: {
48 type: String 80 type: String
49 }, 81 },
50 82
51 /** 83 /**
52 * Set to true to mark the input as required. 84 * Set to true to mark the input as required. Bind this to the `<input is= "iron-input">`'s
85 * `required` property.
53 */ 86 */
54 required: { 87 required: {
55 type: Boolean, 88 type: Boolean,
56 value: false 89 value: false
57 }, 90 },
58 91
59 /** 92 /**
60 * The maximum length of the input value. 93 * The maximum length of the input value. Bind this to the `<input is="iro n-input">`'s
94 * `maxlength` property.
61 */ 95 */
62 maxlength: { 96 maxlength: {
63 type: Number 97 type: Number
64 }, 98 },
65 99
66 /** 100 /**
67 * The error message to display when the input is invalid. 101 * The error message to display when the input is invalid. Bind this to th e
102 * `<paper-input-error>`'s content, if using.
68 */ 103 */
69 errorMessage: { 104 errorMessage: {
70 type: String 105 type: String
71 }, 106 },
72 107
73 /** 108 /**
74 * Set to true to show a character counter. 109 * Set to true to show a character counter.
75 */ 110 */
76 charCounter: { 111 charCounter: {
77 type: Boolean, 112 type: Boolean,
78 value: false 113 value: false
79 }, 114 },
80 115
81 /** 116 /**
82 * Set to true to disable the floating label. 117 * Set to true to disable the floating label. Bind this to the `<paper-inp ut-container>`'s
118 * `noLabelFloat` property.
83 */ 119 */
84 noLabelFloat: { 120 noLabelFloat: {
85 type: Boolean, 121 type: Boolean,
86 value: false 122 value: false
87 }, 123 },
88 124
89 /** 125 /**
90 * Set to true to auto-validate the input value. 126 * Set to true to always float the label. Bind this to the `<paper-input-c ontainer>`'s
127 * `alwaysFloatLabel` property.
128 */
129 alwaysFloatLabel: {
130 type: Boolean,
131 value: false
132 },
133
134 /**
135 * Set to true to auto-validate the input value. Bind this to the `<paper- input-container>`'s
136 * `autoValidate` property.
91 */ 137 */
92 autoValidate: { 138 autoValidate: {
93 type: Boolean, 139 type: Boolean,
94 value: false 140 value: false
141 },
142
143 /**
144 * Name of the validator to use. Bind this to the `<input is="iron-input"> `'s `validator`
145 * property.
146 */
147 validator: {
148 type: String
149 },
150
151 // HTMLInputElement attributes for binding if needed
152
153 /**
154 * Bind this to the `<input is="iron-input">`'s `autocomplete` property.
155 */
156 autocomplete: {
157 type: String,
158 value: 'off'
159 },
160
161 /**
162 * Bind this to the `<input is="iron-input">`'s `autofocus` property.
163 */
164 autofocus: {
165 type: Boolean
166 },
167
168 /**
169 * Bind this to the `<input is="iron-input">`'s `inputmode` property.
170 */
171 inputmode: {
172 type: String
173 },
174
175 /**
176 * Bind this to the `<input is="iron-input">`'s `minlength` property.
177 */
178 minlength: {
179 type: Number
180 },
181
182 /**
183 * Bind this to the `<input is="iron-input">`'s `name` property.
184 */
185 name: {
186 type: String
187 },
188
189 /**
190 * A placeholder string in addition to the label. If this is set, the labe l will always float.
191 */
192 placeholder: {
193 type: String
194 },
195
196 /**
197 * Bind this to the `<input is="iron-input">`'s `readonly` property.
198 */
199 readonly: {
200 type: Boolean,
201 value: false
202 },
203
204 /**
205 * Bind this to the `<input is="iron-input">`'s `size` property.
206 */
207 size: {
208 type: Number
209 },
210
211 _ariaDescribedBy: {
212 type: String,
213 value: ''
95 } 214 }
96 215
97 }, 216 },
98 217
218 listeners: {
219 'addon-attached': '_onAddonAttached'
220 },
221
99 /** 222 /**
100 * Returns a reference to the input element. 223 * Returns a reference to the input element.
101 */ 224 */
102 get inputElement() { 225 get inputElement() {
103 return this.$.input; 226 return this.$.input;
227 },
228
229 attached: function() {
230 this._updateAriaLabelledBy();
231 },
232
233 _appendStringWithSpace: function(str, more) {
234 if (str) {
235 str = str + ' ' + more;
236 } else {
237 str = more;
238 }
239 return str;
240 },
241
242 _onAddonAttached: function(event) {
243 var target = event.path ? event.path[0] : event.target;
244 if (target.id) {
245 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB y, target.id);
246 } else {
247 var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000));
248 target.id = id;
249 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB y, id);
250 }
251 },
252
253 /**
254 * Validates the input element and sets an error style if needed.
255 */
256 validate: function () {
257 return this.inputElement.validate();
258 },
259
260 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
261 return placeholder || alwaysFloatLabel;
262 },
263
264 _updateAriaLabelledBy: function() {
265 var label = Polymer.dom(this.root).querySelector('label');
266 if (!label) {
267 this._ariaLabelledBy = '';
268 return;
269 }
270 var labelledBy;
271 if (label.id) {
272 labelledBy = label.id;
273 } else {
274 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds();
275 label.id = labelledBy;
276 }
277 this._ariaLabelledBy = labelledBy;
104 } 278 }
105 279
106 }; 280 };
107 281
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698