feat: Added new setting (gap between slides) [CustomerReviewsSlider] #134

bin/Controls/Slider/CustomerReviewsSlider.js

@@ -52,6 +52,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider', [
             var sliderHeight = this.getAttribute('height');
             var perView      = this.getAttribute('perview');
             var self         = this;
+            var gap          = this.getAttribute('gap');
 
             this.glideTrack = this.getElm().querySelector('.customerReviewsSlider-track');
 
@@ -63,7 +64,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider', [
             });
 
             var options = {
-                gap        : 40,
+                gap        : gap,
                 type       : 'carousel',
                 perView    : perView,
                 breakpoints: {

bricks.xml

@@ -816,6 +816,9 @@
                     <option value="4">4</option>
                     <option value="5">5</option>
                 </setting>
+                <setting name="gap" type="number" min="0" max="200">
+                    <locale group="quiqqer/bricks" var="bricks.customerReviewsSlider.gap"/>
+                </setting>
                 <setting name="autoplay" type="checkbox">
                     <locale group="quiqqer/bricks"
                             var="bricks.customerReviewsSlider.autoplay"/>

locale.xml

@@ -1568,6 +1568,14 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
             <en><![CDATA[This setting says how many customer reviews are visible. Default value is 2. That means 2 reviews are always displayed at the same time.
                 <strong>Please note!</strong> Not all templates support this setting.]]></en>
         </locale>
+        <locale name="bricks.customerReviewsSlider.gap">
+            <de><![CDATA[Lücke zwischen den Folien]]></de>
+            <en><![CDATA[Gap between slides]]></en>
+        </locale>
+        <locale name="bricks.customerReviewsSlider.autoplay">
+            <de><![CDATA[Automatisches Abspielen]]></de>
+            <en><![CDATA[Autoplay]]></en>
+        </locale>
         <locale name="bricks.customerReviewsSlider.delay">
             <de><![CDATA[Zeit zum nächsten Slide (Verzögerung)]]></de>
             <en><![CDATA[Time to start next slide (Delay)]]></en>

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

@@ -23,7 +23,8 @@ public function __construct($attributes = [])
             'data-qui' => 'package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider',
             'template' => 'default',
             'delay'    => 5000,
-            'perView'  => 2
+            'perView'  => 2,
+            'gap'      => 40
         ]);
 
         parent::__construct($attributes);
@@ -33,14 +34,30 @@ public function getBody()
     {
         $Engine = QUI::getTemplateManager()->getEngine();
 
-        $entries  = json_decode($this->getAttribute('entries'), true);
-        $template = $this->getAttribute('template');
-        $path     = \dirname(__FILE__) . '/CustomerReviewsSlider.' . $template . '.html';
+        $entries        = json_decode($this->getAttribute('entries'), true);
+        $template       = $this->getAttribute('template');
+        $path           = \dirname(__FILE__) . '/CustomerReviewsSlider.' . $template . '.html';
         $enabledEntries = [];
+        $gap            = $this->getAttribute("gap");
+        
+        switch ($gap) {
+            case null:
+                $gap = 40;
+                break;
+            case $gap < 0:
+                $gap = 0;
+                break;
+            case $gap > 200:
+                $gap = 200;
+                break;
+            default:
+                break;
+        }
 
         $this->setJavaScriptControlOption('delay', $this->getAttribute('delay'));
         $this->setJavaScriptControlOption('autoplay', $this->getAttribute('autoplay'));
         $this->setJavaScriptControlOption('height', $this->getAttribute('sliderHeight'));
+        $this->setJavaScriptControlOption('gap', $gap);
 
         switch ($template) {
             case 'default':