From b348d1578f9c11baec6f9633e15f677b99e15cbb Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Sun, 14 Oct 2018 16:41:48 -0700
Subject: [PATCH] Added actions to photo-lightbox and toggle on tap

Signed-off-by: James Ketrenos <james_git@ketrenos.com>
---
 frontend/elements/photo-lightbox.html     | 132 ++++++++++++++++++----
 frontend/src/ketr-photos/ketr-photos.html |  51 +++++++--
 2 files changed, 152 insertions(+), 31 deletions(-)

diff --git a/frontend/elements/photo-lightbox.html b/frontend/elements/photo-lightbox.html
index d8ba288..0b360a4 100644
--- a/frontend/elements/photo-lightbox.html
+++ b/frontend/elements/photo-lightbox.html
@@ -61,10 +61,51 @@
   #overlay > div {
     height: 100%;
   }
+
+  #info {
+    color: white;
+    position: absolute;
+    padding: 0.5em;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    font-size: 0.6em;
+    pointer-events: none;
+  }
+
+  #actions {
+    display: flex;
+    padding: 0.5em;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    font-size: 0.6em;
+    color: #ddd;
+    pointer-events: none;
+  }
+
+  :host([active]) #info,
+  :host([active]) #actions {
+    opacity: 1;
+    pointer-events: all;
+  }
+
   </style>
 
   <div id="image" class="layout vertical" on-tap="onTap">
-    <paper-icon-button on-tap="download" class="start-end" icon="file-download"></paper-icon-button>      
+    <div id="actions" on-tap="_hideActions" class="flex horziontal layout center end-justified">
+      <paper-icon-button on-tap="download" class="start-end" icon="file-download"></paper-icon-button>      
+      <template is="dom-repeat" items="[[actions]]">
+          <paper-icon-button on-tap="_fireAction" icon="[[item]]"></paper-icon-button>
+      </template>
+    </div>
+  
+    <div id="info" on-tap="_hideActions" class="layout vertical start">
+      <div>[[item.name]] ([[item.id]])</div>
+      <div>[[item.taken]]</div>
+      <div on-tap="_pathTap">[[item.path]]</div>
+    </div>
   </div>
 
   <div id="overlay" class="layout vertical center">
