Merge remote-tracking branch 'upstream/develop' into emoji-selector-update

* upstream/develop: (469 commits)
  Feature/add sticker picker
  guard more secure routes
  guard secure routes by redirecting to root
  closest can returns itself as well
  find inside status-content div only
  try to use the closest a tag as target
  Update es.json
  Also apply keyword filter to subjects
  Remove files I accidentally pushed in
  fix issues caused by merges in usersearch on @
  Add user search at
  fix eslint warnings
  remove vue-popperjs
  fix moderation menu partially hidden by usercard boundary
  migrate popper css
  rewrite ModerationTools using v-tooltip
  make popover position for status action dropdow relative to parent node
  rewrite ExtraButtons using v-tooltip
  install v-tooltip
  i18n/Update pedantic Japanese translation
  ...

2 files changed, 63 insertions, 38 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 2f24dd08..3cec23c6 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 } from 'lodash'
+import { debounce } from 'lodash'
 
 const MobilePostStatusModal = {
   components: {
@@ -16,11 +16,15 @@ const MobilePostStatusModal = {
     }
   },
   created () {
-    window.addEventListener('scroll', this.handleScroll)
+    if (this.autohideFloatingPostButton) {
+      this.activateFloatingPostButtonAutohide()
+    }
     window.addEventListener('resize', this.handleOSK)
   },
   destroyed () {
-    window.removeEventListener('scroll', this.handleScroll)
+    if (this.autohideFloatingPostButton) {
+      this.deactivateFloatingPostButtonAutohide()
+    }
     window.removeEventListener('resize', this.handleOSK)
   },
   computed: {
@@ -28,10 +32,30 @@ 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) {
+        this.activateFloatingPostButtonAutohide()
+      } else {
+        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
@@ -65,26 +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)
+    }, 100, { leading: false, trailing: true })
   }
 }
 
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
index 0a451c28..5db7584b 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
@@ -1,23 +1,31 @@
 <template>
-<div v-if="currentUser">
-  <div
-    class="post-form-modal-view modal-view"
-    v-show="postFormOpen"
-    @click="closePostForm"
-  >
-    <div class="post-form-modal-panel panel" @click.stop="">
-      <div class="panel-heading">{{$t('post_status.new_status')}}</div>
-      <PostStatusForm class="panel-body" @posted="closePostForm"/>
+  <div v-if="currentUser">
+    <div
+      v-show="postFormOpen"
+      class="post-form-modal-view modal-view"
+      @click="closePostForm"
+    >
+      <div
+        class="post-form-modal-panel panel"
+        @click.stop=""
+      >
+        <div class="panel-heading">
+          {{ $t('post_status.new_status') }}
+        </div>
+        <PostStatusForm
+          class="panel-body"
+          @posted="closePostForm"
+        />
+      </div>
     </div>
+    <button
+      class="new-status-button"
+      :class="{ 'hidden': isHidden }"
+      @click="openPostForm"
+    >
+      <i class="icon-edit" />
+    </button>
   </div>
-  <button
-    class="new-status-button"
-    :class="{ 'hidden': isHidden }"
-    @click="openPostForm"
-  >
-    <i class="icon-edit" />
-  </button>
-</div>
 </template>
 
 <script src="./mobile_post_status_modal.js"></script>