Scroll down button: when scrolled up, or new non-visible message
FREEBIE
This commit is contained in:
parent
13322c7071
commit
4c7bfbe9ff
12 changed files with 249 additions and 6 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
39
js/views/scroll_down_button_view.js
Normal file
39
js/views/scroll_down_button_view.js
Normal 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
|
||||
};
|
||||
}
|
||||
});
|
||||
})();
|
Loading…
Add table
Add a link
Reference in a new issue