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

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

Issue 1862213002: Roll third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 4 years, 8 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 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal idatorBehavior` 2 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal idatorBehavior`
3 to `<input>`. 3 to `<input>`.
4 4
5 ### Two-way binding 5 ### Two-way binding
6 6
7 By default you can only get notified of changes to an `input`'s `value` due to u ser input: 7 By default you can only get notified of changes to an `input`'s `value` due to u ser input:
8 8
9 <input value="{{myValue::input}}"> 9 <input value="{{myValue::input}}">
10 10
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
46 46
47 /** 47 /**
48 * Use this property instead of `value` for two-way data binding. 48 * Use this property instead of `value` for two-way data binding.
49 */ 49 */
50 bindValue: { 50 bindValue: {
51 observer: '_bindValueChanged', 51 observer: '_bindValueChanged',
52 type: String 52 type: String
53 }, 53 },
54 54
55 /** 55 /**
56 * Set to true to prevent the user from entering invalid input. The new in put characters are 56 * Set to true to prevent the user from entering invalid input. If `allowe dPattern` is set,
57 * matched with `allowedPattern` if it is set, otherwise it will use the ` type` attribute (only 57 * any character typed by the user will be matched against that pattern, a nd rejected if it's not a match.
58 * supported for `type=number`). 58 * Pasted input will have each character checked individually; if any char acter
59 * doesn't match `allowedPattern`, the entire pasted string will be reject ed.
60 * If `allowedPattern` is not set, it will use the `type` attribute (only supported for `type=number`).
59 */ 61 */
60 preventInvalidInput: { 62 preventInvalidInput: {
61 type: Boolean 63 type: Boolean
62 }, 64 },
63 65
64 /** 66 /**
65 * Regular expression expressing a set of characters to enforce the validi ty of input characters. 67 * Regular expression that list the characters allowed as input.
66 * The recommended value should follow this format: `[a-ZA-Z0-9.+-!;:]` th at list the characters 68 * This pattern represents the allowed characters for the field; as the us er inputs text,
67 * allowed as input. 69 * each individual character will be checked against the pattern (rather t han checking
70 * the entire value as a whole). The recommended format should be a list o f allowed characters;
71 * for example, `[a-zA-Z0-9.+-!;:]`
68 */ 72 */
69 allowedPattern: { 73 allowedPattern: {
70 type: String, 74 type: String,
71 observer: "_allowedPatternChanged" 75 observer: "_allowedPatternChanged"
72 }, 76 },
73 77
74 _previousValidInput: { 78 _previousValidInput: {
75 type: String, 79 type: String,
76 value: '' 80 value: ''
77 }, 81 },
78 82
79 _patternAlreadyChecked: { 83 _patternAlreadyChecked: {
80 type: Boolean, 84 type: Boolean,
81 value: false 85 value: false
82 } 86 }
83 87
84 }, 88 },
85 89
86 listeners: { 90 listeners: {
87 'input': '_onInput', 91 'input': '_onInput',
88 'keypress': '_onKeypress' 92 'keypress': '_onKeypress'
89 }, 93 },
90 94
95 registered: function() {
96 // Feature detect whether we need to patch dispatchEvent (i.e. on FF and I E).
97 if (!this._canDispatchEventOnDisabled()) {
98 this._origDispatchEvent = this.dispatchEvent;
99 this.dispatchEvent = this._dispatchEventFirefoxIE;
100 }
101 },
102
103 created: function() {
104 Polymer.IronA11yAnnouncer.requestAvailability();
105 },
106
107 _canDispatchEventOnDisabled: function() {
108 var input = document.createElement('input');
109 var canDispatch = false;
110 input.disabled = true;
111
112 input.addEventListener('feature-check-dispatch-event', function() {
113 canDispatch = true;
114 });
115
116 try {
117 input.dispatchEvent(new Event('feature-check-dispatch-event'));
118 } catch(e) {}
119
120 return canDispatch;
121 },
122
123 _dispatchEventFirefoxIE: function() {
124 // Due to Firefox bug, events fired on disabled form controls can throw
125 // errors; furthermore, neither IE nor Firefox will actually dispatch
126 // events from disabled form controls; as such, we toggle disable around
127 // the dispatch to allow notifying properties to notify
128 // See issue #47 for details
129 var disabled = this.disabled;
130 this.disabled = false;
131 this._origDispatchEvent.apply(this, arguments);
132 this.disabled = disabled;
133 },
134
91 get _patternRegExp() { 135 get _patternRegExp() {
92 var pattern; 136 var pattern;
93 if (this.allowedPattern) { 137 if (this.allowedPattern) {
94 pattern = new RegExp(this.allowedPattern); 138 pattern = new RegExp(this.allowedPattern);
95 } else { 139 } else {
96 switch (this.type) { 140 switch (this.type) {
97 case 'number': 141 case 'number':
98 pattern = /[0-9.,e-]/; 142 pattern = /[0-9.,e-]/;
99 break; 143 break;
100 } 144 }
(...skipping 20 matching lines...) Expand all
121 // Force to prevent invalid input when an `allowed-pattern` is set 165 // Force to prevent invalid input when an `allowed-pattern` is set
122 this.preventInvalidInput = this.allowedPattern ? true : false; 166 this.preventInvalidInput = this.allowedPattern ? true : false;
123 }, 167 },
124 168
125 _onInput: function() { 169 _onInput: function() {
126 // Need to validate each of the characters pasted if they haven't 170 // Need to validate each of the characters pasted if they haven't
127 // been validated inside `_onKeypress` already. 171 // been validated inside `_onKeypress` already.
128 if (this.preventInvalidInput && !this._patternAlreadyChecked) { 172 if (this.preventInvalidInput && !this._patternAlreadyChecked) {
129 var valid = this._checkPatternValidity(); 173 var valid = this._checkPatternValidity();
130 if (!valid) { 174 if (!valid) {
175 this._announceInvalidCharacter('Invalid string of characters not enter ed.');
131 this.value = this._previousValidInput; 176 this.value = this._previousValidInput;
132 } 177 }
133 } 178 }
134 179
135 this.bindValue = this.value; 180 this.bindValue = this.value;
136 this._previousValidInput = this.value; 181 this._previousValidInput = this.value;
137 this._patternAlreadyChecked = false; 182 this._patternAlreadyChecked = false;
138 }, 183 },
139 184
140 _isPrintable: function(event) { 185 _isPrintable: function(event) {
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
181 // Handle special keys and backspace 226 // Handle special keys and backspace
182 if (event.metaKey || event.ctrlKey || event.altKey) 227 if (event.metaKey || event.ctrlKey || event.altKey)
183 return; 228 return;
184 229
185 // Check the pattern either here or in `_onInput`, but not in both. 230 // Check the pattern either here or in `_onInput`, but not in both.
186 this._patternAlreadyChecked = true; 231 this._patternAlreadyChecked = true;
187 232
188 var thisChar = String.fromCharCode(event.charCode); 233 var thisChar = String.fromCharCode(event.charCode);
189 if (this._isPrintable(event) && !regexp.test(thisChar)) { 234 if (this._isPrintable(event) && !regexp.test(thisChar)) {
190 event.preventDefault(); 235 event.preventDefault();
236 this._announceInvalidCharacter('Invalid character ' + thisChar + ' not e ntered.');
191 } 237 }
192 }, 238 },
193 239
194 _checkPatternValidity: function() { 240 _checkPatternValidity: function() {
195 var regexp = this._patternRegExp; 241 var regexp = this._patternRegExp;
196 if (!regexp) { 242 if (!regexp) {
197 return true; 243 return true;
198 } 244 }
199 for (var i = 0; i < this.value.length; i++) { 245 for (var i = 0; i < this.value.length; i++) {
200 if (!regexp.test(this.value[i])) { 246 if (!regexp.test(this.value[i])) {
201 return false; 247 return false;
202 } 248 }
203 } 249 }
204 return true; 250 return true;
205 }, 251 },
206 252
207 /** 253 /**
208 * Returns true if `value` is valid. The validator provided in `validator` w ill be used first, 254 * Returns true if `value` is valid. The validator provided in `validator` w ill be used first,
209 * then any constraints. 255 * then any constraints.
210 * @return {boolean} True if the value is valid. 256 * @return {boolean} True if the value is valid.
211 */ 257 */
212 validate: function() { 258 validate: function() {
213 // Empty, non-required input is valid. 259 // First, check what the browser thinks. Some inputs (like type=number)
214 if (!this.required && this.value == '') { 260 // behave weirdly and will set the value to "" if something invalid is
215 this.invalid = false; 261 // entered, but will set the validity correctly.
216 return true; 262 var valid = this.checkValidity();
263
264 // Only do extra checking if the browser thought this was valid.
265 if (valid) {
266 // Empty, required input is invalid
267 if (this.required && this.value === '') {
268 valid = false;
269 } else if (this.hasValidator()) {
270 valid = Polymer.IronValidatableBehavior.validate.call(this, this.value );
271 }
217 } 272 }
218 273
219 var valid; 274 this.invalid = !valid;
220 if (this.hasValidator()) {
221 valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
222 } else {
223 valid = this.checkValidity();
224 this.invalid = !valid;
225 }
226 this.fire('iron-input-validate'); 275 this.fire('iron-input-validate');
227 return valid; 276 return valid;
277 },
278
279 _announceInvalidCharacter: function(message) {
280 this.fire('iron-announce', { text: message });
228 } 281 }
229
230 }); 282 });
231 283
232 /* 284 /*
233 The `iron-input-validate` event is fired whenever `validate()` is called. 285 The `iron-input-validate` event is fired whenever `validate()` is called.
234 @event iron-input-validate 286 @event iron-input-validate
235 */ 287 */
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698