diff --git a/framework/core/js/forum/src/components/discussion-list.js b/framework/core/js/forum/src/components/discussion-list.js index 2f176b83b..2973b8d1c 100644 --- a/framework/core/js/forum/src/components/discussion-list.js +++ b/framework/core/js/forum/src/components/discussion-list.js @@ -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', diff --git a/framework/core/js/forum/src/components/discussion-page.js b/framework/core/js/forum/src/components/discussion-page.js index b8f007188..a4eac7f7d 100644 --- a/framework/core/js/forum/src/components/discussion-page.js +++ b/framework/core/js/forum/src/components/discussion-page.js @@ -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); + } + } } /** diff --git a/framework/core/js/forum/src/components/index-page.js b/framework/core/js/forum/src/components/index-page.js index 4290e06cd..73c18974b 100644 --- a/framework/core/js/forum/src/components/index-page.js +++ b/framework/core/js/forum/src/components/index-page.js @@ -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() {