diff --git a/js/angular/directive/itemFloatingLabel.js b/js/angular/directive/itemFloatingLabel.js new file mode 100644 index 0000000000..a4a0cd4d84 --- /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 0b35e87b1f..1a42fe7b8b 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 // -------------------------------