From 1183ce565f4b3d8a57ca4271a8540bce911a88d7 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 6 Mar 2019 22:45:26 +0200
Subject: [PATCH] Add hacky osk detection

---
 .../mobile_post_status_modal.js               | 26 +++++++++++++++++++
 .../mobile_post_status_modal.vue              |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

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 17b08986..2f24dd08 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
@@ -10,19 +10,25 @@ const MobilePostStatusModal = {
       hidden: false,
       postFormOpen: false,
       scrollingDown: false,
+      inputActive: false,
       oldScrollPos: 0,
       amountScrolled: 0
     }
   },
   created () {
     window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('resize', this.handleOSK)
   },
   destroyed () {
     window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleOSK)
   },
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
+    },
+    isHidden () {
+      return this.hidden || this.inputActive
     }
   },
   methods: {
@@ -39,6 +45,26 @@ const MobilePostStatusModal = {
       this.postFormOpen = false
       this.hidden = false
     },
+    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
+      }
+    },
     handleScroll: throttle(function () {
       const scrollAmount = window.scrollY - this.oldScrollPos
       const scrollingDown = scrollAmount > 0
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 70ccf0f4..0a451c28 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
@@ -12,7 +12,7 @@
   </div>
   <button
     class="new-status-button"
-    :class="{ hidden }"
+    :class="{ 'hidden': isHidden }"
     @click="openPostForm"
   >
     <i class="icon-edit" />