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

Auto-create blocks for WordPress ACF

console.log('Team init');

// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
    var teams = document.querySelectorAll('.team-section .team-container');
    teamsEvent(teams);
});

// On resize function
window.addEventListener('resize', function() {
    var teams = document.querySelectorAll('.team-section .team-container');
    if (teams && teams.length) {
        teams.forEach(function(team) {
            team.setAttribute('data-translate', 0);
            team.style.transform = 'translateX(0px)';
        });
    }
});

/**
 * Teams slider functions
 * @param {DOM Object} teams 
 */
function teamsEvent(teams) {
    if (teams && teams.length) {
        teams.forEach(function(team) {

            // Desktop functionality
            var teamMembers = team.querySelectorAll('.member');
            if (teamMembers && teamMembers.length) {
                teamMembers.forEach(function(member) {
                    member.addEventListener('click', function() {
                        teamMembers.forEach(function(member) {
                            member.classList.remove('active');
                        });
                        if (this == member) {
                            this.classList.add('active');
                        }
                    });
                });
            }

            // Detect swipe
            team.addEventListener('touchstart', function(event) {
                touchstartX = event.changedTouches[0].screenX;
                touchstartY = event.changedTouches[0].screenY;
            }, {passive: true});
            team.addEventListener('touchend', function(event) {
                touchendX = event.changedTouches[0].screenX;
                touchendY = event.changedTouches[0].screenY;
                handleGesture();
            }, {passive: true}); 

            // On scroll left / right - Increase / reduce the size with the screen width
            function handleGesture() {
                var left = true;

                // Mobile functionality
                var firstWidth = teamMembers[0].offsetWidth,
                    lastWidth = teamMembers[(teamMembers.length - 1)].offsetWidth,
                    allWidth = 0;
                    teamMembers.forEach(function(m) {
                        allWidth = allWidth + m.offsetWidth
                    });

                // Swiped left
                if (touchendX <= touchstartX) {
                    left = true;
                }

                // Swiped right
                if (touchendX >= touchstartX) {
                    left = false;
                }

                var current = parseInt(team.getAttribute('data-translate')),
                    translate = current + (left ? -firstWidth : firstWidth);

                if ((allWidth + translate) > (lastWidth - firstWidth + 1) && translate < 1) {
                    team.setAttribute('data-translate', translate);
                    team.style.transform = 'translateX('+translate+'px)';
                }
            }
        });
    }
}