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

Side by Side Diff: third_party/polymer/v0_8/components/paper-input/paper-input-behavior.html

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

Powered by Google App Engine
This is Rietveld 408576698