From d6a941a128f37a2d04f5e60ad21037c2c5efcfa3 Mon Sep 17 00:00:00 2001 From: taehoon Date: Thu, 19 Sep 2019 13:59:34 -0400 Subject: rename component --- src/App.js | 4 +- src/App.vue | 2 +- .../mobile_post_status_button.js | 93 ++++++++++++++++++++++ .../mobile_post_status_button.vue | 55 +++++++++++++ .../mobile_post_status_modal.js | 93 ---------------------- .../mobile_post_status_modal.vue | 55 ------------- 6 files changed, 151 insertions(+), 151 deletions(-) create mode 100644 src/components/mobile_post_status_button/mobile_post_status_button.js create mode 100644 src/components/mobile_post_status_button/mobile_post_status_button.vue delete mode 100644 src/components/mobile_post_status_modal/mobile_post_status_modal.js delete mode 100644 src/components/mobile_post_status_modal/mobile_post_status_modal.vue (limited to 'src') diff --git a/src/App.js b/src/App.js index 40f362d2..fe63b54c 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,7 @@ import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_pan import ChatPanel from './components/chat_panel/chat_panel.vue' import MediaModal from './components/media_modal/media_modal.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' -import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue' +import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue' import MobileNav from './components/mobile_nav/mobile_nav.vue' import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' import PostStatusModal from './components/post_status_modal/post_status_modal.vue' @@ -27,7 +27,7 @@ export default { ChatPanel, MediaModal, SideDrawer, - MobilePostStatusModal, + MobilePostStatusButton, MobileNav, UserReportingModal, PostStatusModal diff --git a/src/App.vue b/src/App.vue index 46d3ac42..f1086e60 100644 --- a/src/App.vue +++ b/src/App.vue @@ -107,7 +107,7 @@ :floating="true" class="floating-chat mobile-hidden" /> - + diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js new file mode 100644 index 00000000..3e77148a --- /dev/null +++ b/src/components/mobile_post_status_button/mobile_post_status_button.js @@ -0,0 +1,93 @@ +import { debounce } from 'lodash' + +const MobilePostStatusButton = { + data () { + return { + hidden: false, + scrollingDown: false, + inputActive: false, + oldScrollPos: 0, + amountScrolled: 0 + } + }, + created () { + if (this.autohideFloatingPostButton) { + this.activateFloatingPostButtonAutohide() + } + window.addEventListener('resize', this.handleOSK) + }, + destroyed () { + if (this.autohideFloatingPostButton) { + this.deactivateFloatingPostButtonAutohide() + } + window.removeEventListener('resize', this.handleOSK) + }, + computed: { + isLoggedIn () { + return !!this.$store.state.users.currentUser + }, + isHidden () { + 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.$store.dispatch('openPostStatusModal') + }, + handleOSK () { + // This is a big hack: we're guessing from changed window sizes if the + // on-screen keyboard is active or not. This is only really important + // for phones in portrait mode and it's more important to show the button + // in normal scenarios on all phones, than it is to hide it when the + // keyboard is active. + // Guesswork based on https://www.mydevice.io/#compare-devices + + // for example, iphone 4 and android phones from the same time period + const smallPhone = window.innerWidth < 350 + const smallPhoneKbOpen = smallPhone && window.innerHeight < 345 + + const biggerPhone = !smallPhone && window.innerWidth < 450 + const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560 + if (smallPhoneKbOpen || biggerPhoneKbOpen) { + this.inputActive = true + } else { + this.inputActive = false + } + }, + 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 }) + } +} + +export default MobilePostStatusButton diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue new file mode 100644 index 00000000..9cf45de3 --- /dev/null +++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue @@ -0,0 +1,55 @@ + + + + + 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 deleted file mode 100644 index 3be4a1d8..00000000 --- a/src/components/mobile_post_status_modal/mobile_post_status_modal.js +++ /dev/null @@ -1,93 +0,0 @@ -import { debounce } from 'lodash' - -const MobilePostStatusModal = { - data () { - return { - hidden: false, - scrollingDown: false, - inputActive: false, - oldScrollPos: 0, - amountScrolled: 0 - } - }, - created () { - if (this.autohideFloatingPostButton) { - this.activateFloatingPostButtonAutohide() - } - window.addEventListener('resize', this.handleOSK) - }, - destroyed () { - if (this.autohideFloatingPostButton) { - this.deactivateFloatingPostButtonAutohide() - } - window.removeEventListener('resize', this.handleOSK) - }, - computed: { - isLoggedIn () { - return !!this.$store.state.users.currentUser - }, - isHidden () { - 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.$store.dispatch('openPostStatusModal') - }, - handleOSK () { - // This is a big hack: we're guessing from changed window sizes if the - // on-screen keyboard is active or not. This is only really important - // for phones in portrait mode and it's more important to show the button - // in normal scenarios on all phones, than it is to hide it when the - // keyboard is active. - // Guesswork based on https://www.mydevice.io/#compare-devices - - // for example, iphone 4 and android phones from the same time period - const smallPhone = window.innerWidth < 350 - const smallPhoneKbOpen = smallPhone && window.innerHeight < 345 - - const biggerPhone = !smallPhone && window.innerWidth < 450 - const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560 - if (smallPhoneKbOpen || biggerPhoneKbOpen) { - this.inputActive = true - } else { - this.inputActive = false - } - }, - 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 }) - } -} - -export default MobilePostStatusModal 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 deleted file mode 100644 index 38c5fce0..00000000 --- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue +++ /dev/null @@ -1,55 +0,0 @@ - - - - - -- cgit v1.2.3-70-g09d2