@@ -79,20 +120,30 @@
 Polymer({
   is: "photo-lightbox",
   properties: {
+    "active": {
+      type: Boolean,
+      reflectToAttribute: true,
+      value: false
+    },
     "src": {
-      type: String
+      type: String,
+      value: ""
     },
     "thumb": {
       type: String
     },
-    loading: {
+    "loading": {
       type: Boolean,
       value: false
+    },
+    "unique": {
+      type: String,
+      value: ""
     }
   },
 
   observers: [
-    "srcChanged(src)"
+    "srcChanged(src, unique)"
   ],
 
   listeners: {
@@ -155,8 +206,25 @@ Polymer({
     }
   },
 
+  reload: function() {
+    this.unique = parseInt(this.unique || 0) + 1;
+  },
+
+  _fireAction: function(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+
+    this.fire("action", event.model.item);
+  },
+
   download: function(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+
     console.log("Download tapped");
+
     var anchor = document.createElement('a');
     anchor.href = this.base + this.item.path + "/" + this.item.filename;
     anchor.setAttribute("download", this.src.replace(/.*\/([^/]+)$/, "$1"));
@@ -164,15 +232,12 @@ Polymer({
     document.body.appendChild(anchor);
     anchor.click();
     document.body.removeChild(anchor);
-    event.preventDefault();
-    event.stopPropagation();
-    event.stopImmediatePropagation();
   },
 
   close: function() {
     this.style.opacity = 0;
-
     this.async(function() {
+      this.setActive(false);
       this.style.display = 'none';
       this.image = undefined;
       this.$.image.style.opacity = 0;
@@ -184,6 +249,9 @@ Polymer({
   },
 
   srcChanged: function(src) {
+    if (!src) {
+      return;
+    }
     this.loadImage(src);
   },
 
@@ -192,16 +260,27 @@ Polymer({
       return;
     }
 
+    if ((event.detail.y < this.$.actions.offsetHeight) ||
+        (event.detail.y > this.offsetHeight - this.$.info.offsetHeight)) {
+      this.setActive(true);
+      return;
+    }
+
 		if (event.detail.x <= 0.1 * this.offsetWidth) {
-			this.previous();
-		} else if (event.detail.x >= 0.9 * this.offsetWidth) {
-			this.next();
-		} else {
-			this.close();
-		}
+      this.previous();
+      return;
+    }
+    
+    if (event.detail.x >= 0.9 * this.offsetWidth) {
+      this.next();
+      return;
+    }
+
+		this.close();
   },
 
   open: function() {
+    this.setActive(true);
     this.closed = false;
     this.opened = true;
     this.loadImage(this.src);
@@ -210,7 +289,19 @@ Polymer({
     this.focus();
   },
 
-  loadImage: function(image) {
+  _hideActions: function(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+
+    this.setActive(false);
+  },
+
+  setActive: function(active) {
+    this.active = active;
+  },
+
+  loadImage: function(path) {
     if (this.$.image.style.opacity != 0) {
       this.waitUntil = (Date.now() / 1000) + 500;
     } else {
@@ -219,24 +310,25 @@ Polymer({
     this.$.image.style.opacity = 0;
 
     this.image = new Image();
-    this.requested = image;
+    this.requested = path;
     this.loading = true;
 
-    this.image.onload = function(src) {
+    this.image.onload = function(path) {
       this.loading = false;
       var remaining = Math.max(this.waitUntil - Date.now() / 1000, 0);
       this.async(function() {
-        if (!this.image || this.requested != src) {
+        if (!this.image || this.requested != path) {
           return;
         }
 
         this.$.image.style.backgroundImage = 'url("' + this.image.src + '")';
         this.$.image.style.opacity = 1;
         this.image = undefined;
+        this.setActive(true);
       }, remaining);
-    }.bind(this, image);
+    }.bind(this, path);
 
-    this.image.src = image;
+    this.image.src = path + (this.unique ? ("?" + this.unique) : "");
   },
 
   attached: function() {
diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html
index a7f526b..e08ceb9 100755
--- a/frontend/src/ketr-photos/ketr-photos.html
+++ b/frontend/src/ketr-photos/ketr-photos.html
@@ -455,7 +455,12 @@
     </paper-dialog>
     <paper-toast id="toast"></paper-toast>
     <photo-lightbox tabindex="0"
-      id="lightbox" on-close="lightBoxClose" on-next="lightBoxNext" on-previous="lightBoxPrevious"></photo-lightbox>
+      id="lightbox"
+      on-close="lightBoxClose"
+      on-next="lightBoxNext"
+      on-previous="lightBoxPrevious"
+      actions="[[actions]]"
+      on-action="_imageAction"></photo-lightbox>
   </template>
 
   <script>
@@ -464,6 +469,10 @@
       Polymer({
         is: "ketr-photos",
         properties: {
+          actions: {
+            type: Array,
+            value: []
+          },
           password: {
             type: String,
             value: ""
@@ -1224,16 +1233,7 @@
             var thumbnail = document.createElement("photo-thumbnail");
             thumbnail.item = photo;
             if (this.user.maintainer) {
-              let actions = [ "delete" ];
-              if (this.mode == "duplicates") {
-                actions.unshift("text-format");
-              } else if (this.mode == "trash") {
-                actions.unshift("undo");
-              } else {
-                actions.unshift("image:rotate-right");
-                actions.unshift("image:rotate-left");
-              }
-              thumbnail.actions = actions;
+              thumbnail.actions = this.actions;
               thumbnail.addEventListener("action", this._imageAction.bind(this));
             }
             thumbnail.addEventListener("load-image", this._imageTap.bind(this));
@@ -1378,10 +1378,13 @@
 
         rotateAction: function(thumbnail, direction) {
           thumbnail.disabled = true;
+          thumbnail.loading = true;
+
           window.fetch("api/v1/photos/" + thumbnail.item.id + "?a=rotate&direction=" + direction, 
             function(thumbnail, error, xhr) {
 
             thumbnail.disabled = false;
+            thumbnail.loading = false;
 
             if (error) {
               console.log("Unable to take action on photo: " + error);
@@ -1389,6 +1392,16 @@
             }
 
             thumbnail.reload();
+            /* If we are in the lightbox mode, then reload the corresponing
+             * thumb in the main view as well */
+            if (thumbnail.tagName == "PHOTO-LIGHTBOX") {
+              for (var i = 0; i < this.thumbnails.length; i++) {
+                if (this.thumbnails[i].item.id == thumbnail.item.id) {
+                  this.thumbnails[i].reload();
+                  break;
+                }
+              }
+            }
           }.bind(this, thumbnail), {}, "PUT");
         },
 
@@ -1585,15 +1598,31 @@
           if (!user) {
             this.mode = "login";
             this.loginStatus = null;
+            this.actions = [];
             return;
           }
 
           if (user.authenticated && user.mailVerified) {
             this.loginStatus = null;
             this.mode = "memories";
+            if (user.maintainer) {
+              let actions = [ "delete" ];
+              if (this.mode == "duplicates") {
+                actions.unshift("text-format");
+              } else if (this.mode == "trash") {
+                actions.unshift("undo");
+              } else {
+                actions.unshift("image:rotate-right");
+                actions.unshift("image:rotate-left");
+              }
+              this.actions = actions;
+            } else {
+              this.actions = [];
+            }
             return;
           } 
 
+          this.actions = [];
           this.mode = "login";
           
           if (!user.mailVerified) {