194 lines
3.9 KiB
HTML
194 lines
3.9 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-lightbox">
|
|
<template>
|
|
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
|
|
:host {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
transition: opacity 0.5s ease-in-out;
|
|
-webkit-transition: opacity 0.5s ease-in-out;
|
|
border-width: 5px;
|
|
box-sizing: border-box;
|
|
pointer-events: all;
|
|
}
|
|
|
|
#image {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: contain;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
transition: opacity 0.5s ease-in-out;
|
|
-webkit-transition: opacity 0.5s ease-in-out;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
|
|
<div id="image"></div>
|
|
</template>
|
|
|
|
<script>
|
|
"use strict";
|
|
Polymer({
|
|
is: "photo-lightbox",
|
|
properties: {
|
|
"src": {
|
|
type: String
|
|
},
|
|
"thumb": {
|
|
type: String
|
|
}
|
|
},
|
|
|
|
observers: [
|
|
"srcChanged(src)"
|
|
],
|
|
|
|
listeners: {
|
|
"keydown": "onKeyDown",
|
|
"tap": "onTap",
|
|
"blur": "onBlur",
|
|
"focus": "onFocus",
|
|
"scroll": "onScroll"
|
|
},
|
|
|
|
onFocus: function() {
|
|
this.hasFocus = true;
|
|
},
|
|
|
|
onBlur: function() {
|
|
this.hasFocus = false;
|
|
},
|
|
|
|
next: function() {
|
|
this.fire("next");
|
|
},
|
|
|
|
previous: function() {
|
|
this.fire("previous");
|
|
},
|
|
|
|
onKeyDown: function(e) {
|
|
if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) {
|
|
return;
|
|
}
|
|
|
|
switch (e.keyCode) {
|
|
case 39: /* right */
|
|
if (this.hasFocus) {
|
|
this.next();
|
|
}
|
|
break;
|
|
case 37: /* left */
|
|
if (this.hasFocus) {
|
|
this.previous();
|
|
}
|
|
break;
|
|
case 27: /* escape */
|
|
this.hasFocus = false;
|
|
this.close();
|
|
break;
|
|
default:
|
|
console.log(e.keyCode);
|
|
break;
|
|
}
|
|
if (this.hasFocus) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
},
|
|
|
|
close: function() {
|
|
this.style.opacity = 0;
|
|
|
|
this.async(function() {
|
|
this.style.display = 'none';
|
|
this.image = undefined;
|
|
this.$.image.style.opacity = 0;
|
|
this.$.image.style.removeProperty('background-image');
|
|
this.closed = true;
|
|
this.opened = false;
|
|
this.fire("close");
|
|
}, 250);
|
|
},
|
|
|
|
srcChanged: function(src) {
|
|
this.loadImage(src);
|
|
},
|
|
|
|
onTap: function(event) {
|
|
if (!this.style.display || this.style.display == "none") {
|
|
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();
|
|
}
|
|
},
|
|
|
|
open: function() {
|
|
this.closed = false;
|
|
this.opened = true;
|
|
this.style.opacity = 1;
|
|
this.style.borderColor = 'blue';
|
|
this.style.display = 'block';
|
|
this.focus();
|
|
},
|
|
|
|
loadImage: function(image) {
|
|
if (this.$.image.style.opacity != 0) {
|
|
this.waitUntil = (Date.now() / 1000) + 500;
|
|
} else {
|
|
this.waitUntil = 0;
|
|
}
|
|
this.$.image.style.opacity = 0;
|
|
this.style.borderColor = 'orange';
|
|
|
|
this.image = new Image();
|
|
this.loading = image;
|
|
|
|
this.image.onload = function(src) {
|
|
var remaining = Math.max(this.waitUntil - Date.now() / 1000, 0);
|
|
this.async(function() {
|
|
if (!this.image || this.loading != src) {
|
|
return;
|
|
}
|
|
|
|
this.$.image.style.backgroundImage = 'url("' + this.image.src + '")';
|
|
this.$.image.style.opacity = 1;
|
|
this.style.borderColor = 'black';
|
|
this.image = undefined;
|
|
}, remaining);
|
|
}.bind(this, image);
|
|
|
|
this.image.src = image;
|
|
},
|
|
|
|
attached: function() {
|
|
}
|
|
});
|
|
</script>
|
|
</dom-module>
|
|
</html>
|