implement last read marker

css/glowingbear.css

@@ -24,6 +24,9 @@ input#sendMessage {
     width: 100%;
 }
 
+table {
+  width: 100%;
+}
 td.time {
     padding-right: 5px;
 }
@@ -35,6 +38,11 @@ td.prefix {
 }
 td.message {
     word-wrap: break-word;
+    width: 100%;
+}
+#readmarker {
+  margin: 0;
+  color: #111;
 }
 .text {
     white-space: pre;

index.html

@@ -109,7 +109,7 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
       <div class="bufferlines">
         <table>
           <tbody>
-            <tr class="bufferline" ng-repeat="bufferline in activeBuffer().lines">
+            <tr class="bufferline" ng-repeat-start="bufferline in activeBuffer().lines">
               <td class="time">
                 <span class="date text-muted">
                   {{ bufferline.date | date:'HH:mm' }}
@@ -133,6 +133,11 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
                 </div>
               </td>
             </tr>
+            <tr ng-repeat-end ng-if="activeBuffer().lastSeen-1==$index">
+              <td colspan="3">
+                <hr id="readmarker">
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>

js/models.js

@@ -19,6 +19,7 @@ models.service('models', ['colors', function(colors) {
         var active = false;
         var notification = false;
         var unread = '';
+        var lastSeen = -2;
 
         /*
          * Adds a line to this buffer
@@ -37,7 +38,8 @@ models.service('models', ['colors', function(colors) {
             number: number,
             title: title,
             lines: lines,
-            addLine: addLine
+            addLine: addLine,
+            lastSeen: lastSeen,
         }
 
     }
@@ -143,9 +145,14 @@ models.service('models', ['colors', function(colors) {
      * @return undefined
      */
     this.setActiveBuffer = function(bufferId) {
+
+        var previousBuffer = this.getActiveBuffer();
         
-        if (this.getActiveBuffer()) {
-            this.getActiveBuffer().active = false;
+        if (previousBuffer) {
+            // turn off the active status for the previous buffer
+            previousBuffer.active = false;
+            // Save the last line we saw
+            previousBuffer.lastSeen = previousBuffer.lines.length;
         }
 
         activeBuffer = _.find(this.model['buffers'], function(buffer) {
@@ -156,7 +163,6 @@ models.service('models', ['colors', function(colors) {
         activeBuffer.notification = false;
         activeBuffer.active = true;
         activeBuffer.unread = '';
-
     }
 
     /*

js/websockets.js

@@ -451,26 +451,22 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
 
     $scope.setActiveBuffer = function(key) {
         models.setActiveBuffer(key);
+        $rootScope.scrollToBottom();
+        document.getElementById('sendMessage').focus();
         var ab = models.getActiveBuffer();
         $rootScope.pageTitle = ab.shortName + ' | ' + ab.title;
-        document.getElementById('sendMessage').focus();
 
     };
 
-    $scope.$watch('models.getActiveBuffer()', function(newVal, oldVal) {
-        if (newVal && newVal !== oldVal) { 
-            $rootScope.scrollToBottom();
-        }
-    });
-
     $rootScope.scrollToBottom = function() {
         // FIXME doesn't work if the settimeout runs without a short delay
         // 300 ms seems to do the trick but creates a noticable flickr
         $timeout(function() {
-            // TODO in the future, implement scrolling to last read line
-            var lastline = document.querySelector('.bufferline:last-child');
-            if(lastline) {
-                window.scrollTo(0, lastline.offsetTop);
+            var readmarker = document.getElementById('readmarker');
+            if(readmarker) {
+              readmarker.scrollIntoView();
+            }else{
+                window.scroll(0, window.scrollMaxY);
             }
         }, 300);
     }
@@ -553,12 +549,13 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
 
         // Handle alt-a
         if($event.altKey && (code == 97 || code == 65)) {
+            $event.preventDefault();
             $rootScope.switchToActivityBuffer();
             return true;
         }
         // Handle ctrl-g
         if($event.ctrlKey && (code == 103 || code == 71)) {
-            document.querySelector('#bufferFilter').focus();
+            document.getElementById('bufferFilter').focus();
             return true;
         }
     };