From af11358a7600dacc4c14d0cb036bae97ca069f70 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Mon, 7 May 2018 09:54:30 +0200
Subject: [PATCH] Image carousel widget improvements

---
 .../static/css/widgets/image-carousel.css     | 16 ++++++++++++----
 .../http/static/js/widgets/image-carousel.js  | 19 +++++++++++++++++--
 .../templates/widgets/image-carousel.html     |  4 +++-
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/platypush/backend/http/static/css/widgets/image-carousel.css b/platypush/backend/http/static/css/widgets/image-carousel.css
index 69344f243..a4e71ba79 100644
--- a/platypush/backend/http/static/css/widgets/image-carousel.css
+++ b/platypush/backend/http/static/css/widgets/image-carousel.css
@@ -1,8 +1,16 @@
 .carousel {
-    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
     background-color: black;
-    background-size: auto 100%;
-    background-position: center;
-    background-repeat: no-repeat;
+    color: #999;
+}
+
+.carousel > img {
+    flex-shrink: 0;
+    max-height: 100%;
+    border-radius: 10px;
+    height: 22.5em;
 }
 
diff --git a/platypush/backend/http/static/js/widgets/image-carousel.js b/platypush/backend/http/static/js/widgets/image-carousel.js
index d3cfa6bc2..88e872327 100644
--- a/platypush/backend/http/static/js/widgets/image-carousel.js
+++ b/platypush/backend/http/static/js/widgets/image-carousel.js
@@ -1,5 +1,5 @@
 $(document).ready(function() {
-    var $imgElement = $('.image-carousel').find('.carousel'),
+    var $imgContainer = $('.image-carousel').find('.carousel'),
         config = window.widgets['image-carousel'],
         images = config.imageUrls,
         processedImages = 0;
@@ -14,7 +14,22 @@ $(document).ready(function() {
     };
 
     var refreshImage = function() {
-        $imgElement.css('background-image', "url('" + images[processedImages++] + "')");
+        var $oldImg = $imgContainer.find('img');
+        var $newImg = $imgContainer.find('img').clone()
+            .attr('src', images[processedImages++])
+            .hide().appendTo($imgContainer);
+
+        if ($newImg.width() > $newImg.height()) {
+            $newImg.css('min-width', '100%');
+        } else {
+            $newImg.css('min-width', '');
+        }
+
+        $newImg.on('load', function() {
+            $oldImg.remove();
+            $newImg.fadeIn();
+        });
+
         if (processedImages == images.length-1) {
             shuffleImages();
             processedImages = 0;
diff --git a/platypush/backend/http/templates/widgets/image-carousel.html b/platypush/backend/http/templates/widgets/image-carousel.html
index 30e10533d..ebe3c5ac4 100644
--- a/platypush/backend/http/templates/widgets/image-carousel.html
+++ b/platypush/backend/http/templates/widgets/image-carousel.html
@@ -8,5 +8,7 @@
     window.widgets['image-carousel'].imageUrls = {{ images|safe }};
 </script>
 
-<div class="carousel"></div>
+<div class="carousel">
+    <img alt="Your carousel images">
+</div>