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

Auto-create blocks for WordPress ACF

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

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

    // Scroll to the active slider
    var slider = sliderSection.querySelector('.sliders .slider.active');
    if (slider) {
        var count = parseInt(selector.substring(1));
        var width = slider.offsetWidth;
        var translate = (count * (- width));
        // if (window.innerWidth > 992) {
        //     translate = translate + width;
        // }
        sliderSection.querySelector('.sliders').style.transform = 'translateX('+translate+'px)';
    }
}

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

    var sliders = sliderSection.querySelectorAll('.sliders .slider'),
        all = sliders.length,
        active = sliderSection.querySelector('.slider.active');
        c = parseInt(active.getAttribute('data-no')),
        count = next ? (c + 1) : (c - 1);

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

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

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

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

                prewNext(sliderSection, next)
            }, interval);

            return autosliders;
        }
    }

    return false;
}

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

    // sliders section
    var slidersSection = document.querySelectorAll('.sliders-section');
    if (slidersSection && slidersSection.length) {
        slidersSection.forEach(function(sliderSection) {

            // Auto sliders
            var autosliders = autoslidersSlider(sliderSection);

            // sliders arrows
            var arrows = sliderSection.querySelectorAll('.sliders-controller .controller');
            if (arrows && arrows.length) {
                arrows.forEach(function(arrow) {
                    arrow.addEventListener('click', function() {
                        // Clear interval
                        clearInterval(autosliders);
                        autosliders = autoslidersSlider(sliderSection);

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

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

                    // Clear interval
                    clearInterval(autosliders);
                    autosliders = autoslidersSlider(sliderSection);
                }

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

                    // Clear interval
                    clearInterval(autosliders);
                    autosliders = autoslidersSlider(sliderSection);
                }

            }, {passive: true}); 

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

        });
    }
});