diff --git a/bin/Controls/Children/Infinite.js b/bin/Controls/Children/Infinite.js
index 4f6a3bdb166ea682cd20400f4f80a7b25ad84248..988ba91cbe116c1d60e1f05b7b1a0bf5d145cb26 100644
--- a/bin/Controls/Children/Infinite.js
+++ b/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
+});
diff --git a/bin/Controls/Children/Slider.js b/bin/Controls/Children/Slider.js
index 3bfa5b578558d64da79e7c52552a82bf80be4872..23d80bb41a501575df8bf33212a184f73affd381 100644
--- a/bin/Controls/Children/Slider.js
+++ b/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;
diff --git a/src/QUI/Bricks/Controls/Children/Infinite.html b/src/QUI/Bricks/Controls/Children/Infinite.html
index 5c198bee44ed94e9193ae00cae8abfeb51b8104f..f49a92df23bca976508defb9a77dbce77e016db6 100644
--- a/src/QUI/Bricks/Controls/Children/Infinite.html
+++ b/src/QUI/Bricks/Controls/Children/Infinite.html
@@ -1,23 +1,3 @@
-{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
diff --git a/src/QUI/Bricks/Controls/Children/Infinite.php b/src/QUI/Bricks/Controls/Children/Infinite.php
index 417f410d12783543098e2fd006a52a059d58b852..227e05c42ce4deaede565f89536095c6cebc4cdc 100644
--- a/src/QUI/Bricks/Controls/Children/Infinite.php
+++ b/src/QUI/Bricks/Controls/Children/Infinite.php
@@ -1,5 +1,8 @@
<?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);
+ }
}