children slider

bin/Controls/Children/Infinite.js

@@ -6,13 +6,15 @@
  *
  * @require qui/QUI
  * @require qui/controls/Control
+ * @require Ajax
  */
 define('package/quiqqer/bricks/bin/Controls/Children/Infinite', [
 
     'qui/QUI',
-    'qui/controls/Control'
+    'qui/controls/Control',
+    'Ajax'
 
-], function (QUI, QUIControl) {
+], function (QUI, QUIControl, Ajax) {
     "use strict";
 
     return new Class({
@@ -22,14 +24,19 @@ define('package/quiqqer/bricks/bin/Controls/Children/Infinite', [
 
         Binds: [
             '$onImport',
-            '$onMouseOver',
-            '$linkclick',
-            '$redraw'
+            'next'
         ],
 
+        options: {
+            childrenperrow: 4
+        },
+
         initialize: function (options) {
             this.parent(options);
 
+            this.$More   = null;
+            this.$MoreFX = null;
+
             this.addEvents({
                 onImport: this.$onImport
             });
@@ -39,7 +46,127 @@ define('package/quiqqer/bricks/bin/Controls/Children/Infinite', [
          * event : on import
          */
         $onImport: function () {
-console.log('Infinite $onImport');
+            var Elm = this.getElm();
+
+            this.$More = Elm.getElement('button');
+            this.$More.addEvent('click', this.next);
+            this.$More.disabled = false;
+
+            this.$MoreFX = moofx(this.$More);
+        },
+
+        /**
+         * Show next row
+         *
+         * @return {Promise}
+         */
+        next: function () {
+            return new Promise(function (resolve) {
+                var self = this,
+                    size = this.$More.getSize();
+
+                this.$More.set('disabled', true);
+
+                this.$MoreFX.animate({
+                    color: 'transparent'
+                }, {
+                    duration: 250,
+                    callback: function () {
+                        self.$More.setStyles({
+                            height  : size.y,
+                            overflow: 'hidden',
+                            width   : size.x
+                        });
+
+                        var oldButtonText = self.$More.get('text');
+
+                        self.$More.set('html', '<span class="fa fa-spinner fa-spin"></span>');
+                        self.$More.setStyle('color', null);
+
+                        self.$getNextChildren().then(function (result) {
+                            var Container = new Element('div', {
+                                html: result
+                            });
+
+                            var Row = Container.getElement(
+                                '.quiqqer-bricks-children-infinite-row'
+                            );
+
+                            Row.setStyles({
+                                'float' : 'left',
+                                opacity : 0,
+                                position: 'absolute',
+                                overflow: 'hidden'
+                            });
+
+                            Row.inject(self.$More, 'before');
+
+                            var height = Row.getSize().y;
+
+                            Row.setStyles({
+                                height  : 0,
+                                position: null
+                            });
+
+                            var childrenCount = Row.getElements(
+                                '.quiqqer-bricks-children-infinite-child'
+                            ).length;
+
+                            if (childrenCount < self.getAttribute('childrenperrow')) {
+                                self.$More.removeEvents('click');
+
+                                moofx(self.$More).animate({
+                                    cursor : 'default',
+                                    opacity: 0
+                                });
+                            }
+
+
+                            moofx(Row).animate({
+                                height : height,
+                                opacity: 1
+                            }, {
+                                duration: 250,
+                                equation: 'cubic-bezier(.17,.67,.25,1.25)',
+                                callback: function () {
+                                    self.$More.set({
+                                        html    : oldButtonText,
+                                        disabled: false,
+                                        styles  : {
+                                            width: null
+                                        }
+                                    });
+
+                                    new Fx.Scroll(window.document).toElement(Row).chain(function () {
+                                        resolve();
+                                    });
+                                }
+                            });
+                        });
+                    }
+                });
+
+            }.bind(this));
+        },
+
+        /**
+         * Return the next children
+         *
+         * @return {Promise}
+         */
+        $getNextChildren: function () {
+            return new Promise(function (resolve) {
+
+                var Rows = this.getElm().getElements('.quiqqer-bricks-children-infinite-row');
+
+                Ajax.get('package_quiqqer_bricks_ajax_brick_infinite_row', resolve, {
+                    'package': 'quiqqer/bricks',
+                    brickId  : this.getElm().get('data-brickid'),
+                    brickUID : this.getElm().get('data-brickuid'),
+                    row      : Rows.length + 1
+                });
+
+            }.bind(this));
         }
     });
-});
\ No newline at end of file
+});

bin/Controls/Children/Slider.js

@@ -6,6 +6,7 @@
  *
  * @require qui/QUI
  * @require qui/controls/Control
+ * @require qui/utils/Functions
  */
 define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
 
@@ -221,7 +222,8 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
         },
 
         /**
-         *
+         * event : on scroll
+         * look for the prev and next button
          */
         $onScroll: function () {
             var left = this.$Inner.getScroll().x;

src/QUI/Bricks/Controls/Children/Infinite.html

-{foreach from=$children item=Child}
-<div class="grid-25 quiqqer-bricks-children-infinite-child">
-    <article class="quiqqer-bricks-children-infinite-child-display">
-        {assign var=attrTitle value=$Child->getAttribute('title')|escape:"html"}
-        <a href="{url site=$Child}" title="{$attrTitle}">
-            {assign var=hasImage value=0}
-            {if $Child->getAttribute('image_site')}
-                {assign var=hasImage value=1}
-            {/if}
+{$children}
 
-            <header>
-                {$Child->getAttribute('title')}
-            </header>
-
-            {image src=$Child->getAttribute('image_site')
-                style="width: 100%; height: auto;"
-                maxwidth="280"}
-        </a>
-    </article>
-</div>
-{/foreach}
-
-<button>Mehr laden</button>
\ No newline at end of file
+<button disabled>Mehr laden</button>
\ No newline at end of file

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

 <?php
 
+/**
+ * This file contains QUI\Bricks\Controls\Children\Infinite
+ */
 namespace QUI\Bricks\Controls\Children;
 
 use QUI;
@@ -42,11 +45,26 @@ public function __construct($attributes = array())
      */
     public function getBody()
     {
-        $Engine = QUI::getTemplateManager()->getEngine();
+        $Engine   = QUI::getTemplateManager()->getEngine();
+        $children = '';
+
+        $this->setAttribute(
+            'data-qui-options-childrenperrow',
+            $this->getAttribute('childrenPerRow')
+        );
+
+        for ($i = 0, $len = (int)$this->getAttribute('rows'); $i < $len; $i++) {
+            $Engine->assign(array(
+                'children' => $this->getRow($i),
+                'row' => $i
+            ));
+
+            $children .= $Engine->fetch($this->getRowTemplate());
+        }
 
         $Engine->assign(array(
             'this' => $this,
-            'children' => $this->getChildren()
+            'children' => $children
         ));
 
         return $Engine->fetch(dirname(__FILE__) . '/Infinite.html');
@@ -57,19 +75,30 @@ public function getBody()
      *
      * @return string
      */
-    protected function getTemplate()
+    public function getTemplate()
     {
         return dirname(__FILE__) . '/Infinite.html';
     }
 
     /**
+     * Return the row template
+     *
+     * @return string
+     */
+    public function getRowTemplate()
+    {
+        return dirname(__FILE__) . '/InfiniteRow.html';
+    }
+
+    /**
+     * Return the children
      *
      * @param int $start
      * @return array
      */
     protected function getChildren($start = 0)
     {
-        $max = $this->getAttribute('childrenPerRow') * $this->getAttribute('rows');
+        $max = $this->getAttribute('childrenPerRow');
 
         $children = QUI\Projects\Site\Utils::getSitesByInputList(
             $this->getProject(),
@@ -82,4 +111,18 @@ protected function getChildren($start = 0)
 
         return $children;
     }
+
+    /**
+     * Return the children of the row
+     *
+     * @param integer $row
+     * @return array
+     */
+    public function getRow($row)
+    {
+        $perRow = $this->getAttribute('childrenPerRow');
+        $start  = (int)$row * $perRow;
+
+        return $this->getChildren($start);
+    }
 }