From 1aaddf13a0bb8fec836c8b95061f8d547d1d5a79 Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Mon, 7 Oct 2019 14:55:25 -0400 Subject: [PATCH] UX: remove iPad keyboard user setting from iOS 13 Removes setting for iOS devices that support Visual Viewport API. On devices where it was previously enabled, it was causing some scrolling drift when invoking the composer. --- .../discourse/components/composer-body.js.es6 | 9 +++------ .../discourse/controllers/preferences/interface.js.es6 | 10 ++++++++-- .../javascripts/discourse/lib/safari-hacks.js.es6 | 9 ++++++--- app/assets/javascripts/discourse/lib/utilities.js.es6 | 6 ++++++ 4 files changed, 23 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/discourse/components/composer-body.js.es6 b/app/assets/javascripts/discourse/components/composer-body.js.es6 index 99cf7b65f48..4a2fa237e32 100644 --- a/app/assets/javascripts/discourse/components/composer-body.js.es6 +++ b/app/assets/javascripts/discourse/components/composer-body.js.es6 @@ -7,6 +7,7 @@ import afterTransition from "discourse/lib/after-transition"; import positioningWorkaround from "discourse/lib/safari-hacks"; import { headerHeight } from "discourse/components/site-header"; import KeyEnterEscape from "discourse/mixins/key-enter-escape"; +import { iOSWithVisualViewport } from "discourse/lib/utilities"; const START_EVENTS = "touchstart mousedown"; const DRAG_EVENTS = "touchmove mousemove"; @@ -132,16 +133,12 @@ export default Ember.Component.extend(KeyEnterEscape, { $document.on(END_EVENTS, endDrag); }); - if (this.shouldUseVisualViewportListener()) { + if (iOSWithVisualViewport()) { this.viewportResize(); window.visualViewport.addEventListener("resize", this.viewportResize); } }, - shouldUseVisualViewportListener() { - return this.capabilities.isIOS && window.visualViewport !== undefined; - }, - viewportResize() { const composerVH = window.visualViewport.height * 0.01; @@ -178,7 +175,7 @@ export default Ember.Component.extend(KeyEnterEscape, { willDestroyElement() { this._super(...arguments); this.appEvents.off("composer:resize", this, this.resize); - if (this.shouldUseVisualViewportListener()) { + if (iOSWithVisualViewport()) { window.visualViewport.removeEventListener("resize", this.viewportResize); } }, diff --git a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6 index 072c42c3b63..e5b7bf42bf7 100644 --- a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6 +++ b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6 @@ -10,7 +10,11 @@ import { setLocalTheme } from "discourse/lib/theme-selector"; import { popupAjaxError } from "discourse/lib/ajax-error"; -import { safariHacksDisabled, isiPad } from "discourse/lib/utilities"; +import { + safariHacksDisabled, + isiPad, + iOSWithVisualViewport +} from "discourse/lib/utilities"; const USER_HOMES = { 1: "latest", @@ -51,7 +55,9 @@ export default Ember.Controller.extend(PreferencesTabController, { @computed() isiPad() { - return isiPad(); + // TODO: remove this preference checkbox when iOS adoption > 90% + // (currently only applies to iOS 12 and below) + return isiPad() && !iOSWithVisualViewport(); }, @computed() diff --git a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 index bb190354768..c0c76750cf1 100644 --- a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 +++ b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 @@ -1,5 +1,8 @@ import debounce from "discourse/lib/debounce"; -import { safariHacksDisabled } from "discourse/lib/utilities"; +import { + safariHacksDisabled, + iOSWithVisualViewport +} from "discourse/lib/utilities"; // TODO: remove calcHeight once iOS 13 adoption > 90% // In iOS 13 and up we use visualViewport API to calculate height @@ -95,7 +98,7 @@ function positioningWorkaround($fixedElement) { fixedElement.style.position = ""; fixedElement.style.top = ""; - if (window.visualViewport === undefined) { + if (!iOSWithVisualViewport()) { fixedElement.style.height = oldHeight; Ember.run.later( () => $(fixedElement).removeClass("no-transition"), @@ -176,7 +179,7 @@ function positioningWorkaround($fixedElement) { fixedElement.style.top = "0px"; - if (window.visualViewport === undefined) { + if (!iOSWithVisualViewport()) { const height = calcHeight(); fixedElement.style.height = height + "px"; $(fixedElement).addClass("no-transition"); diff --git a/app/assets/javascripts/discourse/lib/utilities.js.es6 b/app/assets/javascripts/discourse/lib/utilities.js.es6 index 530f21d6ac3..599c3a4965a 100644 --- a/app/assets/javascripts/discourse/lib/utilities.js.es6 +++ b/app/assets/javascripts/discourse/lib/utilities.js.es6 @@ -544,6 +544,10 @@ export function isAppleDevice() { let iPadDetected = undefined; +export function iOSWithVisualViewport() { + return isAppleDevice() && window.visualViewport !== undefined; +} + export function isiPad() { if (iPadDetected === undefined) { iPadDetected = @@ -554,6 +558,8 @@ export function isiPad() { } export function safariHacksDisabled() { + if (iOSWithVisualViewport()) return false; + let pref = localStorage.getItem("safari-hacks-disabled"); let result = false; if (pref !== null) {