From d39b2be4109cf0bb1730e3ab0257950000f77625 Mon Sep 17 00:00:00 2001
From: Tim Lancina <tim@drifty.com>
Date: Thu, 12 Jun 2014 12:20:47 -0500
Subject: [PATCH 1/2] feat(itemFloatingLabel): Added support for floating
labels
---
.../templates/api_menu_version.template.html | 6 +++
js/angular/directive/itemFloatingLabel.js | 46 +++++++++++++++++++
scss/_form.scss | 20 ++++++++
3 files changed, 72 insertions(+)
create mode 100644 js/angular/directive/itemFloatingLabel.js
diff --git a/config/docs/templates/api_menu_version.template.html b/config/docs/templates/api_menu_version.template.html
index cd54afe6c53..f91ec29b360 100644
--- a/config/docs/templates/api_menu_version.template.html
+++ b/config/docs/templates/api_menu_version.template.html
@@ -272,6 +272,12 @@
</a>
</li>
+ <li>
+ <a href="{{ page.versionHref }}/api/directive/itemFloatingLabel/">
+ item-floating-label
+ </a>
+ </li>
+
</ul>
</li>
diff --git a/js/angular/directive/itemFloatingLabel.js b/js/angular/directive/itemFloatingLabel.js
new file mode 100644
index 00000000000..531f6776c13
--- /dev/null
+++ b/js/angular/directive/itemFloatingLabel.js
@@ -0,0 +1,46 @@
+/**
+ * @ngdoc directive
+ * @name itemFloatingLabel
+ * @module ionic
+ * @restrict C
+ * @description
+ * The floating label directive is a class directive that is used just like [item-stacked-label](http://ionicframework.com/docs/components/#forms-stacked-labels).
+ *
+ *
+ * @usage
+ * ```html
+ * <label class="item item-input item-floating-label">
+ * <span class="input-label">First Name</span>
+ * <input type="text" placeholder="First Name">
+ * </label>
+ * ```
+ */
+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 onKeyUp = 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('keyup', onKeyUp);
+
+ scope.$on('$destroy', function() {
+ input.removeEventListener('keyup', onKeyUp);
+ });
+ }
+ }
+})
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
// -------------------------------
From f1df9f067d4e935aa9cb1a2a5abf2acd6ba79dd5 Mon Sep 17 00:00:00 2001
From: Tim Lancina <tim@drifty.com>
Date: Thu, 12 Jun 2014 15:05:15 -0500
Subject: [PATCH 2/2] watch for ng-model changes, use input event
---
.../templates/api_menu_version.template.html | 6 ----
js/angular/directive/itemFloatingLabel.js | 35 ++++++++-----------
2 files changed, 14 insertions(+), 27 deletions(-)
diff --git a/config/docs/templates/api_menu_version.template.html b/config/docs/templates/api_menu_version.template.html
index f91ec29b360..cd54afe6c53 100644
--- a/config/docs/templates/api_menu_version.template.html
+++ b/config/docs/templates/api_menu_version.template.html
@@ -272,12 +272,6 @@
</a>
</li>
- <li>
- <a href="{{ page.versionHref }}/api/directive/itemFloatingLabel/">
- item-floating-label
- </a>
- </li>
-
</ul>
</li>
diff --git a/js/angular/directive/itemFloatingLabel.js b/js/angular/directive/itemFloatingLabel.js
index 531f6776c13..994e8221a00 100644
--- a/js/angular/directive/itemFloatingLabel.js
+++ b/js/angular/directive/itemFloatingLabel.js
@@ -1,32 +1,16 @@
-/**
- * @ngdoc directive
- * @name itemFloatingLabel
- * @module ionic
- * @restrict C
- * @description
- * The floating label directive is a class directive that is used just like [item-stacked-label](http://ionicframework.com/docs/components/#forms-stacked-labels).
- *
- *
- * @usage
- * ```html
- * <label class="item item-input item-floating-label">
- * <span class="input-label">First Name</span>
- * <input type="text" placeholder="First Name">
- * </label>
- * ```
- */
+
IonicModule
.directive('itemFloatingLabel', function() {
return {
restrict: 'C',
link: function(scope, element) {
var el = element[0];
- var input = el.querySelector('input,textarea');
+ var input = el.querySelector('input, textarea');
var inputLabel = el.querySelector('.input-label');
if ( !input || !inputLabel ) return;
- var onKeyUp = function() {
+ var onInput = function() {
var hasInput = inputLabel.classList.contains('has-input');
if ( input.value !== '' && !hasInput ) {
inputLabel.classList.add('has-input');
@@ -36,10 +20,19 @@ IonicModule
};
}
- input.addEventListener('keyup', onKeyUp);
+ input.addEventListener('input', onInput);
+
+ var ngModelCtrl = angular.element(input).controller('ngModel');
+ if ( ngModelCtrl ) {
+ ngModelCtrl.$render = function() {
+ if ( ngModelCtrl.$viewValue ) input.value = ngModelCtrl.$viewValue;
+ else input.value = '';
+ onInput();
+ }
+ }
scope.$on('$destroy', function() {
- input.removeEventListener('keyup', onKeyUp);
+ input.removeEventListener('input', onInput);
});
}
}