-
Notifications
You must be signed in to change notification settings - Fork 5
/
ScrollCarouselAutoplay.js
70 lines (55 loc) · 1.86 KB
/
ScrollCarouselAutoplay.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import ScrollCarousel from './ScrollCarouselGrab.js';
export default class ScrollCarouselAutoplay extends ScrollCarousel {
constructor(domNode) {
super(domNode);
this.autoPlayEnabled = this.carousel.hasAttribute('data-autoplay') || false;
this.autoPlayDelay = this.autoPlayEnabled ? this.carousel.getAttribute('data-autoplay') : 3000;
}
init() {
super.init();
this.addAutoPlayEventListeners();
this.startAutoPlay();
}
addAutoPlayEventListeners() {
this.startAutoPlay = this.startAutoPlay.bind(this);
this.stopAutoPlay = this.stopAutoPlay.bind(this);
this.disableAutoPlay = this.disableAutoPlay.bind(this);
this.carousel.addEventListener('keydown', this.disableAutoPlay);
this.carousel.addEventListener('mousedown', this.disableAutoPlay);
this.carousel.addEventListener('touchstart', this.disableAutoPlay);
this.carousel.addEventListener('mouseenter', this.stopAutoPlay);
this.carousel.addEventListener('mouseleave', this.startAutoPlay);
}
cycle() {
this.stopAutoPlay();
if (this.isScrollEnd) {
this.scrollToPoint(0, 0);
// adjust timeout delay to have constant pause
} else {
this.scrollToNextPage();
}
this.startAutoPlay();
}
startAutoPlay() {
if (!this.autoPlayEnabled) {
return;
}
this.autoPlay = window.setTimeout(this.cycle.bind(this), this.autoPlayDelay);
}
stopAutoPlay() {
window.clearTimeout(this.autoPlay);
}
disableAutoPlay() {
this.stopAutoPlay();
this.autoPlayEnabled = false;
this.carousel.removeEventListener('keydown', this.disableAutoPlay);
this.carousel.removeEventListener('mousedown', this.disableAutoPlay);
this.carousel.removeEventListener('touchstart', this.disableAutoPlay);
this.carousel.removeEventListener('mouseenter', this.stopAutoPlay);
this.carousel.removeEventListener('mouseleave', this.startAutoPlay);
}
destroy() {
super.destroy();
this.disableAutoPlay();
}
}