136 lines
3.3 KiB
HTML
Executable File
136 lines
3.3 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<link rel="import" href="../bower_components/polymer/polymer.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 > div {
|
|
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;
|
|
}
|
|
|
|
:host(:hover) > div {
|
|
opacity: 1;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="layout vertical start">
|
|
<div>[[item.name]]</div>
|
|
<div>[[item.taken]]</div>
|
|
<div on-tap="_pathTap">[[item.path]]</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
"use strict";
|
|
Polymer({
|
|
is: "photo-thumbnail",
|
|
properties: {
|
|
"item": {
|
|
type: Object
|
|
},
|
|
"thumbpath": {
|
|
type: String,
|
|
computed: "safeItemThumbFilepath(item, base)"
|
|
},
|
|
"width": {
|
|
type: Number
|
|
},
|
|
"selected": {
|
|
type: Boolean,
|
|
reflectToAttribute: true
|
|
}
|
|
},
|
|
|
|
listeners: {
|
|
"tap": "_imageTap"
|
|
},
|
|
|
|
observers: [
|
|
"widthChanged(width)",
|
|
"thumbChanged(thumbpath, visible)"
|
|
],
|
|
|
|
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) {
|
|
if (item === undefined|| base === undefined || item.path === undefined) {
|
|
return "";
|
|
}
|
|
return base + item.path + "/thumbs/" + item.filename;
|
|
},
|
|
|
|
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();
|
|
},
|
|
|
|
attached: function() {
|
|
var base = document.querySelector("base");
|
|
if (base) {
|
|
this.base = new URL(base.href).pathname.replace(/\/$/, ""); /* Remove trailing slash if there */
|
|
} else {
|
|
this.base = "";
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</dom-module>
|
|
</html>
|