Scroll when adding a message. Track last read timestamp.

dstrus · May 11, 2016 · e774078 · e774078
1 parent 5082c9a
commit e774078
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 48 deletions.
diff --git a/app/app.js b/app/app.js
@@ -13,6 +13,7 @@ angular
     'firebase',
     'angular-md5',
     'angularResizable',
+    'angular-inview',
     'ui.router'
   ])
   .config(function ($stateProvider, $urlRouterProvider) {
@@ -140,6 +141,9 @@ angular
           }],
           channelName: ["$stateParams", "channels", function($stateParams, channels) {
             return "#" + channels.$getRecord($stateParams.channelId).name;
+          }],
+          channelId: ["$stateParams", "channels", function($stateParams, channels) {
+            return $stateParams.channelId;
           }]
         }
       })
@@ -157,10 +161,30 @@ angular
               .then(function() {
                 return "@" + Users.getDisplayName($stateParams.uid);
               });
+          }],
+          channelId: ["$stateParams", "channels", function($stateParams, channels) {
+            return $stateParams.uid;
           }]
         }
       });
 
     $urlRouterProvider.otherwise('/');
   })
-  .constant('FirebaseUrl', 'https://des-ngslack.firebaseio.com/');
+  .constant('FirebaseUrl', 'https://des-ngslack.firebaseio.com/')
+  .directive('scrollBottom', ['$timeout', function ($timeout) {
+    // See http://stackoverflow.com/a/32482823 
+    return {
+      scope: {
+        scrollBottom: "="
+      },
+      link: function ($scope, $element) {
+        $scope.$watchCollection('scrollBottom', function (newValue) {
+          if (newValue) {
+            $timeout(function(){
+              $element.scrollTop($element[0].scrollHeight);
+            }, 0);
+          }
+        });
+      }
+    }
+  }]);
diff --git a/app/channels/channels.html b/app/channels/channels.html
@@ -54,7 +54,6 @@ <h2>
     </footer>
   </aside>
 
-  <article>
-    <ui-view></ui-view>
-  </article>
+
+  <ui-view></ui-view>
 </main>
