From 050b4f25dffc8c78a654c85345dd687f99084141 Mon Sep 17 00:00:00 2001
From: Tim Lancina <tim@drifty.com>
Date: Thu, 12 Jun 2014 12:20:47 -0500
Subject: [PATCH] feat(itemFloatingLabel): add floating labels:
 'item-floating-label' class

Closes #1611
---
 js/angular/directive/itemFloatingLabel.js | 40 +++++++++++++++++++++++
 scss/_form.scss                           | 20 ++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 js/angular/directive/itemFloatingLabel.js

diff --git a/js/angular/directive/itemFloatingLabel.js b/js/angular/directive/itemFloatingLabel.js
new file mode 100644
index 00000000000..a4a0cd4d840
--- /dev/null
+++ b/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);
+      });
+    }
+  };
+});
diff --git a/scss/_form.scss b/scss/_form.scss
index 0b35e87b1fa..1a42fe7b8b0 100644
--- a/scss/_form.scss
+++ b/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
 // -------------------------------