From ae1496cfb4b0a432d9a30370df6825e0fc483eb8 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Thu, 25 Apr 2019 19:32:21 +0300 Subject: [PATCH 1/2] Make floating post button configurable --- .../mobile_post_status_modal.js | 33 ++++++++++++++++--- src/components/settings/settings.js | 4 +++ src/components/settings/settings.vue | 4 +++ src/i18n/en.json | 1 + src/i18n/ru.json | 1 + src/modules/config.js | 1 + 6 files changed, 40 insertions(+), 4 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..d9806ad9 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 { 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) } } diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index a85ab674..c4aa45b2 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -46,6 +46,7 @@ const settings = { streamingLocal: user.streaming, pauseOnUnfocusedLocal: user.pauseOnUnfocused, hoverPreviewLocal: user.hoverPreview, + autohideFloatingPostButtonLocal: user.autohideFloatingPostButton, hideMutedPostsLocal: typeof user.hideMutedPosts === 'undefined' ? instance.hideMutedPosts @@ -183,6 +184,9 @@ const settings = { hoverPreviewLocal (value) { this.$store.dispatch('setOption', { name: 'hoverPreview', value }) }, + autohideFloatingPostButtonLocal (value) { + this.$store.dispatch('setOption', { name: 'autohideFloatingPostButton', value }) + }, muteWordsString (value) { value = filter(value.split('\n'), (word) => trim(word).length > 0) this.$store.dispatch('setOption', { name: 'muteWords', value }) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 6890220f..920e6e12 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -122,6 +122,10 @@ {{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}} +
  • + + +
    • diff --git a/src/i18n/en.json b/src/i18n/en.json index 7dca05e3..d7d4821e 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -218,6 +218,7 @@ "reply_visibility_all": "Show all replies", "reply_visibility_following": "Only show replies directed at me or users I'm following", "reply_visibility_self": "Only show replies directed at me", + "autohide_floating_post_button": "Automatically hide New Post button (mobile)", "saving_err": "Error saving settings", "saving_ok": "Settings saved", "search_user_to_block": "Search whom you want to block", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 5450f154..e02aa1a8 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -152,6 +152,7 @@ "reply_visibility_all": "Показывать все ответы", "reply_visibility_following": "Показывать только ответы мне и тех на кого я подписан", "reply_visibility_self": "Показывать только ответы мне", + "autohide_floating_post_button": "Автоматически скрывать кнопку постинга (в мобильной версии)", "saving_err": "Не удалось сохранить настройки", "saving_ok": "Сохранено", "security_tab": "Безопасность", diff --git a/src/modules/config.js b/src/modules/config.js index 1666a2c5..fea0e3cf 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -17,6 +17,7 @@ const defaultState = { autoLoad: true, streaming: false, hoverPreview: true, + autohideFloatingPostButton: false, pauseOnUnfocused: true, stopGifs: false, replyVisibility: 'all', From b18fea8508603f3a3ef2569a0d814e55e75af9c9 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Mon, 29 Apr 2019 22:38:07 +0300 Subject: [PATCH 2/2] Debounce floating post button autohide --- .../mobile_post_status_modal.js | 56 ++++++++----------- 1 file changed, 24 insertions(+), 32 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 - } - } - - this.oldScrollPos = window.scrollY - this.scrollingDown = scrollingDown - }, 100), - handleScrollDown: debounce(function () { - if (this.scrollingDown) { + handleScrollStart: debounce(function () { + if (window.scrollY > this.oldScrollPos) { + this.hidden = true + } else { 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}) } }