@ionic/core
Version:
Base components for Ionic
81 lines (80 loc) • 2.46 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import { win } from "../../utils/browser/index";
import { StatusBar, Style } from "../../utils/native/status-bar";
/**
* 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, backdropBreakpoint) => {
/**
* 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.
*
*/
export const setCardStatusBarDark = () => {
if (!win || win.innerWidth >= 768) {
return;
}
StatusBar.setStyle({ style: Style.Dark });
};
export const setCardStatusBarDefault = (defaultStyle = Style.Default) => {
if (!win || win.innerWidth >= 768) {
return;
}
StatusBar.setStyle({ style: defaultStyle });
};