Skip to content
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

Jump to bottom

Fix DiscussionListPane jumping around (when going from discussion to discussion) #2402

Merged
merged 4 commits into from
Jan 13, 2021
Merged

Fix DiscussionListPane jumping around (when going from discussion to discussion) #2402

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d683535
Fix DiscussionListPane jumping around.
w-4 Oct 21, 2020
a43d94c
add comment
w-4 Oct 21, 2020
46b9ce0
refactor
w-4 Oct 25, 2020
14f7352
change variable name
w-4 Dec 12, 2020
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
33 changes: 21 additions & 12 deletions js/src/forum/components/DiscussionListPane.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import DiscussionList from './DiscussionList';
import Component from '../../common/Component';
import DiscussionPage from './DiscussionPage';

const hotEdge = (e) => {
if (e.pageX < 10) app.pane.show();
Expand Down Expand Up @@ -36,23 +37,31 @@ export default class DiscussionListPane extends Component {

$(document).on('mousemove', hotEdge);

// If the discussion we are viewing is listed in the discussion list, then
// we will make sure it is visible in the viewport – if it is not we will
// scroll the list down to it.
const $discussion = $list.find('.DiscussionListItem.active');
if ($discussion.length) {
const listTop = $list.offset().top;
const listBottom = listTop + $list.outerHeight();
const discussionTop = $discussion.offset().top;
const discussionBottom = discussionTop + $discussion.outerHeight();
// When coming from another discussion, scroll to the previous postition
// to prevent the discussion list jumping around.
if (app.previous.matches(DiscussionPage)) {
const top = app.cache.paneScrollTop || 0;
$list.scrollTop(top);
} else {
// If the discussion we are viewing is listed in the discussion list, then
// we will make sure it is visible in the viewport – if it is not we will
// scroll the list down to it.
const $discussion = $list.find('.DiscussionListItem.active');
if ($discussion.length) {
const listTop = $list.offset().top;
const listBottom = listTop + $list.outerHeight();
const discussionTop = $discussion.offset().top;
const discussionBottom = discussionTop + $discussion.outerHeight();

if (discussionTop < listTop || discussionBottom > listBottom) {
$list.scrollTop($list.scrollTop() - listTop + discussionTop);
if (discussionTop < listTop || discussionBottom > listBottom) {
$list.scrollTop($list.scrollTop() - listTop + discussionTop);
}
}
}
}

onremove() {
onremove(vnode) {
app.cache.paneScrollTop = $(vnode.dom).scrollTop();
w-4 marked this conversation as resolved.
Show resolved Hide resolved
$(document).off('mousemove', hotEdge);
}

Expand Down