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;
}
#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);