File: D:/HostingSpaces/SBogers10/ste.komma.pro/resources/js/components/testimonialsHandler.js
let testimonials = [];
const testimonialsContainers = document.querySelectorAll('.js-testimonials');
const testimonialsContainersLength = testimonialsContainers.length;
for(let i =0; i < testimonialsContainersLength; i++){
const testimonial = testimonialsContainers[i];
const testimonialId = testimonial.getAttribute('id');
if(testimonialId !== null){
const testimonialSetting = new ProjectorSetting({
sliderId: testimonialId,
slideQuery: '#' + testimonialId +' .js-testimonials-item',
navigationButtons: '#' + testimonialId +' .js-testimonials-button' ,
autoSlide: false,
sliderInterval: 4000
});
testimonials.push( new Projector(testimonialSetting.prepareParameters()).init() );
}
else console.log('A testimonials has no id...');
}
function ProjectorSetting(settingsObject) {
const self = this;
this.sliderId = '';
this.definedPreviousNext = true;
this.autoSlide = false;
this.sliderInterval = 4000;
this.navigationButtons = '';
this.slideQuery = '';
this.setProjectorId = function (string) {
this.sliderId = string;
return this;
};
this.setDefinedPreviousNext = function (boolean) {
this.definedPreviousNext = boolean;
return this;
};
this.setAutoSlide = function (boolean) {
this.autoSlide = boolean;
return this;
};
this.setSliderInterval = function (integer) {
this.sliderInterval = integer;
return this;
};
this.setSlideQuery = function (string) {
this.slideQuery = string;
return this;
};
this.setNavigationButtons = function (string) {
this.navigationButtons = string;
return this;
};
this.getProjectorId = function () {
return this.sliderId;
};
this.getDefinedPreviousNext = function () {
return this.definedPreviousNext;
};
this.getAutoSlide = function () {
return this.autoSlide;
};
this.getSliderInterval = function () {
return this.sliderInterval;
};
this.getSlideQuery = function () {
return this.slideQuery;
};
this.getNavigationButtons = function () {
return this.navigationButtons;
};
// Invert setters to getters
this.prepareParameters = function () {
return {
sliderId: self.getProjectorId(),
definedPreviousNext: self.getDefinedPreviousNext(),
autoSlide: self.getAutoSlide(),
sliderInterval: self.getSliderInterval(),
navigationButtons: self.getNavigationButtons(),
slideQuery: self.getSlideQuery()
}
};
// Mass assign settings
this.fill = function () {
// Object.keys(settingsObject).forEach(function (key) {
// self[key] = settingsObject[key];
// });
const settingsObjectKeys = Object.keys(settingsObject);
const settingsObjectLength = settingsObjectKeys.length;
for(let i = 0; i < settingsObjectLength; i++){
const key = settingsObjectKeys[i];
self[key] = settingsObject[key];
}
};
this.fill();
return {
sliderId: self.setProjectorId,
definedPreviousNext: self.setDefinedPreviousNext,
autoSlide: self.setAutoSlide,
sliderInterval: self.setSliderInterval,
navigationButtons: self.setNavigationButtons,
slideQuery: self.setSlideQuery,
prepareParameters: self.prepareParameters
};
}
function Projector(settings) {
//Define Projector object
const self = this;
this.sliderObject = '';
//SlideParameters
this.activeSlideId = 0;
this.previousSlideId = 0;
this.nextSlideId = 0;
this.availableSlides = 1;
this.slides = [];
this.autoSlideInterval = null;
this.settings = {};
this.init = function () {
//Append settings to self
this.settings = settings;
//Assign needed elements and calculations
this.sliderObject = document.getElementById(this.settings.sliderId);
this.slides = document.querySelectorAll(this.settings.slideQuery);
this.availableSlides = this.slides.length;
this.activeSlideId = 0;
//Define previous and next if we want to use those
if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();
// Set active slide (and possible previous and next classes)
this.setSlide();
// Swipe interaction
const swipeGestures = new Hammer(this.sliderObject);
swipeGestures.on('swipeleft', function () {
self.resetAutoSlide();
self.nextSlide();
self.setSlide();
});
swipeGestures.on('swiperight', function () {
self.resetAutoSlide();
self.previousSlide();
self.setSlide();
});
if (this.settings.navigationButtons !== '') {
// Click interaction
const navigationButtons = document.querySelectorAll(this.settings.navigationButtons);
const navigationButtonsLength = navigationButtons.length;
for(let i = 0; i < navigationButtonsLength; i++){
const navigationButton = navigationButtons[i];
navigationButton.addEventListener('click', function () {
self.clickNavigationButton(this);
});
}
}
self.autoSlide();
};
this.autoSlide = function (){
if(this.autoSlideInterval !== null) clearInterval(this.autoSlideInterval);
if(this.settings.autoSlide && Number.isInteger(this.settings.sliderInterval) ){
this.autoSlideInterval = setInterval(function() {
self.nextSlide();
self.setSlide();
}, this.settings.sliderInterval
);
}
};
this.resetAutoSlide = self.autoSlide;
this.nextSlide = function () {
this.activeSlideId++;
if (this.activeSlideId >= this.availableSlides) this.activeSlideId = 0;
if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();
};
this.previousSlide = function () {
this.activeSlideId--;
if (this.activeSlideId < 0) this.activeSlideId = this.availableSlides - 1;
if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();
};
this.setPreviousAndNextSlide = function () {
this.nextSlideId = this.activeSlideId + 1;
if (this.nextSlideId >= this.availableSlides) this.nextSlideId = 0;
this.previousSlideId = this.activeSlideId - 1;
if (this.previousSlideId < 0) this.previousSlideId = this.availableSlides - 1;
};
this.setSlide = function () {
// Loop through the form elements
const slidesLength = self.slides.length;
for(let i = 0; i < slidesLength; i++){
const slide = self.slides[i];
// Convert data set attribute to desired type
const slideOrder = parseInt(slide.getAttribute('data-order'));
// Remove and set active for all slides
if (slideOrder !== self.activeSlideId) slide.classList.remove('is-active');
else slide.classList.add('is-active');
// If we use the previous and next, also set those classes
if (self.settings.definedPreviousNext) {
if (slideOrder !== self.previousSlideId) slide.classList.remove('is-previous');
else slide.classList.add('is-previous');
if (slideOrder !== self.nextSlideId) slide.classList.remove('is-next');
else slide.classList.add('is-next');
}
}
const next = document.querySelector(self.settings.navigationButtons + '.is-next');
const previous = document.querySelector(self.settings.navigationButtons + '.is-previous');
next.setAttribute('data-order', self.nextSlideId);
previous.setAttribute('data-order', self.previousSlideId);
};
this.clickNavigationButton = function (navButton) {
self.activeSlideId = parseInt(navButton.getAttribute('data-order'));
if (self.settings.definedPreviousNext) self.setPreviousAndNextSlide();
self.setSlide();
self.resetAutoSlide();
};
}