У меня есть две независимые функции: одна для создания карусели, а другая для определения смахивания влево или вправо.

Кажется, я не могу найти способ использовать функцию, которая перемещается по карусели в мою функцию смахивания влево или вправо (или наоборот).

Я исхожу из пределов своего JS-кодирования и борюсь.

Вот исключение:

  this.doSomething = (event) => {
    if (this.whatGestureDirection() == 'L') {
      hpCarousel.move(-1);
    } else {
      hpCarousel.move(1);
    }
  }

Я пробовал альтернативы; имея google'd вокруг, есть метод привязки. Однако это тоже перебор.

  this.doSomething = (event) => {
    if (this.whatGestureDirection() == 'L') {
      let bindTheFunc;
      bindTheFunc.bind(hpCarousel.move(-1));
      return bindTheFunc;
    } else {
      let bindTheFunc;
      bindTheFunc.bind(hpCarousel.move(1));
      return bindTheFunc;
    }
  }
window.addEventListener('load', () => {
  const hpCarousel = new carousel('area', 1);
  const hpCarouselSwipe = new getSwipeX({elementId: 'homepage_carousel_wrapper'});
})
function getSwipeX({elementId}) {
  this.e               = document.getElementsByClassName(elementId)[0];
  this.initialPosition = 0;
  this.lastPosition    = 0;
  this.getTouchStart = (event) => {
    event.preventDefault();
    if (window.PointerEvent) {
      this.e.setPointerCapture(event.pointerId);
    }
    return this.initalTouchPos = this.getGesturePoint(event);
  }
  this.getTouchMove  = (event) => {
    event.preventDefault();
    return this.lastPosition = this.getGesturePoint(event);
  }
  this.getTouchEnd   = (event) => {
    event.preventDefault();
    if (window.PointerEvent) {
      this.e.releasePointerCapture(event.pointerId);
    }
    this.doSomething();
    this.initialPosition = 0;
  }
  this.getGesturePoint = (event) => {
    this.point = event.pageX
    return this.point;
  }
  this.whatGestureDirection = (event) => {
    const diffInPosition  = this.initalTouchPos - this.lastPosition;
    return (Math.sign(diffInPosition) > 0 ) ? `L` : `R`;
  }
  this.doSomething = (event) => {
    if (this.whatGestureDirection() == 'L') {
      **hpCarousel.move(-1);**
    } else {
      **hpCarousel.move(1);**
    }
  }
  if (window.PointerEvent) {
    this.e.addEventListener('pointerdown', this.getTouchStart, true);
    this.e.addEventListener('pointermove', this.getTouchMove, true);
    this.e.addEventListener('pointerup', this.getTouchEnd, true);
    this.e.addEventListener('pointercancel', this.getTouchEnd, true);
  }
}

У меня есть скрипт карусели, с которым мне любезно помог на прошлой неделе пользователь SO. Отлично работает.

function carousel(id, index) {

  this.slideIndex = index;
  let carousel = document.getElementById(id);
  this.slides = [...document.getElementsByClassName('homepage_carousel')];

  let prev = carousel.getElementsByClassName('prev')[0];
  let next = carousel.getElementsByClassName('next')[0];
  
  prev.addEventListener('click', () => {
    this.move(-1);
  });

  next.addEventListener('click', () => {
    this.move(1);
  });

  this.hideAll = () => {
    this.slides.forEach((slide) => {
      slide.style.display = 'none';
    });
  };

  this.show = () => {
    this.hideAll();
    this.slides[this.slideIndex - 1].style.display = 'flex';
  }

  this.move = (amount) => {
    this.slideIndex += amount;
    this.slideIndex = (this.slideIndex > this.slides.length) ? 1 : (this.slideIndex < 1) ? this.slides.length : this.slideIndex;
    this.show();
  }

  this.show();
}
0
dimButTries 26 Июл 2020 в 13:35

1 ответ

Лучший ответ

Вы можете передать hpCarousel в hpCarouselSwipe в качестве аргумента.

window.addEventListener('load', () => {
  const hpCarousel = new carousel('area', 1);
  const hpCarouselSwipe = new getSwipeX({elementId: 'homepage_carousel_wrapper', carousel:hpCarousel});
})
function getSwipeX({elementId,carousel}) {
    ... 
    this.hpCarousel = carousel
}

Может кто подскажет, как это исправить?

this.doSomething = (event) => {
    if (this.whatGestureDirection() == 'L') {
      this.hpCarousel.move(-1);
    } else {
      this.hpCarousel.move(1);
    }
  }

Не тестировал, но должно работать. Вы можете передать функцию другой функции.

1
Andre 26 Июл 2020 в 10:47