Re-style some
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
parent
a6f7c4fbec
commit
e320428e51
@ -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 @@
|
||||
</app-drawer>
|
||||
<app-header-layout>
|
||||
<app-header reveals slot="header">
|
||||
<div class="layout vertical start">
|
||||
<div class="layout horizontal center">
|
||||
<paper-spinner active$="[[loading]]" class="thin"></paper-spinner>
|
||||
<paper-radio-group selected="{{order}}">
|
||||
<paper-radio-button name="by-date">By date</paper-radio-button>
|
||||
<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 id="header" class="layout horizontal center justified">
|
||||
<div id="breadcrumb" class="horizontal layout center">
|
||||
<template is="dom-repeat" items="[[breadcrumb(path)]]">
|
||||
<div on-tap="loadPath">[[item.name]] /</div>
|
||||
</template>
|
||||
</div>
|
||||
<div id="breadcrumb" class="horizontal layout center"><template is="dom-repeat" items="[[breadcrumb(path)]]">
|
||||
<div on-tap="loadPath">[[item.name]] /</div>
|
||||
</template></div>
|
||||
<paper-spinner active$="[[loading]]" class="thin"></paper-spinner>
|
||||
</div>
|
||||
</app-header>
|
||||
<div id="content" fullbleed class="flex layout vertical">
|
||||
<div id="thumbnails" class="layout horizontal wrap"></div>
|
||||
<div id="magic"></div>
|
||||
<div class="layout horizontal">
|
||||
<paper-button disabled$="[[!prev]]" on-tap="loadPrevPhotos">prev</paper-button>
|
||||
<paper-button disabled$="[[!next]]" on-tap="loadNextPhotos">next</paper-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -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);
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user