From e320428e513414bd79a837f9ec1aacac7f71cbee Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Thu, 6 Sep 2018 14:43:29 -0700 Subject: [PATCH] Re-style some Signed-off-by: James Ketrenos --- frontend/src/ketr-photos/ketr-photos.html | 113 ++++++++++------------ server/routes/photos.js | 6 +- 2 files changed, 52 insertions(+), 67 deletions(-) diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html index d1d84cd..07d5b5d 100755 --- a/frontend/src/ketr-photos/ketr-photos.html +++ b/frontend/src/ketr-photos/ketr-photos.html @@ -51,6 +51,11 @@ :host { } + #header { + padding: 0.5em 1em; + background: #ddd; + box-shadow: 0px 0px 5px black; + } #breadcrumb { padding: 0.5em; } @@ -156,25 +161,19 @@ -
-
- - - By date - By album - - Break on day change +
- prev next
@@ -196,10 +195,9 @@ value: "by-date" }, "loading": Boolean, - "photos": Array, - prev: { - type: Boolean, - value: false + pendingPhotos: { + type: Array, + value: [] }, next: { type: Boolean, @@ -264,19 +262,6 @@ this.$.albumList.resetLayout(); } Polymer.dom(this.$.thumbnails).innerHTML = ""; - this.appendItems(this.photos); - }, - - onBreakOnDayChanged: function(event) { - if (!this.photos) { - return; - } - - this.breakOnDayChange = event.detail.value; - - Polymer.dom(this.$.thumbnails).innerHTML = ""; - - this.appendItems(this.photos); }, listeners: { @@ -287,7 +272,6 @@ loadPath: function(event) { this.path = event.model.item.path; Polymer.dom(this.$.thumbnails).innerHTML = ""; - this.photos = []; this.next = false; this._loadAlbums(); this._loadPhotos(); @@ -299,7 +283,6 @@ event.stopImmediatePropagation(); this.path = event.detail; Polymer.dom(this.$.thumbnails).innerHTML = ""; - this.photos = []; this.next = false; this._loadAlbums(); this._loadPhotos(); @@ -468,10 +451,12 @@ }, widthChanged: function(calcWidth) { + /* var thumbs = this.$.thumbnails.querySelectorAll("photo-thumbnail"); Array.prototype.forEach.call(thumbs, function(thumb) { thumb.width = calcWidth; }); + */ }, behaviors: [ @@ -507,23 +492,26 @@ }, loadNextPhotos: function() { - if (!this.photos.length) { + if (!this.cursor) { return; } - var cursor = this.photos[this.photos.length - 1]; - this._loadPhotos(cursor.taken.toString().replace(/T.*/, "") + "_" + cursor.id, -1, true); + this._loadPhotos(this.cursor.taken.toString().replace(/T.*/, "") + "_" + this.cursor.id, -1, true); }, - loadPrevPhotos: function() { - if (!this.photos.length) { + appendItems: function(photos) { + if (!this.pendingPhotos || !photos || photos.length == 0) { return; } - var cursor = this.photos[0]; - this._loadPhotos(cursor.taken.toString().replace(/T.*/, "") + "_" + cursor.id, +1); + + this.pendingPhotos = this.pendingPhotos.concat(photos); + + this.async(this.processItems.bind(this)); + + console.log("Total pending: " + this.pendingPhotos.length); }, - - appendItems: function(photos) { - if (!photos) { + + processItems: function() { + if (this.pendingPhotos.length == 0) { return; } @@ -533,14 +521,14 @@ lastPath = albums[albums.length - 1]; } -// this.pendingPhotos = this.pendingPhotos.concat(photos); - + var photos = this.pendingPhotos.splice(0, 50); + for (var i = 0; i < photos.length; i++) { var photo = photos[i], thumbnail = document.createElement("photo-thumbnail"), datetime; thumbnail.item = photo; - thumbnail.width = this.calcWidth; +// thumbnail.width = this.calcWidth; thumbnail.addEventListener("load-image", this._imageTap.bind(this)); thumbnail.addEventListener("load-album", this.loadAlbum.bind(this)); datetime = (photo.taken || photo.modified || photo.added).replace(/T.*$/, ""); @@ -596,22 +584,25 @@ Polymer.dom(thumbnails).appendChild(thumbnail); this.thumbnails.push(thumbnail); - - if (this.next) { - this.async(function() { - var cursor = this.photos[this.photos.length - 1]; - this._loadPhotos(cursor.taken.toString().replace(/T.*/, "") + "_" + cursor.id, -1, true, this.limit * 2); - }, 250); - } } - - this.triggerVisibilityChecks(); + + 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(); + } }, pathTapped: function(event) { this.path = event.currentTarget.path; Polymer.dom(this.$.thumbnails).innerHTML = ""; - this.photos = []; this.next = false; this._loadAlbums(); this._loadPhotos(); @@ -644,6 +635,8 @@ } query += key + "=" + encodeURIComponent(params[key]); } + + console.log("Requesting " + this.limit + " photos."); window.fetch("api/v1/photos" + (this.path || "") + query, function(error, xhr) { this.loading = false; @@ -671,19 +664,15 @@ this.base = ""; } + console.log(results.items.length + " photos received."); + this.appendItems(results.items); - if (append) { - this.photos = this.photos.concat(results.items); - } else { - this.photos = results.items; - } + this.cursor = results.items[results.items.length - 1]; if (dir == -1) { - this.prev = start ? true : false; this.next = results.more ? true : false; } else { - this.prev = results.more ? true : false; this.next = true; } @@ -720,8 +709,8 @@ }, onResize: function(event) { - this.triggerVisibilityChecks(); this.debounce("resize", function() { + this.triggerVisibilityChecks(); var width = Math.max(this.$.placeholder.offsetWidth || 0, 200); this.cols = Math.floor(this.$.thumbnails.clientWidth / width); diff --git a/server/routes/photos.js b/server/routes/photos.js index d19aa45..5447b46 100755 --- a/server/routes/photos.js +++ b/server/routes/photos.js @@ -97,12 +97,8 @@ router.get("/*", function(req, res/*, next*/) { let more = photos.length > limit; /* We queried one extra item to see if there are more than LIMIT available */ if (more) { - photos.slice(limit, photos.length); + photos.splice(limit); } - photos.forEach(function(photo) { -// photo.path = encodeURI(photo.path); -// photo.filename = encodeURI(photo.filename); - }); let results = { items: photos