HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
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();
    };

}