From 07159f2227661ac618da48db11f9274a078ba420 Mon Sep 17 00:00:00 2001
From: Campii <dominik.chrzanowski183@gmail.com>
Date: Thu, 14 Jul 2022 13:24:40 +0200
Subject: [PATCH] refactor: code refactor [CustomerReviewsSlider]
quiqqer/package-bricks#134
---
bin/Controls/Slider/CustomerReviewsSlider.js | 56 +++++++++++++++-----
1 file changed, 43 insertions(+), 13 deletions(-)
diff --git a/bin/Controls/Slider/CustomerReviewsSlider.js b/bin/Controls/Slider/CustomerReviewsSlider.js
index 138cb35..a853648 100644
--- a/bin/Controls/Slider/CustomerReviewsSlider.js
+++ b/bin/Controls/Slider/CustomerReviewsSlider.js
@@ -10,7 +10,6 @@ define('package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider', [
'qui/controls/Control',
URL_OPT_DIR + 'bin/quiqqer-asset/glidejs-glide/@glidejs/glide/dist/glide.js',
'css!' + URL_OPT_DIR + 'bin/quiqqer-asset/glidejs-glide/@glidejs/glide/dist/css/glide.core.css',
- // 'css!' + URL_OPT_DIR + 'bin/quiqqer-asset/glidejs-glide/@glidejs/glide/dist/css/glide.theme.css'
], function (QUI, QUIControl, Glide) {
"use strict";
@@ -52,12 +51,18 @@ define('package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider', [
var autoplay = this.getAttribute('autoplay');
var sliderHeight = this.getAttribute('height');
var perView = this.getAttribute('perview');
+ var self = this;
this.glideTrack = document.querySelector('.customerReviewsSlider-track');
var options = {
type: 'carousel',
- perView: perView
+ perView: perView,
+ breakpoints: {
+ 768: {
+ perView: 1
+ }
+ }
};
if (delay >= 1000 && autoplay == true) {
@@ -66,6 +71,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider', [
var glide = new Glide('.glide', options);
+ glide.on('build.after', function () {
+ self.showSlider();
+ });
+
if (sliderHeight === 'variable') {
this.sliderHandleHeight(glide);
}
@@ -82,31 +91,31 @@ define('package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider', [
// Automated height on Carousel build
glide.on('build.after', function () {
- self.showSlider();
self.setSliderHeight();
});
// Automated height on Carousel change
glide.on('run.before', function (e) {
- self.changeSliderHeight(e.direction);
+ self.changeSliderHeight(e.direction, e.steps);
});
}
},
showSlider: function () {
- var Wrapper = document.querySelector('.customerReviewsSlider-track');
- Wrapper.style.opacity = 1;
+ var Track = document.querySelector('.customerReviewsSlider-track');
+ Track.style.opacity = 1;
},
- changeSliderHeight: function (direction) {
+ changeSliderHeight: function (direction, steps) {
var activeSlide = document.querySelector('.glide__slide--active');
var actvieSlideWidth = activeSlide.offsetWidth;
var glideTrackWidth = this.glideTrack.offsetWidth;
var howMany = Math.round(glideTrackWidth/actvieSlideWidth);
- var slides = this.getSlides(howMany, direction);
+ var slides = this.getSlides(howMany, direction, steps);
+
var highestSlide = this.getHeight(slides);
var glideTrackHeight = this.glideTrack.offsetHeight;
@@ -135,18 +144,18 @@ define('package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider', [
}
},
- getSlides: function (howMany, direction = null) {
+ getSlides: function (howMany, direction = null, steps = null) {
var i = 0;
var Slider = document.querySelector('.customerReviewsSlider-slider');
- var SliderChildren = Slider.children;
- var len = SliderChildren.length;
+ var sliderChildren = Slider.children;
+ var len = sliderChildren.length;
var activeSlideIndex = null;
var firstNewIndex = null;
var lastNewIndex = null;
var visibleSlides = [];
for (i; i<len; i++) {
- if (SliderChildren[i].className.includes('glide__slide--active')) {
+ if (sliderChildren[i].className.includes('glide__slide--active')) {
activeSlideIndex = i;
break;
}
@@ -162,13 +171,34 @@ define('package/quiqqer/bricks/bin/Controls/Slider/CustomerReviewsSlider', [
lastNewIndex = firstNewIndex + this.getAttribute('perview') - 1; //change to preView option
}
+ if (direction === "=") {
+
+ var j = 0;
+
+ for (i = 0; i < sliderChildren.length; i++) {
+ if (sliderChildren[i].className.includes('glide__slide--clone')) {
+ continue;
+ }
+
+ steps = parseInt(steps);
+
+ if (j === steps) {
+ firstNewIndex = i;
+ lastNewIndex = firstNewIndex + this.getAttribute('perview') - 1;
+ break;
+ }
+
+ j++;
+ }
+ }
+
if (direction === null) {
firstNewIndex = activeSlideIndex;
lastNewIndex = firstNewIndex + this.getAttribute('perview') - 1; //change to preView option
}
for (i = firstNewIndex; i<=lastNewIndex; i++) {
- visibleSlides.push(SliderChildren[i]);
+ visibleSlides.push(sliderChildren[i]);
}
return visibleSlides;
--
GitLab