jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Improved slideshow sliding

Browse Source 
Signed-off-by: James Ketrenos <james.p.ketrenos@intel.com>
This commit is contained in:
James Ketrenos 2019-01-04 15:06:14 -08:00
parent 827af8e79e
commit 9805cef821
1 changed files with 204 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
frontend/elements/ken-burns.html
View File

@ -1,16 +1,18 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<link rel="import" href="../bower_components/polymer/polymer.html"> <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/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-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html"> <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html"> <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html"> <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
</head> </head>
<dom-module id="ken-burns"> <dom-module id="ken-burns">
<template> <template>
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"> <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
:host { :host {
position: fixed; position: fixed;
@ -30,23 +32,20 @@
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100%; background-size: 100%;
height: 100%;
background-size: contain;
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out;
} }
</style> </style>
<div id="image"> <div id="image">
</div> </div>
</template> </template>
<script> <script>
"use strict"; "use strict";
Polymer({ Polymer({
is: "ken-burns", is: "ken-burns",
@ -61,23 +60,32 @@
} }
}, },
behaviors: [
/* @polymerBehavior Polymer.IronResizableBehavior */
Polymer.IronResizableBehavior
],
listeners: { listeners: {
"iron-resize" : "onResize"
},
onResize: function(event) {
console.log("ken-burns:onResize");
this.rescale();
}, },
observers: [ observers: [
"widthChanged(width)",
"thumbChanged(thumbpath, visible)",
"srcChanged(src, unique)" "srcChanged(src, unique)"
], ],
srcChanged: function(src) { srcChanged: function (src) {
if (!src) { if (!src) {
return; return;
} }
this.loadImage(src); this.loadImage(src);
}, },
loadImage: function(path) { loadImage: function (path) {
if (this.$.image.style.opacity != 0) { if (this.$.image.style.opacity != 0) {
this.waitUntil = (Date.now() / 1000) + 500; this.waitUntil = (Date.now() / 1000) + 500;
} else { } else {
@ -89,77 +97,84 @@
this.requested = path; this.requested = path;
this.loading = true; this.loading = true;
this.image.onload = function(path) { this.image.onload = function (path) {
this.loading = false; this.loading = false;
var remaining = Math.max(this.waitUntil - Date.now() / 1000, 0); var remaining = Math.max(this.waitUntil - Date.now() / 1000, 0);
this.async(function() { this.async(function () {
if (!this.image || this.requested != path) { if (!this.image || this.requested != path) {
return; return;
} }
this.showImage();
this.$.image.style.backgroundImage = 'url(' + this.image.src + ')'; this.$.image.style.backgroundImage = 'url(' + this.image.src + ')';
this.$.image.style.opacity = 1; this.$.image.style.opacity = 1;
this.image = undefined;
this.rescale();
//this.showImage();
}, remaining); }, remaining);
}.bind(this, path); }.bind(this, path);
this.image.src = path + (this.unique ? ("?" + this.unique) : ""); this.image.src = path + (this.unique ? ("?" + this.unique) : "");
}, },
formatDateTime: function(date) { rescale: function() {
return window.moment(new Date(date)).format("lll"); if (!this.image) {
}, return;
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) : "");
this.har = this.offsetWidth / this.offsetHeight;
this.iar = this.image.width / this.image.height;
this.pan = this.har < this.iar ? "HORIZONTAL" : "VERTICAL";
console.log("Pan: " + this.pan);
if (this.pan == "HORIZONTAL") {
this.$.image.style.height = (this.offsetHeight * 1.1).toFixed(2) + "px";
this.$.image.style.width = (this.offsetHeight * this.iar).toFixed(2) + "px";
} else {
this.$.image.style.width = (this.offsetWidth * 1.1).toFixed(2) + "px";
this.$.image.style.height = (this.offsetWidth / this.iar).toFixed(2) + "px";
}
this.showImage();
}, },
date: function(item) { reload: function () {
var datetime = item.taken || item.modified || item.added;
return datetime.replace(/T.*$/, "");
},
reload: function() {
this.unique = parseInt(this.unique || 0) + 1; this.unique = parseInt(this.unique || 0) + 1;
}, },
randomizer: function(min,max) { randomizer: function (min, max) {
return Math.random() * (max - min) + min; return Math.random() * (max - min) + min;
}, },
attached: function() { attached: function () {
var base = document.querySelector("base"); var base = document.querySelector("base");
if (base) { if (base) {
this.base = new URL(base.href).pathname.replace(/\/$/, "") + "/"; /* Make sure there is a trailing slash */ this.base = new URL(base.href).pathname.replace(/\/$/, "") + "/"; /* Make sure there is a trailing slash */
} else { } else {
this.base = "/"; this.base = "/";
} }
this.showImage();
}, },
showImage: function() { showImage: function () {
var maxscale = 1.25; var maxscale = 1.25;
var minscale = 1.1; var minscale = 1.1;
var minMov = 2; var minMov = 2;
var maxMov = 5; var maxMov = 5;
var scalar = this.randomizer(minscale,maxscale).toFixed(2); var scalar = this.randomizer(minscale, maxscale).toFixed(2);
var moveX = this.randomizer(minMov,maxMov).toFixed(2); var moveX = this.randomizer(minMov, maxMov).toFixed(2);
var moveY = this.randomizer(minMov, maxMov).toFixed(2);
moveX = Math.random() < 0.5 ? -Math.abs(moveX) : Math.abs(moveX); var time = 1;
if (this.pan == "HORIZONTAL") {
var moveY = this.randomizer(minMov,maxMov).toFixed(2); var scroll = this.$.image.offsetWidth - this.offsetWidth;
moveY = Math.random() < 0.5 ? -Math.abs(moveY) : Math.abs(moveY); time = Math.ceil(Math.abs(scroll) / 30);
moveX = Math.random() < 0.5 ? [ 0, -scroll ] : [ -scroll, 0 ];
moveY = [ 0, 0 ];
} else {
var scroll = this.$.image.offsetHeight - this.offsetHeight;
time = Math.ceil(Math.abs(scroll) / 30);
moveX = [ 0, 0 ];
moveY = Math.random() < 0.5 ? [ 0, -scroll ] : [ -scroll, 0 ];
}
var prefix = ""; var prefix = "";
if (CSSRule.WEBKIT_KEYFRAMES_RULE) { if (CSSRule.WEBKIT_KEYFRAMES_RULE) {
@ -167,10 +182,10 @@
} else if (CSSRule.MOZ_KEYFRAMES_RULE) { } else if (CSSRule.MOZ_KEYFRAMES_RULE) {
prefix = "-moz-"; prefix = "-moz-";
} }
/*
var style = var style =
"#image { " + "#image { " +
"animation: zoom 12s alternate infinite; " + "animation: kenburns " + time + "s alternate infinite; " +
"position: absolute; " + "position: absolute; " +
"top: -5%; left:-5%; width: 110%; height: 110%; " + "top: -5%; left:-5%; width: 110%; height: 110%; " +
"}" + "}" +
@ -180,10 +195,31 @@
prefix + "transform: scale(1);" + prefix + "transform: scale(1);" +
"} " + "} " +
"90% { " + "90% { " +
prefix + "transform: scale(" + scalar +" ) translate(" + moveX +"%," + moveY + "%);" + prefix + "transform: scale(" + scalar + " ) translate(" + moveX + "%," + moveY + "%);" +
"} " + "} " +
"100% { " + "100% { " +
prefix + "transform: scale(" + scalar + ") translate(" + moveX +"%," + moveY +"%);" + prefix + "transform: scale(" + scalar + ") translate(" + moveX + "%," + moveY + "%);" +
"}" +
"}";
*/
var style =
"#image { " +
"animation: kenburns " + time + "s alternate infinite; " +
"position: absolute; " +
"}" +
"\n" +
"@" + prefix + "keyframes burnseffect { " +
"0% { " +
prefix + "transform: translate(" + moveX[0] + "px," + moveY[0] + "px);" +
"} " +
"10% { " +
prefix + "transform: translate(" + moveX[0] + "px," + moveY[0] + "px);" +
"} " +
"90% { " +
prefix + "transform: translate(" + moveX[1] + "px," + moveY[1] + "px);" +
"} " +
"100% { " +
prefix + "transform: translate(" + moveX[1] + "px," + moveY[1] + "px);" +
"}" + "}" +
"}"; "}";
@ -202,6 +238,7 @@
this.updateStyles(); this.updateStyles();
} }
}); });
</script> </script>
</dom-module> </dom-module>
</html> </html>