From 9805cef82132425f01e90c2ffcb7a15c36d14cb9 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james.p.ketrenos@intel.com>
Date: Fri, 4 Jan 2019 15:06:14 -0800
Subject: [PATCH] Improved slideshow sliding

Signed-off-by: James Ketrenos <james.p.ketrenos@intel.com>
---
 frontend/elements/ken-burns.html | 371 +++++++++++++++++--------------
 1 file changed, 204 insertions(+), 167 deletions(-)
diff --git a/frontend/elements/ken-burns.html b/frontend/elements/ken-burns.html
index cd86693..7d238a5 100755
--- a/frontend/elements/ken-burns.html
+++ b/frontend/elements/ken-burns.html
@@ -1,17 +1,19 @@
 <!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-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">
-<link rel="import" href="../bower_components/iron-pages/iron-pages.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/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">
+  <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
 </head>
 
 <dom-module id="ken-burns">
-<template>
-  <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
+  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
       :host {
         position: fixed;
         top: 0px;
@@ -30,178 +32,213 @@
         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>
 
-  </style>
-  
     <div id="image">
     </div>
 
-</template>
+  </template>
 
-<script>
+  <script>
     "use strict";
     Polymer({
-        is: "ken-burns",
-        properties: {
-            "src": {
-                type: String,
-                value: ""
-            },
-            "unique": {
-                type: String,
-                value: ""
-            }
+      is: "ken-burns",
+      properties: {
+        "src": {
+          type: String,
+          value: ""
         },
-
-        listeners: {
-        },
-
-        observers: [
-            "widthChanged(width)",
-            "thumbChanged(thumbpath, visible)",
-            "srcChanged(src, unique)"
-        ],
-
-        srcChanged: function(src) {
-            if (!src) {
-                return;
-            }
-            this.loadImage(src);
-        },
-
-        loadImage: function(path) {
-            if (this.$.image.style.opacity != 0) {
-                this.waitUntil = (Date.now() / 1000) + 500;
-            } else {
-                this.waitUntil = 0;
-            }
-            this.$.image.style.opacity = 0;
-
-            this.image = new Image();
-            this.requested = path;
-            this.loading = true;
-
-            this.image.onload = function(path) {
-                this.loading = false;
-                var remaining = Math.max(this.waitUntil - Date.now() / 1000, 0);
-                this.async(function() {
-                    if (!this.image || this.requested != path) {
-                        return;
-                    }
-
-                    this.showImage();
-
-                    this.$.image.style.backgroundImage = 'url(' + this.image.src + ')';
-                    this.$.image.style.opacity = 1;
-                    this.image = undefined;
-                }, 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 "";
-            }
-            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.*$/, "");
-        },
-
-        reload: function() {
-            this.unique = parseInt(this.unique || 0) + 1;
-        },
-
-        randomizer: function(min,max) {
-            return Math.random() * (max - min) + min;
-        },
-
-        attached: function() {
-            var base = document.querySelector("base");
-            if (base) {
-                this.base = new URL(base.href).pathname.replace(/\/$/, "") + "/"; /* Make sure there is a trailing slash */
-            } else {
-                this.base = "/";
-            }
-
-            this.showImage();
-        },
-
-        showImage: function() {
-            var maxscale = 1.25;
-            var minscale = 1.1;
-            var minMov = 2;
-            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 prefix = "";
-            if (CSSRule.WEBKIT_KEYFRAMES_RULE) {
-                prefix = "-webkit-";
-            } else if (CSSRule.MOZ_KEYFRAMES_RULE) {
-                prefix = "-moz-";
-            }
-
-            var style = 
-                "#image { " +
-                    "animation: zoom 12s alternate infinite; " +
-                    "position: absolute; " +
-                    "top: -5%; left:-5%; width: 110%; height: 110%; " +
-                "}" + 
-                "\n" +
-                "@" + prefix + "keyframes burnseffect { " +
-                    "10% { " + 
-                        prefix + "transform: scale(1);" +
-                    "} " +
-                    "90% { " + 
-                        prefix + "transform: scale(" + scalar +" ) translate(" + moveX +"%," +  moveY + "%);" +
-                    "} " +
-                    "100% { " + 
-                        prefix + "transform: scale(" + scalar + ") translate(" + moveX +"%," +  moveY +"%);" +
-                    "}" +
-                "}";
-
-            if (this.animStyle) {
-                this.root.removeChild(this.animStyle);
-            }
-            this.animStyle = document.createElement("style");
-            this.animStyle.appendChild(document.createTextNode(style));
-            this.root.insertBefore(this.animStyle, this.firstChild);
-
-            this.$.image.style.animationName = 'burnseffect';
-            this.$.image.style.webkitAnimationName = 'burnseffect';
-            this.$.image.style.mozAnimationName = 'burnseffect';
-            this.$.image.style.animationName = 'burnseffect';
-
-            this.updateStyles();
+        "unique": {
+          type: String,
+          value: ""
         }
+      },
+
+      behaviors: [
+        /* @polymerBehavior Polymer.IronResizableBehavior */
+        Polymer.IronResizableBehavior
+      ],
+
+      listeners: {
+        "iron-resize" : "onResize"
+      },
+
+      onResize: function(event) {
+        console.log("ken-burns:onResize");
+        this.rescale();
+      },
+
+      observers: [
+        "srcChanged(src, unique)"
+      ],
+
+      srcChanged: function (src) {
+        if (!src) {
+          return;
+        }
+        this.loadImage(src);
+      },
+
+      loadImage: function (path) {
+        if (this.$.image.style.opacity != 0) {
+          this.waitUntil = (Date.now() / 1000) + 500;
+        } else {
+          this.waitUntil = 0;
+        }
+        this.$.image.style.opacity = 0;
+
+        this.image = new Image();
+        this.requested = path;
+        this.loading = true;
+
+        this.image.onload = function (path) {
+          this.loading = false;
+          var remaining = Math.max(this.waitUntil - Date.now() / 1000, 0);
+          this.async(function () {
+            if (!this.image || this.requested != path) {
+              return;
+            }
+
+            this.$.image.style.backgroundImage = 'url(' + this.image.src + ')';
+            this.$.image.style.opacity = 1;
+
+            this.rescale();
+            //this.showImage();
+
+          }, remaining);
+        }.bind(this, path);
+
+        this.image.src = path + (this.unique ? ("?" + this.unique) : "");
+      },
+
+      rescale: function() {
+        if (!this.image) {
+          return;
+        }
+
+        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 () {
+        this.unique = parseInt(this.unique || 0) + 1;
+      },
+
+      randomizer: function (min, max) {
+        return Math.random() * (max - min) + min;
+      },
+
+      attached: function () {
+        var base = document.querySelector("base");
+        if (base) {
+          this.base = new URL(base.href).pathname.replace(/\/$/, "") + "/"; /* Make sure there is a trailing slash */
+        } else {
+          this.base = "/";
+        }
+      },
+
+      showImage: function () {
+        var maxscale = 1.25;
+        var minscale = 1.1;
+        var minMov = 2;
+        var maxMov = 5;
+        var scalar = this.randomizer(minscale, maxscale).toFixed(2);
+        var moveX = this.randomizer(minMov, maxMov).toFixed(2);
+        var moveY = this.randomizer(minMov, maxMov).toFixed(2);
+
+        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) {
+          prefix = "-webkit-";
+        } else if (CSSRule.MOZ_KEYFRAMES_RULE) {
+          prefix = "-moz-";
+        }
+/*
+        var style =
+          "#image { " +
+          "animation: kenburns " + time + "s alternate infinite; " +
+          "position: absolute; " +
+          "top: -5%; left:-5%; width: 110%; height: 110%; " +
+          "}" +
+          "\n" +
+          "@" + prefix + "keyframes burnseffect { " +
+          "10% { " +
+          prefix + "transform: scale(1);" +
+          "} " +
+          "90% { " +
+          prefix + "transform: scale(" + scalar + " ) translate(" + moveX + "%," + moveY + "%);" +
+          "} " +
+          "100% { " +
+          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);
+        }
+        this.animStyle = document.createElement("style");
+        this.animStyle.appendChild(document.createTextNode(style));
+        this.root.insertBefore(this.animStyle, this.firstChild);
+
+        this.$.image.style.animationName = 'burnseffect';
+        this.$.image.style.webkitAnimationName = 'burnseffect';
+        this.$.image.style.mozAnimationName = 'burnseffect';
+        this.$.image.style.animationName = 'burnseffect';
+
+        this.updateStyles();
+      }
     });
-</script>
+  </script>
 </dom-module>
+
 </html>
\ No newline at end of file
