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 @@
* @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
src/QUI/Bricks/Controls/Slider/PromosliderWallpaper.html
+ 50
− 3
Zeige Datei @ 7899633a
<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}')"
>&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}
<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">
{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}')"
>&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="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