diff --git a/bin/Controls/Children/Slider.js b/bin/Controls/Children/Slider.js index f8692376a07c3e87b6b19a5e40ed3524fc0243ed..d2c73b0e7e3b51c92f2b7f32e18b0f1a1d5d0fe7 100644 --- a/bin/Controls/Children/Slider.js +++ b/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 : { diff --git a/bricks.xml b/bricks.xml index dec87421b345cdb52e8372ae6ac7335cb6a4824d..7e5f164d7f67c3dde6fca0ae8f32a1a10ad8e5f9 100644 --- a/bricks.xml +++ b/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> diff --git a/src/QUI/Bricks/Controls/Children/Slider.html b/src/QUI/Bricks/Controls/Children/Slider.OnlyImage.html similarity index 92% rename from src/QUI/Bricks/Controls/Children/Slider.html rename to src/QUI/Bricks/Controls/Children/Slider.OnlyImage.html index 3e81f1410ed9274fe2eea057a43dddc88fece25c..64a31df89e5a6b5d090e0f93171b1ef0fc7247b8 100644 --- a/src/QUI/Bricks/Controls/Children/Slider.html +++ b/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> diff --git a/src/QUI/Bricks/Controls/Children/Slider.php b/src/QUI/Bricks/Controls/Children/Slider.php index 94fd11b5e7d0befe7b4ab551df7ba34e39747f26..2b164c31ae0075f5b65a74fb6463ada86e7210a0 100644 --- a/src/QUI/Bricks/Controls/Children/Slider.php +++ b/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;