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

Re-style some

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-09-06 14:43:29 -07:00
parent a6f7c4fbec
commit e320428e51
2 changed files with 52 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,6 +51,11 @@
:host { :host {
} }
#header {
padding: 0.5em 1em;
background: #ddd;
box-shadow: 0px 0px 5px black;
}
#breadcrumb { #breadcrumb {
padding: 0.5em; padding: 0.5em;
} }
@ -156,25 +161,19 @@
</app-drawer> </app-drawer>
<app-header-layout> <app-header-layout>
<app-header reveals slot="header"> <app-header reveals slot="header">
<div class="layout vertical start"> <div id="header" class="layout horizontal center justified">
<div class="layout horizontal center"> <div id="breadcrumb" class="horizontal layout center">
<paper-spinner active$="[[loading]]" class="thin"></paper-spinner> <template is="dom-repeat" items="[[breadcrumb(path)]]">
<paper-radio-group selected="{{order}}"> <div on-tap="loadPath">[[item.name]] /</div>
<paper-radio-button name="by-date">By date</paper-radio-button> </template>
<paper-radio-button name="by-album">By album</paper-radio-button>
</paper-radio-group>
<paper-checkbox checked$="[[breakOnDayChange]]" on-checked-changed="onBreakOnDayChanged">Break on day change</paper-checkbox>
</div> </div>
<div id="breadcrumb" class="horizontal layout center"><template is="dom-repeat" items="[[breadcrumb(path)]]"> <paper-spinner active$="[[loading]]" class="thin"></paper-spinner>
<div on-tap="loadPath">[[item.name]] /</div>
</template></div>
</div> </div>
</app-header> </app-header>
<div id="content" fullbleed class="flex layout vertical"> <div id="content" fullbleed class="flex layout vertical">
<div id="thumbnails" class="layout horizontal wrap"></div> <div id="thumbnails" class="layout horizontal wrap"></div>
<div id="magic"></div> <div id="magic"></div>
<div class="layout horizontal"> <div class="layout horizontal">
<paper-button disabled$="[[!prev]]" on-tap="loadPrevPhotos">prev</paper-button>
<paper-button disabled$="[[!next]]" on-tap="loadNextPhotos">next</paper-button> <paper-button disabled$="[[!next]]" on-tap="loadNextPhotos">next</paper-button>
</div> </div>
</div> </div>
@ -196,10 +195,9 @@
value: "by-date" value: "by-date"
}, },
"loading": Boolean, "loading": Boolean,
"photos": Array, pendingPhotos: {
prev: { type: Array,
type: Boolean, value: []
value: false
}, },
next: { next: {
type: Boolean, type: Boolean,
@ -264,19 +262,6 @@
this.$.albumList.resetLayout(); this.$.albumList.resetLayout();
} }
Polymer.dom(this.$.thumbnails).innerHTML = ""; 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: { listeners: {
@ -287,7 +272,6 @@
loadPath: function(event) { loadPath: function(event) {
this.path = event.model.item.path; this.path = event.model.item.path;
Polymer.dom(this.$.thumbnails).innerHTML = ""; Polymer.dom(this.$.thumbnails).innerHTML = "";
this.photos = [];
this.next = false; this.next = false;
this._loadAlbums(); this._loadAlbums();
this._loadPhotos(); this._loadPhotos();
@ -299,7 +283,6 @@
event.stopImmediatePropagation(); event.stopImmediatePropagation();
this.path = event.detail; this.path = event.detail;
Polymer.dom(this.$.thumbnails).innerHTML = ""; Polymer.dom(this.$.thumbnails).innerHTML = "";
this.photos = [];
this.next = false; this.next = false;
this._loadAlbums(); this._loadAlbums();
this._loadPhotos(); this._loadPhotos();
@ -468,10 +451,12 @@
}, },
widthChanged: function(calcWidth) { widthChanged: function(calcWidth) {
/*
var thumbs = this.$.thumbnails.querySelectorAll("photo-thumbnail"); var thumbs = this.$.thumbnails.querySelectorAll("photo-thumbnail");
Array.prototype.forEach.call(thumbs, function(thumb) { Array.prototype.forEach.call(thumbs, function(thumb) {
thumb.width = calcWidth; thumb.width = calcWidth;
}); });
*/
}, },
behaviors: [ behaviors: [
@ -507,23 +492,26 @@
}, },
loadNextPhotos: function() { loadNextPhotos: function() {
if (!this.photos.length) { if (!this.cursor) {
return; return;
} }
var cursor = this.photos[this.photos.length - 1]; this._loadPhotos(this.cursor.taken.toString().replace(/T.*/, "") + "_" + this.cursor.id, -1, true);
this._loadPhotos(cursor.taken.toString().replace(/T.*/, "") + "_" + cursor.id, -1, true);
}, },
loadPrevPhotos: function() { appendItems: function(photos) {
if (!this.photos.length) { if (!this.pendingPhotos || !photos || photos.length == 0) {
return; 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) { processItems: function() {
if (!photos) { if (this.pendingPhotos.length == 0) {
return; return;
} }
@ -533,14 +521,14 @@
lastPath = albums[albums.length - 1]; 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++) { for (var i = 0; i < photos.length; i++) {
var photo = photos[i], var photo = photos[i],
thumbnail = document.createElement("photo-thumbnail"), thumbnail = document.createElement("photo-thumbnail"),
datetime; datetime;
thumbnail.item = photo; thumbnail.item = photo;
thumbnail.width = this.calcWidth; // thumbnail.width = this.calcWidth;
thumbnail.addEventListener("load-image", this._imageTap.bind(this)); thumbnail.addEventListener("load-image", this._imageTap.bind(this));
thumbnail.addEventListener("load-album", this.loadAlbum.bind(this)); thumbnail.addEventListener("load-album", this.loadAlbum.bind(this));
datetime = (photo.taken || photo.modified || photo.added).replace(/T.*$/, ""); datetime = (photo.taken || photo.modified || photo.added).replace(/T.*$/, "");
@ -596,22 +584,25 @@
Polymer.dom(thumbnails).appendChild(thumbnail); Polymer.dom(thumbnails).appendChild(thumbnail);
this.thumbnails.push(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) { pathTapped: function(event) {
this.path = event.currentTarget.path; this.path = event.currentTarget.path;
Polymer.dom(this.$.thumbnails).innerHTML = ""; Polymer.dom(this.$.thumbnails).innerHTML = "";
this.photos = [];
this.next = false; this.next = false;
this._loadAlbums(); this._loadAlbums();
this._loadPhotos(); this._loadPhotos();
@ -644,6 +635,8 @@
} }
query += key + "=" + encodeURIComponent(params[key]); query += key + "=" + encodeURIComponent(params[key]);
} }
console.log("Requesting " + this.limit + " photos.");
window.fetch("api/v1/photos" + (this.path || "") + query, function(error, xhr) { window.fetch("api/v1/photos" + (this.path || "") + query, function(error, xhr) {
this.loading = false; this.loading = false;
@ -671,19 +664,15 @@
this.base = ""; this.base = "";
} }
console.log(results.items.length + " photos received.");
this.appendItems(results.items); this.appendItems(results.items);
if (append) { this.cursor = results.items[results.items.length - 1];
this.photos = this.photos.concat(results.items);
} else {
this.photos = results.items;
}
if (dir == -1) { if (dir == -1) {
this.prev = start ? true : false;
this.next = results.more ? true : false; this.next = results.more ? true : false;
} else { } else {
this.prev = results.more ? true : false;
this.next = true; this.next = true;
} }
@ -720,8 +709,8 @@
}, },
onResize: function(event) { onResize: function(event) {
this.triggerVisibilityChecks();
this.debounce("resize", function() { this.debounce("resize", function() {
this.triggerVisibilityChecks();
var width = Math.max(this.$.placeholder.offsetWidth || 0, 200); var width = Math.max(this.$.placeholder.offsetWidth || 0, 200);
this.cols = Math.floor(this.$.thumbnails.clientWidth / width); this.cols = Math.floor(this.$.thumbnails.clientWidth / width);

6
server/routes/photos.js
View File

@ -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 */ let more = photos.length > limit; /* We queried one extra item to see if there are more than LIMIT available */
if (more) { 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 = { let results = {
items: photos items: photos