From a323bc31ebc8cc354a913a68aeea1934f15a4e20 Mon Sep 17 00:00:00 2001
From: dmh <dmytro.hrynevych@gmail.com>
Date: Fri, 26 Oct 2018 15:30:52 +0300
Subject: [PATCH] update css/less/js

---
 Resources/Public/css/main.css   |  31 +++++
 Resources/Public/css/main.js    | 200 +++++++++++++++++---------------
 Resources/Public/less/main.js   | 200 +++++++++++++++++---------------
 Resources/Public/less/main.less |  35 ++++++
 4 files changed, 274 insertions(+), 192 deletions(-)

diff --git a/Resources/Public/css/main.css b/Resources/Public/css/main.css
index b52befd9..83e51d42 100644
--- a/Resources/Public/css/main.css
+++ b/Resources/Public/css/main.css
@@ -4096,6 +4096,37 @@ div.awesomplete li[aria-selected="true"] mark {
 }
 .slider-container {
   position: relative;
+  height: 0;
+  overflow: hidden;
+}
+.slider-container_loader {
+  display: block;
+  width: 46px;
+  height: 46px;
+  height: 350px;
+  position: relative;
+  margin: 0 auto;
+}
+.slider-container_loader:after {
+  content: " ";
+  display: block;
+  top: 50%;
+  position: absolute;
+  width: 46px;
+  height: 46px;
+  margin: 1px;
+  border-radius: 50%;
+  border: 5px solid #50b4d8;
+  border-color: #50b4d8 transparent #50b4d8 transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 .slider-container__container {
   position: relative;
diff --git a/Resources/Public/css/main.js b/Resources/Public/css/main.js
index 2ea99a3b..393dd094 100644
--- a/Resources/Public/css/main.js
+++ b/Resources/Public/css/main.js
@@ -341,108 +341,116 @@ jQuery(function ($) {
   '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
+            }
           },
-          767: {
-            slidesPerView: widthForTablet
+          coverflow: {
+            rotate: 90,
+            stretch: 0,
+            depth: 200,
+            modifier: 1,
+            slideShadows: false
+          },
+          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/Resources/Public/less/main.js b/Resources/Public/less/main.js
index 2ea99a3b..393dd094 100644
--- a/Resources/Public/less/main.js
+++ b/Resources/Public/less/main.js
@@ -341,108 +341,116 @@ jQuery(function ($) {
   '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
+            }
           },
-          767: {
-            slidesPerView: widthForTablet
+          coverflow: {
+            rotate: 90,
+            stretch: 0,
+            depth: 200,
+            modifier: 1,
+            slideShadows: false
+          },
+          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/Resources/Public/less/main.less b/Resources/Public/less/main.less
index ec5d1143..c81a135e 100644
--- a/Resources/Public/less/main.less
+++ b/Resources/Public/less/main.less
@@ -7122,6 +7122,41 @@ div.awesomplete li[aria-selected="true"] mark {
 
 .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 {