ketr.photos/frontend/elements/photo-thumbnail.html
2018-10-23 18:56:21 -07:00

200 lines
5.2 KiB
HTML
Executable File

<!doctype html>
<html>
<head>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
</head>
<dom-module id="photo-thumbnail">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
:host {
display: inline-block;
position: relative;
background-color: #ccc;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
cursor: pointer;
color: white;
overflow: hidden;
box-sizing: border-box;
width: 200px;
height: 200px;
@apply --photo-thumbnail;
}
:host([disabled]) {
opacity: 0.5;
pointer-events: none;
border: 3px solid red;
}
#info {
display: flex;
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;
transition: opacity 0.25s ease-in-out;
overflow: hidden;
}
#info > div > div {
overflow: hidden;
text-overflow: ellipsis;
}
#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;
transition: opacity 0.25s ease-in-out;
}
:host(:hover) #info,
:host(:hover) #actions {
transition: opacity 0.25s ease-in-out;
opacity: 1;
pointer-events: all;
}
</style>
<div id="actions" hidden$="[[!actions.length]]" class="flex horziontal layout center end-justified">
<template is="dom-repeat" items="[[actions]]">
<paper-icon-button on-tap="_fireAction" icon="[[item]]"></paper-icon-button>
</template>
</div>
<div id="info" class="layout vertical">
<div class="layout horizontal justified center">
<div class="flex">[[item.name]]</div>
<div>([[item.id]])</div>
</div>
<div class="layout horizontal justified center">
<div>[[formatDateTime(item.taken)]]</div>
<div>[[item.size]]</div>
</div>
<div on-tap="_pathTap">[[item.path]]</div>
</div>
</template>
<script>
"use strict";
Polymer({
is: "photo-thumbnail",
properties: {
"unique": {
type: String,
value: ""
},
"disabled": {
reflectToAttribute: true
},
"item": {
type: Object
},
"thumbpath": {
type: String,
computed: "safeItemThumbFilepath(item, base, unique)"
},
"width": {
type: Number
},
"selected": {
type: Boolean,
reflectToAttribute: true
}
},
listeners: {
"tap": "_imageTap"
},
observers: [
"widthChanged(width)",
"thumbChanged(thumbpath, visible)"
],
formatDateTime: function(date) {
return window.moment(new Date(date)).format("lll");
},
_fireAction: function(event) {
event.stopPropagation();
event.preventDefault();
this.fire("action", event.model.item);
},
thumbChanged: function(thumbpath, visible) {
if (visible) {
this.style.backgroundImage = "url(" +
encodeURI(thumbpath).replace(/'/g, "\\'").replace(/([\(\)])/g, "\\$1") +
")";
} else {
this.style.backgroundImage = "";
}
},
widthChanged: function(width) {
this.style.width = width + "px";
this.style.height = width + "px";
},
safeItemThumbFilepath: function(item, base, unique) {
if (item === undefined|| base === undefined || item.path === undefined) {
return "";
}
return base + item.path + "thumbs/" + item.filename + (this.unique ? ("?" + this.unique) : "");
},
date: function(item) {
var datetime = item.taken || item.modified || item.added;
return datetime.replace(/T.*$/, "");
},
_imageTap: function(event) {
this.fire("load-image");
event.stopPropagation();
event.preventDefault();
},
_pathTap: function(event) {
this.fire("load-album", this.item.path);
event.stopPropagation();
event.preventDefault();
},
reload: function() {
this.unique = parseInt(this.unique || 0) + 1;
},
attached: function() {
var base = document.querySelector("base");
if (base) {
this.base = new URL(base.href).pathname.replace(/\/$/, "") + "/"; /* Make sure there is a trailing slash */
} else {
this.base = "/";
}
}
});
</script>
</dom-module>
</html>