fix(input): Use ion input instead of input to manage the keyboard.

The css is now based on Angular2 computed variables rather than position of element in the DOM Fixes #27
Toolwatchapp · Nov 2, 2016 · 71ae677 · 71ae677
1 parent 3e62315
commit 71ae677
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 69 deletions.
diff --git a/src/app/app.scss b/src/app/app.scss
@@ -17,4 +17,8 @@
 
 button, .button-md{
 	box-shadow: 0 0 0 0;
+}
+
+.text-input-ios, .text-input-android{
+	margin:0;
 }
diff --git a/src/components/mobile-input/mobile-input.html b/src/components/mobile-input/mobile-input.html
@@ -3,7 +3,7 @@
   [ngClass]="{ 'has-error' : !control.valid && submitAttempt }"
 >
 
-    <input #input_field
+    <ion-input #input_field
       *ngIf                 = "model === false"
       [attr.autocapitalize] = "autoCapitalize ? 'on' : 'off'"
       [attr.autocorrect]    = "autoCorrect ? 'on' : 'off'"
@@ -13,12 +13,15 @@
       id                    = "{{id}}" 
       type                  = "{{type}}" 
       [formControl]         = "control" 
-      (keyup)               = "valueChange.emit($event)"
-      [ngClass]             = "{'ng-not-empty': (input_field.value || 0 !== input_field.value.length)}"
+      (blur)                = "toggleFocus()" 
+      (focus)               = "toggleFocus()"
+      (keyup)               = "emitChange($event)"
     > 
+    </ion-input>
 
-    <input
+    <ion-input
       *ngIf                 = "model === true"
+      #input_field
       [attr.autocapitalize] = "autoCapitalize ? 'on' : 'off'"
       [attr.autocorrect]    = "autoCorrect ? 'on' : 'off'"
       [attr.autocomplete]   = "autoComplete ? 'on' : 'off'"
@@ -29,12 +32,22 @@
       [formControl]         = "control" 
       [(ngModel)]           = "value"
       (ngModelChange)       = "valueChange.emit($event);"
-      [ngClass]             = "{'ng-not-empty': (value== null || value || 0 !== value.length)}"
     > 
+    </ion-input>
 
-    <span class="highlight"></span>
-    <span class="bar"></span>
-    <label htmlFor="{{id}}">
+    <span 
+    [ngClass] = "{'ng-focus': isFocused}"
+    class="highlight">
+    </span>
+
+    <span class="bar"
+    [ngClass] = "{'ng-active': isFocused && control.valid, 'ng-active-invalid':  isActive() && !control.valid}"
+    >
+    </span>
+
+    <label 
+    [ngClass] = "{'ng-active': isActive()}"
+    htmlFor="{{id}}">
       {{ label | translate }}
     </label>
 

diff --git a/src/components/mobile-input/mobile-input.scss b/src/components/mobile-input/mobile-input.scss
@@ -1,125 +1,130 @@
 mobile-input{
 
+
+
 	input               {
-	  font-size:18px;
-	  padding:10px 10px 10px 5px;
-	  display:block;
-	  width:100%;
-	  border:none;
-	  border-bottom:1px solid #757575;
+	  font-size:18px !important;
+	  padding:10px 10px 10px 5px !important;
+	  display:block !important;
+	  width:100% !important;
+	  border:none !important;
+	  border-bottom:1px solid #757575 !important;
 	}
-	input:focus         { outline:none; }
+	input:focus         { outline:none !important; }
 
 	input.ng-invalid.ng-dirty.ng-not-empty{
-	  border-bottom:1px solid red;
+	  border-bottom:1px solid red !important;
 	}
 
 	/* LABEL ======================================= */
 	label    {
-	  color:#999; 
-	  font-size:18px;
-	  font-weight:normal;
-	  position:absolute;
-	  pointer-events:none;
-	  left:5px;
-	  top:10px;
-	  transition:0.2s ease all; 
-	  -moz-transition:0.2s ease all; 
-	  -webkit-transition:0.2s ease all;
+	  color:#999 !important; 
+	  font-size:18px !important;
+	  font-weight:normal !important;
+	  position:absolute !important;
+	  pointer-events:none !important;
+	  left:5px !important;
+	  top:10px !important;
+	  transition:0.2s ease all !important; 
+	  -moz-transition:0.2s ease all !important; 
+	  -webkit-transition:0.2s ease all !important;
 	}
 
+
+
 	/* active state */
-	input:focus ~ label, input.ng-dirty.ng-not-empty ~ label   {
-	  top:-20px;
-	  font-size:14px;
-	  color:#5264AE;
+	label.ng-active {
+	  top:-20px !important;
+	  font-size:14px !important;
+	  color:#5264AE !important;
 	}
 
 	/* BOTTOM BARS ================================= */
-	.bar    { position:relative; display:block; width:100%; }
+	.bar    { position:relative !important; display:block !important; width:100% !important; }
 	.bar:before, .bar:after     {
-	  content:'';
-	  height:2px; 
-	  width:0;
-	  bottom:1px; 
-	  position:absolute;
-	  background:#5264AE; 
-	  transition:0.2s ease all; 
-	  -moz-transition:0.2s ease all; 
-	  -webkit-transition:0.2s ease all;
+	  content:'' !important;
+	  height:2px !important; 
+	  width:0 !important;
+	  bottom:1px !important; 
+	  position:absolute !important;
+	  background:#5264AE !important; 
+	  transition:0.2s ease all !important; 
+	  -moz-transition:0.2s ease all !important; 
+	  -webkit-transition:0.2s ease all !important;
 	}
 	.bar:before {
-	  left:50%;
+	  left:50% !important;
 	}
 	.bar:after {
-	  right:50%; 
+	  right:50% !important; 
 	}
 
 	/* active state */
-	input:focus ~ .bar:before, input:focus ~ .bar:after {
-	  width:50%;
+	.bar.ng-active:before, .bar.ng-active:after {
+	  width:50% !important;
 	}
 
-	input.ng-invalid.ng-dirty ~ .bar:before, input.ng-invalid.ng-dirty ~ .bar:after {
-		background:red;
+	.bar.ng-active-invalid:before, .bar.ng-active-invalid:after {
+		background:red !important;
+		width:50% !important;
 	}
 
 
 	/* HIGHLIGHTER ================================== */
 	.highlight {
-	  position:absolute;
-	  height:60%; 
-	  width:100px; 
-	  top:25%; 
-	  left:0;
-	  pointer-events:none;
-	  opacity:0.5;
+	  position:absolute !important;
+	  height:60% !important; 
+	  width:100px !important; 
+	  top:25% !important; 
+	  left:0 !important;
+	  pointer-events:none !important;
+	  opacity:0.5 !important;
 	}
 
 	/* active state */
-	input:focus ~ .highlight {
-	  animation:inputHighlighter 0.3s ease;
+	.highlight.ng-focus {
+	  animation:inputHighlighter 0.3s ease !important;
 	}
 
 
 	@keyframes inputHighlighter {
-	    from { background:#4d77a7; }
-	  to    { width:0; background:transparent; }
+	    from { background:#4d77a7 !important; }
+	  to    { width:0 !important; background:transparent !important; }
 	}
 
 	.has-error{
-		animation:shake 0.5s ease;
+		animation:shake 0.5s ease !important;
 	}
 
 	@keyframes shake {
 	    8%, 41% {
-	        transform: translateX(-10px);
+	        transform: translateX(-10px) !important;
 	    }
 	    25%, 58% {
-	        transform: translateX(10px);
+	        transform: translateX(10px) !important;
 	    }
 	    75% {
-	        transform: translateX(-5px);
+	        transform: translateX(-5px) !important;
 	    }
 	    92% {
-	        transform: translateX(5px);
+	        transform: translateX(5px) !important;
 	    }
 	    0%, 100% {
-	        transform: translateX(0);
+	        transform: translateX(0) !important;
 	    }
 	}
 
 
 	.form-group{
-		margin-bottom: 10px;
-		width: 80%;
-		margin-left: 10%;
+		margin-bottom: 10px !important;
+		width: 80% !important;
+		margin-left: 10% !important;
 		button{
-			width: 100%;
+			width: 100% !important;
 		}
 	}
 
 	em{
-		position:absolute;
+		position:absolute !important;
 	}
 }
diff --git a/src/components/mobile-input/mobile-input.ts b/src/components/mobile-input/mobile-input.ts
@@ -1,4 +1,4 @@
-import { Component, Input, EventEmitter, Output  } from '@angular/core';
+import { Component, Input, EventEmitter, Output } from '@angular/core';
 import {   
   FormControl
 } from '@angular/forms';
@@ -46,6 +46,9 @@ export class MobileInput {
 	@Output()
 	valueChange = new EventEmitter();
 
+	isFocused = false;
+
+
 	constructor() {
 
 	}
@@ -74,4 +77,19 @@ export class MobileInput {
 	    }
 	}
 
+	toggleFocus():void{
+		this.isFocused = !this.isFocused;
+	}
+
+	emitChange(event):void{
+		this.value = event.target.value;
+		this.valueChange.emit(event);
+	}
+
+	isActive():boolean{
+		return this.isFocused || (this.value != null && this.value.length != 0); 
+	}
+
+
+
 }