Debounce floating post button autohide

1 files changed, 23 insertions, 31 deletions

diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.js b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
index d9806ad9..91b730e7 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.js
+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
@@ -1,5 +1,5 @@
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import { throttle, debounce } from 'lodash'
+import { debounce } from 'lodash'
 
 const MobilePostStatusModal = {
   components: {
@@ -17,15 +17,13 @@ const MobilePostStatusModal = {
   },
   created () {
     if (this.autohideFloatingPostButton) {
-      window.addEventListener('scroll', this.handleScroll)
-      window.addEventListener('scroll', this.handleScrollDown)
+      this.activateFloatingPostButtonAutohide()
     }
     window.addEventListener('resize', this.handleOSK)
   },
   destroyed () {
     if (this.autohideFloatingPostButton) {
-      window.removeEventListener('scroll', this.handleScroll)
-      window.removeEventListener('scroll', this.handleScrollDown)
+      this.deactivateFloatingPostButtonAutohide()
     }
     window.removeEventListener('resize', this.handleOSK)
   },
@@ -43,15 +41,21 @@ const MobilePostStatusModal = {
   watch: {
     autohideFloatingPostButton: function (isEnabled) {
       if (isEnabled) {
-        window.addEventListener('scroll', this.handleScroll)
-        window.addEventListener('scroll', this.handleScrollDown)
+        this.activateFloatingPostButtonAutohide()
       } else {
-        window.removeEventListener('scroll', this.handleScroll)
-        window.removeEventListener('scroll', this.handleScrollDown)
+        this.deactivateFloatingPostButtonAutohide()
       }
     }
   },
   methods: {
+    activateFloatingPostButtonAutohide () {
+      window.addEventListener('scroll', this.handleScrollStart)
+      window.addEventListener('scroll', this.handleScrollEnd)
+    },
+    deactivateFloatingPostButtonAutohide () {
+      window.removeEventListener('scroll', this.handleScrollStart)
+      window.removeEventListener('scroll', this.handleScrollEnd)
+    },
     openPostForm () {
       this.postFormOpen = true
       this.hidden = true
@@ -85,31 +89,19 @@ const MobilePostStatusModal = {
         this.inputActive = false
       }
     },
-    handleScroll: throttle(function () {
-      const scrollAmount = window.scrollY - this.oldScrollPos
-      const scrollingDown = scrollAmount > 0
-
-      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
-        }
+    handleScrollStart: debounce(function () {
+      if (window.scrollY > this.oldScrollPos) {
+        this.hidden = true
+      } else {
+        this.hidden = false
       }
+      this.oldScrollPos = window.scrollY
+    }, 100, {leading: true, trailing: false}),
 
+    handleScrollEnd: debounce(function () {
+      this.hidden = false
       this.oldScrollPos = window.scrollY
-      this.scrollingDown = scrollingDown
-    }, 100),
-    handleScrollDown: debounce(function () {
-      if (this.scrollingDown) {
-        this.hidden = false
-      }
-    }, 100)
+    }, 100, {leading: false, trailing: true})
   }
 }