From 63ceef41f728488446fafbaea02eb7a30bf051ee Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Sat, 8 Sep 2018 14:51:49 -0700
Subject: [PATCH] Functional scroller of entire site

Signed-off-by: James Ketrenos <james_git@ketrenos.com>
---
 frontend/src/ketr-photos/ketr-photos.html | 43 +++++++++++++++--------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html
index b170984..8e83129 100755
--- a/frontend/src/ketr-photos/ketr-photos.html
+++ b/frontend/src/ketr-photos/ketr-photos.html
@@ -60,6 +60,11 @@
         padding: 0.5em;
       }
 
+      #bottom {
+        margin-top: 3em;
+        padding-bottom: 1em;
+      }
+
       #albums {
         height: 100%;
         overflow-y: scroll;
@@ -90,9 +95,8 @@
         --paper-toast-color: white;
       }
 
-      #placeholder {
-        position: absolute;
-        left: -1000px;
+      #thumbnails {
+/*        justify-content: space-between;*/
       }
 
       app-header {
@@ -175,15 +179,17 @@
                 <div on-tap="loadPath">[[item.name]] /</div>
               </template>
             </div>
-            <paper-spinner active$="[[loading]]" class="thin"></paper-spinner>
           </div>
         </app-header>
         <div id="thumbnails" class="layout horizontal wrap"></div>
       </app-header-layout>
+      <div id="bottom" class="layout vertical center">
+        <paper-spinner hidden$="[[!loading]]" active$="[[loading]]" class="thin"></paper-spinner>
+        <div hidden$="[[loading]]">~ the end ~</div>
+      </div>
     </app-drawer-layout>
     <paper-toast id="toast"></paper-toast>
     <photo-lightbox tabindex="0" id="lightbox" on-close="lightBoxClose" on-next="lightBoxNext" on-previous="lightBoxPrevious"></photo-lightbox>
-    <photo-thumbnail id="placeholder"></photo-thumbnail>
   </template>
 
   <script>
@@ -298,6 +304,12 @@
             return;
           }
 
+          if (this.$.bottom.getBoundingClientRect().bottom < window.innerHeight + 200) {
+            if (this.next) {
+              this.loadNextPhotos();
+            }
+          }
+
           this.triggerVisibilityChecks();
         },
 
@@ -609,14 +621,15 @@
           if (this.pendingPhotos.length) {
             this.async(this.processItems.bind(this));
           } else {
-            if (this.next && this.cursor) {
-              this.async(function() {
-                this._loadPhotos(this.cursor.taken.toString().replace(/T.*/, "") + "_" + this.cursor.id, -1, true, this.limit * 2);
-              }, 250);
-            } else {
-              console.log("All photos are loaded: " + this.thumbnails.length);
-            }
-            this.triggerVisibilityChecks();
+//            if (this.next && this.cursor) {
+//              this.async(function() {
+//                this._loadPhotos(this.cursor.taken.toString().replace(/T.*/, "") + "_" + this.cursor.id, -1, true, this.limit * 2);
+//              }, 250);
+//            } else {
+//              console.log("All photos are loaded: " + this.thumbnails.length);
+//            }
+            /* If the viewport is at the bottom when it finishes processing, trigger to load more. */
+            this.onScroll();
           }
         },
 
@@ -634,7 +647,7 @@
           }
           this.loading = true;
 
-          this.limit = limit || 500;
+          this.limit = limit || 100;
 
           dir = dir || -1;
           var params = {
@@ -732,7 +745,7 @@
         onResize: function(event) {
           this.debounce("resize", function() {
             this.triggerVisibilityChecks();
-            var width = Math.max(this.$.placeholder.offsetWidth || 0, 200);
+            var width = 200;
 
             this.cols = Math.floor(this.$.thumbnails.clientWidth / width);