feat: added new options [CustomerReviewsSlider] #134

bin/Controls/Slider/CustomerReviewsSlider.js

@@ -28,7 +28,9 @@ define('package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider', [
         ],
 
         options: {
-            delay: 5000
+            delay: 5000,
+            height: 'const',
+            autoplay: false,
         },
 
         initialize: function (options) {
@@ -44,39 +46,48 @@ define('package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider', [
          */
         $onImport: function () {
             var delay = this.getAttribute('delay');
-            var self = this;
+            var autoplay = this.getAttribute('autoplay');
+            var sliderHeight = this.getAttribute('height');
 
             var options = {
                 type: 'carousel',
                 perView: 1,
             };
 
-            if (delay >= 1000) {
+            if (delay >= 1000 && autoplay == true) {
                 options['autoplay'] = delay;
             }
 
             var glide = new Glide('.glide', options);
 
+            if (sliderHeight === 'variable') {
+                this.sliderHandleHeight(glide);
+            }
+
+            glide.mount();
+        },
+
+        sliderHandleHeight: function (glide) {
+            var self = this;
+
             var GlideElem = document.querySelector('.customerReviewsSlider-slider-wrapper');
 
             if (GlideElem) {
 
                 // Automated height on Carousel build
                 glide.on('build.after', function () {
-                    self.glideHandleHeight();
+                    self.changeSliderHeight();
                 });
 
                 // Automated height on Carousel change
                 glide.on('run.after', function () {
-                    self.glideHandleHeight();
+                    self.changeSliderHeight();
                 });
 
-
-                glide.mount();
             }
         },
 
-        glideHandleHeight: function () {
+        changeSliderHeight: function () {
             const activeSlide = document.querySelector('.glide__slide--active');
             const activeSlideHeight = activeSlide ? activeSlide.offsetHeight + 50 : 0;
 

bricks.xml

@@ -771,10 +771,26 @@
                         <locale group="quiqqer/bricks" var="bricks.customerReviewsSlider.template.default"/>
                     </option>
                 </setting>
-
                 <setting name="delay" type="number">
                     <locale group="quiqqer/bricks" var="bricks.customerReviewsSlider.delay"/>
                 </setting>
+                <setting name="showArrows" type="checkbox">
+                    <locale group="quiqqer/bricks"
+                            var="bricks.customerReviewsSlider.arrows"/>
+                </setting>
+                <setting name="autoplay" type="checkbox">
+                    <locale group="quiqqer/bricks"
+                            var="bricks.customerReviewsSlider.autoplay"/>
+                </setting>
+                <setting name="sliderHeight" type="select">
+                    <locale group="quiqqer/bricks" var="bricks.customerReviewsSlider.height"/>
+                    <option value="const">
+                        <locale group="quiqqer/bricks" var="bricks.customerReviewsSlider.height.const"/>
+                    </option>
+                    <option value="variable">
+                        <locale group="quiqqer/bricks" var="bricks.customerReviewsSlider.height.variable"/>
+                    </option>
+                </setting>
 
                 <setting name="entries" type="hidden"
                          data-qui="package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSliderSettings"

locale.xml

@@ -1460,6 +1460,26 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
             <de><![CDATA[Zeit zum nächsten Slide (Verzögerung)]]></de>
             <en><![CDATA[Time to start next slide (Delay)]]></en>
         </locale>
+        <locale name="bricks.customerReviewsSlider.arrows">
+            <de><![CDATA[Pfeile zeigen]]></de>
+            <en><![CDATA[Show arrows]]></en>
+        </locale>
+        <locale name="bricks.customerReviewsSlider.autoplay">
+            <de><![CDATA[Automatisches Abspielen]]></de>
+            <en><![CDATA[Autoplay]]></en>
+        </locale>
+        <locale name="bricks.customerReviewsSlider.height">
+            <de><![CDATA[Schieberhöhe]]></de>
+            <en><![CDATA[Slider height]]></en>
+        </locale>
+        <locale name="bricks.customerReviewsSlider.height.const">
+            <de><![CDATA[Konst]]></de>
+            <en><![CDATA[Const]]></en>
+        </locale>
+        <locale name="bricks.customerReviewsSlider.height.variable">
+            <de><![CDATA[Variable]]></de>
+            <en><![CDATA[Variable]]></en>
+        </locale>
 
         <locale name="bricks.customerReviewsSlider.settings.entries">
             <de><![CDATA[Meinungen / Rezensionen]]></de>

src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css

 .customerReviewsSlider-track {
-    margin: 0 50px;
+    margin: auto;
     transition: height .2s ease-in-out;
 }
 
@@ -8,6 +8,14 @@
     align-items: center;
 }
 
+.customerReviewsSlider-arrow-left {
+    margin-right: 2rem;
+}
+
+.customerReviewsSlider-arrow-right {
+    margin-left: 2rem;
+}
+
 .customerReviewsSlider-arrows .customerReviewsSlider-arrow {
     width: 40px;
     height: 40px;

src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.html

@@ -14,11 +14,14 @@
 
     <div class="glide customerReviewsSlider-slider-wrapper">
 
-        <div class="customerReviewsSlider-arrows" data-glide-el="controls">
-            <span class="customerReviewsSlider-arrow customerReviewsSlider-arrow-left" data-glide-dir="<">
-                <span class="arrow fa fa-arrow-left"></span>
-            </span>
-        </div>
+        {if $arrows}
+            <div class="customerReviewsSlider-arrows" data-glide-el="controls">
+                <span class="customerReviewsSlider-arrow customerReviewsSlider-arrow-left" data-glide-dir="<">
+                    <span class="arrow fa fa-arrow-left"></span>
+                </span>
+            </div>
+        {/if}
+
         <div data-glide-el="track" class="glide__track customerReviewsSlider-track">
             <ul class="glide__slides customerReviewsSlider-slider">
 
@@ -68,11 +71,13 @@
             </ul>
         </div>
 
-        <div class="customerReviewsSlider-arrows" data-glide-el="controls">
-            <span class="customerReviewsSlider-arrow customerReviewsSlider-arrow-right" data-glide-dir=">">
-                <span class="arrow fa fa-arrow-right"></span>
-            </span>
-        </div>
+        {if $arrows}
+            <div class="customerReviewsSlider-arrows" data-glide-el="controls">
+                <span class="customerReviewsSlider-arrow customerReviewsSlider-arrow-right" data-glide-dir=">">
+                    <span class="arrow fa fa-arrow-right"></span>
+                </span>
+            </div>
+        {/if}
 
         <div class="customerReviewsSlider-dots" data-glide-el="controls[nav]">
             {assign var=counter value=0}

src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.php

@@ -38,10 +38,14 @@ public function getBody()
         $path     = \dirname(__FILE__) . '/CustomerReviewsSlider.' . $template . '.html';
 
         $this->setJavaScriptControlOption('delay', $this->getAttribute('delay'));
+        $this->setJavaScriptControlOption('autoplay', $this->getAttribute('autoplay'));
+        $this->setJavaScriptControlOption('height', $this->getAttribute('sliderHeight'));
+
 
         $options = [
             'this'    => $this,
-            'entries' => $entries
+            'entries' => $entries,
+            'arrows'  => $this->getAttribute('showArrows')
         ];
 
         $this->addCSSFile(