send messages (no backend)

angel1st · Feb 10, 2016 · e31ce1b · e31ce1b
1 parent 061da22
commit e31ce1b
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 17 deletions.
diff --git a/src/app/components/chat/chat.directive.js b/src/app/components/chat/chat.directive.js
@@ -11,7 +11,8 @@
       restrict: 'E',
       templateUrl: 'app/components/chat/chat.html',
       controller: ChatController,
-      controllerAs: 'chat'
+      controllerAs: 'chat',
+      link: scrollOnNew
     };
 
     return directive;
@@ -23,8 +24,23 @@
       chat.messages = [];
       chat.avatar = faker.image.avatar();
       chat.name = faker.name.findName();
+      chat.user = {
+        name: faker.name.findName(),
+        avatar: faker.image.avatar()
+      };
+      chat.sendMessage = sendMessage;
       getMessages();
 
+      function sendMessage(){
+        chat.messages.push({
+          user: true,
+          text: chat.myMessage,
+          name: chat.user.name,
+          avatar: chat.user.avatar
+        });
+        chat.myMessage = "";
+      }
+
       function getMessages(){
         for(var i=0; i<15; i++)
           chat.messages.push({
@@ -33,6 +49,14 @@
             avatar: chat.avatar
           });
       }
+
+    }
+    function scrollOnNew(scope, element){
+      scope.$watchCollection('chat.messages', function() {
+        var $list = $(element).find('#chat-content');
+        var scrollHeight = $list.prop('scrollHeight');
+        $list.animate({scrollTop: scrollHeight}, 500);
+      });
     }
   }
 

diff --git a/src/app/components/chat/chat.html b/src/app/components/chat/chat.html
@@ -1,17 +1,25 @@
-<md-content style="background-color: #DCDCDC;">
-  <md-list>
-    <md-list-item ng-repeat="message in chat.messages" layout-margin>
-	    <div layout="column" layout-align="center center" class="md-caption">
-	      <img layout="row" style="margin: 0;" ng-src="{{message.avatar}}" class="md-avatar"></img>
-	      <div style="text-align: center; color: #5F5F5F;">
-		      {{message.name}}
+<div layout="row" flex>
+	<md-content style="background-color: #DCDCDC;" id="chat-content">
+	  <md-list>
+	    <md-list-item ng-repeat="message in chat.messages" layout-margin>
+		    <div flex-order="{{message.user ? 2 : 0}}" layout="column" layout-align="center center" class="md-caption">
+		      <img layout="row" style="margin: 0;" ng-src="{{message.avatar}}" class="md-avatar"></img>
+		      <div style="text-align: center; color: #5F5F5F;">
+			      {{message.name}}
+		      </div>
+		    </div>
+	      <div flex-order = "1"
+		      style="background-color: white; padding: 10px; border-radius: 5px;" 
+		      layout-fill>
+	      	{{message.text}}
 	      </div>
-	    </div>
-      <div layout-fill 
-	      style="background-color: white; padding: 10px; border-radius: 5px;" 
-	      layout-fill>
-      	{{message.text}}
-      </div>
-    </md-list-item>
-  </md-list>
-</md-content>
+	    </md-list-item>
+	  </md-list>
+	</md-content>
+</div>
+<form layout="row" style="margin-bottom: 20px; padding: 20px;" ng-submit="chat.sendMessage()">
+	<md-input-container flex layout-align="center" layout-fill>
+	  <label>What do you want to say?</label>
+	  <input type="text" ng-model="chat.myMessage"></input>
+	</md-input-container>
+</form>