|
| 1 | +// (C) Copyright 2015 Moodle Pty Ltd. |
| 2 | +// |
| 3 | +// Licensed under the Apache License, Version 2.0 (the "License"); |
| 4 | +// you may not use this file except in compliance with the License. |
| 5 | +// You may obtain a copy of the License at |
| 6 | +// |
| 7 | +// http://www.apache.org/licenses/LICENSE-2.0 |
| 8 | +// |
| 9 | +// Unless required by applicable law or agreed to in writing, software |
| 10 | +// distributed under the License is distributed on an "AS IS" BASIS, |
| 11 | +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 12 | +// See the License for the specific language governing permissions and |
| 13 | +// limitations under the License. |
| 14 | + |
| 15 | +import { CorePlatform } from '@services/platform'; |
| 16 | +import { StatusBar } from '@singletons'; |
| 17 | +import { Inset, InsetMask } from '@totalpave/cordova-plugin-insets'; |
| 18 | + |
| 19 | +/** |
| 20 | + * Enables edge-to-edge support on Android. |
| 21 | + */ |
| 22 | +export default async function(): Promise<void> { |
| 23 | + await CorePlatform.ready(); |
| 24 | + |
| 25 | + if (!CorePlatform.isAndroid()) { |
| 26 | + return; |
| 27 | + } |
| 28 | + |
| 29 | + // Enable edge-to-edge. Required on Android 14 and previous versions. |
| 30 | + StatusBar.overlaysWebView(true); |
| 31 | + |
| 32 | + // Listener for system bars and cutout inset changes. |
| 33 | + const systemInsetListener = await Inset.create({ |
| 34 | + // eslint-disable-next-line no-bitwise |
| 35 | + mask: InsetMask.SYSTEM_BARS | InsetMask.DISPLAY_CUTOUT, |
| 36 | + includeRoundedCorners: false, |
| 37 | + }); |
| 38 | + |
| 39 | + // Listener for keyboard height changes. |
| 40 | + // We need to update the CSS variables and the ion-app height at the same time. |
| 41 | + const imeInsetListener = await Inset.create({ |
| 42 | + mask: InsetMask.IME, |
| 43 | + includeRoundedCorners: false, |
| 44 | + }); |
| 45 | + |
| 46 | + const update = () => { |
| 47 | + const insets = systemInsetListener.getInset(); |
| 48 | + const keyboardHeight = imeInsetListener.getInset().bottom; |
| 49 | + |
| 50 | + // Update safe area CSS variables. |
| 51 | + const rootStyle = document.documentElement.style; |
| 52 | + rootStyle.setProperty('--ion-safe-area-left', `${insets.left}px`); |
| 53 | + rootStyle.setProperty('--ion-safe-area-right', `${insets.right}px`); |
| 54 | + rootStyle.setProperty('--ion-safe-area-top', `${insets.top}px`); |
| 55 | + rootStyle.setProperty('--ion-safe-area-bottom', `${keyboardHeight > 0 ? 0 : insets.bottom}px`); |
| 56 | + |
| 57 | + // Update ion-app height. |
| 58 | + // This is the behaviour of the Cordova keyboard plugin on iOS. |
| 59 | + const appStyle = document.querySelector('ion-app')?.style; |
| 60 | + appStyle?.setProperty('height', keyboardHeight > 0 ? `${window.innerHeight - keyboardHeight}px` : null); |
| 61 | + |
| 62 | + // Update the CSS variable with the kebyoard height. |
| 63 | + // On iOS, the variable is updated in the forked Cordova keyboard plugin. |
| 64 | + rootStyle.setProperty('--keyboard-height', keyboardHeight > 0 ? `${keyboardHeight}px` : null); |
| 65 | + }; |
| 66 | + |
| 67 | + systemInsetListener.addListener(update); |
| 68 | + imeInsetListener.addListener(update); |
| 69 | +} |
0 commit comments