mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-09-28 15:20:48 +00:00
7284644313
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
26 lines
1015 B
TypeScript
26 lines
1015 B
TypeScript
import {isIOS} from 'app/client/lib/browserInfo';
|
|
import {localStorageBoolObs} from 'app/client/lib/localStorageObs';
|
|
import {dom} from 'grainjs';
|
|
|
|
export const viewportEnabled = localStorageBoolObs('viewportEnabled');
|
|
|
|
export function toggleViewport() {
|
|
viewportEnabled.set(!viewportEnabled.get());
|
|
if (!viewportEnabled.get()) {
|
|
// Removing the meta tag doesn't cause mobile browsers to reload automatically.
|
|
location.reload();
|
|
}
|
|
}
|
|
|
|
export function addViewportTag() {
|
|
dom.update(document.head,
|
|
dom.maybe(viewportEnabled, () => {
|
|
// For the maximum-scale=1 advice, see https://stackoverflow.com/a/46254706/328565. On iOS,
|
|
// it prevents the auto-zoom when an input is focused, but does not prevent manual
|
|
// pinch-to-zoom. On Android, it's not needed, and would prevent manual zoom.
|
|
const viewportContent = "width=device-width,initial-scale=1.0" + (isIOS() ? ",maximum-scale=1" : "");
|
|
return dom('meta', {name: "viewport", content: viewportContent});
|
|
})
|
|
);
|
|
}
|