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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/iron-input/iron-input-extracted.js

Issue 1162963002: Revert "Rename polymer and cr_elements v0_8 to v1_0" (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: 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
(Empty)
1
2
3 /*
4 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal idatorBehavior`
5 to `<input>`.
6
7 ### Two-way binding
8
9 By default you can only get notified of changes to an `input`'s `value` due to u ser input:
10
11 <input value="{{myValue::input}}">
12
13 `iron-input` adds the `bind-value` property that mirrors the `value` property, a nd can be used
14 for two-way data binding. `bind-value` will notify if it is changed either by us er input or by script.
15
16 <input is="iron-input" bind-value="{{myValue}}">
17
18 ### Custom validators
19
20 You can use custom validators that implement `Polymer.IronValidatorBehavior` wit h `<iron-input>`.
21
22 <input is="iron-input" validator="my-custom-validator">
23
24 ### Stopping invalid input
25
26 It may be desirable to only allow users to enter certain characters. You can use the
27 `prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
28 is separate from validation, and `allowed-pattern` does not affect how the input is validated.
29
30 <!-- only allow characters that match [0-9] -->
31 <input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]">
32
33 @hero hero.svg
34 @demo demo/index.html
35 */
36
37 Polymer({
38
39 is: 'iron-input',
40
41 extends: 'input',
42
43 behaviors: [
44 Polymer.IronValidatableBehavior
45 ],
46
47 properties: {
48
49 /**
50 * Use this property instead of `value` for two-way data binding.
51 */
52 bindValue: {
53 observer: '_bindValueChanged',
54 type: String
55 },
56
57 /**
58 * Set to true to prevent the user from entering invalid input. The new in put characters are
59 * matched with `allowedPattern` if it is set, otherwise it will use the ` pattern` attribute if
60 * set, or the `type` attribute (only supported for `type=number`).
61 */
62 preventInvalidInput: {
63 type: Boolean
64 },
65
66 /**
67 * Regular expression to match valid input characters.
68 */
69 allowedPattern: {
70 type: String
71 },
72
73 _previousValidInput: {
74 type: String,
75 value: ''
76 }
77
78 },
79
80 listeners: {
81 'input': '_onInput',
82 'keydown': '_onKeydown'
83 },
84
85 get _patternRegExp() {
86 var pattern;
87 if (this.allowedPattern) {
88 pattern = new RegExp(this.allowedPattern);
89 } else if (this.pattern) {
90 pattern = new RegExp(this.pattern);
91 } else {
92 switch (this.type) {
93 case 'number':
94 pattern = /[0-9.,e-]/;
95 break;
96 }
97 }
98 return pattern;
99 },
100
101 ready: function() {
102 this.bindValue = this.value;
103 },
104
105 _bindValueChanged: function() {
106 if (this.value !== this.bindValue) {
107 this.value = this.bindValue;
108 }
109 // manually notify because we don't want to notify until after setting val ue
110 this.fire('bind-value-changed', {value: this.bindValue});
111 },
112
113 _onInput: function() {
114 this.bindValue = this.value;
115 },
116
117 _isPrintable: function(keyCode) {
118 var printable =
119 (keyCode > 47 && keyCode < 58) || // number keys
120 keyCode == 32 || keyCode == 13 || // spacebar & return key
121 (keyCode > 64 && keyCode < 91) || // letter keys
122 (keyCode > 95 && keyCode < 112) || // numpad keys
123 (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
124 (keyCode > 218 && keyCode < 223); // [\]' (in order)
125 return printable;
126 },
127
128 // convert printable numpad keys to number keys
129 _correctNumpadKeys: function(keyCode) {
130 return (keyCode > 95 && keyCode < 112) ? keyCode - 48 : keyCode;
131 },
132
133 _onKeydown: function(event) {
134 if (!this.preventInvalidInput && this.type !== 'number') {
135 return;
136 }
137 var regexp = this._patternRegExp;
138 if (!regexp) {
139 return;
140 }
141 var thisChar = String.fromCharCode(this._correctNumpadKeys(event.keyCode)) ;
142 if (this._isPrintable(event.keyCode) && !regexp.test(thisChar)) {
143 event.preventDefault();
144 }
145 },
146
147 /**
148 * Returns true if `value` is valid. The validator provided in `validator` w ill be used first,
149 * then any constraints.
150 * @return {Boolean} True if the value is valid.
151 */
152 validate: function() {
153 // Empty, non-required input is valid.
154 if (!this.required && this.value == '')
155 return true;
156
157 var valid;
158 if (this.hasValidator()) {
159 valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
160 } else {
161 this.invalid = !this.validity.valid;
162 valid = this.validity.valid;
163 }
164 this.fire('iron-input-validate');
165 return valid;
166 }
167
168 });
169
170 /*
171 The `iron-input-validate` event is fired whenever `validate()` is called.
172 @event iron-input-validate
173 */
174
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698