script.js - main - DannyOhDanny/html-pages

script.js
80 строк3 KB
Daria Matveeva
Feat: refactoring
14 мар 2024, 00:34
14 мар 2024, 00:3489b6dff
const carousel = document.querySelector('.gallery__carousel'),
  firstImg = carousel.querySelectorAll('.gallery__carousel-box')[0],
  arrowIcons = document.querySelectorAll('.gallery__wrapper button');

let isDragStart = false,
  isDragging = false,
  prevPageX,
  prevScrollLeft,
  positionDiff;

const showHideIcons = () => {
  let scrollWidth = carousel.scrollWidth - carousel.clientWidth;
  arrowIcons[0].style.display = carousel.scrollLeft == 0 ? 'none' : 'block';
  arrowIcons[1].style.display =
    carousel.scrollLeft == scrollWidth ? 'none' : 'block';
};
arrowIcons.forEach(icon => {
  icon.addEventListener('click', () => {
    let firstImgWidth = firstImg.clientWidth + 14;
    carousel.scrollLeft += icon.id == 'left' ? -firstImgWidth : firstImgWidth;
    setTimeout(() => showHideIcons(), 80);
  });
});
const autoSlide = () => {
  if (
    carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 ||
    carousel.scrollLeft <= 0
  )
    return;
  positionDiff = Math.abs(positionDiff);
  let firstImgWidth = firstImg.clientWidth + 14;
  let valDifference = firstImgWidth - positionDiff;
  if (carousel.scrollLeft > prevScrollLeft) {
    return (carousel.scrollLeft +=
      positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff);
  }
  carousel.scrollLeft -=
    positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
};
const dragStart = e => {
  isDragStart = true;
  prevPageX = e.pageX || e.touches[0].pageX;
  prevScrollLeft = carousel.scrollLeft;
};
const dragging = e => {
  if (!isDragStart) return;
  e.preventDefault();
  isDragging = true;
  carousel.classList.add('dragging');
  positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
  carousel.scrollLeft = prevScrollLeft - positionDiff;
  showHideIcons();
};
const dragStop = () => {
  isDragStart = false;
  carousel.classList.remove('dragging');
  if (!isDragging) return;
  isDragging = false;
  autoSlide();
};
carousel.addEventListener('mousedown', dragStart);
carousel.addEventListener('touchstart', dragStart);
document.addEventListener('mousemove', dragging);
carousel.addEventListener('touchmove', dragging);
document.addEventListener('mouseup', dragStop);
carousel.addEventListener('touchend', dragStop);

const resetCarouselPosition = () => {
  carousel.scrollLeft = 0;
};

window.addEventListener('beforeunload', () => {
  resetCarouselPosition();
  carousel.removeEventListener('mousedown', dragStart);
  carousel.removeEventListener('touchstart', dragStart);
  document.removeEventListener('mousemove', dragging);
  carousel.removeEventListener('touchmove', dragging);
  document.removeEventListener('mouseup', dragStop);
  carousel.removeEventListener('touchend', dragStop);
});