FEATURE: Restore scroll on user activity pages (#16661)

The scroll position was reset everytime the user pressed the back button
and returned to a user activity page. This fix applies only to pages
that uses the user-stream component. Pages with topic lists already had
this functionality implemented.
This commit is contained in:
Bianca Nenciu 2022-05-09 18:45:57 +03:00 committed by GitHub
parent 6bdcd7afb2
commit 618a1ba571
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 39 additions and 26 deletions

View File

@ -2,7 +2,6 @@ import Component from "@ember/component";
import { action } from "@ember/object"; import { action } from "@ember/object";
import { schedule } from "@ember/runloop"; import { schedule } from "@ember/runloop";
import bootbox from "bootbox"; import bootbox from "bootbox";
import discourseDebounce from "discourse-common/lib/debounce";
import { openBookmarkModal } from "discourse/controllers/bookmark"; import { openBookmarkModal } from "discourse/controllers/bookmark";
import { ajax } from "discourse/lib/ajax"; import { ajax } from "discourse/lib/ajax";
import { import {
@ -28,18 +27,12 @@ export default Component.extend(Scrolling, {
}, },
scrollToLastPosition() { scrollToLastPosition() {
let scrollTo = this.session.bookmarkListScrollPosition; const scrollTo = this.session.bookmarkListScrollPosition;
if (scrollTo && scrollTo >= 0) { if (scrollTo > 0) {
schedule("afterRender", () => { schedule("afterRender", () => {
discourseDebounce( if (this.element && !this.isDestroying && !this.isDestroyed) {
this, window.scrollTo(0, scrollTo + 1);
function () { }
if (this.element && !this.isDestroying && !this.isDestroyed) {
window.scrollTo(0, scrollTo + 1);
}
},
0
);
}); });
} }
}, },

View File

@ -13,8 +13,8 @@ export default Component.extend(UrlRefresh, LoadMore, {
@on("didInsertElement") @on("didInsertElement")
@observes("model") @observes("model")
_readjustScrollPosition() { _readjustScrollPosition() {
const scrollTo = this.session.get("topicListScrollPosition"); const scrollTo = this.session.topicListScrollPosition;
if (scrollTo && scrollTo >= 0) { if (scrollTo > 0) {
schedule("afterRender", () => $(window).scrollTop(scrollTo + 1)); schedule("afterRender", () => $(window).scrollTop(scrollTo + 1));
} else { } else {
scheduleOnce("afterRender", this, this.loadMoreUnlessFull); scheduleOnce("afterRender", this, this.loadMoreUnlessFull);

View File

@ -2,7 +2,6 @@ import { alias, and, reads } from "@ember/object/computed";
import discourseComputed, { observes } from "discourse-common/utils/decorators"; import discourseComputed, { observes } from "discourse-common/utils/decorators";
import Component from "@ember/component"; import Component from "@ember/component";
import LoadMore from "discourse/mixins/load-more"; import LoadMore from "discourse/mixins/load-more";
import discourseDebounce from "discourse-common/lib/debounce";
import { on } from "@ember/object/evented"; import { on } from "@ember/object/evented";
import { schedule } from "@ember/runloop"; import { schedule } from "@ember/runloop";
import showModal from "discourse/lib/show-modal"; import showModal from "discourse/lib/show-modal";
@ -75,18 +74,12 @@ export default Component.extend(LoadMore, {
return; return;
} }
let scrollTo = this.session.get("topicListScrollPosition"); const scrollTo = this.session.topicListScrollPosition;
if (scrollTo && scrollTo >= 0) { if (scrollTo > 0) {
schedule("afterRender", () => { schedule("afterRender", () => {
discourseDebounce( if (this.element && !this.isDestroying && !this.isDestroyed) {
this, $(window).scrollTop(scrollTo + 1);
function () { }
if (this.element && !this.isDestroying && !this.isDestroyed) {
$(window).scrollTop(scrollTo + 1);
}
},
0
);
}); });
} }
}, },

View File

@ -48,6 +48,7 @@ export default Component.extend(LoadMore, {
return ClickTrack.trackClick(e, this.siteSettings); return ClickTrack.trackClick(e, this.siteSettings);
}); });
this._updateLastDecoratedElement(); this._updateLastDecoratedElement();
this._scrollToLastPosition();
}), }),
// This view is being removed. Shut down operations // This view is being removed. Shut down operations
@ -71,6 +72,22 @@ export default Component.extend(LoadMore, {
this._lastDecoratedElement = lastElement; this._lastDecoratedElement = lastElement;
}, },
_scrollToLastPosition() {
const scrollTo = this.session.userStreamScrollPosition;
if (scrollTo > 0) {
schedule("afterRender", () => {
if (this.element && !this.isDestroying && !this.isDestroyed) {
window.scrollTo(0, scrollTo + 1);
}
});
}
},
scrolled() {
this._super(...arguments);
this.session.set("userStreamScrollPosition", window.scrollY);
},
actions: { actions: {
removeBookmark(userAction) { removeBookmark(userAction) {
const stream = this.stream; const stream = this.stream;

View File

@ -23,6 +23,10 @@ export default DiscourseRoute.extend(ViewingActionType, {
}, },
afterModel(model, transition) { afterModel(model, transition) {
if (!this.isPoppedState(transition)) {
this.session.set("userStreamScrollPosition", null);
}
return model.stream.filterBy({ return model.stream.filterBy({
filter: this.userActionType, filter: this.userActionType,
actingUsername: transition.to.queryParams.acting_username, actingUsername: transition.to.queryParams.acting_username,

View File

@ -10,6 +10,12 @@ export default DiscourseRoute.extend({
return user; return user;
}, },
afterModel(_model, transition) {
if (!this.isPoppedState(transition)) {
this.session.set("userStreamScrollPosition", null);
}
},
setupController(controller, user) { setupController(controller, user) {
this.controllerFor("user-activity").set("model", user); this.controllerFor("user-activity").set("model", user);
}, },