mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 03:00:58 +08:00
91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import { StatusBar, Style } from '@utils/native/status-bar';
|
|
import { win } from '@utils/window';
|
|
|
|
/**
|
|
* Use y = mx + b to
|
|
* figure out the backdrop value
|
|
* at a particular x coordinate. This
|
|
* is useful when the backdrop does
|
|
* not begin to fade in until after
|
|
* the 0 breakpoint.
|
|
*/
|
|
export const getBackdropValueForSheet = (x: number, backdropBreakpoint: number) => {
|
|
/**
|
|
* We will use these points:
|
|
* (backdropBreakpoint, 0)
|
|
* (maxBreakpoint, 1)
|
|
* We know that at the beginning breakpoint,
|
|
* the backdrop will be hidden. We also
|
|
* know that at the maxBreakpoint, the backdrop
|
|
* must be fully visible. maxBreakpoint should
|
|
* always be 1 even if the maximum value
|
|
* of the breakpoints array is not 1 since
|
|
* the animation runs from a progress of 0
|
|
* to a progress of 1.
|
|
* m = (y2 - y1) / (x2 - x1)
|
|
*
|
|
* This is simplified from:
|
|
* m = (1 - 0) / (maxBreakpoint - backdropBreakpoint)
|
|
*
|
|
* If the backdropBreakpoint is 1, we return 0 as the
|
|
* backdrop is completely hidden.
|
|
*
|
|
*/
|
|
if (backdropBreakpoint === 1) {
|
|
return 0;
|
|
}
|
|
|
|
const slope = 1 / (1 - backdropBreakpoint);
|
|
|
|
/**
|
|
* From here, compute b which is
|
|
* the backdrop opacity if the offset
|
|
* is 0. If the backdrop does not
|
|
* begin to fade in until after the
|
|
* 0 breakpoint, this b value will be
|
|
* negative. This is fine as we never pass
|
|
* b directly into the animation keyframes.
|
|
* b = y - mx
|
|
* Use a known point: (backdropBreakpoint, 0)
|
|
* This is simplified from:
|
|
* b = 0 - (backdropBreakpoint * slope)
|
|
*/
|
|
const b = -(backdropBreakpoint * slope);
|
|
|
|
/**
|
|
* Finally, we can now determine the
|
|
* backdrop offset given an arbitrary
|
|
* gesture offset.
|
|
*/
|
|
|
|
return x * slope + b;
|
|
};
|
|
|
|
/**
|
|
* The tablet/desktop card modal activates
|
|
* when the window width is >= 768.
|
|
* At that point, the presenting element
|
|
* is not transformed, so we do not need to
|
|
* adjust the status bar color.
|
|
*
|
|
* Note: We check supportsDefaultStatusBarStyle so that
|
|
* Capacitor <= 2 users do not get their status bar
|
|
* stuck in an inconsistent state due to a lack of
|
|
* support for Style.Default.
|
|
*/
|
|
export const setCardStatusBarDark = () => {
|
|
if (!win || win.innerWidth >= 768 || !StatusBar.supportsDefaultStatusBarStyle()) {
|
|
return;
|
|
}
|
|
|
|
StatusBar.setStyle({ style: Style.Dark });
|
|
};
|
|
|
|
export const setCardStatusBarDefault = (defaultStyle = Style.Default) => {
|
|
if (!win || win.innerWidth >= 768 || !StatusBar.supportsDefaultStatusBarStyle()) {
|
|
return;
|
|
}
|
|
|
|
StatusBar.setStyle({ style: defaultStyle });
|
|
};
|