200 lines
5.2 KiB
HTML
Executable File
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>
|