From a65387d713e18a48d28774b6cd3fb7f87f82b590 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 9 Sep 2019 11:18:13 +0200
Subject: [PATCH] wip #2747 @0.5

---
 resources/js/carrousel.js                  | 45 +++++++++++++++-------
 resources/styles/components/carrousel.styl |  7 ++++
 resources/views/pages/home.blade.php       |  8 +---
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/resources/js/carrousel.js b/resources/js/carrousel.js
index 8ac09e2..745b7e3 100644
--- a/resources/js/carrousel.js
+++ b/resources/js/carrousel.js
@@ -6,7 +6,6 @@ window.Hammer = Hammer.default;
 
 (function ($) {
     function JQPMISlide(element) {
-        console.log(':))', element);
         this.element = element;
         this.pmiSlider = this.element.get(0);
         this.hammerSwipe = new Hammer(this.pmiSlider);
@@ -26,16 +25,31 @@ window.Hammer = Hammer.default;
 
         this.width = this.element.find('.slide-img').width(); // --> clip container width
         this.height = this.element.find('.slide-img').height(); // --> clip container height
-        this.init = 'rect(0px ';
-        this.final = 'px 0px)';
+        this.initRect = 'rect(0px ';
+        this.finalRect = 'px 0px)';
 
         this.container = this.element.find('.slider');
         this.hammerSwipe.get('swipe').set({enable: true});
-        this.initt();
+        this.init();
     };
 
     JQPMISlide.prototype = {
-        initt: function () {
+        init: function () {
+            var $this = this;
+            var i = 0;
+            this.container.find(".slide").each(function () {
+                console.log(this);
+                if (i === 0) {
+                    $(this).addClass('active').removeClass('hide');
+                } else {
+                    $(this).addClass('hide').removeClass('active');
+                }
+                $this.container.find('.slider-indicator ul').append('<li class="slider-position' + (i === 0 ? ' active-indicator' : '') + '" data-position="' + i + '"></li>')
+                i++;
+            });
+
+            $this.element.addClass('visible');
+
             this.initEvents();
         },
 
@@ -51,10 +65,10 @@ window.Hammer = Hammer.default;
                 $this.resize();
             });
 
-            this.autoSlideDelay = 4; // automatic slideshow delay
+            this.autoSlideDuration = 8; // automatic slideshow delay
             this.slideInterval = window.setTimeout(function () {
                 $this.nextSlide();
-            }, this.autoSlideDelay * 1000);
+            }, this.autoSlideDuration * 1000);
 
             this.resize();
             this.initSwipeEvent();
@@ -87,7 +101,10 @@ window.Hammer = Hammer.default;
                 let width = $(this).width(), // --> container width (clip container)
                     height = $(this).height(); // --> container height (clip container)
 
-                TweenMax.set($(this), {clip: $this.init + width + 'px ' + height + $this.final, ease: Power3.easeOut}); // on resize apply new width/height to clip container
+                TweenMax.set($(this), {
+                    clip: $this.initRect + width + 'px ' + height + $this.finalRect,
+                    ease: Power3.easeOut
+                }); // on resize apply new width/height to clip container
             });
         },
 
@@ -116,13 +133,13 @@ window.Hammer = Hammer.default;
                 if ($this.automode) {
                     $this.slideInterval = setTimeout(function () {
                         $this.nextSlide();
-                    }, $this.autoSlideDelay * 1000);
+                    }, $this.autoSlideDuration * 1000);
                 }
 
                 $this.enableArrows(); // when animation is finished we reactivate click event
                 $this.automaticSlideshow();
                 TweenMax.set($this.element.find('.slide-img'), {
-                    clip: $this.init + $this.width + 'px ' + $this.height + $this.final,
+                    clip: $this.initRect + $this.width + 'px ' + $this.height + $this.finalRect,
                     ease: Power3.easeOut
                 });
 
@@ -130,7 +147,7 @@ window.Hammer = Hammer.default;
 
             if ($(window).outerWidth() > 768) {
                 TweenMax.set($this.element.find('.slide-img'), {
-                    clip: $this.init + $this.width + 'px ' + $this.height + $this.final,
+                    clip: $this.initRect + $this.width + 'px ' + $this.height + $this.finalRect,
                     ease: Power3.easeOut
                 });
 
@@ -144,7 +161,7 @@ window.Hammer = Hammer.default;
                     ease: Power1.easeOut
                 });
                 tl.to($this.currentContainerImg, 2 * $this.Delay, {
-                    clip: $this.init + (direction) * -1 * $this.imgWidth + 'px,' + $this.height + 'px,' + (direction) * -1 * $this.imgWidth + 'px',
+                    clip: $this.initRect + (direction) * -1 * $this.imgWidth + 'px,' + $this.height + 'px,' + (direction) * -1 * $this.imgWidth + 'px',
                     ease: Power2.easeInOut
                 }, "-=" + 0.8 * $this.Delay);
 
@@ -251,8 +268,8 @@ window.Hammer = Hammer.default;
             });
         },
 
-        endAutomode:function(){
-            this.automode=false;
+        endAutomode: function () {
+            this.automode = false;
             clearTimeout(this.slideInterval);
         },
 
diff --git a/resources/styles/components/carrousel.styl b/resources/styles/components/carrousel.styl
index 356a1f8..5f3f5db 100644
--- a/resources/styles/components/carrousel.styl
+++ b/resources/styles/components/carrousel.styl
@@ -12,6 +12,12 @@
   $verylightgrey = #E7E9F3
   $controlSize = 60px;
 
+  opacity 0;
+  transition opacity 250ms
+
+  &.visible
+    opacity: 1;
+
   .column-wrapper.hide
     display none
 
@@ -73,6 +79,7 @@
     @media (max-width 769px)
       left: 50%
       transform: translateX(-50%)
+
     ul
       display flex
       align-items: center;
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
index 78e3780..85723bc 100644
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@@ -19,8 +19,7 @@
             </div>
             <div id="pmiSlider" class="slider relative">
                 @foreach($page->get('slideshow') as $i=>$slide)
-                    <div data-slide="{{$i+1}}"
-                         class="column-wrapper absolute slide @if($i==0) active @else hide @endif">
+                    <div class="column-wrapper absolute slide hide">
 
                         <column class="slide-content slide-txt pt-2v pr-1v pb-2v">
                             <div class="mobile-bg"
@@ -49,9 +48,6 @@
                 @endforeach
                 <div class="slider-indicator">
                     <ul class="pl-2v">
-                        @foreach($page->get('slideshow') as $i=>$slide)
-                            <li class="slider-position @if($i==0) active-indicator @endif" data-position="{{$i}}"></li>
-                        @endforeach
                     </ul>
                 </div>
             </div>
@@ -65,7 +61,7 @@
     <full-width class="bg-grey-100">
         <content>
 
-            <text-block class="mb-2v" title="Nos Produits"/>
+            <text-block class="mb-2v" :title="__('Nos Produits')"/>
 
             <columns>
                 <column>
-- 
2.39.5