[FEATURE] add a preloader until slider container is initialized (#442)

* [BUGFIX] add preloader until slider is initialized * [TASK] add loader element to template * [TASK] change code according to stylelintrc
t3kit · Oct 25, 2018 · d134468 · d134468
1 parent 60f58de
commit d134468
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 96 deletions.
diff --git a/Resources/Private/Templates/GridElements/SliderContainer.html b/Resources/Private/Templates/GridElements/SliderContainer.html
@@ -19,6 +19,7 @@
 			<div class=" swiper-button-prev slider-container__button-prev js__slider-container__btn-prev"></div>
 		</f:if>
 	</div>
+	<div class="slider-container_loader"></div>
 	<f:if condition="{data.pi_flexform.data.columns.lDEF.grid_container.vDEF}">
 		</div>
 		</div>

diff --git a/felayout_t3kit/dev/js/main/contentElements/sliderContainer.js b/felayout_t3kit/dev/js/main/contentElements/sliderContainer.js
@@ -3,107 +3,115 @@
   'use strict'
   // document load event
   $(document).ready(function () {
-    var $swiperContainerWrapper = $('.js__slider-container__wrapper')
-    $swiperContainerWrapper.each(function () {
-      $(this).children().wrap('<div class="swiper-slide slider-container__slide js__slider-container__slide"></div>')
-    })
-
-    var $swiperContainer = $('.js__slider-container__container')
-    $swiperContainer.each(function () {
-      var time = $(this).attr('data-autoplay')
-      var loopParam = $(this).attr('data-loop')
-      var amountOfSlides = parseInt($(this).attr('data-slidesperview'))
-      var effectName = $(this).attr('data-effect')
-      var transition = $(this).attr('data-speed')
-      var widthForMobile
-      var widthForTablet
-      var widthForLaptop
-      var widthForMediumLaptop
-      if (amountOfSlides >= 4) {
-        widthForMobile = 1
-        widthForTablet = 2
-        widthForLaptop = 3
-        widthForMediumLaptop = 4
-      } else if (amountOfSlides === 2) {
-        widthForMobile = 1
-        widthForTablet = 1
-        widthForLaptop = 1
-        widthForMediumLaptop = 2
-      } else if (amountOfSlides === 1) {
-        widthForMobile = 1
-        widthForTablet = 1
-        widthForLaptop = 1
-        widthForMediumLaptop = 1
-      } else {
-        widthForMobile = 1
-        widthForTablet = 2
-        widthForLaptop = 2
-        widthForMediumLaptop = 3
-      }
-      var slider = new Swiper($(this), {
-        containerModifierClass: 'js__slider-container__container',
-        wrapperClass: 'js__slider-container__wrapper',
-        slideClass: 'js__slider-container__slide',
-        nextButton: $(this).parent().find('.js__slider-container__btn-next'),
-        prevButton: $(this).parent().find('.js__slider-container__btn-prev'),
-        pagination: $(this).parent().find('.js__slider-container__pagination'),
-        paginationClickable: true,
-        speed: parseInt(transition),
-        loop: loopParam,
-        autoplay: time,
-        effect: effectName,
-        watchSlidesVisibility: true,
-        spaceBetween: 20,
-        preloadImages: false,
-        lazyLoading: true,
-        lazyLoadingInPrevNext: true,
-        slidesPerView: amountOfSlides,
-        breakpoints: {
-          // Responsive breakpoints
-          480: {
-            slidesPerView: widthForMobile
+    if ($('.slider-container').length > 0) {
+      var $swiperContainerWrapper = $('.js__slider-container__wrapper')
+      // dividing content into sliders
+      $swiperContainerWrapper.each(function () {
+        $(this).children().wrap('<div class="swiper-slide slider-container__slide js__slider-container__slide"></div>')
+      })
+      var $swiperContainer = $('.js__slider-container__container')
+      // initialization of the Slider
+      $swiperContainer.each(function () {
+        var currentSlider = $(this)
+        var time = currentSlider.attr('data-autoplay')
+        var loopParam = currentSlider.attr('data-loop')
+        var amountOfSlides = parseInt(currentSlider.attr('data-slidesperview'))
+        var effectName = currentSlider.attr('data-effect')
+        var transition = currentSlider.attr('data-speed')
+        var widthForMobile
+        var widthForTablet
+        var widthForLaptop
+        var widthForMediumLaptop
+        if (amountOfSlides >= 4) {
+          widthForMobile = 1
+          widthForTablet = 2
+          widthForLaptop = 3
+          widthForMediumLaptop = 4
+        } else if (amountOfSlides === 2) {
+          widthForMobile = 1
+          widthForTablet = 1
+          widthForLaptop = 1
+          widthForMediumLaptop = 2
+        } else if (amountOfSlides === 1) {
+          widthForMobile = 1
+          widthForTablet = 1
+          widthForLaptop = 1
+          widthForMediumLaptop = 1
+        } else {
+          widthForMobile = 1
+          widthForTablet = 2
+          widthForLaptop = 2
+          widthForMediumLaptop = 3
+        }
+        var slider = new Swiper(currentSlider, {
+          containerModifierClass: 'js__slider-container__container',
+          wrapperClass: 'js__slider-container__wrapper',
+          slideClass: 'js__slider-container__slide',
+          nextButton: currentSlider.parent().find('.js__slider-container__btn-next'),
+          prevButton: currentSlider.parent().find('.js__slider-container__btn-prev'),
+          pagination: currentSlider.parent().find('.js__slider-container__pagination'),
+          paginationClickable: true,
+          speed: parseInt(transition),
+          loop: loopParam,
+          autoplay: time,
+          effect: effectName,
+          watchSlidesVisibility: true,
+          spaceBetween: 20,
+          preloadImages: false,
+          lazyLoading: true,
+          lazyLoadingInPrevNext: true,
+          slidesPerView: amountOfSlides,
+          breakpoints: {
+            // Responsive breakpoints
+            480: {
+              slidesPerView: widthForMobile
+            },
+            767: {
+              slidesPerView: widthForTablet
+            },
+            992: {
+              slidesPerView: widthForLaptop
+            },
+            1024: {
+              slidesPerView: widthForMediumLaptop
+            }
+          },
+          coverflow: {
+            rotate: 90,
+            stretch: 0,
+            depth: 200,
+            modifier: 1,
+            slideShadows: false
           },
-          767: {
-            slidesPerView: widthForTablet
+          cube: {
+            slideShadows: false,
+            shadow: false
           },
-          992: {
-            slidesPerView: widthForLaptop
+          fade: {
+            crossFade: true
           },
-          1024: {
-            slidesPerView: widthForMediumLaptop
+          flip: {
+            slideShadows: false
+          },
+          onInit: function () {
+            currentSlider.closest('.slider-container').css('height', 'auto')
+            $('.slider-container_loader').css('display', 'none')
           }
-        },
-        coverflow: {
-          rotate: 90,
-          stretch: 0,
-          depth: 200,
-          modifier: 1,
-          slideShadows: false
-        },
-        cube: {
-          slideShadows: false,
-          shadow: false
-        },
-        fade: {
-          crossFade: true
-        },
-        flip: {
-          slideShadows: false
-        }
-      })
-      // Makes it possible to skip between slider images if they have links, using the tab button
-      slider.container.on('focus', 'a', function (e) {
-        // Index of focused slide
-        var focusIndex = $(e.target).parents('.slider-container__slide').index()
-        // Reset scrollLeft set by browser on focus
-        slider.container.scrollLeft(0)
-        // IE fix
-        setTimeout(function () {
+        })
+        // Makes it possible to skip between slider images if they have links, using the tab button
+        slider.container.on('focus', 'a', function (e) {
+          // Index of focused slide
+          var focusIndex = $(e.target).parents('.slider-container__slide').index()
+          // Reset scrollLeft set by browser on focus
           slider.container.scrollLeft(0)
-        }, 0)
-        // Slide to focused slide
-        slider.slideTo(focusIndex)
+          // IE fix
+          setTimeout(function () {
+            slider.container.scrollLeft(0)
+          }, 0)
+          // Slide to focused slide
+          slider.slideTo(focusIndex)
+        })
       })
-    })
+    }
   })
 })(jQuery)
diff --git a/felayout_t3kit/dev/styles/main/contentElements/sliderContainer.less b/felayout_t3kit/dev/styles/main/contentElements/sliderContainer.less
@@ -1,5 +1,40 @@
 .slider-container {
     position: relative;
+    height: 0;
+    overflow: hidden;
+}
+
+.slider-container_loader {
+    display: block;
+    width: 46px;
+    height: 46px;
+    height: 350px;
+    position: relative;
+    margin: 0 auto;
+
+    &:after {
+        content: " ";
+        display: block;
+        top: 50%;
+        position: absolute;
+        width: 46px;
+        height: 46px;
+        margin: 1px;
+        border-radius: 50%;
+        border: 5px solid @main-color;
+        border-color: @main-color transparent @main-color transparent;
+        animation: lds-dual-ring 1.2s linear infinite;
+    }
+}
+
+@keyframes lds-dual-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 .slider-container__container {
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ @@
     			<div class=" swiper-button-prev slider-container__button-prev js__slider-container__btn-prev"></div>
     		</f:if>
     	</div>
+    	<div class="slider-container_loader"></div>
     	<f:if condition="{data.pi_flexform.data.columns.lDEF.grid_container.vDEF}">
     		</div>
     		</div>
@@ Expand Down @@