ba-block-cli/src/blocks/testimonials/testimonials.js

Auto-create blocks for WordPress ACF

/**
 * Swipe to a testimonial by selector
 * @param {DOMContent} testimonialSection 
 * @param {string} selector 
 */
function swipeTo(testimonialSection, selector) {
    // Find all testimonials, and remove the active class
    // Then activate one by click
    var testimonials = testimonialSection.querySelectorAll('.testimonials .testimonial');
    if (testimonials && testimonials.length) {
        testimonials.forEach(function(testimonial) {

            // Remove active class
            testimonial.classList.remove('active');
            if (testimonial.classList.contains(selector)) {
                testimonial.classList.add('active');
            }
        });
    }

    // Scroll to the active testimonial
    var testimonial = testimonialSection.querySelector('.testimonials .testimonial.active');
    if (testimonial) {
        var count = parseInt(selector.substring(1));
        var width = testimonial.offsetWidth;
        var translate = (count * (- width));
        testimonialSection.querySelector('.testimonials').style.transform = 'translateX('+translate+'px)';
    }
}

/**
 * Prev/next function
 * @param {DOMDocument} testimonialSection 
 * @param {Boolean} next 
 */
function prewNext(testimonialSection, next = true) {

    var testimonialsContainer = testimonialSection.querySelector('.testimonials-slider'),
        testimonials = testimonialsContainer.querySelectorAll('.testimonial'),
        all = testimonials.length,
        active = testimonialSection.querySelector('.testimonial.active');
        c = parseInt(active.getAttribute('data-no')),
        visibles = Math.round(testimonialsContainer.offsetWidth / active.offsetWidth),
        count = next ? (c + 1) : (c - 1);

    // Return to the first slide
    if (next && count >= (all - visibles + 1)) {
        count = 0;
    }

    // Go to the last slide
    if (!next &&  count < 0) {
        count = all - visibles;
    }

    // Check if swipeable
    if (count >= 0 && count < all) {
        testimonialSection.querySelector('.testimonials-controller .numbers .change').textContent = (count + 1);
        swipeTo(testimonialSection, 't'+count);
    }
}

/**
 * Auto swipe functionality
 * @param {DOM Object} testimonialSection 
 */
function autoTestimonialsSlider(testimonialSection) {
    var interval = parseInt(testimonialSection.getAttribute('data-interval')),
        next = true;
    if (interval && interval > 1000) {
        var testimonials = testimonialSection.querySelectorAll('.testimonials .testimonial'),
            all = testimonials.length;
        if (testimonials && testimonials.length) {
            var autoTestimonials = setInterval(function() {
                var active = testimonialSection.querySelector('.testimonial.active');
                c = parseInt(active.getAttribute('data-no'));
                if (c == 0) {
                    next = true;
                } else  if (c == (all - 1)) {
                    next = false;
                }

                prewNext(testimonialSection, next)
            }, interval);

            return autoTestimonials;
        }
    }

    return false;
}

// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
    console.log('Testimonials init');

    // Testimonials section
    var testimonialsSection = document.querySelectorAll('.testimonials-section');
    if (testimonialsSection && testimonialsSection.length) {
        testimonialsSection.forEach(function(testimonialSection) {

            // Auto testimonials
            var autoTestimonials = autoTestimonialsSlider(testimonialSection);

            // Testimonials arrows
            var arrows = testimonialSection.querySelectorAll('.testimonials-controller .controller');
            if (arrows && arrows.length) {
                arrows.forEach(function(arrow) {
                    arrow.addEventListener('click', function() {
                        // Clear interval
                        clearInterval(autoTestimonials);
                        autoTestimonials = autoTestimonialsSlider(testimonialSection);

                        prewNext(testimonialSection, !this.classList.contains('ba-prev'));
                    });
                });
            }

            // Detect swipe
            testimonialSection.addEventListener('touchstart', function(event) {
                touchstartX = event.changedTouches[0].screenX;
                touchstartY = event.changedTouches[0].screenY;
            }, {passive: true});
            testimonialSection.addEventListener('touchend', function(event) {
                touchendX = event.changedTouches[0].screenX;
                touchendY = event.changedTouches[0].screenY;
                
                // Swiped left
                if ((touchendX + 80) <= touchstartX) {
                    prewNext(testimonialSection, true);

                    // Clear interval
                    clearInterval(autoTestimonials);
                    autoTestimonials = autoTestimonialsSlider(testimonialSection);
                }

                // Swiped right
                if ((touchendX - 80) >= touchstartX) {
                    prewNext(testimonialSection, false);

                    // Clear interval
                    clearInterval(autoTestimonials);
                    autoTestimonials = autoTestimonialsSlider(testimonialSection);
                }

            }, {passive: true}); 

            // On resize swipe to the first testimonial
            window.addEventListener('resize', function() {
                swipeTo(testimonialSection, 't0');
            });

        });
    }
});