-
Notifications
You must be signed in to change notification settings - Fork 193
/
index.js
75 lines (75 loc) · 2.01 KB
/
index.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
71
72
73
74
75
class FullPage {
constructor(options) {
let defaultOptions = {
element: '',
duration: '1s',
}
this.currentIndex = 0
this.options = Object.assign({}, defaultOptions, options)
this.animating = false
this.checkOptions().initHtml().bindEvents()
}
checkOptions() {
if (!this.options.element) {
throw new Error('element is required')
}
return this
}
initHtml() {
this.options.element.style.overflow = 'hidden'
dom.every(this.options.element.children, section => {
section.style.transition = `transform ${this.options.duration}`
})
return this
}
bindEvents() {
this.options.element.addEventListener('wheel', e => {
let targetIndex = this.currentIndex + (e.deltaY > 0 ? 1 : -1)
this.goToSection(targetIndex).then(
() => {
this.currentIndex = targetIndex
},
() => {}
)
})
dom.onSwipe(this.options.element, (e, dir) => {
let targetIndex
if (dir === 'down') {
targetIndex = this.currentIndex - 1
} else if (dir === 'up') {
targetIndex = this.currentIndex + 1
} else {
return
}
this.goToSection(targetIndex).then(
() => {
this.currentIndex = targetIndex
},
() => {}
)
})
return this
}
goToSection(targetIndex) {
return new Promise((resolve, reject) => {
if (this.animating) {
reject()
} else if (targetIndex < 0) {
reject()
} else if (targetIndex >= this.options.element.children.length) {
reject()
} else {
this.animating = true
let that = this
this.options.element.children[0].addEventListener('transitionend', function callback() {
this.removeEventListener('transitionend', callback)
that.animating = false
resolve()
})
dom.every(this.options.element.children, section => {
section.style.transform = `translateY(-${100 * targetIndex}%)`
})
}
})
}
}