From 106c6879e225b6d96881054f6fabec5751b773db Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Thu, 7 Mar 2019 18:57:53 +0800
Subject: [PATCH] Feature: Add scroll-handler for pins

---
 pinry/static/js/vue/main.js | 53 +++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 4 deletions(-)

diff --git a/pinry/static/js/vue/main.js b/pinry/static/js/vue/main.js
index 6a01daf..43cb8a0 100644
--- a/pinry/static/js/vue/main.js
+++ b/pinry/static/js/vue/main.js
@@ -157,20 +157,19 @@ Vue.component('pin-container', {
       "pins": [],
       "heightTable": [],
       "counter": 0,
+      "loading": true,
     };
   },
   template: "#pin-container-template",
   created: function() {
     this.heightTable = HeightTable(this.args.blockMargin);
-    this.$emit("loading");
+    this.markAsLoading();
     var self = this;
     var offset = 0;
     fetchPins(offset).then(
       function (res) {
         self.pins = res.data.results;
-        self.$emit(
-          "loaded",
-        );
+        self.markAsLoaded();
       },
     );
     window.addEventListener("optimizedResize", function() {
@@ -181,6 +180,51 @@ Vue.component('pin-container', {
     this.reflow();
   },
   methods: {
+    markAsLoaded: function() {
+      this.loading = false;
+      this.$emit(
+          "loaded",
+      );
+    },
+    markAsLoading: function() {
+      this.loading = true;
+      this.$emit(
+          "loading",
+      );
+    },
+    scrollHandler: function () {
+      var self = this;
+
+      function getDocumentScrollTop() {
+        var doc = document.documentElement;
+        return (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
+      }
+
+      function getDocumentHeight() {
+        var body = document.body,
+        html = document.documentElement;
+        return Math.max(
+          body.scrollHeight, body.offsetHeight,
+          html.clientHeight, html.scrollHeight,
+          html.offsetHeight,
+        );
+      }
+      scrollHandler = function() {
+        if (self.loading) {
+          return
+        }
+        console.log('loading...');
+        var windowPosition = getDocumentScrollTop() + window.innerHeight;
+        var bottom = getDocumentHeight() - 100;
+        if(windowPosition > bottom) {
+          self.loadMore()
+        }
+      };
+      window.addEventListener('scroll', function(e) {
+          scrollHandler();
+        }
+      );
+    },
     updateChildHeight: function(childArg) {
       this.heightTable.set(childArg.index, childArg.height);
     },
@@ -231,6 +275,7 @@ Vue.component('pin-container', {
   throttle("resize", "optimizedResize");
 })();
 
+
 var app = new Vue({
   el: '#app',
   data() {