From 6c77e0d595a75361a775888876712c581c26ec29 Mon Sep 17 00:00:00 2001
From: Henning Leutz <leutz@pcsg.de>
Date: Wed, 24 Feb 2016 15:37:49 +0100
Subject: [PATCH] slider updates - promoslider w. touch
---
bin/Controls/Children/Infinite.js | 12 +-
bin/Controls/Children/Slider.js | 56 ++-
bin/Controls/Slider/Promoslider.js | 373 ++++++++++++++++++
bricks.xml | 9 +
composer.json | 50 ++-
database.xml | 21 +-
src/QUI/Bricks/Brick.php | 17 +
src/QUI/Bricks/Controls/Children/Infinite.css | 4 +-
.../Bricks/Controls/Children/Infinite.html | 2 +-
.../Bricks/Controls/Children/InfiniteRow.html | 23 ++
src/QUI/Bricks/Controls/Children/Slider.css | 13 +-
src/QUI/Bricks/Controls/Children/Slider.html | 12 +-
.../Bricks/Controls/Slider/Promoslider.css | 122 ++++++
.../Bricks/Controls/Slider/Promoslider.html | 34 ++
.../Bricks/Controls/Slider/Promoslider.php | 212 ++++++++++
src/QUI/Bricks/Manager.php | 54 +++
16 files changed, 948 insertions(+), 66 deletions(-)
create mode 100644 bin/Controls/Slider/Promoslider.js
create mode 100644 src/QUI/Bricks/Controls/Children/InfiniteRow.html
create mode 100644 src/QUI/Bricks/Controls/Slider/Promoslider.css
create mode 100644 src/QUI/Bricks/Controls/Slider/Promoslider.html
create mode 100644 src/QUI/Bricks/Controls/Slider/Promoslider.php
diff --git a/bin/Controls/Children/Infinite.js b/bin/Controls/Children/Infinite.js
index 2914b15..1ce8958 100644
--- a/bin/Controls/Children/Infinite.js
+++ b/bin/Controls/Children/Infinite.js
@@ -48,9 +48,9 @@ define('package/quiqqer/bricks/bin/Controls/Children/Infinite', [
$onImport: function () {
var Elm = this.getElm();
- this.$More = Elm.getElement('button');
+ this.$More = Elm.getElement('.button');
this.$More.addEvent('click', this.next);
- this.$More.disabled = false;
+ this.$More.removeClass('disabled');
this.$MoreFX = moofx(this.$More);
},
@@ -65,7 +65,7 @@ define('package/quiqqer/bricks/bin/Controls/Children/Infinite', [
var self = this,
size = this.$More.getSize();
- this.$More.set('disabled', true);
+ this.$More.addClass('disabled');
this.$MoreFX.animate({
color: 'transparent'
@@ -131,13 +131,13 @@ define('package/quiqqer/bricks/bin/Controls/Children/Infinite', [
equation: 'cubic-bezier(.17,.67,.25,1.25)',
callback: function () {
self.$More.set({
- html : oldButtonText,
- disabled: false,
- styles : {
+ html : oldButtonText,
+ styles: {
width: null
}
});
+ self.$More.removeClass('disabled');
self.$More.removeClass('loading');
new Fx.Scroll(window.document).start(
diff --git a/bin/Controls/Children/Slider.js b/bin/Controls/Children/Slider.js
index 23d80bb..a517deb 100644
--- a/bin/Controls/Children/Slider.js
+++ b/bin/Controls/Children/Slider.js
@@ -26,40 +26,46 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
'$onImport',
'$onScroll',
'prev',
- 'next'
+ 'next',
+ 'resize'
],
initialize: function (options) {
this.parent(options);
- this.$Slide = null;
this.$SlideFX = null;
+ this.$Prev = null;
+ this.$Next = null;
+ this.$Inner = null;
this.$scrollLength = null;
this.$scrollMax = 0;
+ this.$mobile = false;
this.addEvents({
onImport: this.$onImport
});
+
+ QUI.addEvent('resize', this.resize);
},
/**
* resize the control and recalc all slide vars
*/
resize: function () {
- var size = this.getElm().getSize();
-
- var articles = this.getElm().getElements('article'),
- width = articles.map(function (Elm) {
- var Parent = Elm.getParent();
- var w = Parent.getSize().x;
-
- Parent.setStyle('width', w);
+ var size = this.getElm().getSize(),
+ winSize = QUI.getWindowSize();
- return w;
- }).sum();
-
- this.$Slide.setStyle('width', width);
+ // display the buttons? if mobile, dont display it
+ if (winSize.x < size.x + 100) {
+ this.$mobile = true;
+ this.hideNextButton();
+ this.hidePrevButton();
+ } else {
+ this.$mobile = false;
+ this.showNextButton();
+ this.showNextButton();
+ }
this.$scrollLength = (size.x / 1.2).round();
this.$scrollMax = this.$Inner.getScrollSize().x - size.x;
@@ -97,8 +103,10 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
}
}).inject(Elm);
- this.$Inner = Elm.getElement('.quiqqer-bricks-children-slider-container-inner');
- this.$Slide = Elm.getElement('.quiqqer-bricks-children-slider-container-slide');
+ this.$Inner = Elm.getElement(
+ '.quiqqer-bricks-children-slider-container-inner'
+ );
+
this.$SlideFX = new Fx.Scroll(this.$Inner);
var scrollSpy = QUIFunctionUtils.debounce(this.$onScroll, 200);
@@ -152,6 +160,10 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
* @returns {Promise}
*/
showNextButton: function () {
+ if (this.$mobile) {
+ return Promise.resolve();
+ }
+
return new Promise(function (resolve) {
this.$Next.setStyle('display', null);
@@ -170,6 +182,10 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
* @returns {Promise}
*/
showPrevButton: function () {
+ if (this.$mobile) {
+ return Promise.resolve();
+ }
+
return new Promise(function (resolve) {
this.$Prev.setStyle('display', null);
@@ -188,6 +204,10 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
* @returns {Promise}
*/
hideNextButton: function () {
+ if (this.$mobile) {
+ return Promise.resolve();
+ }
+
return new Promise(function (resolve) {
this.$NextFX.animate({
right : 0,
@@ -207,6 +227,10 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
* @returns {Promise}
*/
hidePrevButton: function () {
+ if (this.$mobile) {
+ return Promise.resolve();
+ }
+
return new Promise(function (resolve) {
this.$PrevFX.animate({
left : 0,
diff --git a/bin/Controls/Slider/Promoslider.js b/bin/Controls/Slider/Promoslider.js
new file mode 100644
index 0000000..8c7fbf7
--- /dev/null
+++ b/bin/Controls/Slider/Promoslider.js
@@ -0,0 +1,373 @@
+/**
+ * @module package/quiqqer/bricks/bin/Controls/Slider/Promoslider
+ * @author www.pcsg.de (Henning Leutz)
+ *
+ * @require qui/QUI
+ * @require qui/controls/Control
+ * @require qui/utils/Functions
+ */
+define('package/quiqqer/bricks/bin/Controls/Slider/Promoslider', [
+
+ 'qui/QUI',
+ 'qui/controls/Control',
+ URL_OPT_DIR + 'bin/hammerjs/hammer.min'
+
+], function (QUI, QUIControl, Hammer) {
+ "use strict";
+
+ // custome select
+ // eq: getElements( 'input:display(inline)' )
+ Slick.definePseudo('display', function (value) {
+ return Element.getStyle(this, 'display') == value;
+ });
+
+ return new Class({
+
+ Extends: QUIControl,
+ Type : 'package/quiqqer/bricks/bin/Controls/Slider/Promoslider',
+
+ Binds: [
+ '$onImport',
+ 'prev',
+ 'next'
+ ],
+
+ options: {
+ delay : 5000,
+ effectduration: 200,
+ autostart : true,
+ touch : true
+ },
+
+ initialize: function (options) {
+ this.parent(options);
+
+ this.$dots = [];
+ this.$running = false;
+
+ this.$Touch = null;
+
+ this.addEvents({
+ onImport: this.$onImport
+ });
+ },
+
+ /**
+ * event : on import
+ */
+ $onImport: function () {
+ var self = this,
+ Elm = this.getElm(),
+ slides = Elm.getElements('.quiqqer-bricks-promoslider-slide');
+
+ var Dots = new Element('div', {
+ 'class': 'quiqqer-bricks-promoslider-dots'
+ }).inject(Elm);
+
+ var click = function (event) {
+ if (self.$Timer) {
+ clearInterval(self.$Timer);
+ }
+
+ self.show(event.target.get('data-no'));
+ };
+
+ 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,
+ events : {
+ click: click
+ }
+ });
+
+ Dot.inject(Dots);
+
+ this.$dots.push(Dot);
+ }
+
+ if (typeof this.$dots[0] !== 'undefined') {
+ this.$dots[0].addClass(
+ 'quiqqer-bricks-promoslider-dot-active'
+ );
+ }
+
+ // keyboard events
+ document.addEvent('keyup', function (event) {
+ if (event.key == 'left') {
+ self.prev();
+ return;
+ }
+
+ self.next();
+ });
+
+ // touch events
+ if (this.getAttribute('touch')) {
+ this.$Touch = new Hammer(this.getElm());
+
+ this.$Touch.on('swipe', function (ev) {
+ if (ev.offsetDirection == 4) {
+ self.prev();
+ return;
+ }
+
+ if (ev.offsetDirection == 2) {
+ self.next();
+ }
+ });
+ }
+
+
+ // periodical slide
+ if (this.getAttribute('autostart')) {
+ this.$Timer = (this.next).periodical(this.getAttribute('delay'));
+ }
+ },
+
+ /**
+ * Show previous slide
+ */
+ prev: function () {
+ var Elm = this.getElm(),
+ Current = Elm.getElement('.quiqqer-bricks-promoslider-slide:display(inline)');
+
+ var slideNo = Current.get('data-no');
+
+ slideNo--;
+
+ if (slideNo < 0) {
+ slideNo = Elm.getElements(
+ '.quiqqer-bricks-promoslider-slide'
+ ).length - 1;
+ }
+
+ this.show(slideNo);
+ },
+
+ /**
+ * Show next slide
+ */
+ next: function () {
+ var Elm = this.getElm(),
+ slides = Elm.getElements('.quiqqer-bricks-promoslider-slide'),
+ Current = Elm.getElement('.quiqqer-bricks-promoslider-slide:display(inline)');
+
+ var slideNo = Current.get('data-no');
+
+ if (slideNo >= slides.length - 1) {
+ slideNo = 0;
+ } else {
+ slideNo++;
+ }
+
+ this.show(slideNo);
+ },
+
+ /**
+ * Shows wanted slide
+ *
+ * @param {Number} slideNo
+ */
+ show: function (slideNo) {
+ if (this.$running) {
+ return Promise.resolve();
+ }
+
+ this.$running = true;
+ this.$normalizeDots();
+
+ if (typeof this.$dots[slideNo] !== 'undefined') {
+ this.$dots[slideNo].addClass(
+ 'quiqqer-bricks-promoslider-dot-active'
+ );
+ }
+
+
+ return new Promise(function (resolve) {
+
+ var self = this,
+ cls = '.quiqqer-bricks-promoslider-sl' + slideNo,
+ Slide = this.getElm().getElement(cls);
+
+ if (typeof this.$dots[slideNo] !== 'undefined') {
+ this.$dots[slideNo].addClass(
+ 'quiqqer-bricks-promoslider-dot-active'
+ );
+ }
+
+ var Current = this.getElm().getElement(
+ '.quiqqer-bricks-promoslider-slide:display(inline)'
+ );
+
+ self.$hideSheetToLeft(Current).then(function () {
+ return self.$showSheetFromRight(Slide);
+
+ }).then(function () {
+
+ resolve();
+ this.$running = false;
+
+ }.bind(this));
+
+ }.bind(this));
+ },
+
+ /**
+ *
+ * @returns {Promise}
+ */
+ $normalizeDots: function () {
+ return new Promise(function (resolve) {
+ for (var i = 0, len = this.$dots.length; i < len; i++) {
+ this.$dots[i].removeClass(
+ 'quiqqer-bricks-promoslider-dot-active'
+ );
+ }
+
+ resolve();
+ }.bind(this));
+ },
+
+ /**
+ *
+ * @param {HTMLDivElement} Sheet
+ * @return {Promise}
+ */
+ $hideSheetToLeft: function (Sheet) {
+ var Image = Sheet.getElement('.quiqqer-bricks-promoslider-slide-image');
+ var Header = Sheet.getElement('.quiqqer-bricks-promoslider-slide-title');
+ var Text = Sheet.getElement('.quiqqer-bricks-promoslider-slide-text');
+
+ return Promise.all([
+ this.$hideToLeft(Image, 100),
+ this.$hideToLeft(Header, 200),
+ this.$hideToLeft(Text, 300)
+ ]).then(function () {
+ Sheet.setStyle('display', 'none');
+ });
+ },
+
+ /**
+ *
+ * @param {HTMLDivElement} Sheet
+ * @return {Promise}
+ */
+ $showSheetFromRight: function (Sheet) {
+ var Image = Sheet.getElement('.quiqqer-bricks-promoslider-slide-image');
+ var Header = Sheet.getElement('.quiqqer-bricks-promoslider-slide-title');
+ var Text = Sheet.getElement('.quiqqer-bricks-promoslider-slide-text');
+
+ Image.setStyle('opacity', 0);
+ Header.setStyle('opacity', 0);
+ Text.setStyle('opacity', 0);
+
+ Sheet.setStyle('display', 'inline');
+
+ return Promise.all([
+ this.$showFromRight(Image, 100),
+ this.$showFromRight(Header, 200),
+ this.$showFromRight(Text, 300)
+ ]);
+ },
+
+ /**
+ *
+ * @param Node
+ * @param delay
+ * @returns {*}
+ */
+ $hideToLeft: function (Node, delay) {
+ delay = delay || 100;
+
+ if (!Node) {
+ return Promise.resolve();
+ }
+
+ var effectduration = this.getAttribute('effectduration');
+
+ return new Promise(function (resolve) {
+ (function () {
+ if (Node.getStyle('position') == 'absolute') {
+ var oldPos = Node.getStyle('left').toInt();
+
+ moofx(Node).animate({
+ left : oldPos - 50,
+ opacity: 0
+ }, {
+ duration: effectduration,
+ callback: function () {
+ Node.setStyle('left', oldPos);
+ resolve();
+ }
+ });
+
+ return;
+ }
+
+ moofx(Node).animate({
+ marginLeft: -50,
+ opacity : 0
+ }, {
+ duration: effectduration,
+ callback: function () {
+ Node.setStyle('marginLeft', null);
+ resolve();
+ }
+ });
+
+ }).delay(delay);
+ });
+ },
+
+ /**
+ *
+ * @param Node
+ * @param delay
+ * @returns {Promise}
+ */
+ $showFromRight: function (Node, delay) {
+ delay = delay || 100;
+
+ if (!Node) {
+ return Promise.resolve();
+ }
+
+ var effectduration = this.getAttribute('effectduration');
+
+ return new Promise(function (resolve) {
+ (function () {
+ if (Node.getStyle('position') == 'absolute') {
+ var origLeft = Node.getStyle('left').toInt();
+
+ Node.setStyle('left', origLeft + 50);
+
+ moofx(Node).animate({
+ left : origLeft,
+ opacity: 1
+ }, {
+ duration: effectduration,
+ callback: resolve
+ });
+
+ return;
+ }
+
+ Node.setStyle('marginLeft', 50);
+
+ moofx(Node).animate({
+ marginLeft: 0,
+ opacity : 1
+ }, {
+ duration: effectduration,
+ callback: resolve
+ });
+
+ }).delay(delay);
+ });
+ }
+ });
+});
diff --git a/bricks.xml b/bricks.xml
index adee644..a394307 100644
--- a/bricks.xml
+++ b/bricks.xml
@@ -121,6 +121,15 @@
</settings>
</brick>
+ <brick control="\QUI\Bricks\Controls\Slider\Promoslider">
+ <title>
+ <locale group="quiqqer/bricks" var="brick.control.promoslider.title"/>
+ </title>
+ <description>
+ <locale group="quiqqer/bricks" var="brick.control.promoslider.description"/>
+ </description>
+ </brick>
+
<!-- Children Listing Infnite -->
<brick control="\QUI\Bricks\Controls\Children\Infinite">
<title>
diff --git a/composer.json b/composer.json
index 7dbbfa5..b5fca86 100644
--- a/composer.json
+++ b/composer.json
@@ -1,29 +1,27 @@
{
- "name" : "quiqqer/bricks",
- "type" : "quiqqer-module",
- "description" : "Bricks Module",
-
- "version" : "dev-dev",
- "license" : "MIT",
-
- "authors" : [{
- "name": "Henning Leutz",
- "email": "leutz@pcsg.de",
- "homepage": "http://www.pcsg.de",
- "role": "Developer"
- }],
-
- "support" : {
- "email" : "support@pcsg.de"
- },
-
- "require": {
- "quiqqer/quiqqer" : "*@dev"
- },
-
- "autoload": {
- "psr-0" : {
- "QUI" : "src/"
- }
+ "name": "quiqqer/bricks",
+ "type": "quiqqer-module",
+ "description": "Bricks Module",
+ "version": "dev-dev",
+ "license": "MIT",
+ "authors": [
+ {
+ "name": "Henning Leutz",
+ "email": "leutz@pcsg.de",
+ "homepage": "http://www.pcsg.de",
+ "role": "Developer"
}
+ ],
+ "support": {
+ "email": "support@pcsg.de"
+ },
+ "require": {
+ "quiqqer/quiqqer": "*@dev",
+ "npm-asset/hammerjs": "2.*"
+ },
+ "autoload": {
+ "psr-0": {
+ "QUI": "src/"
+ }
+ }
}
diff --git a/database.xml b/database.xml
index 6026fdb..6cdbfa2 100644
--- a/database.xml
+++ b/database.xml
@@ -3,10 +3,10 @@
<global>
<table name="bricks">
- <field type="INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY">id</field>
- <field type="VARCHAR( 255 )">project</field>
- <field type="VARCHAR( 2 )">lang</field>
- <field type="VARCHAR( 255 ) NOT NULL">title</field>
+ <field type="INT(3) NOT NULL AUTO_INCREMENT PRIMARY KEY">id</field>
+ <field type="VARCHAR(255)">project</field>
+ <field type="VARCHAR(2)">lang</field>
+ <field type="VARCHAR(255) NOT NULL">title</field>
<field type="TEXT NOT NULL">description</field>
<field type="TEXT">settings</field>
<field type="TEXT">customfields</field>
@@ -17,12 +17,21 @@
<field type="TEXT">height</field>
<field type="TEXT">classes</field>
</table>
+
+ <table name="bricksUID">
+ <field type="INT(10) NOT NULL AUTO_INCREMENT PRIMARY KEY">id</field>
+ <field type="INT(3)">brickId</field>
+ <field type="VARCHAR(255)">project</field>
+ <field type="VARCHAR(2)">lang</field>
+ <field type="BIGINT(20)">siteId</field>
+ <field type="TEXT">settings</field>
+ </table>
</global>
<projects>
<table name="bricksCache" no-auto-update="1" no-site-reference="1">
- <field type="bigint( 20 ) NOT NULL">id</field>
- <field type="VARCHAR( 255 )">area</field>
+ <field type="BIGINT(20) NOT NULL">id</field>
+ <field type="VARCHAR(255)">area</field>
<field type="TEXT">brick</field>
</table>
</projects>
diff --git a/src/QUI/Bricks/Brick.php b/src/QUI/Bricks/Brick.php
index dc0fd4a..0f31e8a 100644
--- a/src/QUI/Bricks/Brick.php
+++ b/src/QUI/Bricks/Brick.php
@@ -24,6 +24,14 @@ class Brick extends QUI\QDOM
*/
protected $id = false;
+ /**
+ * internal unique ID
+ * This ID is unique for the complete system
+ *
+ * @var string
+ */
+ protected $uniqueId = false;
+
/**
* Brick settings
*
@@ -84,6 +92,10 @@ public function __construct($params = array())
$this->id = $params['id'];
}
+ if (isset($params['uniqueId'])) {
+ $this->uniqueId = $params['uniqueId'];
+ }
+
// default settings from control
$Control = $this->getControl();
$Manager = Manager::init();
@@ -249,6 +261,11 @@ public function create()
if ($this->id) {
$Control->addCSSClass('brick-' . $this->id);
+ $Control->setAttribute('data-brickid', $this->id);
+ }
+
+ if ($this->uniqueId) {
+ $Control->setAttribute('data-brickuid', $this->uniqueId);
}
foreach ($this->cssClasses as $cssClass) {
diff --git a/src/QUI/Bricks/Controls/Children/Infinite.css b/src/QUI/Bricks/Controls/Children/Infinite.css
index fe8c195..710d013 100644
--- a/src/QUI/Bricks/Controls/Children/Infinite.css
+++ b/src/QUI/Bricks/Controls/Children/Infinite.css
@@ -36,8 +36,10 @@
-webkit-transition: all 2s ease;
}
-.quiqqer-bricks-children-infinite button {
+.quiqqer-bricks-children-infinite .button {
clear: both;
display: block;
margin: 0 auto;
+ text-align: center;
+ width: 160px;
}
diff --git a/src/QUI/Bricks/Controls/Children/Infinite.html b/src/QUI/Bricks/Controls/Children/Infinite.html
index f49a92d..2b27635 100644
--- a/src/QUI/Bricks/Controls/Children/Infinite.html
+++ b/src/QUI/Bricks/Controls/Children/Infinite.html
@@ -1,3 +1,3 @@
{$children}
-<button disabled>Mehr laden</button>
\ No newline at end of file
+<div class="button disabled">Mehr laden</div>
\ No newline at end of file
diff --git a/src/QUI/Bricks/Controls/Children/InfiniteRow.html b/src/QUI/Bricks/Controls/Children/InfiniteRow.html
new file mode 100644
index 0000000..2cc692d
--- /dev/null
+++ b/src/QUI/Bricks/Controls/Children/InfiniteRow.html
@@ -0,0 +1,23 @@
+<div data-row="{$row}" class="quiqqer-bricks-children-infinite-row">
+ {foreach from=$children item=Child}
+ <div class="grid-25 mobile-grid-50 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}
+
+ <header>
+ {$Child->getAttribute('title')}
+ </header>
+
+ {image src=$Child->getAttribute('image_site')
+ style="width: 100%; height: auto;"
+ maxwidth="280"}
+ </a>
+ </article>
+ </div>
+ {/foreach}
+</div>
\ No newline at end of file
diff --git a/src/QUI/Bricks/Controls/Children/Slider.css b/src/QUI/Bricks/Controls/Children/Slider.css
index d1126ca..ab494bb 100644
--- a/src/QUI/Bricks/Controls/Children/Slider.css
+++ b/src/QUI/Bricks/Controls/Children/Slider.css
@@ -24,25 +24,32 @@
}
.quiqqer-bricks-children-slider-container-slide {
- display: table;
+ display: inline-block;
+ float: none;
+ height: calc(100% - 22px);
position: relative;
+ white-space: nowrap;
}
.quiqqer-bricks-children-slider-child {
display: inline-block;
+ float: none;
+ height: 100%;
}
.quiqqer-bricks-children-slider-child-display {
border: 1px solid #dfe4e4;
- height: 180px;
+ height: 100%;
overflow: hidden;
+ margin: 0 10px;
text-align: center;
}
.quiqqer-bricks-children-slider-child-display img {
- float: left;
+ height: 100%;
transition: all 1s ease;
-webkit-transition: all 1s ease;
+ width: auto;
}
.quiqqer-bricks-children-slider-child-display img:hover {
diff --git a/src/QUI/Bricks/Controls/Children/Slider.html b/src/QUI/Bricks/Controls/Children/Slider.html
index f4e2ea1..9e39940 100644
--- a/src/QUI/Bricks/Controls/Children/Slider.html
+++ b/src/QUI/Bricks/Controls/Children/Slider.html
@@ -6,19 +6,17 @@
{if $Child->getAttribute('image_site')}
{assign var=hasImage value=1}
{/if}
- <li class="grid-25 quiqqer-bricks-children-slider-child">
+ <li class="quiqqer-bricks-children-slider-child">
<article class="quiqqer-bricks-children-slider-child-display">
<a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:"html"}">
- {if !$hasImage}
+ {if !$hasImage}
<header>
{$Child->getAttribute('title')}
</header>
{$Child->getAttribute('short')}
- {else}
- {image src=$Child->getAttribute('image_site')
- style="width: 100%; height: auto;"
- maxwidth="280"}
- {/if}
+ {else}
+ {image src=$Child->getAttribute('image_site') maxwidth="280"}
+ {/if}
</a>
</article>
</li>
diff --git a/src/QUI/Bricks/Controls/Slider/Promoslider.css b/src/QUI/Bricks/Controls/Slider/Promoslider.css
new file mode 100644
index 0000000..b5ff6e7
--- /dev/null
+++ b/src/QUI/Bricks/Controls/Slider/Promoslider.css
@@ -0,0 +1,122 @@
+.quiqqer-bricks-promoslider {
+ float: left;
+ height: 540px;
+ position: relative;
+ width: 100%;
+}
+
+.quiqqer-bricks-promoslider-slide {
+ float: left;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ width: 100%;
+}
+
+.quiqqer-bricks-promoslider-slide-image {
+ height: 100%;
+ left: 0;
+ padding: 10px;
+ position: absolute;
+ top: 0;
+ width: auto;
+}
+
+.quiqqer-bricks-promoslider-slide-image img {
+ height: auto;
+ margin: 20px 0 40px;
+ max-height: 100%;
+ max-width: 100%;
+}
+
+.quiqqer-bricks-promoslider-slide-display {
+ font-size: 16px;
+ line-height: 32px;
+ padding: 20px;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ width: 50%;
+}
+
+.quiqqer-bricks-promoslider-slide-left .quiqqer-bricks-promoslider-slide-display {
+ left: 0;
+}
+
+.quiqqer-bricks-promoslider-slide-right .quiqqer-bricks-promoslider-slide-display {
+ left: 50%;
+}
+
+/** slide dots
+ =============================================== */
+
+.quiqqer-bricks-promoslider-dots {
+ bottom: 0;
+ position: absolute;
+ left: 50%;
+}
+
+.quiqqer-bricks-promoslider-dot {
+ background: #cdd4d5;
+ border-radius: 10px;
+ cursor: pointer;
+ float: left;
+ height: 20px;
+ margin: 0 10px 0 0;
+ transition: all 2s ease;
+ -webkit-transition: all 0.3s ease;
+ width: 20px;
+}
+
+.quiqqer-bricks-promoslider-dot:hover {
+ background: #d9232b;
+ opacity: 0.5;
+ transition: all 2s ease;
+ -webkit-transition: all 0.3s ease;
+}
+
+.quiqqer-bricks-promoslider-dot-active {
+ background: #d9232b;
+ transition: all 2s ease;
+ -webkit-transition: all 0.3s ease;
+}
+
+@media screen and (max-width: 960px) {
+ .quiqqer-bricks-promoslider {
+ height: 500px;
+ }
+}
+
+@media screen and (max-width: 800px) {
+ .quiqqer-bricks-promoslider {
+ height: 450px;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .quiqqer-bricks-promoslider {
+ height: 400px;
+ }
+}
+
+@media screen and (max-width: 680px) {
+ .quiqqer-bricks-promoslider-slide-image {
+ display: none;
+ }
+
+ .quiqqer-bricks-promoslider-slide-display {
+ left: 0 !important;
+ width: 100%;
+ }
+
+ .quiqqer-bricks-promoslider-dots {
+ left: 0;
+ text-align: center;
+ width: 100%;
+ }
+
+ .quiqqer-bricks-promoslider-dot {
+ display: inline-block;
+ float: none;
+ }
+}
diff --git a/src/QUI/Bricks/Controls/Slider/Promoslider.html b/src/QUI/Bricks/Controls/Slider/Promoslider.html
new file mode 100644
index 0000000..e34dbdc
--- /dev/null
+++ b/src/QUI/Bricks/Controls/Slider/Promoslider.html
@@ -0,0 +1,34 @@
+{foreach $desktopSlides as $key => $slide}
+<div class="quiqqer-bricks-promoslider-slide {$slide.pos} quiqqer-bricks-promoslider-sl{$key}"
+ {if $key == 0}
+ style="display: inline"
+ {else}
+ style="display: none"
+ {/if}
+ data-no="{$key}"
+>
+ {if $slide.image}
+ <div class="quiqqer-bricks-promoslider-slide-image">
+ {image image=$slide.image}
+ </div>
+ {/if}
+
+ <div class="quiqqer-bricks-promoslider-slide-display">
+ {if $Utils->isImage($slide.title)}
+ <header class="quiqqer-bricks-promoslider-slide-title">
+ {if $Utils->isImage($slide.title)}
+ {image image=$slide.title}
+ {else}
+ {$slide.title}
+ {/if}
+ </header>
+ {/if}
+
+ {if $slide.text}
+ <div class="quiqqer-bricks-promoslider-slide-text">
+ {$slide.text}
+ </div>
+ {/if}
+ </div>
+</div>
+{/foreach}
diff --git a/src/QUI/Bricks/Controls/Slider/Promoslider.php b/src/QUI/Bricks/Controls/Slider/Promoslider.php
new file mode 100644
index 0000000..065354e
--- /dev/null
+++ b/src/QUI/Bricks/Controls/Slider/Promoslider.php
@@ -0,0 +1,212 @@
+<?php
+
+/**
+ * This file contains QUI\Bricks\Controls\Slider\Promoslider
+ */
+
+namespace QUI\Bricks\Controls\Slider;
+
+use QUI;
+use QUI\Projects\Media\Utils;
+
+/**
+ * Class Promoslider
+ *
+ * @package QUI\Bricks\Controls
+ */
+class Promoslider extends QUI\Control
+{
+ /**
+ * @var array
+ */
+ protected $mobileSlides = array();
+
+ /**
+ * @var array
+ */
+ protected $desktopSlides = array();
+
+ /**
+ * constructor
+ *
+ * @param array $attributes
+ */
+ public function __construct($attributes = array())
+ {
+ // default options
+ $this->setAttributes(array(
+ 'title' => '',
+ 'text' => '',
+ 'class' => 'quiqqer-bricks-promoslider',
+ 'nodeName' => 'section',
+ 'data-qui' => 'package/quiqqer/bricks/bin/Controls/Slider/Promoslider'
+ ));
+
+ $this->addCSSFile(
+ dirname(__FILE__) . '/Promoslider.css'
+ );
+
+ $this->addCSSClass('grid-100');
+ $this->addCSSClass('mobile-grid-100');
+
+
+ parent::__construct($attributes);
+
+
+ $this->addSlide(
+ 'image.php?project=pbischop&id=19',
+
+ 'image.php?project=pbischop&id=18',
+
+ "<p>
+ You lived before you met me?! Maybe I love you so much I love you no matter who you are pretending to
+ be.
+ </p>
+ <p>
+ It may comfort you to know that Fry's death took only fifteen seconds, yet the pain
+ was so intense, that it felt to him like fifteen years.
+ </p>
+ <p>
+ And it goes without saying, it caused him to empty his bowels.
+ </p>",
+
+ 'right'
+ );
+
+ $this->addSlide(
+ 'image.php?project=pbischop&id=21',
+ 'image.php?project=pbischop&id=20',
+
+ "<p>
+ You lived before you met me?! Maybe I love you so much I love you no matter who you are pretending to
+ be.
+ </p>"
+ );
+
+ $this->addSlide(
+ 'image.php?project=pbischop&id=23',
+ 'image.php?project=pbischop&id=22',
+
+ "<p>
+ You lived before you met me?! Maybe I love you so much I love you no matter who you are pretending to
+ be.
+ </p>"
+ );
+
+ }
+
+ /**
+ * (non-PHPdoc)
+ *
+ * @see \QUI\Control::create()
+ */
+ public function getBody()
+ {
+ $Engine = QUI::getTemplateManager()->getEngine();
+
+ $Engine->assign(array(
+ 'this' => $this,
+ 'desktopSlides' => $this->desktopSlides,
+ 'mobileSlides' => $this->mobileSlides,
+ 'Utils' => new Utils()
+ ));
+
+ return $Engine->fetch(dirname(__FILE__) . '/Promoslider.html');
+ }
+
+ /**
+ * Add a slide for the desktop view
+ *
+ * @param string $image - image.php URL to an image
+ * @param string $title - Title Text or image.php URL to an image
+ * @param string $text - Description text
+ * @param string $type - left, right (default = right)
+ */
+ public function addSlide($image, $title, $text, $type = 'right')
+ {
+ if (Utils::isMediaUrl($image)) {
+ try {
+ $Image = Utils::getMediaItemByUrl($image);
+
+ if (Utils::isImage($Image)) {
+ $image = $Image;
+ }
+ } catch (QUI\Exception $Exception) {
+ QUI\System\Log::addDebug($Exception->getMessage());
+ $image = false;
+ }
+ } else {
+ $image = false;
+ }
+
+ if (Utils::isMediaUrl($title)) {
+ try {
+ $Title = Utils::getMediaItemByUrl($title);
+
+ if (Utils::isImage($Title)) {
+ $title = $Title;
+ }
+ } catch (QUI\Exception $Exception) {
+ $title = '';
+ }
+ }
+
+ $pos = 'quiqqer-bricks-promoslider-slide-right';
+
+ if ($type == 'left') {
+ $pos = 'quiqqer-bricks-promoslider-slide-left';
+ }
+
+ $this->desktopSlides[] = array(
+ 'image' => $image,
+ 'title' => $title,
+ 'text' => $text,
+ 'pos' => $pos
+ );
+ }
+
+ /**
+ * Add a slide for the mobile view
+ *
+ * @param string $image
+ * @param string $title
+ * @param string $text
+ */
+ public function addMobileSlide($image, $title, $text)
+ {
+ if (Utils::isMediaUrl($image)) {
+ try {
+ $Image = Utils::getMediaItemByUrl($image);
+
+ if (Utils::isImage($Image)) {
+ $image = $Image;
+ } else {
+ $image = false;
+ }
+ } catch (QUI\Exception $Exception) {
+ QUI\System\Log::addDebug($Exception->getMessage());
+ $image = false;
+ }
+ } else {
+ $image = false;
+ }
+
+ if (Utils::isMediaUrl($title)) {
+ try {
+ $Title = Utils::getMediaItemByUrl($title);
+
+ if (Utils::isImage($Title)) {
+ $title = $Title;
+ }
+ } catch (QUI\Exception $Exception) {
+ $title = false;
+ }
+ }
+
+ $this->mobileSlides[] = array(
+ 'image' => $image,
+ 'title' => $title,
+ 'text' => $text
+ );
+ }
+}
diff --git a/src/QUI/Bricks/Manager.php b/src/QUI/Bricks/Manager.php
index 54b08ad..0f2dcc8 100644
--- a/src/QUI/Bricks/Manager.php
+++ b/src/QUI/Bricks/Manager.php
@@ -22,6 +22,11 @@ class Manager
*/
const TABLE = 'bricks';
+ /**
+ * Bricks uid table name
+ */
+ const TABLE_UID = 'bricksUID';
+
/**
* Brick Cache table name
*/
@@ -34,6 +39,13 @@ class Manager
*/
protected $bricks = array();
+ /**
+ * Brick UID temp collector
+ *
+ * @var array
+ */
+ protected $brickUIDs = array();
+
/**
* Initialized brick manager
*
@@ -279,6 +291,40 @@ public function getBrickById($id)
return $this->bricks[$id];
}
+ /**
+ * Get a Brick by its unique ID
+ *
+ * @param string $uid
+ *
+ * @return Brick
+ * @throws QUI\Exception
+ */
+ public function getBrickByUID($uid)
+ {
+ if (isset($this->brickUIDs[$uid])) {
+ return $this->brickUIDs[$uid];
+ }
+
+ $data = QUI::getDataBase()->fetch(array(
+ 'from' => $this->getTable(),
+ 'where' => array(
+ 'id' => (int)$uid
+ ),
+ 'limit' => 1
+ ));
+
+ if (!isset($data[0])) {
+ throw new QUI\Exception('Brick not found');
+ }
+
+ $Brick = new Brick($data[0]);
+ $Brick->setAttribute('id', $id);
+
+ $this->bricks[$id] = $Brick;
+
+ return $this->bricks[$id];
+ }
+
/**
* Return the available brick settings by the brick type
*
@@ -597,6 +643,14 @@ protected function getTable()
return QUI::getDBTableName(self::TABLE);
}
+ /**
+ * @return string
+ */
+ protected function getUIDTable()
+ {
+ return QUI::getDBTableName(self::TABLE);
+ }
+
/**
* List of available bricks.xml files
*
--
GitLab