From 1b1016fba2656a79abcff6bfe4d11a9f0f60941d Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Mon, 7 May 2018 17:18:01 +0200
Subject: [PATCH] Added background blurred image if width < height

---
 .../static/css/widgets/image-carousel.css     | 36 ++++++++++++++-----
 .../http/static/js/widgets/image-carousel.js  |  7 +++-
 .../templates/widgets/image-carousel.html     |  1 +
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/platypush/backend/http/static/css/widgets/image-carousel.css b/platypush/backend/http/static/css/widgets/image-carousel.css
index 38bea1370..ced953ead 100644
--- a/platypush/backend/http/static/css/widgets/image-carousel.css
+++ b/platypush/backend/http/static/css/widgets/image-carousel.css
@@ -1,15 +1,33 @@
 .carousel {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     overflow: hidden;
-    background-color: black;
     color: #999;
-}
-
-.carousel > img {
-    flex-shrink: 0;
-    border-radius: 5px;
+    position: relative;
+    width: 100%;
     height: 22.5em;
 }
 
+.carousel > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 5px;
+    z-index: 2;
+}
+
+.carousel-background {
+    position: absolute;
+    width: 100%;
+    height: 22.5em;
+    top: 0;
+    left: 0;
+    background-color: black;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: blur(10px);
+    z-index: 1;
+}
+
diff --git a/platypush/backend/http/static/js/widgets/image-carousel.js b/platypush/backend/http/static/js/widgets/image-carousel.js
index 8726cc724..505ee044f 100644
--- a/platypush/backend/http/static/js/widgets/image-carousel.js
+++ b/platypush/backend/http/static/js/widgets/image-carousel.js
@@ -1,5 +1,6 @@
 $(document).ready(function() {
     var $imgContainer = $('.image-carousel').find('.carousel'),
+        $imgBackground = $('.image-carousel').find('.carousel-background'),
         config = window.widgets['image-carousel'],
         images = config.imageUrls,
         processedImages = 0;
@@ -14,9 +15,10 @@ $(document).ready(function() {
     };
 
     var refreshImage = function() {
+        var nextImage = images[processedImages++];
         var $oldImg = $imgContainer.find('img');
         var $newImg = $('<img></img>')
-            .attr('src', images[processedImages++])
+            .attr('src', nextImage)
             .attr('alt', 'Could not load image')
             .appendTo('body').hide();
 
@@ -24,6 +26,9 @@ $(document).ready(function() {
             $oldImg.remove();
             if ($newImg.width() > $newImg.height()) {
                 $newImg.css('width', '100%');
+                $imgBackground.css('background-image', '');
+            } else {
+                $imgBackground.css('background-image', 'url(' + nextImage + ')');
             }
 
             $newImg.css('max-height', '100%');
diff --git a/platypush/backend/http/templates/widgets/image-carousel.html b/platypush/backend/http/templates/widgets/image-carousel.html
index ebe3c5ac4..8ab899b54 100644
--- a/platypush/backend/http/templates/widgets/image-carousel.html
+++ b/platypush/backend/http/templates/widgets/image-carousel.html
@@ -9,6 +9,7 @@
 </script>
 
 <div class="carousel">
+    <div class="carousel-background">&nbsp;</div>
     <img alt="Your carousel images">
 </div>