Add an option to initiate fetching older statuses automatically when scrolled 750 pixels or less from the bottom.

5 files changed, 17 insertions, 0 deletions

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 4d0528b6..cfceedde 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -7,6 +7,7 @@ const settings = {
       hideAttachmentsLocal: this.$store.state.config.hideAttachments,
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
+      autoLoadLocal: this.$store.state.config.autoLoad,
       muteWordsString: this.$store.state.config.muteWords.join('\n')
     }
   },
@@ -23,6 +24,9 @@ const settings = {
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     },
+    autoLoadLocal (value) {
+      this.$store.dispatch('setOption', { name: 'autoLoad', value })
+    },
     muteWordsString (value) {
       value = filter(value.split('\n'), (word) => trim(word).length > 0)
       this.$store.dispatch('setOption', { name: 'muteWords', value })
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 33d46e7e..3fab1c1c 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -28,6 +28,10 @@
                 <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
                 <label for="hideNsfw">Enable clickthrough NSFW attachment hiding</label>
             </li>
+            <li>
+                <input type="checkbox" id="autoLoad" v-model="autoLoadLocal">
+                <label for="autoLoad">Enable automatic loading when scrolled to the bottom</label>
+            </li>
         </ul>
       </div>
     </div>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index d5a9adcc..6070e442 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -20,6 +20,8 @@ const Timeline = {
     const credentials = store.state.users.currentUser.credentials
     const showImmediately = this.timeline.visibleStatuses.length === 0
 
+    window.onscroll = this.scrollLoad
+
     timelineFetcher.fetchAndUpdate({
       store,
       credentials,
@@ -42,6 +44,11 @@ const Timeline = {
         older: true,
         showImmediately: true
       }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
+    },
+    scrollLoad (e) {
+      if (this.timeline.loading === false && this.$store.state.config.autoLoad && (window.innerHeight + window.pageYOffset) >= (document.body.scrollHeight - 750)) {
+        this.fetchOlderStatuses()
+      }
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index 35261578..351149f1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,6 +33,7 @@ const persistedStateOptions = {
     'config.hideAttachments',
     'config.hideAttachmentsInConv',
     'config.hideNsfw',
+    'config.autoLoad',
     'config.muteWords',
     'statuses.notifications',
     'users.users'
diff --git a/src/modules/config.js b/src/modules/config.js
index f59dc6f0..c9152ecc 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -7,6 +7,7 @@ const defaultState = {
   hideAttachments: false,
   hideAttachmentsInConv: false,
   hideNsfw: true,
+  autoLoad: true,
   muteWords: []
 }