github-mirror/framework
github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-21 14:24:57 +08:00
Code Issues Actions Packages Projects 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 22fe84bb45
commit 09bef29bf5
3 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
framework/core/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 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({
items: controls,
className: 'contextual-controls',

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

@ -150,6 +150,8 @@ export default class DiscussionPage extends Component {
context.retain = true;
var $index = $(element);
// When viewing a discussion (for which the discussions route is the
// parent,) the discussion list is still rendered but it becomes a
// 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
// screen to activate the 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) {
if (e.pageX < 10) { pane.show(); }
@ -166,6 +168,15 @@ export default class DiscussionPage extends Component {
context.onunload = function() {
$(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
framework/core/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 ComposerDiscussion from 'flarum/components/composer-discussion';
import LoginModal from 'flarum/components/login-modal';
import DiscussionPage from 'flarum/components/discussion-page';
import SelectInput from 'flarum/components/select-input';
import ActionButton from 'flarum/components/action-button';
@ -33,13 +34,17 @@ export default class IndexPage extends Component {
app.cache.discussionList = new DiscussionList({params});
}
if (app.current instanceof DiscussionPage) {
this.lastDiscussion = app.current.discussion();
}
app.history.push('index');
app.current = this;
app.composer.minimize();
}
onunload() {
app.cache.discussionList.willRedraw();
app.cache.scrollTop = $(window).scrollTop();
}
/**
@ -123,6 +128,20 @@ export default class IndexPage extends Component {
context.onunload = function() {
$('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() {