Mobile Post button fix

Closes #506 (closed)

src/components/mobile_post_status_modal/mobile_post_status_modal.js

 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import { throttle } from 'lodash'
+import { throttle, debounce } from 'lodash'
 
 const MobilePostStatusModal = {
   components: {
@@ -16,11 +16,17 @@ const MobilePostStatusModal = {
     }
   },
   created () {
-    window.addEventListener('scroll', this.handleScroll)
+    if (this.autohideFloatingPostButton) {
+      window.addEventListener('scroll', this.handleScroll)
+      window.addEventListener('scroll', this.handleScrollDown)
+    }
     window.addEventListener('resize', this.handleOSK)
   },
   destroyed () {
-    window.removeEventListener('scroll', this.handleScroll)
+    if (this.autohideFloatingPostButton) {
+      window.removeEventListener('scroll', this.handleScroll)
+      window.removeEventListener('scroll', this.handleScrollDown)
+    }
     window.removeEventListener('resize', this.handleOSK)
   },
   computed: {
@@ -28,7 +34,21 @@ const MobilePostStatusModal = {
       return this.$store.state.users.currentUser
     },
     isHidden () {
-      return this.hidden || this.inputActive
+      return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
+    },
+    autohideFloatingPostButton () {
+      return !!this.$store.state.config.autohideFloatingPostButton
+    }
+  },
+  watch: {
+    autohideFloatingPostButton: function (isEnabled) {
+      if (isEnabled) {
+        window.addEventListener('scroll', this.handleScroll)
+        window.addEventListener('scroll', this.handleScrollDown)
+      } else {
+        window.removeEventListener('scroll', this.handleScroll)
+        window.removeEventListener('scroll', this.handleScrollDown)
+      }
     }
   },
   methods: {
@@ -84,6 +104,11 @@ const MobilePostStatusModal = {
 
       this.oldScrollPos = window.scrollY
       this.scrollingDown = scrollingDown
+    }, 100),
+    handleScrollDown: debounce(function () {
+      if (this.scrollingDown) {
+        this.hidden = false
+      }
     }, 100)
   }
 }

[HJ]

why isn't the entire thing debounced?

[Eugenij]

In my understanding, the purpose of the throttled function was to keep track of the direction so that it could hide the button when scrolling down (positive scrollAmount) and show it when scrolling up (negative scrollAmount). I'm not sure if the latter is the desired behavior, but if so, I think scrollY needs to be constantly updated, hence throttle. Otherwise, debounce, which is called at the beginning / end of the scroll, doesn't have enough info to know the direction and whether it is the beginning or end of the movement. (this may illustrate this point a bit better: https://cl.ly/846f6e51d4a7).

Are you suggesting to distinguish between the leading and trailing debounce calls and then hide it on leading (the beginning of the movement) and show on trailing? I haven't considered that but I guess it should be possible. Will look into how this and how can this be simplified in general tomorrow morning

[Eugenij]

Update: the debounce-only approach works overall:

    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
    }, 100, {leading: false, trailing: true})

However, there is a limitation compared to the previous approach with throttle:

if the user scrolls up a little and then immediately continues to scroll down, it will still consider this as a "scroll-up" event and won't hide the button.

So, with the debounce-only approach, we can either accept this as a limitation or make it hide the button even on scroll-up.

[HJ]

i'd leave it entirely debounced.

[Eugenij]

Done