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

Unified Diff: third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container-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, 7 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 side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container-extracted.js
diff --git a/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container-extracted.js b/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container-extracted.js
index 3d4abb4296a5b1d634836122c6582cdbd91de649..3b30b2cc5e100df0df99cdffda81ff67c431c592 100644
--- a/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container-extracted.js
+++ b/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container-extracted.js
@@ -5,12 +5,11 @@
is: 'paper-input-container',
- enableCustomStyleProperties: true,
-
properties: {
/**
- * Set to true to disable the floating label.
+ * Set to true to disable the floating label. The label disappears when the input value is
+ * not null.
*/
noLabelFloat: {
type: Boolean,
@@ -18,6 +17,14 @@
},
/**
+ * Set to true to always float the floating label.
+ */
+ alwaysFloatLabel: {
+ type: Boolean,
+ value: false
+ },
+
+ /**
* The attribute to listen for value changes on.
*/
attrForValue: {
@@ -26,7 +33,7 @@
},
/**
- * Set to true to auto-validate the input value.
+ * Set to true to auto-validate the input value when it changes.
*/
autoValidate: {
type: Boolean,
@@ -34,6 +41,16 @@
},
/**
+ * True if the input is invalid. This property is set automatically when the input value
+ * changes if auto-validating, or when the `iron-input-valid` event is heard from a child.
+ */
+ invalid: {
+ observer: '_invalidChanged',
+ type: Boolean,
+ value: false
+ },
+
+ /**
* True if the input has focus.
*/
focused: {
@@ -54,11 +71,6 @@
value: false
},
- _inputIsInvalid: {
- type: Boolean,
- value: false
- },
-
_inputSelector: {
type: String,
value: 'input,textarea,.paper-input-input'
@@ -78,6 +90,13 @@
}
},
+ _boundOnInput: {
+ type: Function,
+ value: function() {
+ this._onInput.bind(this)
+ }
+ },
+
_boundValueChanged: {
type: Function,
value: function() {
@@ -89,7 +108,7 @@
listeners: {
'addon-attached': '_onAddonAttached',
- 'input': '_onInput'
+ 'iron-input-validate': '_onIronInputValidate'
},
get _valueChangedEvent() {
@@ -107,16 +126,20 @@
ready: function() {
this.addEventListener('focus', this._boundOnFocus, true);
this.addEventListener('blur', this._boundOnBlur, true);
- this.addEventListener(this._valueChangedEvent, this._boundValueChanged, true);
+ if (this.attrForValue) {
+ this._inputElement.addEventListener(this._valueChangedEvent, this._boundValueChanged);
+ } else {
+ this.addEventListener('input', this._onInput);
+ }
},
attached: function() {
- this._handleInput(this._inputElement);
+ this._handleValue(this._inputElement);
},
_onAddonAttached: function(event) {
this._addons.push(event.target);
- this._handleInput(this._inputElement);
+ this._handleValue(this._inputElement);
},
_onFocus: function() {
@@ -128,43 +151,66 @@
},
_onInput: function(event) {
- this._handleInput(event.target);
+ this._handleValue(event.target);
},
_onValueChanged: function(event) {
- this._handleInput(event.target);
+ this._handleValue(event.target);
},
- _handleInput: function(inputElement) {
+ _handleValue: function(inputElement) {
var value = inputElement[this._propertyForValue] || inputElement.value;
- var valid = inputElement.checkValidity();
+
+ if (this.autoValidate) {
+ var valid;
+ if (inputElement.validate) {
+ valid = inputElement.validate(value);
+ } else {
+ valid = inputElement.checkValidity();
+ }
+ this.invalid = !valid;
+ }
// type="number" hack needed because this.value is empty until it's valid
- if (value || inputElement.type === 'number' && !valid) {
+ if (value || (inputElement.type === 'number' && !inputElement.checkValidity())) {
this._inputHasContent = true;
} else {
this._inputHasContent = false;
}
- if (this.autoValidate) {
- this._inputIsInvalid = !valid;
+ this.updateAddons({
+ inputElement: inputElement,
+ value: value,
+ invalid: this.invalid
+ });
+ },
+
+ _onIronInputValidate: function(event) {
+ this.invalid = this._inputElement.invalid;
+ },
+
+ _invalidChanged: function() {
+ if (this._addons) {
+ this.updateAddons({invalid: this.invalid});
}
+ },
- // notify add-ons
- for (var addon, i = 0; addon = this._addons[i]; i++) {
- // need to set all of these, or call method... thanks input type="number"!
- addon.inputElement = inputElement;
- addon.value = value;
- addon.invalid = !valid;
+ /**
+ * Call this to update the state of add-ons.
+ * @param {Object} state Add-on state.
+ */
+ updateAddons: function(state) {
+ for (var addon, index = 0; addon = this._addons[index]; index++) {
+ addon.update(state);
}
},
- _computeInputContentClass: function(noLabelFloat, focused, _inputHasContent, _inputIsInvalid) {
+ _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
var cls = 'input-content';
if (!noLabelFloat) {
- if (_inputHasContent) {
+ if (alwaysFloatLabel || _inputHasContent) {
cls += ' label-is-floating';
- if (_inputIsInvalid) {
+ if (invalid) {
cls += ' is-invalid';
} else if (focused) {
cls += " label-is-highlighted";
@@ -178,9 +224,9 @@
return cls;
},
- _computeUnderlineClass: function(focused, _inputIsInvalid) {
+ _computeUnderlineClass: function(focused, invalid) {
var cls = 'underline';
- if (_inputIsInvalid) {
+ if (invalid) {
cls += ' is-invalid';
} else if (focused) {
cls += ' is-highlighted'
@@ -188,9 +234,9 @@
return cls;
},
- _computeAddOnContentClass: function(focused, _inputIsInvalid) {
+ _computeAddOnContentClass: function(focused, invalid) {
var cls = 'add-on-content';
- if (_inputIsInvalid) {
+ if (invalid) {
cls += ' is-invalid';
} else if (focused) {
cls += ' is-highlighted'

Powered by Google App Engine
This is Rietveld 408576698