diff --git a/app/channels/messages.controller.js b/app/channels/messages.controller.js
@@ -1,21 +1,42 @@
 angular.module("angularfireSlackApp")
   .controller(
     "MessagesCtrl",
-    ["profile", "channelName", "messages",
-    function(profile, channelName, messages) {
+    ["$firebaseArray", "profile", "channelName", "channelId", "messages",
+    function($firebaseArray, profile, channelName, channelId, messages) {
       var messagesCtrl = this;
       messagesCtrl.messages = messages;
       messagesCtrl.channelName = channelName;
+      messagesCtrl.channelId = channelId;
 
       messagesCtrl.message = "";
 
+      messagesCtrl.markAsRead = function($index, $inview, $inviewpart, $event) {
+        var domId = $event.inViewTarget.id
+        var messageId = domId.substr(domId.indexOf("_") + 1);
+        var timestamp = messages.$getRecord(messageId).timestamp;
+        messagesCtrl.updateLastReadTimestamp(timestamp);
+      };
+
+      messagesCtrl.updateLastReadTimestamp = function(timestamp) {
+        if (!profile.channels) {
+          profile.channels = {};
+        }
+
+        if (!profile.channels[messagesCtrl.channelId] || profile.channels[messagesCtrl.channelId].lastReadTimestamp < timestamp) {
+          profile.channels[messagesCtrl.channelId] = { lastReadTimestamp: timestamp };
+          profile.$save();
+        }
+      };
+
       messagesCtrl.sendMessage = function() {
         if (messagesCtrl.message.length > 0) {
           messagesCtrl.messages.$add({
             uid: profile.$id,
             body: messagesCtrl.message,
             timestamp: Firebase.ServerValue.TIMESTAMP
-          }).then(function() {
+          }).then(function(result) {
+            var messageData = messagesCtrl.messages.$getRecord(result.key());
+            messagesCtrl.updateLastReadTimestamp(messageData.timestamp);
             messagesCtrl.message = "";
           });
         }

diff --git a/app/channels/messages.html b/app/channels/messages.html
@@ -1,44 +1,49 @@
-<header>
-  <h1>
-    <span>{{ messagesCtrl.channelName }}</span>
-    <img
-      ng-repeat="user in channelsCtrl.users"
-      class="user-pic"
-      ng-class="{ online: user.online }"
-      alt="{{ user.displayName }}"
-      ng-src="{{ channelsCtrl.getGravatar(user.$id) }}" />
-  </h1>
-</header>
+<article scroll-bottom="messagesCtrl.messages">
+  <header>
+    <h1>
+      <span>{{ messagesCtrl.channelName }}</span>
+      <img
+        ng-repeat="user in channelsCtrl.users"
+        class="user-pic"
+        ng-class="{ online: user.online }"
+        alt="{{ user.displayName }}"
+        ng-src="{{ channelsCtrl.getGravatar(user.$id) }}" />
+    </h1>
+  </header>
 
-<ul>
-  <li ng-repeat="message in messagesCtrl.messages">
-    <img
-      class="user-pic"
-      alt="{{ channelsCtrl.getDisplayName(message.uid) }}"
-      ng-src="{{ channelsCtrl.getGravatar(message.uid) }}" />
+  <ul in-view-container>
+    <li
+      id="message_{{ message.$id }}"
+      ng-repeat="message in messagesCtrl.messages"
+      in-view="$inview&&messagesCtrl.markAsRead($index, $inview, $inviewpart, $event)">
+      <img
+        class="user-pic"
+        alt="{{ channelsCtrl.getDisplayName(message.uid) }}"
+        ng-src="{{ channelsCtrl.getGravatar(message.uid) }}" />
 
-    <div class="message-info">
-      <div class="user-name">
-        {{ channelsCtrl.getDisplayName(message.uid) }}
-        <span class="timestamp">{{ message.timestamp | date: "short" }}</span>
-      </div>
+      <div class="message-info">
+        <div class="user-name">
+          {{ channelsCtrl.getDisplayName(message.uid) }}
+          <span class="timestamp">{{ message.timestamp | date: "short" }}</span>
+        </div>
 
-      <div class="message">
-        {{ message.body }}
+        <div class="message">
+          {{ message.body }}
+        </div>
       </div>
-    </div>
-  </li>
-</ul>
+    </li>
+  </ul>
 
-<form id="new-message" ng-submit="messagesCtrl.sendMessage()">
-  <p class="input-group">
-    <input
-      type="text"
-      class="form-control"
-      placeholder="Type a message..."
-      ng-model="messagesCtrl.message">
-    <span class="input-group-btn">
-      <button type="submit" class="btn btn-default">Send</button>
-    </span>
-  </p>
-</form>
+  <form id="new-message" ng-submit="messagesCtrl.sendMessage()">
+    <p class="input-group">
+      <input
+        type="text"
+        class="form-control"
+        placeholder="Type a message..."
+        ng-model="messagesCtrl.message">
+      <span class="input-group-btn">
+        <button type="submit" class="btn btn-default">Send</button>
+      </span>
+    </p>
+  </form>
+</article>
diff --git a/app/index.html b/app/index.html
@@ -45,6 +45,7 @@
     <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
     <script src="bower_components/angular-md5/angular-md5.js"></script>
     <script src="bower_components/angular-resizable/src/angular-resizable.js"></script>
+    <script src="bower_components/angular-inview/angular-inview.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 

diff --git a/app/styles/main.css b/app/styles/main.css
@@ -153,7 +153,7 @@ article {
   vertical-align: top;
   height:100%;
   overflow-y:scroll;
-  padding:55px 0 65px 0;
+  padding:55px 0 70px 0;
 }
 
 /*@media only screen and (max-width: 893px) {
@@ -166,6 +166,7 @@ article {
 }*/
 
 article header {
+  background: #f1f5f8;
   border-bottom: 2px solid white;
   padding: 0 15px;
   position:fixed;
@@ -202,6 +203,7 @@ article header .user-pic.online {
 }
 
 article form#new-message {
+  background: #f1f5f8;
   position:fixed;
   border-top: 2px solid white;
   bottom:0;

diff --git a/bower.json b/bower.json
@@ -7,7 +7,8 @@
     "angularfire": "~1.1.0",
     "angular-ui-router": "~0.2.14",
     "angular-md5": "~0.1.7",
-    "angular-resizable": "^1.2.0"
+    "angular-resizable": "^1.2.0",
+    "angular-inview": "^1.5.7"
   },
   "devDependencies": {
     "angular-mocks": "^1.3.0"

diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -27,6 +27,7 @@ module.exports = function(config) {
       'bower_components/angular-ui-router/release/angular-ui-router.js',
       'bower_components/angular-md5/angular-md5.js',
       'bower_components/angular-resizable/src/angular-resizable.js',
+      'bower_components/angular-inview/angular-inview.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       'app/scripts/**/*.js',