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

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

@ -1,8 +1,10 @@
<!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-resizable-behavior/iron-resizable-behavior.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">
@ -30,15 +32,12 @@
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-size: contain;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}
</style>
<div id="image">
@ -61,12 +60,21 @@
}
},
behaviors: [
/* @polymerBehavior Polymer.IronResizableBehavior */
Polymer.IronResizableBehavior
],
listeners: {
"iron-resize" : "onResize"
},
onResize: function(event) {
console.log("ken-burns:onResize");
this.rescale();
},
observers: [
"widthChanged(width)",
"thumbChanged(thumbpath, visible)",
"srcChanged(src, unique)"
],
@ -97,36 +105,36 @@
return;
}
this.showImage();
this.$.image.style.backgroundImage = 'url(' + this.image.src + ')';
this.$.image.style.opacity = 1;
this.image = undefined;
this.rescale();
//this.showImage();
}, remaining);
}.bind(this, path);
this.image.src = path + (this.unique ? ("?" + this.unique) : "");
},
formatDateTime: function(date) {
return window.moment(new Date(date)).format("lll");
},
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 "";
rescale: function() {
if (!this.image) {
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.*$/, "");
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();
},
reload: function () {
@ -144,8 +152,6 @@
} else {
this.base = "/";
}
this.showImage();
},
showImage: function () {
@ -155,11 +161,20 @@
var maxMov = 5;
var scalar = this.randomizer(minscale, maxscale).toFixed(2);
var moveX = this.randomizer(minMov, maxMov).toFixed(2);
moveX = Math.random() < 0.5 ? -Math.abs(moveX) : Math.abs(moveX);
var moveY = this.randomizer(minMov, maxMov).toFixed(2);
moveY = Math.random() < 0.5 ? -Math.abs(moveY) : Math.abs(moveY);
var time = 1;
if (this.pan == "HORIZONTAL") {
var scroll = this.$.image.offsetWidth - this.offsetWidth;
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 = "";
if (CSSRule.WEBKIT_KEYFRAMES_RULE) {
@ -167,10 +182,10 @@
} else if (CSSRule.MOZ_KEYFRAMES_RULE) {
prefix = "-moz-";
}
/*
var style =
"#image { " +
"animation: zoom 12s alternate infinite; " +
"animation: kenburns " + time + "s alternate infinite; " +
"position: absolute; " +
"top: -5%; left:-5%; width: 110%; height: 110%; " +
"}" +
@ -186,6 +201,27 @@
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);" +
"}" +
"}";
if (this.animStyle) {
this.root.removeChild(this.animStyle);
@ -204,4 +240,5 @@
});
</script>
</dom-module>
</html>