Skip to content
Code-Schnipsel Gruppen Projekte
Commit 7899633a erstellt von Henning Leutz's avatar Henning Leutz :martial_arts_uniform:
Dateien durchsuchen

fix: mobile slides in die wallpaper slider implementiert

Übergeordneter ca671b65
No related branches found
No related tags found
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/Controls/Slider/PromosliderWallpaper.js
+ 69
− 20
Zeige Datei @ 7899633a
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
* @module package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper * @module package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper
* @author www.pcsg.de (Henning Leutz) * @author www.pcsg.de (Henning Leutz)
* *
* Wallpaper Slider
*
* @require qui/QUI * @require qui/QUI
* @require qui/controls/Control * @require qui/controls/Control
*/ */
...@@ -61,9 +63,17 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [ ...@@ -61,9 +63,17 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
QUI.addEvent('resize', function () { QUI.addEvent('resize', function () {
if (this.getElm()) { if (this.getElm()) {
var oldMobileStatus = this.$mobile;
this.$width = this.getElm().getSize().x; this.$width = this.getElm().getSize().x;
this.$mobile = (QUI.getWindowSize().x <= 768); this.$mobile = (QUI.getWindowSize().x <= 768);
if (oldMobileStatus != this.$mobile) {
// mobile desktop switched
this.$setCurrentSlideList();
this.$refreshDots();
}
this.$calcMaxScroll(); this.$calcMaxScroll();
this.onResize(); this.onResize();
} }
...@@ -83,32 +93,14 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [ ...@@ -83,32 +93,14 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
this.$Next = Elm.getElement('.quiqqer-bricks-promoslider-wallpaper-next'); this.$Next = Elm.getElement('.quiqqer-bricks-promoslider-wallpaper-next');
this.$Previous = Elm.getElement('.quiqqer-bricks-promoslider-wallpaper-prev'); this.$Previous = Elm.getElement('.quiqqer-bricks-promoslider-wallpaper-prev');
this.$Dots = Elm.getElement('.quiqqer-bricks-promoslider-wallpaper-dots'); this.$Dots = Elm.getElement('.quiqqer-bricks-promoslider-wallpaper-dots');
this.$List = Elm.getElement('ul'); this.$List = this.$setCurrentSlideList();
this.$Scroll = moofx(this.$List, { this.$Scroll = moofx(this.$List, {
duration: 250 duration: 250
}); });
// create dots // create dots
var dotClick = function (event) { this.$refreshDots();
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.$calcMaxScroll(); this.$calcMaxScroll();
// focus helper // focus helper
...@@ -121,6 +113,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [ ...@@ -121,6 +113,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
this.$Container.addEvents({ this.$Container.addEvents({
touchstart: function (event) { touchstart: function (event) {
if (this.$childrenCount <= 1) {
return;
}
var Target = event.target; var Target = event.target;
if (Target.hasClass('quiqqer-bricks-promoslider-wallpaper-next') || if (Target.hasClass('quiqqer-bricks-promoslider-wallpaper-next') ||
...@@ -187,6 +183,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [ ...@@ -187,6 +183,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
return; return;
} }
if (this.$childrenCount <= 1) {
return;
}
var Target = event.target; var Target = event.target;
if (Target.hasClass('quiqqer-bricks-promoslider-wallpaper-next') || if (Target.hasClass('quiqqer-bricks-promoslider-wallpaper-next') ||
...@@ -237,6 +237,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [ ...@@ -237,6 +237,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
return; return;
} }
if (this.$childrenCount <= 1) {
return;
}
var diff = event.page.x - startScroll; var diff = event.page.x - startScroll;
var value = Math.round(-lastScrollLeft + diff); var value = Math.round(-lastScrollLeft + diff);
...@@ -551,6 +555,51 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [ ...@@ -551,6 +555,51 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderWallpaper', [
var size = QUI.getWindowSize(); var size = QUI.getWindowSize();
return size.x > size.y ? 'landscape' : 'portrait'; 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
src/QUI/Bricks/Controls/Slider/PromosliderWallpaper.html
+ 50
− 3
Zeige Datei @ 7899633a
<div class="quiqqer-bricks-promoslider-wallpaper-container"> <div class="quiqqer-bricks-promoslider-wallpaper-container">
{strip} {strip}
<ul> <ul class="hide-on-mobile">
{foreach $desktopSlides as $key => $slide} {foreach $desktopSlides as $key => $slide}
<li> <li>
{assign var=extraStyle value=""} {assign var=extraStyle value=""}
{assign var=extraClass value=""} {assign var=extraClass value=""}
{if $key >= 1} {if $key >= 1}
{assign var=extraStyle value="display: none;"} {assign var=extraStyle value="display: none;"}
{/if} {/if}
{if $slide.pos == 'quiqqer-bricks-promoslider-slide-right'} {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}')"
>&nbsp;</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}
&nbsp;
</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} {/if}
<div class="quiqqer-bricks-promoslider-wallpaper-image" <div class="quiqqer-bricks-promoslider-wallpaper-image"
......
src/QUI/Bricks/Controls/Slider/PromosliderWallpaper2Content.html
+ 37
− 3
Zeige Datei @ 7899633a
<div class="quiqqer-bricks-promoslider-wallpaper-container"> <div class="quiqqer-bricks-promoslider-wallpaper-container">
{strip} {strip}
<ul> <ul class="hide-on-mobile">
{foreach $desktopSlides as $key => $slide} {foreach $desktopSlides as $key => $slide}
<li> <li>
{assign var=extraStyle value=""} {assign var=extraStyle value=""}
{assign var=extraClass value=""} {assign var=extraClass value=""}
{if $key >= 1} {if $key >= 1}
{assign var=extraStyle value="display: none;"} {assign var=extraStyle value="display: none;"}
{/if} {/if}
<div class="quiqqer-bricks-promoslider-wallpaper-image" <div class="quiqqer-bricks-promoslider-wallpaper-image"
style="{$extraStyle}background-image: url('{image image=$slide.image onlysrc=1 width=1900}')" style="{$extraStyle}background-image: url('{image image=$slide.image onlysrc=1 width=1900}')"
>&nbsp</div> >&nbsp
</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}')"
>&nbsp
</div>
<div class="grid-container"> <div class="grid-container">
<div class="quiqqer-bricks-promoslider-wallpaper2Content-left"> <div class="quiqqer-bricks-promoslider-wallpaper2Content-left">
......
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab