implemented elastic textarea

smukov · Jun 29, 2016 · 28aea16 · 28aea16
1 parent 3da81aa
commit 28aea16
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/Ionic/app/pages/chatPage/chatPage.html b/Ionic/app/pages/chatPage/chatPage.html
@@ -13,18 +13,18 @@
     </ion-item>
   </ion-list>
 
-
-
 </ion-content>
 
 <ion-footer class="chatPageFooter">
   <ion-toolbar>
+
     <ion-item>
-      <ion-textarea rows="3"
-        placeholder="Type to compose"
-        ></ion-textarea>
-      <!--elastic-textarea placeholder="Type to compose"></elastic-textarea-->
+      <ion-label style="margin:0px;"></ion-label>
+      <div item-content style="width:100%;">
+        <elastic-textarea placeholder="Type to compose" lineHeight="22"></elastic-textarea>
+      </div>
     </ion-item>
+
     <ion-buttons right>
       <button style="min-width:45px;">
         <ion-icon name="send"></ion-icon>

diff --git a/Ionic/app/pages/components/elasticTextarea.js b/Ionic/app/pages/components/elasticTextarea.js
@@ -2,33 +2,31 @@ import {Component, ViewChild} from '@angular/core';
 
 @Component({
   selector: 'elastic-textarea',
-  inputs: ['placeholder'],
+  inputs: ['placeholder', 'lineHeight'],
   template:
   `
-  <textarea #txtArea cols='1'
+  <ion-textarea #ionTxtArea
     placeholder='{{placeholder}}'
-    (keyup)='expandText()'
-    (keydown)='expandText();'
     [(ngModel)]="content"
-    (ngModelChange)='onChange($event)'></textarea>
+    (ngModelChange)='onChange($event)'></ion-textarea>
   `,
   queries: {
-    txtArea: new ViewChild('txtArea')
+    ionTxtArea: new ViewChild('ionTxtArea')
   }
 })
 export class ElasticTextarea {
   constructor() {
     this.content = "";
+    this.lineHeight = "22px";
   }
 
-  onChange(newValue){
-    console.log('new value');
-    console.log(newValue);
+  ngAfterViewInit(){
+    this.txtArea = this.ionTxtArea._elementRef.nativeElement.children[0];
+    this.txtArea.style.height = this.lineHeight + "px";
   }
 
-  expandText(){
-    console.log('expand textarea');
-    this.txtArea.nativeElement.style.height = "33px";
-    this.txtArea.nativeElement.style.height =  this.txtArea.nativeElement.scrollHeight + "px";
+  onChange(newValue){
+    this.txtArea.style.height = this.lineHeight + "px";
+    this.txtArea.style.height =  this.txtArea.scrollHeight + "px";
   }
 }
diff --git a/Ionic/app/pages/loginPage/loginPage.js b/Ionic/app/pages/loginPage/loginPage.js
@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
 import {NavController} from 'ionic-angular';
 import {ProfilePage} from '../profilePage/profilePage';
+import {ContactPage} from '../contactPage/contactPage';
 
 
 @Component({
@@ -18,6 +19,7 @@ export class LoginPage {
   }
 
   login(){
-    this.nav.setRoot(ProfilePage);
+    //TODO just for testing
+    this.nav.setRoot(ContactPage);//ProfilePage);
   }
 }