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

Auto-create blocks for WordPress ACF

// Testimonials 2
let testimonials2 = {
    // Set the dom elements
    dom: {
        testimonials: false,
        controllers: false,
        nextBtn: false,
        prevBtn: false,
    },

    // Set variables
    vars: {
		prev: false,
        next: false,
        touchstartX: 0,
        touchendX: 0,
	},

    /**
     * Testimonials slider init functions
     * @param {DOM Object} container
     */
    init: function(container) {
        testimonials2 = this;
        testimonials2.dom.testimonials = container.querySelector('.testimonials');
        testimonials2.dom.controllers = container.querySelectorAll('.js-controller');
        testimonials2.dom.nextBtn = container.querySelector('.js-controller.next');
        testimonials2.dom.prevBtn = container.querySelector('.js-controller.prev');
        testimonials2.bind();
    },

	bind: function() {
        // On resize function
        window.addEventListener('resize', function() {
            testimonials2.dom.testimonials.setAttribute('data-translate', 0);
            testimonials2.dom.testimonials.style.transform = 'translateX(0px)';
        });

        // Detect prev/next button press event
        document.onkeydown = function(evt) {
            if (evt.keyCode == '37') {
                // left arrow
                testimonials2.swipe(true);
            } else if (evt.keyCode == '39') {
                // right arrow
                testimonials2.swipe(false);
            }
        }

        // Detect swipe
        testimonials2.dom.testimonials.addEventListener('touchstart', function(evt) {
            testimonials2.vars.touchstartX = evt.changedTouches[0].screenX;
        }, false);
        testimonials2.dom.testimonials.addEventListener('touchend', function(evt) {
            testimonials2.vars.touchendX = evt.changedTouches[0].screenX;
            testimonials2.gestureHandler();
        }, false);
        
        // Detect click
        if (testimonials2.dom.controllers && testimonials2.dom.controllers.length) {
            testimonials2.dom.controllers.forEach(function (controller) {
                controller.addEventListener('click', function(evt) {
                    evt.preventDefault();
    
                    // Prev click
                    if (this.classList.contains('prev')) {
                        testimonials2.swipe(true);
                    }
    
                    // Next click
                    if (this.classList.contains('next')) {
                        testimonials2.swipe();
                    }
                });
            });
        }
	},

    // On scroll left / right - Increase / reduce the size with the screen width
    gestureHandler: function() {

        // Check the swipe intention
        if ((testimonials2.vars.touchendX + 50) <= testimonials2.vars.touchstartX || testimonials2.vars.touchendX >= (testimonials2.vars.touchstartX + 50)) {

            // Swiped left
            if ((testimonials2.vars.touchendX + 50) <= testimonials2.vars.touchstartX) {
                testimonials2.swipe();
            }

            // Swiped right
            if (testimonials2.vars.touchendX >= (testimonials2.vars.touchstartX + 50)) {
                testimonials2.swipe(true);
            }
        }
    },

    /**
     * Swipe the testimonials by the given data
     * @param {Boolean} prev 
     */
    swipe: function(prev = false)  {
        // Get necessary data
        var testimonials = testimonials2.dom.testimonials.querySelectorAll('.testimonial'),
            firstWidth = testimonials[0].offsetWidth,
            containerWidth = testimonials2.dom.testimonials.offsetWidth - 18,
            allWidth = 0;
            testimonials.forEach(function(m) {
                allWidth = allWidth + m.offsetWidth
            });
    
        var current = parseInt(testimonials2.dom.testimonials.getAttribute('data-translate')),
            translate = current + (prev ? firstWidth : -firstWidth);
    
        if ((allWidth + translate) > (containerWidth + 1) && translate < 1) {
            testimonials2.dom.testimonials.setAttribute('data-translate', translate);
            testimonials2.dom.testimonials.style.transform = 'translateX('+translate+'px)';
        }
    
        // Disable / enable next
        if (testimonials2.dom.next) {
            if (allWidth - (containerWidth + Math.abs(translate) + 18) < firstWidth) {
                testimonials2.dom.next.classList.add('disabled');
            } else {
                testimonials2.dom.next.classList.remove('disabled');
            }
        }
    
        // Disable / enable prev
        if (testimonials2.dom.prev) {
            if ((Math.abs(translate) + 18) < firstWidth) {
                testimonials2.dom.prev.classList.add('disabled');
            } else {
                testimonials2.dom.prev.classList.remove('disabled');
            }
        }
    }
}

// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
    // Check for testimonials sections
    var testimonialSections = document.querySelectorAll('.testimonials-v2-section');
    if (testimonialSections && testimonialSections.length) {
        testimonialSections.forEach(testimonialSection => {
            var testimonialContainers = testimonialSection.querySelectorAll('.testimonials-container');
            if (testimonialContainers && testimonialContainers.length) {
                testimonialContainers.forEach(function(testimonialContainer) {
                    testimonials2.init(testimonialContainer);
                });
            }
        });
    }
});