mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-02 14:37:49 +02:00
Code Issues Releases Wiki Activity

Retain scroll position when navigating between index/discussion

Browse Source
This commit is contained in:
Toby Zerner
2015-05-07 10:27:04 +09:30
parent a1ce2fa2ef
commit 6b8dfdfb1c
3 changed files with 33 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/forum/src/components/discussion-list.js
View File

@@ -126,7 +126,7 @@ export default class DiscussionList extends Component {
var active = m.route().substr(0, discussionRoute.length) === discussionRoute; var active = m.route().substr(0, discussionRoute.length) === discussionRoute;
var subtree = this.subtrees[discussion.id()]; var subtree = this.subtrees[discussion.id()];
return m('li.discussion-summary'+(isUnread ? '.unread' : '')+(active ? '.active' : ''), {key: discussion.id()}, subtree.retain() || m('div', [ return m('li.discussion-summary'+(isUnread ? '.unread' : '')+(active ? '.active' : ''), {key: discussion.id(), 'data-id': discussion.id()}, subtree.retain() || m('div', [
controls.length ? DropdownButton.component({ controls.length ? DropdownButton.component({
items: controls, items: controls,
className: 'contextual-controls', className: 'contextual-controls',

13
js/forum/src/components/discussion-page.js
View File

@@ -150,6 +150,8 @@ export default class DiscussionPage extends Component {
context.retain = true; context.retain = true;
var $index = $(element);
// When viewing a discussion (for which the discussions route is the // When viewing a discussion (for which the discussions route is the
// parent,) the discussion list is still rendered but it becomes a // parent,) the discussion list is still rendered but it becomes a
// pane hidden on the side of the screen. When the mouse enters and // pane hidden on the side of the screen. When the mouse enters and
@@ -157,7 +159,7 @@ export default class DiscussionPage extends Component {
// respectively. We also create a 10px 'hot edge' on the left of the // respectively. We also create a 10px 'hot edge' on the left of the
// screen to activate the pane. // screen to activate the pane.
var pane = app.pane; var pane = app.pane;
$(element).hover(pane.show.bind(pane), pane.onmouseleave.bind(pane)); $index.hover(pane.show.bind(pane), pane.onmouseleave.bind(pane));
var hotEdge = function(e) { var hotEdge = function(e) {
if (e.pageX < 10) { pane.show(); } if (e.pageX < 10) { pane.show(); }
@@ -166,6 +168,15 @@ export default class DiscussionPage extends Component {
context.onunload = function() { context.onunload = function() {
$(document).off('mousemove', hotEdge); $(document).off('mousemove', hotEdge);
}; };
var $discussion = $index.find('.discussion-summary.active');
if ($discussion.length) {
var indexTop = $index.offset().top;
var discussionTop = $discussion.offset().top;
if (discussionTop < indexTop || discussionTop + $discussion.outerHeight() > indexTop + $index.outerHeight()) {
$index.scrollTop($index.scrollTop() - indexTop + discussionTop);
}
}
} }
/** /**

21
js/forum/src/components/index-page.js
View File

@@ -8,6 +8,7 @@ import DiscussionList from 'flarum/components/discussion-list';
import WelcomeHero from 'flarum/components/welcome-hero'; import WelcomeHero from 'flarum/components/welcome-hero';
import ComposerDiscussion from 'flarum/components/composer-discussion'; import ComposerDiscussion from 'flarum/components/composer-discussion';
import LoginModal from 'flarum/components/login-modal'; import LoginModal from 'flarum/components/login-modal';
import DiscussionPage from 'flarum/components/discussion-page';
import SelectInput from 'flarum/components/select-input'; import SelectInput from 'flarum/components/select-input';
import ActionButton from 'flarum/components/action-button'; import ActionButton from 'flarum/components/action-button';
@@ -33,13 +34,17 @@ export default class IndexPage extends Component {
app.cache.discussionList = new DiscussionList({params}); app.cache.discussionList = new DiscussionList({params});
} }
if (app.current instanceof DiscussionPage) {
this.lastDiscussion = app.current.discussion();
}
app.history.push('index'); app.history.push('index');
app.current = this; app.current = this;
app.composer.minimize(); app.composer.minimize();
} }
onunload() { onunload() {
app.cache.discussionList.willRedraw(); app.cache.scrollTop = $(window).scrollTop();
} }
/** /**
@@ -123,6 +128,20 @@ export default class IndexPage extends Component {
context.onunload = function() { context.onunload = function() {
$('body').removeClass('index-page'); $('body').removeClass('index-page');
} }
var scrollTop = app.cache.scrollTop;
$(window).scrollTop(scrollTop);
if (this.lastDiscussion) {
var $discussion = this.$('.discussion-summary[data-id='+this.lastDiscussion.id()+']');
if ($discussion.length) {
var indexTop = $('#header').outerHeight();
var discussionTop = $discussion.offset().top;
if (discussionTop < scrollTop + indexTop || discussionTop + $discussion.outerHeight() > scrollTop + $(window).height()) {
$(window).scrollTop(discussionTop - indexTop);
}
}
}
} }
newDiscussion() { newDiscussion() {