diff --git a/bin/Controls/Slider/PromosliderWallpaper.js b/bin/Controls/Slider/PromosliderWallpaper.js
index bdfb238840192ba69eb8451c2f85eb5fb4cfee90..7fb8ca4968192a43fab6a3b3e2266c559912e5bf 100644
--- a/bin/Controls/Slider/PromosliderWallpaper.js
+++ b/bin/Controls/Slider/PromosliderWallpaper.js
@@ -2,6 +2,8 @@
* @module package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper
* @author www.pcsg.de (Henning Leutz)
*
+ * Wallpaper Slider
+ *
* @require qui/QUI
* @require qui/controls/Control
*/
@@ -61,9 +63,17 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
QUI.addEvent('resize', function () {
if (this.getElm()) {
+ var oldMobileStatus = this.$mobile;
+
this.$width = this.getElm().getSize().x;
this.$mobile = (QUI.getWindowSize().x <= 768);
+ if (oldMobileStatus != this.$mobile) {
+ // mobile desktop switched
+ this.$setCurrentSlideList();
+ this.$refreshDots();
+ }
+
this.$calcMaxScroll();
this.onResize();
}
@@ -83,32 +93,14 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
this.$Next = Elm.getElement('.quiqqer-bricks-promoslider-wallpaper-next');
this.$Previous = Elm.getElement('.quiqqer-bricks-promoslider-wallpaper-prev');
this.$Dots = Elm.getElement('.quiqqer-bricks-promoslider-wallpaper-dots');
- this.$List = Elm.getElement('ul');
+ this.$List = this.$setCurrentSlideList();
this.$Scroll = moofx(this.$List, {
duration: 250
});
-
// create dots
- var dotClick = function (event) {
- event.stop();
- this.show(event.target.get('data-index'));
- }.bind(this);
-
- var liList = this.$Container.getElements('li');
-
- for (i = 0, len = liList.length; i < len; i++) {
- new Element('span', {
- 'class' : 'quiqqer-bricks-promoslider-wallpaper-dot',
- 'data-index': i,
- events : {
- click: dotClick
- }
- }).inject(this.$Dots);
- }
-
- this.$childrenCount = liList.length;
+ this.$refreshDots();
this.$calcMaxScroll();
// focus helper
@@ -121,6 +113,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
this.$Container.addEvents({
touchstart: function (event) {
+ if (this.$childrenCount <= 1) {
+ return;
+ }
+
var Target = event.target;
if (Target.hasClass('quiqqer-bricks-promoslider-wallpaper-next') ||
@@ -187,6 +183,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
return;
}
+ if (this.$childrenCount <= 1) {
+ return;
+ }
+
var Target = event.target;
if (Target.hasClass('quiqqer-bricks-promoslider-wallpaper-next') ||
@@ -237,6 +237,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
return;
}
+ if (this.$childrenCount <= 1) {
+ return;
+ }
+
var diff = event.page.x - startScroll;
var value = Math.round(-lastScrollLeft + diff);
@@ -551,6 +555,51 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
var size = QUI.getWindowSize();
return size.x > size.y ? 'landscape' : 'portrait';
+ },
+
+ /**
+ * Return the current ul list, mobile or desktop list
+ *
+ * @returns {null|*}
+ */
+ $setCurrentSlideList: function () {
+ if (this.$mobile) {
+ // mobile list
+ this.$List = this.getElm().getElement('ul.hide-on-desktop');
+ } else {
+ // dekstop list
+ this.$List = this.getElm().getElement('ul.hide-on-mobile');
+ }
+
+ return this.$List;
+ },
+
+ /**
+ * Refresh the dot display
+ */
+ $refreshDots: function () {
+ this.$Dots.set('html', '');
+
+ var liList = this.$List.getElements('li');
+
+ if (liList.length > 1) {
+ var dotClick = function (event) {
+ event.stop();
+ this.show(event.target.get('data-index'));
+ }.bind(this);
+
+ for (var i = 0, len = liList.length; i < len; i++) {
+ new Element('span', {
+ 'class' : 'quiqqer-bricks-promoslider-wallpaper-dot',
+ 'data-index': i,
+ events : {
+ click: dotClick
+ }
+ }).inject(this.$Dots);
+ }
+ }
+
+ this.$childrenCount = liList.length;
}
});
});
\ No newline at end of file
diff --git a/src/QUI/Bricks/Controls/Slider/PromosliderWallpaper.html b/src/QUI/Bricks/Controls/Slider/PromosliderWallpaper.html
index 6472a1ea31550f516f8ae604278ee28bdc37dd23..a9e73ed9925691bf6761ebd8a65c8ba2b94466df 100644
--- a/src/QUI/Bricks/Controls/Slider/PromosliderWallpaper.html
+++ b/src/QUI/Bricks/Controls/Slider/PromosliderWallpaper.html
@@ -1,17 +1,64 @@
<div class="quiqqer-bricks-promoslider-wallpaper-container">
{strip}
- <ul>
+ <ul class="hide-on-mobile">
{foreach $desktopSlides as $key => $slide}
<li>
{assign var=extraStyle value=""}
{assign var=extraClass value=""}
{if $key >= 1}
- {assign var=extraStyle value="display: none;"}
+ {assign var=extraStyle value="display: none;"}
{/if}
{if $slide.pos == 'quiqqer-bricks-promoslider-slide-right'}
- {assign var=extraClass value=" quiqqer-bricks-promoslider-wallpaper-text__right"}
+ {assign var=extraClass value=" quiqqer-bricks-promoslider-wallpaper-text__right"}
+ {/if}
+
+ <div class="quiqqer-bricks-promoslider-wallpaper-image"
+ style="{$extraStyle}background-image: url('{image image=$slide.image onlysrc=1 width=1900}')"
+ > </div>
+
+ {if $slide.title != '' || $slide.text != ''}
+ <div class="grid-container">
+ <div class="quiqqer-bricks-promoslider-wallpaper-text{$extraClass}">
+ {if $Utils->isImage($slide.title) || $slide.title != ''}
+ <header>
+ {if $Utils->isImage($slide.title)}
+ {image image=$slide.title}
+ {else}
+ {$slide.title}
+ {/if}
+ </header>
+ {/if}
+
+ {if $slide.text != ''}
+ <div class="quiqqer-bricks-promoslider-wallpaper-text-description">
+ {$slide.text}
+ </div>
+ {/if}
+ </div>
+ </div>
+ {/if}
+
+
+ </li>
+ {/foreach}
+ </ul>
+ {/strip}
+
+ {strip}
+ <ul class="hide-on-desktop">
+ {foreach $mobileSlides as $key => $slide}
+ <li>
+ {assign var=extraStyle value=""}
+ {assign var=extraClass value=""}
+
+ {if $key >= 1}
+ {assign var=extraStyle value="display: none;"}
+ {/if}
+
+ {if $slide.pos == 'quiqqer-bricks-promoslider-slide-right'}
+ {assign var=extraClass value=" quiqqer-bricks-promoslider-wallpaper-text__right"}
{/if}
<div class="quiqqer-bricks-promoslider-wallpaper-image"
diff --git a/src/QUI/Bricks/Controls/Slider/PromosliderWallpaper2Content.html b/src/QUI/Bricks/Controls/Slider/PromosliderWallpaper2Content.html
index 5aa8cfb45aa59c724f0f65f06a1a9d30719ef975..d988960b80b5f41ed8578dabd77c7a38d987be72 100644
--- a/src/QUI/Bricks/Controls/Slider/PromosliderWallpaper2Content.html
+++ b/src/QUI/Bricks/Controls/Slider/PromosliderWallpaper2Content.html
@@ -1,18 +1,52 @@
<div class="quiqqer-bricks-promoslider-wallpaper-container">
{strip}
- <ul>
+ <ul class="hide-on-mobile">
{foreach $desktopSlides as $key => $slide}
<li>
{assign var=extraStyle value=""}
{assign var=extraClass value=""}
{if $key >= 1}
- {assign var=extraStyle value="display: none;"}
+ {assign var=extraStyle value="display: none;"}
{/if}
<div class="quiqqer-bricks-promoslider-wallpaper-image"
style="{$extraStyle}background-image: url('{image image=$slide.image onlysrc=1 width=1900}')"
- > </div>
+ > 
+ </div>
+
+ <div class="grid-container">
+ <div class="quiqqer-bricks-promoslider-wallpaper2Content-left">
+ {if isset($slide.left)}
+ {$slide.left}
+ {/if}
+ </div>
+ <div class="quiqqer-bricks-promoslider-wallpaper2Content-right">
+ {if isset($slide.right)}
+ {$slide.right}
+ {/if}
+ </div>
+ </div>
+ </li>
+ {/foreach}
+ </ul>
+ {/strip}
+
+ {strip}
+ <ul class="hide-on-desktop">
+ {foreach $mobileSlides as $key => $slide}
+ <li>
+ {assign var=extraStyle value=""}
+ {assign var=extraClass value=""}
+
+ {if $key >= 1}
+ {assign var=extraStyle value="display: none;"}
+ {/if}
+
+ <div class="quiqqer-bricks-promoslider-wallpaper-image"
+ style="{$extraStyle}background-image: url('{image image=$slide.image onlysrc=1 width=1900}')"
+ > 
+ </div>
<div class="grid-container">
<div class="quiqqer-bricks-promoslider-wallpaper2Content-left">