Re-style some

Signed-off-by: James Ketrenos <james_git@ketrenos.com>

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 @@
       </app-drawer>
       <app-header-layout>
         <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 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>
         </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,
+          pendingPhotos: {
-          prev: {
+            type: Array,
-            type: Boolean,
+            value: []
-            value: false
           },
           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(this.cursor.taken.toString().replace(/T.*/, "") + "_" + this.cursor.id, -1, true);
-          this._loadPhotos(cursor.taken.toString().replace(/T.*/, "") + "_" + cursor.id, -1, true);
-        },
-
-        loadPrevPhotos: function() {
-          if (!this.photos.length) {
-            return;
-          }
-          var cursor = this.photos[0];
-          this._loadPhotos(cursor.taken.toString().replace(/T.*/, "") + "_" + cursor.id, +1);
         },
 
         appendItems: function(photos) {
-          if (!photos) {
+          if (!this.pendingPhotos || !photos || photos.length == 0) {
+            return;
+          }
+
+          this.pendingPhotos = this.pendingPhotos.concat(photos);
+
+          this.async(this.processItems.bind(this));
+
+          console.log("Total pending: " + this.pendingPhotos.length);
+        },
+
+        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();
@@ -645,6 +636,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;
             if (error) {
@@ -671,19 +664,15 @@
               this.base = "";
             }
 
+            console.log(results.items.length + " photos received.");
+
             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) {
-              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);

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