jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Functional scroller of entire site

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-09-08 14:51:49 -07:00
parent 3ecd83104a
commit 63ceef41f7
1 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/ketr-photos/ketr-photos.html
View File

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