Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
ensure the floating label animation is set up
Browse files Browse the repository at this point in the history
  • Loading branch information
Yvonne Yip committed Jul 11, 2014
1 parent 7e31331 commit 9a05fab
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 5 deletions.
2 changes: 1 addition & 1 deletion demo2.html
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ <h1>&lt;paper-input&gt;</h1>
<paper-input floatingLabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"></paper-input>
</div>
<div class="container">
<paper-input multiline label="Type multiple lines here..."></paper-input>
<paper-input multiline style="display:none;" label="Type multiple lines here..."></paper-input>
</div>
<div class="container">
<paper-input multiline rows="3" label="This input is 3 rows high"></paper-input>
Expand Down
21 changes: 17 additions & 4 deletions paper-input.html
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,15 @@
this.$.underlineContainer.style.top = height + 'px';
},

prepareLabelTransform: function() {
var toRect = this.$.floatedLabelSpan.getBoundingClientRect();
var fromRect = this.$.labelSpan.getBoundingClientRect();
if (toRect.width !== 0) {
this.$.label.cachedTransform = 'scale(' + (toRect.width / fromRect.width) + ') ' +
'translateY(' + (toRect.bottom - fromRect.bottom) + 'px)';
}
},

rowsChanged: function() {
if (this.multiline && !isNaN(parseInt(this.rows))) {
this.$.minInputHeight.innerHTML = '';
Expand Down Expand Up @@ -212,10 +221,11 @@

labelChanged: function() {
if (this.floatingLabel && this.$.floatedLabel && this.$.label) {
var toRect = this.$.floatedLabelSpan.getBoundingClientRect();
var fromRect = this.$.labelSpan.getBoundingClientRect();
this.$.label.cachedTransform = 'scale(' + (toRect.width / fromRect.width) + ') ' +
'translateY(' + (toRect.bottom - fromRect.bottom) + 'px)'
// If the element is created programmatically, labelChanged is called before
// binding. Run the measuring code in async so the DOM is ready.
this.async(function() {
this.prepareLabelTransform();
});
}
},

Expand Down Expand Up @@ -330,6 +340,9 @@
if (this.floatingLabel) {
this.$.label.classList.add('focusedColor');
this.$.label.classList.add('animating');
if (!this.$.label.cachedTransform) {
this.prepareLabelTransform();
}
this.$.label.style.webkitTransform = this.$.label.cachedTransform;
this.$.label.style.transform = this.$.label.cachedTransform;
}
Expand Down

0 comments on commit 9a05fab

Please sign in to comment.