(core) Add support for editing on mobile.

Summary:
- Add custom handling for dblclick on mobile, to allow focusing editor.
- In place of Clipboard.js, use a FocusLayer with document.body as the default focus element.
- Set maximum-scale on iOS viewport to prevent auto-zoom.
- Reposition the editor on window resize when editing a cell, which is a normal
  occurrence on Android when virtual keyboard is shown.
- Add Save/Cancel icon-buttons next to cell editor on mobile.

Test Plan: Tested manually on Safari / FF on iPhone, and on Chrome on Android emulator.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2721
This commit is contained in:
Dmitry S
2021-02-03 22:17:17 -05:00
parent 7c81cf2368
commit 7284644313
18 changed files with 271 additions and 75 deletions

View File

@@ -11,3 +11,10 @@ export function isDesktop() {
const platformType = getParser().getPlatformType();
return (!platformType || platformType === 'desktop');
}
// Returns whether the browser is on mobile iOS.
// This is used in particular in viewport.ts to set maximum-scale=1 (to prevent iOS auto-zoom when
// an input is focused, without preventing manual pinch-to-zoom).
export function isIOS() {
return navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
}