feat: Children Slider refactored. New Template added.

bin/Controls/Children/Slider.js

@@ -58,7 +58,13 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
          * resize the control and recalc all slide vars
          */
         resize: function () {
-            var size    = this.getElm().getSize(),
+            var SliderContainer = this.getElm().getElement('.quiqqer-bricks-children-slider-container-wrapper');
+
+            if (!SliderContainer) {
+                SliderContainer = this.getElm();
+            }
+
+            var size    = SliderContainer.getSize(),
                 winSize = QUI.getWindowSize();
 
             // display the buttons? if mobile, dont display it
@@ -81,7 +87,6 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
          */
         $onImport: function () {
             var Elm     = this.getElm(),
-                size    = Elm.getSize(),
                 wrapper = Elm.getElement('.quiqqer-bricks-children-slider-container-wrapper');
 
             if (wrapper) {
@@ -90,7 +95,7 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
                     html   : '<span class="fa fa-angle-right"></span>',
                     styles : {
                         display   : 'none',
-                        lineHeight: size.y,
+                        lineHeight: wrapper.getSize().y,
                         opacity   : 0,
                         right     : 0
                     },
@@ -105,7 +110,7 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
                     styles : {
                         display   : 'none',
                         left      : 0,
-                        lineHeight: size.y,
+                        lineHeight: wrapper.getSize().y,
                         opacity   : 0
                     },
                     events : {

bricks.xml

@@ -128,6 +128,17 @@
                     </option>
                 </setting>
 
+                <setting name="template" type="select">
+                    <locale group="quiqqer/bricks" var="brick.control.setting.template"/>
+
+                    <option value="onlyImage" selected="selected">
+                        <locale group="quiqqer/bricks" var="brick.control.setting.template.onlyImages"/>
+                    </option>
+                    <option value="imageAndText" selected="selected">
+                        <locale group="quiqqer/bricks" var="brick.control.setting.template.onlyImages"/>
+                    </option>
+                </setting>
+
                 <setting name="limit" type="number" min="1">
                     <locale group="quiqqer/bricks" var="brick.control.setting.limit"/>
                 </setting>

src/QUI/Bricks/Controls/Children/Slider.html → src/QUI/Bricks/Controls/Children/Slider.OnlyImage.html

@@ -11,11 +11,11 @@
 {/if}
 
 <div class="quiqqer-bricks-children-slider-container-wrapper"
-     style="height: {$this->getAttribute('height')}px;">
+     style="height: {$this->getAttribute('slideHeight')}px;">
     <div class="quiqqer-bricks-children-slider-container">
         <div class="quiqqer-bricks-children-slider-container-inner">
             <ul class="quiqqer-bricks-children-slider-container-slide"
-                style="height: {$this->getAttribute('height')}px;"
+                style="height: {$this->getAttribute('slideHeight')}px;"
             >
             {strip}
                 {foreach from=$children item=Child}
@@ -32,7 +32,7 @@
                             </header>
                             {$Child->getAttribute('short')}
                         {else}
-                            {image src=$Child->getAttribute('image_site') height=$this->getAttribute('height')}
+                            {image src=$Child->getAttribute('image_site') height=$this->getAttribute('slideHeight')}
                         {/if}
                         </a>
                     </article>

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

@@ -19,21 +19,21 @@ class Slider extends QUI\Control
      *
      * @param array $attributes
      */
-    public function __construct($attributes = array())
+    public function __construct($attributes = [])
     {
         // default options
-        $this->setAttributes(array(
-            'class'    => 'quiqqer-bricks-children-slider',
-            'nodeName' => 'section',
-            'site'     => '',
-            'order'    => false,
-            'limit'    => false,
-            'moreLink' => false,
-            'data-qui' => 'package/quiqqer/bricks/bin/Controls/Children/Slider',
-            'height'   => 200,
+        $this->setAttributes([
+            'class'       => 'quiqqer-bricks-children-slider',
+            'nodeName'    => 'section',
+            'site'        => '',
+            'order'       => false,
+            'limit'       => false,
+            'moreLink'    => false,
+            'data-qui'    => 'package/quiqqer/bricks/bin/Controls/Children/Slider',
+            'template'    => null, // default -> onlyImage
 
             'data-qui-options-usemobile' => false
-        ));
+        ]);
 
         $this->addCSSFile(
             dirname(__FILE__).'/Slider.css'
@@ -53,7 +53,7 @@ public function getBody()
         $MoreLink = null;
 
         if (!$this->getAttribute('height')) {
-            $this->setAttribute('height', 200);
+            $this->setAttribute('slideHeight', 200);
         }
 
         if ($this->getAttribute('moreLink')) {
@@ -63,13 +63,28 @@ public function getBody()
             }
         }
 
-        $Engine->assign(array(
+        $template = $this->getTemplate();
+
+        switch ($this->getAttribute('template')) {
+            case 'onlyImage':
+                $template = dirname(__FILE__).'/Slider.OnlyImage.html';
+                break;
+            case 'imageAndText':
+                $template = dirname(__FILE__).'/Slider.ImageAndText.html';
+
+                if (!$this->getAttribute('slideHeight')) {
+                    $this->setAttribute('slideHeight', 400);
+                }
+                break;
+        }
+
+        $Engine->assign([
             'this'     => $this,
             'children' => $this->getChildren(),
             'MoreLink' => $MoreLink
-        ));
+        ]);
 
-        return $Engine->fetch(dirname(__FILE__).'/Slider.html');
+        return $Engine->fetch($template);
     }
 
     /**
@@ -79,7 +94,7 @@ public function getBody()
      */
     protected function getTemplate()
     {
-        return dirname(__FILE__).'/Slider.html';
+        return dirname(__FILE__).'/Slider.OnlyImage.html';
     }
 
     /**
@@ -93,10 +108,10 @@ protected function getChildren($start = 0)
         $children = QUI\Projects\Site\Utils::getSitesByInputList(
             $this->getProject(),
             $this->getAttribute('site'),
-            array(
+            [
                 'order' => $this->getAttribute('order'),
                 'limit' => $this->getAttribute('limit')
-            )
+            ]
         );
 
         return $children;