github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-29 12:43:52 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

Fix DiscussionListPane jumping around (#2402)

Browse Source 
Ensure that scroll position is retained between page changes, so if navigating via the sidebar, you don't need to re-scroll down every time.
This commit is contained in:
Wadim Kalmykov 2021-01-14 05:49:26 +07:00 committed by GitHub
parent c1778d5dd6
commit 9a7fa7e4c9
1 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
framework/core/js/src/forum/components/DiscussionListPane.js
View File

@ -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();
@ -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.discussionListPaneScrollTop || 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.discussionListPaneScrollTop = $(vnode.dom).scrollTop();
$(document).off('mousemove', hotEdge);
}