feat(itemFloatingLabel): add floating labels: 'item-floating-label' c…

…lass

Closes #1611

js/angular/directive/itemFloatingLabel.js

@@ -0,0 +1,40 @@
+
+IonicModule
+.directive('itemFloatingLabel', function() {
+  return {
+    restrict: 'C',
+    link: function(scope, element) {
+      var el = element[0];
+      var input = el.querySelector('input, textarea');
+      var inputLabel = el.querySelector('.input-label');
+
+      if ( !input || !inputLabel ) return;
+
+      var onInput = function() {
+        var hasInput = inputLabel.classList.contains('has-input');
+        if ( input.value && !hasInput ) {
+          inputLabel.classList.add('has-input');
+        }
+        else if ( !input.value && hasInput ) {
+          inputLabel.classList.remove('has-input');
+        }
+      };
+
+      input.addEventListener('input', onInput);
+
+      var ngModelCtrl = angular.element(input).controller('ngModel');
+      if ( ngModelCtrl ) {
+        ngModelCtrl.$render = function() {
+          input.value = ngModelCtrl.$viewValue || '';
+          if ( ngModelCtrl.$viewValue ) input.value = ngModelCtrl.$viewValue;
+          else input.value = '';
+          onInput();
+        };
+      }
+
+      scope.$on('$destroy', function() {
+        input.removeEventListener('input', onInput);
+      });
+    }
+  };
+});

scss/_form.scss

@@ -155,6 +155,26 @@ textarea {
   height: $line-height-computed + $font-size-base + 12px;
 }
 
+.item-floating-label {
+  display: block;
+  background-color: transparent;
+  box-shadow: none;
+
+  .input-label {
+    position: relative;
+    padding: 5px 0 0 0;
+    opacity: 0;
+    top: 10px;
+    @include transition(opacity .2s ease-in, top .2s linear);
+
+    &.has-input {
+      opacity: 1;
+      top: 0;
+      @include transition(opacity .2s ease-in, top .2s linear);
+    }
+  }
+}
+
 
 // Form Controls
 // -------------------------------