Improved slideshow sliding
Signed-off-by: James Ketrenos <james.p.ketrenos@intel.com>
This commit is contained in:
James Ketrenos
parent
827af8e79e
commit
9805cef821
@ -1,8 +1,10 @@
|
|||||||
<!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-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-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-icon/iron-icon.html">
|
||||||
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
|
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
|
||||||
@ -30,15 +32,12 @@
|
|||||||
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">
|
||||||
@ -61,12 +60,21 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
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)"
|
||||||
],
|
],
|
||||||
|
|
||||||
@ -97,36 +105,36 @@
|
|||||||
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) : "");
|
|
||||||
},
|
|
||||||
|
|
||||||
date: function(item) {
|
this.har = this.offsetWidth / this.offsetHeight;
|
||||||
var datetime = item.taken || item.modified || item.added;
|
this.iar = this.image.width / this.image.height;
|
||||||
return datetime.replace(/T.*$/, "");
|
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 () {
|
reload: function () {
|
||||||
@ -144,8 +152,6 @@
|
|||||||
} else {
|
} else {
|
||||||
this.base = "/";
|
this.base = "/";
|
||||||
}
|
}
|
||||||
|
|
||||||
this.showImage();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
showImage: function () {
|
showImage: function () {
|
||||||
@ -155,11 +161,20 @@
|
|||||||
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);
|
||||||
|
|
||||||
moveX = Math.random() < 0.5 ? -Math.abs(moveX) : Math.abs(moveX);
|
|
||||||
|
|
||||||
var moveY = this.randomizer(minMov, maxMov).toFixed(2);
|
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 = "";
|
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%; " +
|
||||||
"}" +
|
"}" +
|
||||||
@ -186,6 +201,27 @@
|
|||||||
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);" +
|
||||||
|
"}" +
|
||||||
|
"}";
|
||||||
|
|
||||||
if (this.animStyle) {
|
if (this.animStyle) {
|
||||||
this.root.removeChild(this.animStyle);
|
this.root.removeChild(this.animStyle);
|
||||||
@ -204,4 +240,5 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user