Scroll down button: when scrolled up, or new non-visible message

FREEBIE

js/views/conversation_view.js

@@ -26,6 +26,7 @@
             this.$('.menu-list').toggle();
         }
     });
+
     var TimerMenuView = MenuView.extend({
         initialize: function() {
             this.render();
@@ -151,10 +152,14 @@
             'click .back': 'resetPanel',
             'click .microphone': 'captureAudio',
             'click .disappearing-messages': 'enableDisappearingMessages',
+            'click .scroll-down-button-view': 'scrollToBottom',
             'focus .send-message': 'focusBottomBar',
             'change .file-input': 'toggleMicrophone',
             'blur .send-message': 'unfocusBottomBar',
             'loadMore .message-list': 'fetchMessages',
+            'newOffscreenMessage .message-list': 'addScrollDownButtonWithCount',
+            'atBottom .message-list': 'hideScrollDownButton',
+            'farFromBottom .message-list': 'addScrollDownButton',
             'close .menu': 'closeMenu',
             'select .message-list .entry': 'messageDetail',
             'force-resize': 'forceUpdateMessageFieldSize',
@@ -218,6 +223,35 @@
             }
         },
 
+        addScrollDownButtonWithCount: function() {
+            this.updateScrollDownButton(1);
+        },
+
+        addScrollDownButton: function() {
+            if (!this.scrollDownButton) {
+                this.updateScrollDownButton();
+            }
+        },
+
+        updateScrollDownButton: function(count) {
+            if (this.scrollDownButton) {
+                this.scrollDownButton.increment(count);
+            } else {
+                this.scrollDownButton = new Whisper.ScrollDownButtonView({count: count});
+                this.scrollDownButton.render();
+                var container = this.$('.discussion-container');
+                console.log('showscrollDownButton', container);
+                container.append(this.scrollDownButton.el);
+            }
+        },
+
+        hideScrollDownButton: function() {
+            if (this.scrollDownButton) {
+                this.scrollDownButton.remove();
+                this.scrollDownButton = null;
+            }
+        },
+
         removeLastSeenIndicator: function() {
             if (this.lastSeenIndicator) {
                 this.lastSeenIndicator.remove();
@@ -225,6 +259,10 @@
             }
         },
 
+        scrollToBottom: function() {
+            this.view.scrollToBottom();
+        },
+
         updateLastSeenIndicator: function() {
             this.removeLastSeenIndicator();
 
@@ -239,6 +277,10 @@
 
                 unreadEl.insertBefore(this.$('#' + oldestUnread.get('id')));
                 var position = unreadEl[0].scrollIntoView(true);
+
+                if (this.view.bottomOffset === 0) {
+                    this.addScrollDownButtonWithCount(unreadCount);
+                }
             }
         },
 

js/views/message_list_view.js

@@ -17,18 +17,24 @@
             if (this.$el.scrollTop() === 0) {
                 this.$el.trigger('loadMore');
             }
+            if (this.bottomOffset === 0) {
+                this.$el.trigger('atBottom');
+            } else if (this.bottomOffset > this.outerHeight) {
+                this.$el.trigger('farFromBottom');
+            }
         },
         measureScrollPosition: function() {
             if (this.el.scrollHeight === 0) { // hidden
                 return;
             }
-            this.scrollPosition = this.$el.scrollTop() + this.$el.outerHeight();
+            this.outerHeight = this.$el.outerHeight();
+            this.scrollPosition = this.$el.scrollTop() + this.outerHeight;
             this.scrollHeight = this.el.scrollHeight;
             this.shouldStickToBottom = this.scrollPosition === this.scrollHeight;
             if (this.shouldStickToBottom) {
                 this.bottomOffset = 0;
             } else {
-                this.bottomOffset = this.scrollHeight - this.$el.scrollTop();
+                this.bottomOffset = this.scrollHeight - this.$el.scrollTop() - this.$el.outerHeight();
             }
         },
         resetScrollPosition: function() {
@@ -36,10 +42,13 @@
         },
         scrollToBottomIfNeeded: function() {
             if (this.bottomOffset === 0) {
-                this.$el.scrollTop(this.el.scrollHeight);
-                this.measureScrollPosition();
+                this.scrollToBottom();
             }
         },
+        scrollToBottom: function() {
+            this.$el.scrollTop(this.el.scrollHeight);
+            this.measureScrollPosition();
+        },
         addOne: function(model) {
             var view;
             if (model.isExpirationTimerUpdate()) {
@@ -54,6 +63,10 @@
 
             var index = this.collection.indexOf(model);
             this.measureScrollPosition();
+            if (model.get('unread') && this.bottomOffset > 0) {
+                this.$el.trigger('newOffscreenMessage');
+            }
+
             if (index === this.collection.length - 1) {
                 // add to the bottom.
                 this.$el.append(view.el);

js/views/scroll_down_button_view.js

@@ -0,0 +1,39 @@
+/*
+ * vim: ts=4:sw=4:expandtab
+ */
+(function () {
+    'use strict';
+    window.Whisper = window.Whisper || {};
+
+    Whisper.ScrollDownButtonView = Whisper.View.extend({
+        className: 'scroll-down-button-view',
+        templateName: 'scroll-down-button-view',
+
+        initialize: function(options) {
+          options = options || {};
+          this.count = options.count || 0;
+        },
+
+        increment: function(count) {
+            count = count || 0;
+            this.count += count;
+            this.render();
+        },
+
+        render_attributes: function() {
+            var cssClass = this.count > 0 ? 'new-messages' : '';
+
+            var moreBelow = i18n('scrollDown');
+            if (this.count > 1) {
+                moreBelow = i18n('messagesBelow');
+            } else if (this.count === 1) {
+                moreBelow = i18n('messageBelow');
+            }
+
+            return {
+                cssClass: cssClass,
+                moreBelow: moreBelow
+            };
+        }
+    });
+})();