feat: added new template [CustomerReviewsSlider] #134

bricks.xml

@@ -770,6 +770,9 @@
                     <option value="default">
                         <locale group="quiqqer/bricks" var="bricks.customerReviewsSlider.template.default"/>
                     </option>
+                    <option value="templateOne">
+                        <locale group="quiqqer/bricks" var="bricks.customerReviewsSlider.template.templateOne"/>
+                    </option>
                 </setting>
                 <setting name="delay" type="number">
                     <locale group="quiqqer/bricks" var="bricks.customerReviewsSlider.delay"/>

locale.xml

@@ -1456,6 +1456,10 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
             <de><![CDATA[Ursprünglich]]></de>
             <en><![CDATA[Default]]></en>
         </locale>
+        <locale name="bricks.customerReviewsSlider.template.templateOne">
+            <de><![CDATA[Schablone 1]]></de>
+            <en><![CDATA[Template 1]]></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

@@ -22,7 +22,8 @@ public function __construct($attributes = [])
         $this->setAttributes([
             'data-qui' => 'package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider',
             'template' => 'default',
-            'delay'    => 5000
+            'delay'    => 5000,
+            'perview'  => 1
         ]);
 
         parent::__construct($attributes);
@@ -41,6 +42,11 @@ public function getBody()
         $this->setJavaScriptControlOption('autoplay', $this->getAttribute('autoplay'));
         $this->setJavaScriptControlOption('height', $this->getAttribute('sliderHeight'));
 
+        switch ($template) {
+            case 'templateOne':
+                $this->setJavaScriptControlOption('perview', 2);
+                break;
+        }
 
         $options = [
             'this'    => $this,

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

+.customerReviewsSlider {
+    position: relative;
+}
+
+.customerReviewsSlider-track {
+    opacity: 0;
+    transition: height .2s ease-in-out, opacity .2s ease-in-out;
+}
+
+.customerReviewsSlider-templateOne-track {
+    margin: auto;
+}
+
+.customerReviewsSlider-templateOne-arrows {
+    display: flex;
+    align-items: center;
+}
+
+.customerReviewsSlider-templateOne-arrow-left {
+    margin-right: 2rem;
+}
+
+.customerReviewsSlider-templateOne-arrow-right {
+    margin-left: 2rem;
+}
+
+.customerReviewsSlider-templateOne-arrows .customerReviewsSlider-templateOne-arrow {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid #aaa;
+    color: #aaa;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all .2s ease-in-out;
+}
+
+.customerReviewsSlider-templateOne-arrows .customerReviewsSlider-templateOne-arrow:hover {
+    border-color: #333;
+    color: #333;
+}
+
+.customerReviewsSlider-templateOne-review {
+    font-size: 1.125rem;
+}
+
+.customerReviewsSlider-templateOne-client {
+    display: flex;
+    flex-direction: row;
+}
+
+.customerReviewsSlider-templateOne-client-img {
+    width: 100px;
+    height: 100px;
+    margin-right: 2rem;
+}
+
+.customerReviewsSlider-templateOne-client-img img {
+    aspect-ratio: 1 / 1;
+    height: auto;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.customerReviewsSlider-templateOne-client-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.customerReviewsSlider-templateOne-client-name,
+.customerReviewsSlider-templateOne-client-addition {
+    font-size: 0.975rem;
+}
+
+.customerReviewsSlider-templateOne-client-name {
+    font-weight: 700;
+}
+
+.customerReviewsSlider-templateOne-dots {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    display: flex;
+}
+
+.customerReviewsSlider-templateOne-dot {
+    width: 10px;
+    height: 10px;
+    border: 2px solid rgba(0,0,0,0);
+    border-radius: 50%;
+    margin: 0 5px;
+    display: block;
+    background-color: #aaa;
+    transition: all .2s ease-in-out;
+}
+
+.customerReviewsSlider-templateOne-dot.glide__bullet--active {
+    border-color: #aaa;
+    background: transparent;
+}
+
+.customerReviewsSlider-templateOne-dot:hover {
+    border-radius: 50%;
+}
+
+.customerReviewsSlider-templateOne-slider-wrapper {
+    display: flex;
+}
+
+@media screen and (max-width: 768px) {
+
+    .customerReviewsSlider-templateOne-track {
+        margin: 0;
+    }
+
+    .customerReviewsSlider-templateOne-arrows {
+        display: none;
+    }
+
+    .customerReviewsSlider-templateOne-dots {
+        margin: 1rem auto;
+    }
+
+    .customerReviewsSlider-templateOne-slider-wrapper {
+        flex-direction: column;
+    }
+}
\ No newline at end of file

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

+{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+<header class="control-header">
+    <h1>{$this->getAttribute('frontendTitle')}</h1>
+</header>
+{/if}
+
+{if $this->getAttribute('content') != ""}
+<div class="control-content">
+    {$this->getAttribute('content')}
+</div>
+{/if}
+
+<div class="customerReviewsSlider customerReviewsSlider-templateOne">
+
+    <div class="glide customerReviewsSlider-templateOne-slider-wrapper customerReviewsSlider-slider-wrapper">
+
+        {if $arrows}
+        <div class="customerReviewsSlider-templateOne-arrows" data-glide-el="controls">
+                <span class="customerReviewsSlider-templateOne-arrow customerReviewsSlider-templateOne-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-templateOne-track customerReviewsSlider-track">
+            <ul class="glide__slides customerReviewsSlider-templateOne-slider customerReviewsSlider-slider">
+
+                {foreach from=$entries item=entry}
+
+                <li class="glide__slide customerReviewsSlider-templateOne-slide">
+
+                    {if $entry['review']}
+                    <div class="customerReviewsSlider-templateOne-review">
+                        {$entry['review']}
+                    </div>
+                    {/if}
+
+                    <div class="customerReviewsSlider-templateOne-client">
+
+                        <div class="customerReviewsSlider-templateOne-client-img">
+                            {if $entry['image']}
+                            {image src=$entry['image'] loading="lazy" data-src="{$entry['image']}"}
+                            {/if}
+                        </div>
+
+                        <div class="customerReviewsSlider-templateOne-client-content">
+                            {if $entry['customerName']}
+                            <span class="customerReviewsSlider-templateOne-client-name">{$entry['customerName']}</span>
+                            {/if}
+                            {if $entry['addition']}
+                            <span class="customerReviewsSlider-templateOne-client-addition">{$entry['addition']}</span>
+                            {/if}
+
+                            {if $entry['url']}
+                            <a href="{$entry['url']}" class="customerReviewsSlider-templateOne-url">
+                                {if $entry['urlTitle']}
+                                {$entry['urlTitle']}
+                                {else}
+                                {$entry['url']}
+                                {/if}
+                            </a>
+                            {/if}
+
+                        </div>
+
+                    </div>
+
+                </li>
+
+                {/foreach}
+            </ul>
+        </div>
+
+        {if $arrows}
+        <div class="customerReviewsSlider-templateOne-arrows" data-glide-el="controls">
+                <span class="customerReviewsSlider-templateOne-arrow customerReviewsSlider-templateOne-arrow-right"
+                      data-glide-dir=">">
+                    <span class="arrow fa fa-arrow-right"></span>
+                </span>
+        </div>
+        {/if}
+
+        <div class="customerReviewsSlider-templateOne-dots" data-glide-el="controls[nav]">
+            {assign var=counter value=0}
+            {foreach from=$entries item=entry}
+            <span class="customerReviewsSlider-templateOne-dot" data-glide-dir="={$counter}"></span>
+            {assign var=counter value=$counter+1}
+            {/foreach}
+        </div>
+
+    </div>
+
+</div>