team.js

// Used to cycle through teammates on http://works-progress.com/about-us/


// Initialize counter
var c = 0;

// Count team size minus 1 to account for 0 based array
var teamSize = (document.getElementsByClassName('teammate-info').length - 1);

// Assign to first teammate
var firstImage = document.querySelector("[data-image='teammate-0']");

// Assign to last teammate
var lastImage = document.querySelector("[data-image='teammate-" + teamSize + "']");

// Assign to first teammate info
var firstInfo = document.querySelector("[data-info='teammate-0']");

// Assign to last teammate info
var lastInfo = document.querySelector("[data-info='teammate-" + teamSize + "']");

// Assign to teammates container
var teammateContainer = document.getElementsByClassName('teammates')[0];

function prev()  {
  if (c === 0) {

    // If on the first teammate remove says-hello class
    firstImage.classList.remove('says-hello');

    // Add says-hello class to last teammate
    lastImage.classList.add('says-hello');

    // Enables display of last teammate info
    lastInfo.style.display = 'block';

    // Hides the display of the first teammate
    firstInfo.style.display = 'none';

    // Assigns counter to the number of teammates
    c = teamSize;
  } else if (c === teamSize) {

    // If counter is at the number of teammates, decrement
    c--;

    // Add says-hello class to current teammate
    document.querySelector("[data-image='teammate-" + c + "']").classList.add('says-hello');

    // Removes says-hello class from last teammate
    lastImage.classList.remove('says-hello');

    // Hide display info for the last teammate
    lastInfo.style.display = 'none';

    // Display current teammate
    document.querySelector("[data-info='teammate-" + c + "']").style.display = 'block';

  } else {

    // Remove says-hello class from current teammate
    document.querySelector("[data-image='teammate-" + c + "']").classList.remove('says-hello');

    // Hide current teammate info
    document.querySelector("[data-info='teammate-" + c + "']").style.display = 'none';

    // Decrement counter to begin to show previous teammate
    c--;

    // Add says-hello class to new teammate
    document.querySelector("[data-image='teammate-" + c + "']").classList.add('says-hello');

    // Enables display of new teammate info
    document.querySelector("[data-info='teammate-" + c + "']").style.display = 'block';
  }
// Mobile carousel functionality
// Allow for 2 up instead of 4

  if (document.documentElement.clientWidth <= 640) {
    if (c === 0) {
      teammateContainer.style.left = 0;
    }

    if (c == 1) {
      teammateContainer.style.left = '-50%';
    }

    if (c == 2) {
      teammateContainer.style.left = '-100%';
    }

    if (c == teamSize) {
      teammateContainer.style.left = '-100%';
    }
  }

}

function next()  {
  if (c === 0) {
    // Add says-hello class to the second teammate if currently on first teammate
    document.querySelector("[data-image='teammate-1']").classList.add('says-hello');

    // Remove says-hello class from first teammate
    firstImage.classList.remove('says-hello');

    // Enables display for second teammate
    document.querySelector("[data-info='teammate-1']").style.display = 'block';

    // Hide info about first teammate
    firstInfo.style.display = 'none';
  }

  if (c === teamSize) {

    // Add says-hello  class to first image
    firstImage.classList.add('says-hello');

    // Remove says-hello class from current teammate(last)
    document.querySelector("[data-image='teammate-" + c + "']").classList.remove('says-hello');

    // Hides info for last teammate
    lastInfo.style.display = 'none';

    // Enables display for first teammate
    firstInfo.style.display = 'block';

    // reset counter back to 0
    c = 0;

  } else {

    // Remove says-hello class from current teammate
    document.querySelector("[data-image='teammate-" + c + "']").classList.remove('says-hello');

    // Hide info of current teammate
    document.querySelector("[data-info='teammate-" + c + "']").style.display = 'none';

    // Increment counter to begin to show next teammate
    c++;

    // Add says-hello class to new teammate
    document.querySelector("[data-image='teammate-" + c + "']").classList.add('says-hello');

    // Enables display of new teammate info
    document.querySelector("[data-info='teammate-" + c + "']").style.display = 'block';
  }

  // Mobile functionality for shifting left and right taking up 50% of screen to allow for 2 up
  if (document.documentElement.clientWidth <= 640) {
    if (c == 2) {
      teammateContainer.style.left = '-50%';
    }

    if (c == teamSize) {
      teammateContainer.style.left = '-100%';
    }

    if (c === 0) {
      teammateContainer.style.left = '0';
    }
  }
}

(function () {

  // if the page is about us
  if (window.location.pathname == '/about-us/') {

    // append a numbered data attribute based on the number of teammates and set info to not display
    for (var i = 0; i < document.getElementsByClassName('teammate-info').length; i++) {
      document.querySelector("[data-info='teammate-" + i + "']").style.display = 'none';
    }

    // Add says-hello class to first teammate
    document.getElementsByClassName('teammate')[0].classList.add('says-hello');

    // Set display for info of first teammate to show
    document.getElementsByClassName('teammate-info')[0].style.display = 'block';

    // Attach click handler functions to next and prev buttons
    document.getElementById('prev-btn').addEventListener('click', prev);
    document.getElementById('next-btn').addEventListener('click', next);

    // For mobile, add swipe capabilities
    if (document.documentElement.clientWidth <= 640) {
      var teamSwipe = new Hammer(teammateContainer);
      teamSwipe.on('swiperight', function () {
        prev();
      });

      teamSwipe.on('swipeleft', function () {
        next();
      });
    }
  }

  function teamSelect(e) {
    document.getElementsByClassName('teammate')[0].classList.remove('says-hello');
    document.getElementsByClassName('teammate')[1].classList.remove('says-hello');
    document.getElementsByClassName('teammate')[2].classList.remove('says-hello');
    document.getElementsByClassName('teammate')[3].classList.remove('says-hello');
    document.getElementsByClassName('teammate-info')[0].style.display = 'none';
    document.getElementsByClassName('teammate-info')[1].style.display = 'none';
    document.getElementsByClassName('teammate-info')[2].style.display = 'none';
    document.getElementsByClassName('teammate-info')[3].style.display = 'none';
    e.currentTarget.classList.add('says-hello');
    var targetImage = e.currentTarget.dataset.image.substr(9,9);
    document.getElementsByClassName('teammate-info')[targetImage].style.display = 'block';
    c = parseInt(targetImage);
  }
if (window.location.pathname == '/about-us/') {
  document.getElementsByClassName('teammate')[0].addEventListener('click', teamSelect, false);
  document.getElementsByClassName('teammate')[1].addEventListener('click', teamSelect, false);
  document.getElementsByClassName('teammate')[2].addEventListener('click', teamSelect, false);
  document.getElementsByClassName('teammate')[3].addEventListener('click', teamSelect, false);
}
})();