Added actions to photo-lightbox and toggle on tap
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
parent
caab741e2c
commit
b348d1578f
@ -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">
|
||||
<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();
|
||||
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() {
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user