FEATURE: Remember scroll position in private message lists (#8212)

FEATURE: Remember scroll position in private message lists (#8212)

  • FEATURE: remember position in private message lists

  • Unified saving scroll position between topic lists

  • added discovery-topics-list template

  • ran prettier

  • removed dynamic scroll key

  • JS cleanup

diff --git a/app/assets/javascripts/discourse/components/discovery-topics-list.js.es6 b/app/assets/javascripts/discourse/components/discovery-topics-list.js.es6
index 10a73fcd5e..3a5f30e4f5 100644
--- a/app/assets/javascripts/discourse/components/discovery-topics-list.js.es6
+++ b/app/assets/javascripts/discourse/components/discovery-topics-list.js.es6
@@ -36,11 +36,6 @@ const DiscoveryTopicsListComponent = Ember.Component.extend(
       this.session.set("topicListScrollPosition", $(window).scrollTop());
     },
 
-    scrolled() {
-      this._super(...arguments);
-      this.saveScrollPosition();
-    },
-
     actions: {
       loadMore() {
         Discourse.updateContextCount(0);
diff --git a/app/assets/javascripts/discourse/components/topic-list.js.es6 b/app/assets/javascripts/discourse/components/topic-list.js.es6
index 294563feaa..8eaa73dd26 100644
--- a/app/assets/javascripts/discourse/components/topic-list.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-list.js.es6
@@ -2,8 +2,9 @@ import {
   default as computed,
   observes
 } from "ember-addons/ember-computed-decorators";
+import LoadMore from "discourse/mixins/load-more";
 
-export default Ember.Component.extend({
+export default Ember.Component.extend(LoadMore, {
   tagName: "table",
   classNames: ["topic-list"],
   showTopicPostBadges: true,
@@ -54,6 +55,30 @@ export default Ember.Component.extend({
     this.refreshLastVisited();
   },
 
+  scrolled() {
+    this._super(...arguments);
+    let onScroll = this.onScroll;
+    if (!onScroll) return;
+
+    onScroll.call(this);
+  },
+
+  scrollToLastPosition() {
+    if (!this.scrollOnLoad) return;
+
+    let scrollTo = this.session.get("topicListScrollPosition");
+    if (scrollTo && scrollTo >= 0) {
+      Ember.run.schedule("afterRender", () =>
+        $(window).scrollTop(scrollTo + 1)
+      );
+    }
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+    this.scrollToLastPosition();
+  },
+
   _updateLastVisitedTopic(topics, order, ascending, top) {
     this.set("lastVisitedTopic", null);
 
diff --git a/app/assets/javascripts/discourse/controllers/user-topics-list.js.es6 b/app/assets/javascripts/discourse/controllers/user-topics-list.js.es6
index a4d822a565..dd453138d8 100644
--- a/app/assets/javascripts/discourse/controllers/user-topics-list.js.es6
+++ b/app/assets/javascripts/discourse/controllers/user-topics-list.js.es6
@@ -16,6 +16,10 @@ export default Ember.Controller.extend({
     this.newIncoming = [];
   },
 
+  saveScrollPosition: function() {
+    this.session.set("topicListScrollPosition", $(window).scrollTop());
+  },
+
   _showFooter: function() {
     this.set("application.showFooter", !this.get("model.canLoadMore"));
   }.observes("model.canLoadMore"),
diff --git a/app/assets/javascripts/discourse/routes/build-private-messages-route.js.es6 b/app/assets/javascripts/discourse/routes/build-private-messages-route.js.es6
index 4ebca3108a..820a41cf8d 100644
--- a/app/assets/javascripts/discourse/routes/build-private-messages-route.js.es6
+++ b/app/assets/javascripts/discourse/routes/build-private-messages-route.js.es6
@@ -18,10 +18,19 @@ export default (viewName, path, channel) => {
     },
 
     model() {
-      return this.store.findFiltered("topicList", {
-        filter:
-          "topics/" + path + "/" + this.modelFor("user").get("username_lower")
-      });
+      const session = Discourse.Session.current();
+      let filter =
+        "topics/" + path + "/" + this.modelFor("user").get("username_lower");
+      let lastTopicList = session.get("topicList");
+      if (lastTopicList && lastTopicList.filter === filter) {
+        return lastTopicList;
+      } else {
+        session.setProperties({
+          topicList: null,
+          topicListScrollPosition: null
+        });
+        return this.store.findFiltered("topicList", { filter });
+      }
     },
 
     setupController() {
diff --git a/app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs b/app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs
index d1d105121e..44d9dc579d 100644
--- a/app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs
+++ b/app/assets/javascripts/discourse/templates/components/basic-topic-list.hbs
@@ -18,7 +18,10 @@
                  canBulkSelect=canBulkSelect
                  selected=selected
                  skipHeader=skipHeader
-                 tagsForUser=tagsForUser}}
+                 tagsForUser=tagsForUser
+                 onScroll=onScroll
+                 scrollOnLoad=scrollOnLoad}}
+
   {{else}}
     {{#unless loadingMore}}
     <div class='alert alert-info'>
diff --git a/app/assets/javascripts/discourse/templates/components/discovery-topics-list.hbs b/app/assets/javascripts/discourse/templates/components/discovery-topics-list.hbs
new file mode 100644
index 0000000000..c1528526e6
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/discovery-topics-list.hbs
@@ -0,0 +1,3 @@
+{{yield (hash
+  saveScrollPosition=saveScrollPosition
+)}}
diff --git a/app/assets/javascripts/discourse/templates/discovery/topics.hbs b/app/assets/javascripts/discourse/templates/discovery/topics.hbs
index ff8ca998aa..a449e010a9 100644
--- a/app/assets/javascripts/discourse/templates/discovery/topics.hbs
+++ b/app/assets/javascripts/discourse/templates/discovery/topics.hbs
@@ -26,7 +26,7 @@
 
 {{bulk-select-button selected=selected action=(action "refresh") category=category}}
 
-{{#discovery-topics-list model=model refresh=(action "refresh") incomingCount=topicTrackingState.incomingCount}}
+{{#discovery-topics-list model=model refresh=(action "refresh") incomingCount=topicTrackingState.incomingCount as |discoveryTopicList|}}
   {{#if top}}
     <div class='top-lists'>
       {{period-chooser period=period action=(action "changePeriod")}}
@@ -61,7 +61,8 @@
       expandAllPinned=expandAllPinned
       category=category
       topics=model.topics
-      discoveryList=true}}
+      discoveryList=true
+      onScroll=discoveryTopicList.saveScrollPosition}}
   {{/if}}
 {{/discovery-topics-list}}
 
diff --git a/app/assets/javascripts/discourse/templates/user-topics-list.hbs b/app/assets/javascripts/discourse/templates/user-topics-list.hbs
index e59ec595e1..adeab89c7f 100644
--- a/app/assets/javascripts/discourse/templates/user-topics-list.hbs
+++ b/app/assets/javascripts/discourse/templates/user-topics-list.hbs
@@ -7,7 +7,9 @@
                      hasIncoming=hasIncoming
                      incomingCount=incomingCount
                      showInserted=(action "showInserted")
-                     tagsForUser=tagsForUser}}
+                     tagsForUser=tagsForUser
+                     onScroll=saveScrollPosition
+                     scrollOnLoad=true}}
 
   {{conditional-loading-spinner condition=model.loadingMore}}
 {{/load-more}}

GitHub sha: 054fbd78

1 Like