Merge branch '1.1' of https://gitlab.com/merdan.m/birzha into 1.1

plugins/tps/birzha/components/Sliders.php

@@ -45,6 +45,7 @@ class Sliders extends ComponentBase
         $this->slider = $this->loadSliders();
         $translator = Translator::instance();
         $this->lng = $translator->getLocale();
+        $this->slidesDisplays = collect($this->slider->slide_items)->pluck('display_time');
     }
 
     protected function loadSliders() {
@@ -57,4 +58,5 @@ class Sliders extends ComponentBase
 
     public $slider;
     public $lng;
+    public $slidesDisplays;
 }

plugins/tps/birzha/components/sliders/img_slider.htm

@@ -6,4 +6,51 @@
         <img src="{{ item.slide_img|media }}" alt="">
     </div>
     {% endfor %}
-</div>
+</div>
+
+{% put scripts %}
+
+<script>
+
+    $(window).on('load', function() {
+
+        let ImagePauses = {{ __SELF__.slidesDisplays }}
+
+
+        $(".advert").slick({
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            arrows: false,
+            autoplay: true,
+            dots: true,
+            // autoplaySpeed: 2500,
+            autoplaySpeed: ImagePauses[0] * 1000,
+            pauseOnHover: false,
+
+
+            infinite: true,
+            speed: 1000,
+            fade: false,
+            adaptiveHeight: false,
+            lazyLoad: 'ondemand',
+
+            cssEase: 'linear',
+            swipeToSlide: true,
+            waitForAnimate: false,
+            draggable: true,
+        });
+
+        // Sliding settings
+        $(".advert").on("afterChange", function (event, slick, currentSlide) {
+            $(".advert").slick(
+                "slickSetOption",
+                "autoplaySpeed",
+                ImagePauses[currentSlide] * 1000,
+                true
+            );
+        });
+
+    })
+</script>
+
+{% endput %}

plugins/tps/birzha/components/sliders/text_slider.htm

@@ -9,25 +9,19 @@
             <div class="slider_title">
                 {{ item.slide_title_ru }}
             </div>
-            <div class="slider_text">
+            
-                {{ item.slide_text_ru }}
-            </div>
             {% endif %}
             {% if lng == 'en' %}
             <div class="slider_title">
                 {{ item.slide_title_en }}
             </div>
-            <div class="slider_text">
+            
-                {{ item.slide_text_en }}
-            </div>
             {% endif %}
             {% if lng == 'tm' %}
             <div class="slider_title">
                 {{ item.slide_title_tm }}
             </div>
-            <div class="slider_text">
+            
-                {{ item.slide_text_tm }}
-            </div>
             {% endif %}
         </div>
         <div class="slider_item-img">
@@ -35,4 +29,49 @@
         </div>
     </div>
     {% endfor %}
+    
 </div>
+
+{% put scripts %}
+
+<script>
+    $(window).on('load', function() {
+
+        let ImagePauses = {{ __SELF__.slidesDisplays }}
+
+        $(".intro_slider").slick({
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            arrows: true,
+            autoplay: true,
+            dots: false,
+            // autoplaySpeed: 3000,
+            autoplaySpeed: ImagePauses[0] * 1000,
+            pauseOnHover: false,
+
+
+            infinite: true,
+            speed: 1000,
+            fade: true,
+            adaptiveHeight: false,
+            lazyLoad: 'ondemand',
+
+            cssEase: 'linear',
+            swipeToSlide: true,
+            waitForAnimate: false,
+            draggable: true,
+        });
+
+        // Sliding settings
+        $(".intro_slider").on("afterChange", function (event, slick, currentSlide) {
+            $(".intro_slider").slick(
+                "slickSetOption",
+                "autoplaySpeed",
+                ImagePauses[currentSlide] * 1000,
+                true
+            );
+        });
+    })
+</script>
+
+{% endput %}

plugins/tps/birzha/models/slider/fields.yaml

@@ -42,3 +42,7 @@ fields:
                     imageHeight: '80'
                     span: auto
                     type: mediafinder
+                display_time:
+                    label: 'Display time'
+                    span: auto
+                    type: number

themes/birzha/assets/css/main.css

@@ -1734,7 +1734,7 @@ li {
     display: block !important;
 }
 
-.slider_item-img::before {
+/* .slider_item-img::before {
     position: absolute;
     content: '';
     top: 0;
@@ -1742,8 +1742,7 @@ li {
     width: 100%;
     height: 100%;
     background: rgba(0, 49, 151, .5);
-
+} */
-}
 
 .slider_item-img {
     position: absolute;
@@ -1753,9 +1752,9 @@ li {
     height: 100%;
 }
 
-.slick-slide.slick-current .slider_item-img {
+/* .slick-slide.slick-current .slider_item-img {
     animation: slider_img 10s linear;
-}
+} */
 
 
 @keyframes slider_img {
@@ -1781,10 +1780,18 @@ li {
 }
 
 .slider_title {
-    font-size: var(--text-32);
+    /* font-size: var(--text-32); */
+    font-size: 18px;
     font-weight: 700;
     line-height: 1.4;
-    margin-bottom: 20px;
+    /* margin-bottom: 20px; */
+
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .slider_text {
@@ -1794,19 +1801,15 @@ li {
 }
 
 .slider_content {
-    text-align: center;
     color: #fff;
     z-index: 5;
     position: absolute;
-    top: 50%;
+    bottom: 0;
-    left: 50%;
+    left: 0;
-    transform: translate(-50%, -50%);
+    width: 100%;
-    -ms-transform: translate(-50%, -50%);
+    padding: 30px 40px;
-    -moz-transform: translate(-50%, -50%);
+    background: rgba(0,0,0,.5);
-    -o-transform: translate(-50%, -50%);
+    backdrop-filter: blur(3px);
-    -webkit-transform: translate(-50%, -50%);
-    width: 80%;
-
 }
 
 .advert {
@@ -7357,15 +7360,6 @@ input::-webkit-calendar-picker-indicator {
         font-size: 18px;
     }
 
-    .slider_title {
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 4;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
     .slider_text {
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -7685,7 +7679,7 @@ input::-webkit-calendar-picker-indicator {
     }
 
     .slider_title {
-        font-size: 20px;
+        font-size: 16px;
     }
 
     .post_input input,

themes/birzha/assets/js/slider.js

@@ -1,48 +1,8 @@
 
 // Slider =======================================
-$(".intro_slider").slick({
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    arrows: true,
-    autoplay: true,
-    dots: true,
-    autoplaySpeed: 3000,
-    pauseOnHover: false,
 
 
-    infinite: true,
-    speed: 1000,
-    fade: true,
-    adaptiveHeight: false,
-    lazyLoad: 'ondemand',
 
-    cssEase: 'linear',
-    swipeToSlide: true,
-    waitForAnimate: false,
-    draggable: true,
-});
-
-$(".advert").slick({
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    arrows: false,
-    autoplay: true,
-    dots: true,
-    autoplaySpeed: 2500,
-    pauseOnHover: false,
-
-
-    infinite: true,
-    speed: 1000,
-    fade: false,
-    adaptiveHeight: false,
-    lazyLoad: 'ondemand',
-
-    cssEase: 'linear',
-    swipeToSlide: true,
-    waitForAnimate: false,
-    draggable: true,
-});
 
 // Detail slider ======================================
 $('.detail_photo_box').slick({