102 lines
2.5 KiB
HTML
102 lines
2.5 KiB
HTML
<!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-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: 50% 50%;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
color: white;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:host > div {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
:host:hover {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
</style>
|
|
|
|
<div class="layout vertical">
|
|
<div>[[item.id]]</div>
|
|
<div>[[date(item)]]</div>
|
|
<div>[[item.path]]</div>
|
|
<div>[[item.filename]]</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
"use strict";
|
|
Polymer({
|
|
is: "photo-thumbnail",
|
|
properties: {
|
|
"item": {
|
|
type: Object
|
|
},
|
|
"thumbpath": {
|
|
type: String,
|
|
computed: "safeItemThumbFilepath(item, base)"
|
|
},
|
|
"width": {
|
|
type: Number
|
|
}
|
|
},
|
|
|
|
observers: [
|
|
"widthChanged(width)",
|
|
"thumbChanged(thumbpath)"
|
|
],
|
|
|
|
thumbChanged: function(thumbpath) {
|
|
this.style.backgroundImage = "url(" + thumbpath + ")";
|
|
},
|
|
|
|
widthChanged: function(width) {
|
|
this.style.width = width + "px";
|
|
this.style.height = width + "px";
|
|
},
|
|
|
|
safeItemThumbFilepath: function(item, base) {
|
|
return "'" + (base + item.path + "/thumbs/" + item.filename).replace(/'/, "\\'") + "'";
|
|
},
|
|
|
|
date: function(item) {
|
|
var datetime = item.taken || item.modified || item.added;
|
|
return datetime.replace(/T.*$/, "");
|
|
},
|
|
|
|
_imageTap: function(event) {
|
|
window.open(this.base + event.model.item.path + "/" + event.model.item.filename, "image");
|
|
},
|
|
|
|
_pathTap: function(event) {
|
|
window.location.href = event.model.item.filepath;
|
|
},
|
|
|
|
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>
|