mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-06-25 04:02:33 +02:00
Code Issues 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 85210ff6a1
commit 2e3197d510
1 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import DiscussionList from './DiscussionList'; import DiscussionList from './DiscussionList';
import Component from '../../common/Component'; import Component from '../../common/Component';
import DiscussionPage from './DiscussionPage';
const hotEdge = (e) => { const hotEdge = (e) => {
if (e.pageX < 10) app.pane.show(); if (e.pageX < 10) app.pane.show();
@ -36,23 +37,31 @@ export default class DiscussionListPane extends Component {
$(document).on('mousemove', hotEdge); $(document).on('mousemove', hotEdge);
// If the discussion we are viewing is listed in the discussion list, then // When coming from another discussion, scroll to the previous postition
// we will make sure it is visible in the viewport – if it is not we will // to prevent the discussion list jumping around.
// scroll the list down to it. if (app.previous.matches(DiscussionPage)) {
const $discussion = $list.find('.DiscussionListItem.active'); const top = app.cache.discussionListPaneScrollTop || 0;
if ($discussion.length) { $list.scrollTop(top);
const listTop = $list.offset().top; } else {
const listBottom = listTop + $list.outerHeight(); // If the discussion we are viewing is listed in the discussion list, then
const discussionTop = $discussion.offset().top; // we will make sure it is visible in the viewport – if it is not we will
const discussionBottom = discussionTop + $discussion.outerHeight(); // 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) { if (discussionTop < listTop || discussionBottom > listBottom) {
$list.scrollTop($list.scrollTop() - listTop + discussionTop); $list.scrollTop($list.scrollTop() - listTop + discussionTop);
}
} }
} }
} }
onremove() { onremove(vnode) {
app.cache.discussionListPaneScrollTop = $(vnode.dom).scrollTop();
$(document).off('mousemove', hotEdge); $(document).off('mousemove', hotEdge);
} }