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

Unified Diff: polymer_0.5.4/bower_components/paper-input/paper-input-decorator.html

Issue 895523005: Added Polymer 0.5.4 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 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: polymer_0.5.4/bower_components/paper-input/paper-input-decorator.html
diff --git a/polymer_0.5.0/bower_components/paper-input/paper-input-decorator.html b/polymer_0.5.4/bower_components/paper-input/paper-input-decorator.html
similarity index 87%
copy from polymer_0.5.0/bower_components/paper-input/paper-input-decorator.html
copy to polymer_0.5.4/bower_components/paper-input/paper-input-decorator.html
index 6a9f954fbe1ba449bafacfe7ab5d0074ee97f9a2..1f974a128d1254210db19134f86b28294763b087 100644
--- a/polymer_0.5.0/bower_components/paper-input/paper-input-decorator.html
+++ b/polymer_0.5.4/bower_components/paper-input/paper-input-decorator.html
@@ -175,7 +175,8 @@ conflict with this element.
<polymer-element name="paper-input-decorator" layout vertical
on-transitionEnd="{{transitionEndAction}}" on-webkitTransitionEnd="{{transitionEndAction}}"
on-input="{{inputAction}}"
- on-down="{{downAction}}">
+ on-down="{{downAction}}"
+ on-tap="{{tapAction}}">
<template>
@@ -200,7 +201,7 @@ conflict with this element.
<div id="underline" class="underline" relative>
<div class="unfocused-underline" fit invisible?="{{disabled}}"></div>
- <div id="focusedUnderline" class="focused-underline" fit invisible?="{{!focused}}" animated?="{{underlineAnimated}}"></div>
+ <div id="focusedUnderline" class="focused-underline" fit invisible?="{{!underlineVisible}}" animated?="{{underlineAnimated}}"></div>
</div>
<div class="error" layout horizontal center hidden?="{{!isInvalid}}">
@@ -275,6 +276,17 @@ conflict with this element.
isInvalid: false,
/**
+ * Set this property to true to validate the input as the user types.
+ * This will not validate when changing the input programmatically; call
+ * `validate()` instead.
+ *
+ * @attribute autoValidate
+ * @type boolean
+ * @default false
+ */
+ autoValidate: false,
+
+ /**
* The message to display if the input value fails validation. If this
* is unset or the empty string, a default message is displayed depending
* on the type of validation error.
@@ -363,6 +375,30 @@ conflict with this element.
return true;
},
+ animateUnderline: function(e) {
+ if (this.focused) {
+ var rect = this.$.underline.getBoundingClientRect();
+ var right = e.x - rect.left;
+ this.$.focusedUnderline.style.mozTransformOrigin = right + 'px';
+ this.$.focusedUnderline.style.webkitTransformOrigin = right + 'px ';
+ this.$.focusedUnderline.style.transformOriginX = right + 'px';
+
+ // Animations only run when the user interacts with the input
+ this.underlineAnimated = true;
+ }
+ },
+
+ /**
+ * Validate the input using HTML5 Constraints.
+ *
+ * @method validate
+ * @return {boolean} True if the input is valid.
+ */
+ validate: function() {
+ this.isInvalid = !this.input.validity.valid;
+ return this.input.validity.valid;
+ },
+
_labelVisibleChanged: function(old) {
// do not do the animation on first render
if (old !== undefined) {
@@ -392,12 +428,21 @@ conflict with this element.
focusedChanged: function() {
this.updateLabelVisibility(this.input && this.input.value);
+ if (this.lastEvent) {
+ this.animateUnderline(this.lastEvent);
+ this.lastEvent = null;
+ }
+ this.underlineVisible = this.focused;
},
inputChanged: function(old) {
if (this.input) {
this.updateLabelVisibility(this.input.value);
this.updateInputLabel(this.input, this.label);
+
+ if (this.autoValidate) {
+ this.validate();
+ }
}
if (old) {
this.updateInputLabel(old, '');
@@ -408,7 +453,7 @@ conflict with this element.
this.focused = true;
},
- blurAction: function(e) {
+ blurAction: function() {
this.focused = false;
},
@@ -438,11 +483,25 @@ conflict with this element.
}
},
- inputAction: function(e) {
- this.updateLabelVisibility(e.target.value);
+ inputAction: function() {
+ this.updateLabelVisibility(this.input.value);
+ if (this.autoValidate) {
+ this.validate();
+ }
},
downAction: function(e) {
+ // eat the event and do nothing if already focused
+ if (e.target !== this.input && this.focused) {
+ e.preventDefault();
+ return;
+ }
+ // cache the event here because "down" fires before "focus" when tapping on
+ // the input and the underline animation runs on focus change
+ this.lastEvent = e;
+ },
+
+ tapAction: function(e) {
if (this.disabled) {
return;
}
@@ -455,21 +514,6 @@ conflict with this element.
this.input.focus();
e.preventDefault();
}
-
- // The underline spills from the tap location
- var rect = this.$.underline.getBoundingClientRect();
- var right = e.x - rect.left;
- this.$.focusedUnderline.style.mozTransformOrigin = right + 'px';
- this.$.focusedUnderline.style.webkitTransformOrigin = right + 'px ';
- this.$.focusedUnderline.style.transformOriginX = right + 'px';
-
- // Animations only run when the user interacts with the input
- this.underlineAnimated = true;
-
- // Handle interrupted animation
- this.async(function() {
- this.transitionEndAction();
- }, null, 250);
},
transitionEndAction: function() {

Powered by Google App Engine
This is Rietveld 408576698