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

Auto-create blocks for WordPress ACF

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

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

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

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

    var servicesContainer = servicesection.querySelector('.services'),
        services = servicesContainer.querySelectorAll('.service'),
        all = services.length,
        active = servicesection.querySelector('.service.active');
        c = parseInt(active.getAttribute('data-no')),
        visibles = Math.round(servicesContainer.offsetWidth / active.offsetWidth),
        count = next ? (c + 1) : (c - 1);

        console.log({
            next: next,
            all: all,
            count: count
        });

    // 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) {
        servicesTwoSwipeTo(servicesection, 't'+count);
    }
}

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

                servicesTwoPrewNext(servicesection, next)
            }, interval);

            return autoservices;
        }
    }

    return false;
}

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

    // services section
    var servicesSection = document.querySelectorAll('.services-section');
    if (servicesSection && servicesSection.length) {
        servicesSection.forEach(function(servicesection) {

            // Auto services
            var autoservices = autoservicesSlider(servicesection);

            // services arrows
            var arrows = servicesection.querySelectorAll('.services-controller .controller');
            if (arrows && arrows.length) {
                arrows.forEach(function(arrow) {
                    arrow.addEventListener('click', function() {
                        // Clear interval
                        clearInterval(autoservices);
                        autoservices = autoservicesSlider(servicesection);

                        servicesTwoPrewNext(servicesection, !this.classList.contains('ba-prev'));
                    });
                });
            }

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

                    // Clear interval
                    clearInterval(autoservices);
                    autoservices = autoservicesSlider(servicesection);
                }

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

                    // Clear interval
                    clearInterval(autoservices);
                    autoservices = autoservicesSlider(servicesection);
                }

            }, {passive: true}); 

            // On resize swipe to the first service
            window.addEventListener('resize', function() {
                servicesTwoSwipeTo(servicesection, 't0');
            });

        });
    }
});