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;
+ }
+
@@ -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 @@
+ id="lightbox"
+ on-close="lightBoxClose"
+ on-next="lightBoxNext"
+ on-previous="lightBoxPrevious"
+ actions="[[actions]]"
+ on-action="_imageAction">