promoslider -> pagefit

bin/Controls/Slider/Promoslider.js

@@ -29,14 +29,17 @@ define('package/quiqqer/bricks/bin/Controls/Slider/Promoslider', [
         Binds: [
             '$onImport',
             'prev',
-            'next'
+            'next',
+            'resize'
         ],
 
         options: {
             delay         : 5000,
             effectduration: 400,
             autostart     : true,
-            touch         : true
+            touch         : true,
+            pagefit       : false,
+            pagefitcut    : 0
         },
 
         initialize: function (options) {
@@ -44,12 +47,14 @@ define('package/quiqqer/bricks/bin/Controls/Slider/Promoslider', [
 
             this.$dots    = [];
             this.$running = false;
-
-            this.$Touch = null;
+            this.$Touch   = null;
+            this.$FX      = null;
 
             this.addEvents({
                 onImport: this.$onImport
             });
+
+            QUI.addEvent('resize', this.resize);
         },
 
         /**
@@ -60,6 +65,8 @@ define('package/quiqqer/bricks/bin/Controls/Slider/Promoslider', [
                 Elm    = this.getElm(),
                 slides = Elm.getElements('.quiqqer-bricks-promoslider-slide');
 
+            this.$FX = moofx(Elm);
+
             var Dots = new Element('div', {
                 'class': 'quiqqer-bricks-promoslider-dots'
             }).inject(Elm);
@@ -75,7 +82,6 @@ define('package/quiqqer/bricks/bin/Controls/Slider/Promoslider', [
             var i, len, Dot;
 
             for (i = 0, len = slides.length; i < len; i++) {
-
                 Dot = new Element('div', {
                     'class'  : 'quiqqer-bricks-promoslider-dot',
                     'data-no': i,
@@ -126,6 +132,31 @@ define('package/quiqqer/bricks/bin/Controls/Slider/Promoslider', [
             if (this.getAttribute('autostart')) {
                 this.$Timer = (this.next).periodical(this.getAttribute('delay'));
             }
+
+            this.resize();
+        },
+
+        /**
+         * resize the promoslider
+         */
+        resize: function () {
+            if (!this.getAttribute('pagefit')) {
+                return;
+            }
+
+            var winSize = QUI.getWindowSize();
+
+
+            if (this.$FX) {
+                this.$FX.animate({
+                    height: winSize.y - this.getAttribute('pagefitcut')
+                });
+                return;
+            }
+
+            this.getElm().setStyles({
+                height: winSize.y - this.getAttribute('pagefitcut')
+            });
         },
 
         /**

bricks.xml

@@ -134,6 +134,16 @@
             <description>
                 <locale group="quiqqer/bricks" var="brick.control.promoslider.description"/>
             </description>
+
+            <settings>
+                <setting name="pagefit" type="checkbox">
+                    <locale group="quiqqer/bricks" var="brick.control.promoslider.pagefit"/>
+                </setting>
+                <setting name="pagefitcut" type="number">
+                    <locale group="quiqqer/bricks" var="brick.control.promoslider.pagefitcut"/>
+                </setting>
+            </settings>
+
         </brick>
 
         <!-- Children Listing Infnite -->

src/QUI/Bricks/Controls/Slider/Promoslider.css

@@ -14,12 +14,12 @@
 }
 
 .quiqqer-bricks-promoslider-slide-image {
-    height: 100%;
+    height: calc(100% - 50px);
     left: 0;
     padding: 10px 0 0 10px;
     position: absolute;
     top: 0;
-    width: auto;
+    width: 100%;
 }
 
 .quiqqer-bricks-promoslider-slide-image img {

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

@@ -109,6 +109,14 @@ public function getBody()
     {
         $Engine = QUI::getTemplateManager()->getEngine();
 
+        if ($this->getAttribute('pagefit')) {
+            $this->setAttribute('data-qui-options-pagefit', $this->getAttribute('pagefit'));
+        }
+
+        if ($this->getAttribute('pagefitcut')) {
+            $this->setAttribute('data-qui-options-pagefitcut', $this->getAttribute('pagefitcut'));
+        }
+
         $Engine->assign(array(
             'this' => $this,
             'desktopSlides' => $this->desktopSlides,