Skip to content

Fix chat jumping back when typing a new message #2220

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nickvergessen merged 3 commits into from
Sep 26, 2019
Merged

Fix chat jumping back when typing a new message #2220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5debee8
Update the stored height of the new message field after cleaning it
danxuliu Sep 26, 2019
f9e56ad
Loop through last messages before handling height changes
danxuliu Sep 26, 2019
7577438
Update stored height for new message field when chat view is resized
danxuliu Sep 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,7 +414,7 @@
if (!this._chatViewInMainView) {
this._sidebarView.removeTab('chat');
this._chatView.$el.prependTo('#app-content-wrapper');
this._chatView.reloadMessageList();
this._chatView.handleSizeChanged();
this._chatView.setTooltipContainer($('#app'));
this._chatView.focusChatInput();
this._chatViewInMainView = true;
Expand All @@ -429,7 +429,7 @@
this._chatView.$el.detach();
this._sidebarView.addTab('chat', { label: t('spreed', 'Chat'), icon: 'icon-comment', priority: 100 }, this._chatView);
this._sidebarView.selectTab('chat');
this._chatView.reloadMessageList();
this._chatView.handleSizeChanged();
this._chatView.setTooltipContainer(this._chatView.$el);
this._chatViewInMainView = false;
}
Expand Down Expand Up @@ -575,43 +575,43 @@
}.bind(this));

// Opening or closing the sidebar changes the width of the main
// view, so if the chat view is in the main view it needs to be
// reloaded.
var reloadMessageListOnSidebarVisibilityChange = function() {
// view, so if the chat view is in the main view it needs to handle
// a size change.
var handleSizeChangedOnSidebarVisibilityChange = function() {
if (!this._chatViewInMainView) {
return;
}

this._chatView.reloadMessageList();
this._chatView.handleSizeChanged();
}.bind(this);
this._chatView.listenTo(this._sidebarView, 'opened', reloadMessageListOnSidebarVisibilityChange);
this._chatView.listenTo(this._sidebarView, 'closed', reloadMessageListOnSidebarVisibilityChange);
this._chatView.listenTo(this._sidebarView, 'opened', handleSizeChangedOnSidebarVisibilityChange);
this._chatView.listenTo(this._sidebarView, 'closed', handleSizeChangedOnSidebarVisibilityChange);

// Resizing the window can change the size of the chat view, both
// when it is in the main view and in the sidebar, so the chat view
// needs to be reloaded. The initial reload is not very heavy, so
// the handler is not debounced for a snappier feel and to reduce
// flickering.
// needs to handle a size change. The initial reload is not very
// heavy, so the window resize handler is not debounced for a
// snappier feel and to reduce flickering.
// However, resizing the window below certain width causes the
// navigation bar to be hidden; an explicit handling is needed in
// this case because the app navigation (or, more specifically, its
// Snap object) adds a transition to the app content, so the reload
// needs to be delayed to give the transition time to end and thus
// give the app content time to get its final size.
var reloadMessageListOnWindowResize = function() {
var handleSizeChangedOnWindowResize = function() {
var chatView = this._chatView;

if ($(window).width() >= 768 || !this._chatViewInMainView) {
chatView.reloadMessageList();
chatView.handleSizeChanged();

return;
}

setTimeout(function() {
chatView.reloadMessageList();
chatView.handleSizeChanged();
}, 300);
}.bind(this);
$(window).resize(reloadMessageListOnWindowResize);
$(window).resize(handleSizeChangedOnWindowResize);

this._messageCollection.listenTo(roomChannel, 'leaveCurrentRoom', function() {
this.stopReceivingMessages();
Expand Down
44 changes: 33 additions & 11 deletions js/views/chatview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,10 +391,25 @@
},

/**
* Reloads the message list.
* Reloads the message list and updates internal values based on the
* size of the chat view.
*
* This needs to be called whenever the size of the chat view has
* changed.
*/
handleSizeChanged: function() {
this.reloadMessageList();

if (this.$el && this.$el.find('.newCommentRow .message').length > 0) {
// Before the 3.0.0 release jQuery rounded the height to the nearest
// integer, but Firefox has subpixel accuracy, so the height
// returned by jQuery can not be used in the calculations.
this._newMessageFieldHeight = this.$el.find('.newCommentRow .message').get(0).getBoundingClientRect().height;
}
},

/**
* Reloads the message list.
*
* When the message list is reloaded its size may have changed (for
* example, if the chat view was detached from the main view and
Expand Down Expand Up @@ -888,6 +903,15 @@
$field.data('submitButtonEl', $submitButton);
}

// Pressing Arrow-up/down in an empty/unchanged input brings back the last sent messages
if (this.lastComments.length !== 0 && !$field.atwho('isSelecting')) {
if (ev.keyCode === 38 || ev.keyCode === 40) {
this._loopThroughLastComments(ev, $field);
} else {
this.currentLastComment = -1;
}
}

var newMessageFieldOldHeight = this._newMessageFieldHeight;
// Before the 3.0.0 release jQuery rounded the height to the nearest
// integer, but Firefox has subpixel accuracy, so the height
Expand All @@ -905,16 +929,6 @@
$submitButton.click();
ev.preventDefault();
}

// Pressing Arrow-up/down in an empty/unchanged input brings back the last sent messages
if (this.lastComments.length !== 0 && !$field.atwho('isSelecting')) {

if (ev.keyCode === 38 || ev.keyCode === 40) {
this._loopThroughLastComments(ev, $field);
} else {
this.currentLastComment = -1;
}
}
},

_loopThroughLastComments: function(ev, $field) {
Expand Down Expand Up @@ -1033,6 +1047,14 @@
$form.find('.submitLoading').addClass('hidden');
$form.find('.message').text('').prop('contenteditable', true);

// Update the stored height of the new message field after cleaning
// it.
//
// Before the 3.0.0 release jQuery rounded the height to the nearest
// integer, but Firefox has subpixel accuracy, so the height
// returned by jQuery can not be used in the calculations.
this._newMessageFieldHeight = $form.find('.message').get(0).getBoundingClientRect().height;

$form.find('.message').focus();

// The new message does not need to be explicitly added to the list
Expand Down