mirror of
https://github.com/GuerillaStudio/now-playing
synced 2024-10-02 10:57:28 +00:00
110 lines
2.7 KiB
JavaScript
110 lines
2.7 KiB
JavaScript
class MobileMenu {
|
|
constructor() {
|
|
this.btn = document.querySelector('[data-menu="btn"]')
|
|
this.navigation = document.querySelector('[data-menu="navigation"]')
|
|
this.overlay = document.querySelector('[data-menu="overlay"]')
|
|
|
|
this.activeClass = 'active'
|
|
|
|
this.startDistance = 0
|
|
this.movedDistance = 0
|
|
this.distance = 0
|
|
|
|
}
|
|
|
|
init () {
|
|
this.bindEvents()
|
|
}
|
|
|
|
bindEvents () {
|
|
document.addEventListener('touchstart', (event) => {
|
|
this.touchStart(event)
|
|
}, false)
|
|
document.addEventListener('touchmove', (event) => {
|
|
this.touchMove(event)
|
|
}, false)
|
|
document.addEventListener('touchend', (event) => {
|
|
this.touchEnd(event)
|
|
}, false)
|
|
this.btn.addEventListener('click', (event) => {
|
|
this.toggleMenu(event)
|
|
}, false)
|
|
this.overlay.addEventListener('touchstart', (event) => {
|
|
this.touchAction = true
|
|
}, false)
|
|
this.overlay.addEventListener('touchend', (event) => {
|
|
this.toggleMenu(event)
|
|
this.touchAction = false
|
|
}, false)
|
|
this.overlay.addEventListener('click', (event) => {
|
|
this.toggleMenu(event)
|
|
if (this.touchAction) return
|
|
}, false)
|
|
}
|
|
|
|
toggleMenu (event) {
|
|
if (!this.isMenuOpen()) {
|
|
this.showMenu()
|
|
} else {
|
|
this.hideMenu()
|
|
}
|
|
}
|
|
|
|
isMenuOpen () {
|
|
return this.navigation.classList.contains(this.activeClass)
|
|
}
|
|
|
|
hideMenu () {
|
|
this.navigation.style.transform = ''
|
|
this.navigation.classList.remove(this.activeClass)
|
|
this.overlay.classList.remove(this.activeClass)
|
|
this.btn.setAttribute('aria-expanded', 'false')
|
|
this.navigation.setAttribute('aria-hidden', 'true')
|
|
}
|
|
|
|
showMenu () {
|
|
this.navigation.classList.add(this.activeClass)
|
|
this.overlay.classList.add(this.activeClass)
|
|
this.btn.setAttribute('aria-expanded', 'true')
|
|
this.navigation.setAttribute('aria-hidden', 'false')
|
|
}
|
|
|
|
transitionEnd () {
|
|
if (!this.isMenuOpen()) {
|
|
this.hideMenu()
|
|
}
|
|
}
|
|
|
|
touchStart (event) {
|
|
if (!this.isMenuOpen()) {
|
|
return
|
|
}
|
|
this.startDistance = event.touches[0].pageX
|
|
this.distance = this.startDistance
|
|
}
|
|
|
|
touchMove (event) {
|
|
if (!this.isMenuOpen()) {
|
|
return
|
|
}
|
|
|
|
this.movedDistance = event.touches[0].pageX
|
|
|
|
let translate = Math.min(0, this.movedDistance - this.startDistance)
|
|
if (translate < 0) {
|
|
event.preventDefault()
|
|
}
|
|
this.navigation.style.transform = 'translateX(' + translate + 'px)'
|
|
}
|
|
|
|
touchEnd (event) {
|
|
let endDistance = Math.min(0, this.movedDistance - this.startDistance)
|
|
|
|
this.navigation.style.transform = ''
|
|
if (endDistance < 0 && this.movedDistance !== 0) {
|
|
this.hideMenu()
|
|
}
|
|
}
|
|
}
|
|
|
|
new MobileMenu().init()
|