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

Side by Side Diff: third_party/polymer/components/core-input/core-input.html

Issue 592603004: Revert "Polymer elements added to third_party/polymer." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 2 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
(Empty)
1 <!--
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS
6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS
8 -->
9
10 <!--
11 /**
12 * core-input is an unstyled single- or multi-line text field where user can
13 * enter input.
14 *
15 * Example:
16 *
17 * <core-input placeholder="Placeholder text here"></core-input>
18 *
19 * <core-input multiline placeholder="Enter multiple lines here"></core-inpu t>
20 *
21 * The text input's value is considered "committed" if the user hits the "enter"
22 * key or blurs the input after changing the value. The `change` event is fired
23 * when the value becomes committed, and the committed value is stored in the
24 * `value` property. The current value of the input is stored in the `inputValue `
25 * property.
26 *
27 * Validation
28 * ----------
29 *
30 * core-input can optionally validate the value using the HTML5 constraints API,
31 * similar to native inputs. There are two methods to enable input validation:
32 *
33 * 1. By setting the `type` attribute. For example, setting it to `email` will
34 * check the value is a valid email, and setting it to `number` will check
35 * the input is a number.
36 *
37 * 2. By setting attributes related to validation. The attributes are `pattern`,
38 * `min`, `max`, `step` and `required`.
39 *
40 * Only `required` is supported for multiline inputs currently.
41 *
42 * Example:
43 *
44 * <core-input type="email" placeholder="enter your email"></core-input>
45 *
46 * <core-input type="number" min="5" placeholder="enter a number greater tha n or equal to 5"></core-input>
47 *
48 * <core-input pattern=".*abc.*" placeholder="enter something containing 'ab c'"></core-input>
49 *
50 * See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_ validation
51 * for more info on validation.
52 *
53 * @group Polymer Core Elements
54 * @element core-input
55 * @homepage github.io
56 */
57 -->
58
59 <!--
60 Fired when the inputValue of is changed. This is the same event as the DOM
61 "input" event.
62
63 @event input
64 -->
65
66 <!--
67 Fired when the user commits the value of the input, either by the hitting the
68 `enter` key or blurring the input after the changing the inputValue. Also see th e
69 DOM "change" event.
70
71 @event change
72 -->
73
74 <!--
75 Fired when the inputValue of this text input changes and fails validation.
76
77 @event input-invalid
78 @param {Object} detail
79 @param {string} value The text input's inputValue.
80 -->
81
82 <!--
83 Fired when the inputValue of this text input changes and passes validation.
84
85 @event input-valid
86 @param {Object} detail
87 @param {string} value The text input's inputValue.
88 -->
89 <link href="../polymer/polymer.html" rel="import">
90
91 <polymer-element name="core-input" on-focus="{{focusAction}}">
92
93 <template>
94
95 <link href="core-input.css" rel="stylesheet">
96
97 <template if="{{multiline}}">
98 <textarea id="input" value="{{inputValue}}" rows="{{rows}}" fit?="{{rows = == 'fit'}}" disabled?="{{disabled}}" placeholder="{{placeholder}}" autofocus?="{ {autofocus}}" required?="{{required}}" readonly?="{{readonly}}" aria-label="{{la bel || placeholder}}" aria-invalid="{{invalid}}" on-change="{{inputChangeAction} }" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}"></textarea>
99 </template>
100
101 <template if="{{!multiline}}">
102 <input id="input" value="{{inputValue}}" disabled?="{{disabled}}" type="{{ type}}" placeholder="{{placeholder}}" autofocus?="{{autofocus}}" required?="{{re quired}}" readonly?="{{readonly}}" pattern="{{pattern}}" min="{{min}}" max="{{ma x}}" step="{{step}}" maxlength="{{maxlength}}" aria-label="{{label || placeholde r}}" aria-invalid="{{invalid}}" on-keydown="{{keydownAction}}" on-change="{{inpu tChangeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}">
103 </template>
104
105 </template>
106
107 <script>
108
109 Polymer('core-input', {
110 publish: {
111 /**
112 * Placeholder text that hints to the user what can be entered in
113 * the input.
114 *
115 * @attribute placeholder
116 * @type string
117 * @default ''
118 */
119 placeholder: '',
120
121 /**
122 * If true, this input cannot be focused and the user cannot change
123 * its value.
124 *
125 * @attribute disabled
126 * @type boolean
127 * @default false
128 */
129 disabled: false,
130
131 /**
132 * If true, the user cannot modify the value of the input.
133 *
134 * @attribute readonly
135 * @type boolean
136 * @default false
137 */
138 readonly: false,
139
140 /**
141 * If true, this input will automatically gain focus on page load.
142 *
143 * @attribute autofocus
144 * @type boolean
145 * @default false
146 */
147 autofocus: false,
148
149 /**
150 * If true, this input accepts multi-line input like a `<textarea>`
151 *
152 * @attribute multiline
153 * @type boolean
154 * @default false
155 */
156 multiline: false,
157
158 /**
159 * (multiline only) The height of this text input in rows. The input
160 * will scroll internally if more input is entered beyond the size
161 * of the component. This property is meaningless if multiline is
162 * false. You can also set this property to "fit" and size the
163 * component with CSS to make the input fit the CSS size.
164 *
165 * @attribute rows
166 * @type number|'fit'
167 * @default 'fit'
168 */
169 rows: 'fit',
170
171 /**
172 * The current value of this input. Changing inputValue programmatically
173 * will cause value to be out of sync. Instead, change value directly
174 * or call commit() after changing inputValue.
175 *
176 * @attribute inputValue
177 * @type string
178 * @default ''
179 */
180 inputValue: '',
181
182 /**
183 * The value of the input committed by the user, either by changing the
184 * inputValue and blurring the input, or by hitting the `enter` key.
185 *
186 * @attribute value
187 * @type string
188 * @default ''
189 */
190 value: '',
191
192 /**
193 * Set the input type. Not supported for `multiline`.
194 *
195 * @attribute type
196 * @type string
197 * @default text
198 */
199 type: 'text',
200
201 /**
202 * If true, the input is invalid if its value is null.
203 *
204 * @attribute required
205 * @type boolean
206 * @default false
207 */
208 required: false,
209
210 /**
211 * A regular expression to validate the input value against. See
212 * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constra int_validation#Validation-related_attributes
213 * for more info. Not supported if `multiline` is true.
214 *
215 * @attribute pattern
216 * @type string
217 * @default '.*'
218 */
219 // FIXME(yvonne): The default is set to .* because we can't bind to patt ern such
220 // that the attribute is unset if pattern is null.
221 pattern: '.*',
222
223 /**
224 * If set, the input is invalid if the value is less than this property. See
225 * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constra int_validation#Validation-related_attributes
226 * for more info. Not supported if `multiline` is true.
227 *
228 * @attribute min
229 */
230 min: null,
231
232 /**
233 * If set, the input is invalid if the value is greater than this proper ty. See
234 * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constra int_validation#Validation-related_attributes
235 * for more info. Not supported if `multiline` is true.
236 *
237 * @attribute max
238 */
239 max: null,
240
241 /**
242 * If set, the input is invalid if the value is not `min` plus an integr al multiple
243 * of this property. See
244 * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constra int_validation#Validation-related_attributes
245 * for more info. Not supported if `multiline` is true.
246 *
247 * @attribute step
248 */
249 step: null,
250
251 /**
252 * The maximum length of the input value.
253 *
254 * @attribute maxlength
255 * @type number
256 */
257 maxlength: null,
258
259 /**
260 * If this property is true, the text input's inputValue failed validati on.
261 *
262 * @attribute invalid
263 * @type boolean
264 * @default false
265 */
266 invalid: false
267 },
268
269 ready: function() {
270 this.handleTabindex(this.getAttribute('tabindex'));
271 },
272
273 invalidChanged: function() {
274 this.classList.toggle('invalid', this.invalid);
275 this.fire('input-'+ (this.invalid ? 'invalid' : 'valid'), {value: this.i nputValue});
276 },
277
278 inputValueChanged: function() {
279 this.updateValidity_();
280 },
281
282 valueChanged: function() {
283 this.inputValue = this.value;
284 },
285
286 requiredChanged: function() {
287 this.updateValidity_();
288 },
289
290 attributeChanged: function(attr, oldVal, curVal) {
291 if (attr === 'tabindex') {
292 this.handleTabindex(curVal);
293 }
294 },
295
296 handleTabindex: function(tabindex) {
297 if (tabindex > 0) {
298 this.$.input.setAttribute('tabindex', -1);
299 } else {
300 this.$.input.removeAttribute('tabindex');
301 }
302 },
303
304 /**
305 * Commits the inputValue to value.
306 *
307 * @method commit
308 */
309 commit: function() {
310 this.value = this.inputValue;
311 },
312
313 updateValidity_: function() {
314 if (this.$.input.willValidate) {
315 this.invalid = !this.$.input.validity.valid;
316 }
317 },
318
319 keydownAction: function() {
320 // for type = number, the value is the empty string unless the input is a valid number.
321 // FIXME(yvonne): check other types
322 if (this.type === 'number') {
323 this.async(function() {
324 this.updateValidity_();
325 });
326 }
327 },
328
329 inputChangeAction: function() {
330 this.commit();
331 if (!window.ShadowDOMPolyfill) {
332 // re-fire event that does not bubble across shadow roots
333 this.fire('change', null, this);
334 }
335 },
336
337 focusAction: function(e) {
338 if (this.getAttribute('tabindex') > 0) {
339 // Forward focus to the inner input if tabindex is set on the element
340 // This will not cause an infinite loop because focus will not fire on the <input>
341 // again if it's already focused.
342 this.$.input.focus();
343 }
344 },
345
346 inputFocusAction: function(e) {
347 if (window.ShadowDOMPolyfill) {
348 // re-fire non-bubbling event if polyfill
349 this.fire('focus', null, this, false);
350 }
351 },
352
353 inputBlurAction: function() {
354 if (window.ShadowDOMPolyfill) {
355 // re-fire non-bubbling event
356 this.fire('blur', null, this, false);
357 }
358 },
359
360 blur: function() {
361 // forward blur method to the internal input / textarea element
362 this.$.input.blur();
363 },
364
365 click: function() {
366 // forward click method to the internal input / textarea element
367 this.$.input.click();
368 },
369
370 focus: function() {
371 // forward focus method to the internal input / textarea element
372 this.$.input.focus();
373 },
374
375 select: function() {
376 // forward select method to the internal input / textarea element
377 this.$.input.focus();
378 },
379
380 setSelectionRange: function(selectionStart, selectionEnd, selectionDirecti on) {
381 // forward setSelectionRange method to the internal input / textarea ele ment
382 this.$.input.setSelectionRange(selectionStart, selectionEnd, selectionDi rection);
383 },
384
385 setRangeText: function(replacement, start, end, selectMode) {
386 // forward setRangeText method to the internal input element
387 if (!this.multiline) {
388 this.$.input.setRangeText(replacement, start, end, selectMode);
389 }
390 },
391
392 stepDown: function(n) {
393 // forward stepDown method to the internal input element
394 if (!this.multiline) {
395 this.$.input.stepDown(n);
396 }
397 },
398
399 stepUp: function(n) {
400 // forward stepUp method to the internal input element
401 if (!this.multiline) {
402 this.$.input.stepUp(n);
403 }
404 },
405
406 get willValidate() {
407 return this.$.input.willValidate;
408 },
409
410 get validity() {
411 return this.$.input.validity;
412 },
413
414 get validationMessage() {
415 return this.$.input.validationMessage;
416 },
417
418 checkValidity: function() {
419 var r = this.$.input.checkValidity();
420 this.updateValidity_();
421 return r;
422 },
423
424 setCustomValidity: function(message) {
425 this.$.input.setCustomValidity(message);
426 this.updateValidity_();
427 }
428
429 });
430 </script>
431
432 </polymer-element>
OLDNEW
« no previous file with comments | « third_party/polymer/components/core-input/core-input.css ('k') | third_party/polymer/components/core-input/demo.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698