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

FREEBIE
This commit is contained in:
Scott Nonnenberg 2017-05-18 18:33:35 -07:00
parent 13322c7071
commit 4c7bfbe9ff
12 changed files with 249 additions and 6 deletions

View file

@ -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);
}
}
},

View file

@ -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);

View file

@ -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
};
}
});
})();