emma/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Debounce floating post button autohide

Browse source
This commit is contained in:
eugenijm 2019-04-29 22:38:07 +03:00
parent ae1496cfb4
commit b18fea8508
1 changed files with 24 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/components/mobile_post_status_modal/mobile_post_status_modal.js
View file

@ -1,5 +1,5 @@
import PostStatusForm from '../post_status_form/post_status_form.vue' import PostStatusForm from '../post_status_form/post_status_form.vue'
import { throttle, debounce } from 'lodash' import { debounce } from 'lodash'
const MobilePostStatusModal = { const MobilePostStatusModal = {
components: { components: {
@ -17,15 +17,13 @@ const MobilePostStatusModal = {
}, },
created () { created () {
if (this.autohideFloatingPostButton) { if (this.autohideFloatingPostButton) {
window.addEventListener('scroll', this.handleScroll) this.activateFloatingPostButtonAutohide()
window.addEventListener('scroll', this.handleScrollDown)
} }
window.addEventListener('resize', this.handleOSK) window.addEventListener('resize', this.handleOSK)
}, },
destroyed () { destroyed () {
if (this.autohideFloatingPostButton) { if (this.autohideFloatingPostButton) {
window.removeEventListener('scroll', this.handleScroll) this.deactivateFloatingPostButtonAutohide()
window.removeEventListener('scroll', this.handleScrollDown)
} }
window.removeEventListener('resize', this.handleOSK) window.removeEventListener('resize', this.handleOSK)
}, },
@ -43,15 +41,21 @@ const MobilePostStatusModal = {
watch: { watch: {
autohideFloatingPostButton: function (isEnabled) { autohideFloatingPostButton: function (isEnabled) {
if (isEnabled) { if (isEnabled) {
window.addEventListener('scroll', this.handleScroll) this.activateFloatingPostButtonAutohide()
window.addEventListener('scroll', this.handleScrollDown)
} else { } else {
window.removeEventListener('scroll', this.handleScroll) this.deactivateFloatingPostButtonAutohide()
window.removeEventListener('scroll', this.handleScrollDown)
} }
} }
}, },
methods: { methods: {
activateFloatingPostButtonAutohide () {
window.addEventListener('scroll', this.handleScrollStart)
window.addEventListener('scroll', this.handleScrollEnd)
},
deactivateFloatingPostButtonAutohide () {
window.removeEventListener('scroll', this.handleScrollStart)
window.removeEventListener('scroll', this.handleScrollEnd)
},
openPostForm () { openPostForm () {
this.postFormOpen = true this.postFormOpen = true
this.hidden = true this.hidden = true
@ -85,31 +89,19 @@ const MobilePostStatusModal = {
this.inputActive = false this.inputActive = false
} }
}, },
handleScroll: throttle(function () { handleScrollStart: debounce(function () {
const scrollAmount = window.scrollY - this.oldScrollPos if (window.scrollY > this.oldScrollPos) {
const scrollingDown = scrollAmount > 0 this.hidden = true
} else {
if (scrollingDown !== this.scrollingDown) {
this.amountScrolled = 0
this.scrollingDown = scrollingDown
if (!scrollingDown) {
this.hidden = false
}
} else if (scrollingDown) {
this.amountScrolled += scrollAmount
if (this.amountScrolled > 100 && !this.hidden) {
this.hidden = true
}
}
this.oldScrollPos = window.scrollY
this.scrollingDown = scrollingDown
}, 100),
handleScrollDown: debounce(function () {
if (this.scrollingDown) {
this.hidden = false this.hidden = false
} }
}, 100) this.oldScrollPos = window.scrollY
}, 100, {leading: true, trailing: false}),
handleScrollEnd: debounce(function () {
this.hidden = false
this.oldScrollPos = window.scrollY
}, 100, {leading: false, trailing: true})
} }
} }