2018-12-24 04:50:19 +11:00
|
|
|
import UserCardContent from '../user_card_content/user_card_content.vue'
|
|
|
|
|
|
|
|
const deltaX = (oldX, newX) => newX - oldX
|
|
|
|
|
|
|
|
const touchEventX = e => e.touches[0].screenX
|
|
|
|
|
2018-12-16 04:13:01 +11:00
|
|
|
const SideDrawer = {
|
2018-12-24 04:50:19 +11:00
|
|
|
props: [ 'activatePanel', 'logout' ],
|
|
|
|
data: () => ({
|
|
|
|
closed: true,
|
|
|
|
touchX: 0
|
|
|
|
}),
|
|
|
|
components: { UserCardContent },
|
2018-12-16 04:13:01 +11:00
|
|
|
computed: {
|
|
|
|
currentUser () {
|
|
|
|
return this.$store.state.users.currentUser
|
2018-12-21 07:20:04 +11:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2018-12-24 04:50:19 +11:00
|
|
|
toggleDrawer () {
|
|
|
|
this.closed = !this.closed
|
|
|
|
},
|
2018-12-21 07:20:04 +11:00
|
|
|
gotoPanel (panel) {
|
|
|
|
this.activatePanel(panel)
|
2018-12-24 04:50:19 +11:00
|
|
|
this.toggleDrawer()
|
2018-12-23 02:32:07 +11:00
|
|
|
},
|
|
|
|
doLogout () {
|
|
|
|
this.logout()
|
|
|
|
this.gotoPanel('timeline')
|
2018-12-24 04:50:19 +11:00
|
|
|
},
|
|
|
|
touchStart (e) {
|
|
|
|
this.touchX = touchEventX(e)
|
|
|
|
},
|
|
|
|
touchMove (e) {
|
|
|
|
const delta = deltaX(this.touchX, touchEventX(e))
|
|
|
|
if (delta < -30) {
|
|
|
|
this.toggleDrawer()
|
|
|
|
}
|
2018-12-16 04:13:01 +11:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default SideDrawer
|