@stacknav/core 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +111 -59
- package/dist/animate.d.ts +18 -0
- package/dist/animate.d.ts.map +1 -1
- package/dist/animate.js +44 -2
- package/dist/animate.js.map +1 -1
- package/dist/css-vars.d.ts +3 -3
- package/dist/css-vars.d.ts.map +1 -1
- package/dist/css-vars.js +47 -4
- package/dist/css-vars.js.map +1 -1
- package/dist/history-adapter.d.ts +0 -1
- package/dist/history-adapter.d.ts.map +1 -1
- package/dist/history-adapter.js +1 -5
- package/dist/history-adapter.js.map +1 -1
- package/dist/index.d.ts +27 -18
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +38 -15
- package/dist/index.js.map +1 -1
- package/dist/native-transition.d.ts +93 -0
- package/dist/native-transition.d.ts.map +1 -0
- package/dist/{ios-transition.js → native-transition.js} +42 -25
- package/dist/native-transition.js.map +1 -0
- package/dist/navigation-stack.d.ts +3 -0
- package/dist/navigation-stack.d.ts.map +1 -1
- package/dist/navigation-stack.js +42 -3
- package/dist/navigation-stack.js.map +1 -1
- package/dist/platform.d.ts +6 -0
- package/dist/platform.d.ts.map +1 -0
- package/dist/platform.js +22 -0
- package/dist/platform.js.map +1 -0
- package/dist/stacknav.css +4 -13
- package/dist/styles.d.ts +5 -9
- package/dist/styles.d.ts.map +1 -1
- package/dist/styles.js +6 -12
- package/dist/styles.js.map +1 -1
- package/dist/swipe-back.d.ts +4 -0
- package/dist/swipe-back.d.ts.map +1 -0
- package/dist/swipe-back.js +31 -0
- package/dist/swipe-back.js.map +1 -0
- package/package.json +3 -2
- package/src/animate.ts +47 -4
- package/src/css-vars.ts +43 -4
- package/src/history-adapter.ts +1 -5
- package/src/index.ts +49 -24
- package/src/{ios-transition.ts → native-transition.ts} +67 -35
- package/src/navigation-stack.ts +30 -3
- package/src/platform.ts +23 -0
- package/src/styles.ts +6 -12
- package/src/swipe-back.ts +35 -0
- package/dist/edge-pan-gesture.d.ts +0 -36
- package/dist/edge-pan-gesture.d.ts.map +0 -1
- package/dist/edge-pan-gesture.js +0 -155
- package/dist/edge-pan-gesture.js.map +0 -1
- package/dist/ios-transition.d.ts +0 -61
- package/dist/ios-transition.d.ts.map +0 -1
- package/dist/ios-transition.js.map +0 -1
- package/src/edge-pan-gesture.ts +0 -190
package/dist/index.d.ts
CHANGED
|
@@ -1,34 +1,43 @@
|
|
|
1
|
+
export type { SwipeBackMode } from './swipe-back.ts';
|
|
1
2
|
export { NavigationStack } from './navigation-stack.ts';
|
|
2
3
|
export type { StackEntry, Transition, TransitionKind, NavigationSource, MountOptions, NavigationStackOptions, InteractivePopHandle, SettleInput, StackEvents, PushEvent, PopEvent, ReplaceEvent, ResetEvent, TransitionEvent, ProgressEvent, } from './navigation-stack.ts';
|
|
3
|
-
export {
|
|
4
|
-
export type {
|
|
4
|
+
export { createNativeTransition, nativeTransitionPreset, NATIVE_TRANSITION_CSS_VARS } from './native-transition.ts';
|
|
5
|
+
export type { NativeTransition, NativeTransitionOptions, NativeTransitionPreset } from './native-transition.ts';
|
|
5
6
|
export { cssVars, parseTime, parseNumber, parseRatio, parseEasing } from './css-vars.ts';
|
|
6
7
|
export type { CSSVarReader } from './css-vars.ts';
|
|
7
|
-
export {
|
|
8
|
-
export type { EdgePanGesture, EdgePanGestureOptions } from './edge-pan-gesture.ts';
|
|
9
|
-
export { attachBrowserHistory, isIOSBrowser } from './history-adapter.ts';
|
|
8
|
+
export { attachBrowserHistory } from './history-adapter.ts';
|
|
10
9
|
export type { BrowserHistoryOptions } from './history-adapter.ts';
|
|
11
|
-
export {
|
|
10
|
+
export { detectPlatform, isIOSBrowser, isAndroidBrowser } from './platform.ts';
|
|
11
|
+
export type { Platform } from './platform.ts';
|
|
12
|
+
export { cubicBezier, linearEasing, easings, cssEasing, cssDuration, tween, commitStyles, animationsFinished, prefersReducedMotion, matchesMedia, isTouchPrimary } from './animate.ts';
|
|
12
13
|
export type { Easing, TweenOptions, CancellableTween } from './animate.ts';
|
|
13
14
|
export { resolveDirection, createDirectionResolver, defaultStrategies, fromHint, fromHistory, fromStack, fromLevel, fromTree, always, segmentsOf, } from './direction.ts';
|
|
14
15
|
export type { Direction, DirectionOpinion, DirectionStrategy, DirectionResolver, NavigationContext, NavigationTrigger, RouteRef, LevelOptions, TreeOptions, } from './direction.ts';
|
|
15
16
|
export { STACKNAV_CSS, STACKNAV_STYLE_ID, injectStyles } from './styles.ts';
|
|
16
17
|
import { NavigationStack } from './navigation-stack.ts';
|
|
17
|
-
import { type
|
|
18
|
-
import { type
|
|
19
|
-
export interface
|
|
18
|
+
import { type NativeTransition, type NativeTransitionOptions } from './native-transition.ts';
|
|
19
|
+
import { type SwipeBackMode } from './swipe-back.ts';
|
|
20
|
+
export interface NativeStackOptions {
|
|
20
21
|
container: HTMLElement;
|
|
21
|
-
transition?: Partial<
|
|
22
|
-
|
|
22
|
+
transition?: Partial<NativeTransitionOptions>;
|
|
23
|
+
/** Default browser. Disabled requests document-wide browser swipe suppression. */
|
|
24
|
+
swipeBack?: SwipeBackMode;
|
|
23
25
|
}
|
|
24
|
-
export interface
|
|
25
|
-
transition:
|
|
26
|
-
|
|
26
|
+
export interface NativeStack extends NavigationStack {
|
|
27
|
+
transition: NativeTransition;
|
|
28
|
+
readonly swipeBack: SwipeBackMode;
|
|
29
|
+
/** Changes the policy without replacing pages or changing browser history. */
|
|
30
|
+
setSwipeBack(mode: SwipeBackMode): void;
|
|
27
31
|
}
|
|
28
32
|
/**
|
|
29
|
-
* Wires the
|
|
30
|
-
* transition
|
|
31
|
-
* `
|
|
33
|
+
* Wires the two pieces together in one call: a stack in `container` and the
|
|
34
|
+
* platform's native transition. The browser keeps the back gesture unless
|
|
35
|
+
* `disabled` asks for suppression; destroying releases that request.
|
|
36
|
+
*
|
|
37
|
+
* There is no gesture recognizer here on purpose. In a browser tab the browser
|
|
38
|
+
* already owns the edge and will not give it up, so a second recognizer reads
|
|
39
|
+
* as two backs at once. Apps that own the edge -- an installed PWA, a native
|
|
40
|
+
* webview -- can drive `beginInteractivePop()` from their own pointer handling.
|
|
32
41
|
*/
|
|
33
|
-
export declare function
|
|
42
|
+
export declare function createNativeStack({ container, transition, swipeBack }: NativeStackOptions): NativeStack;
|
|
34
43
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EACV,UAAU,EACV,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,eAAe,EACf,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EACV,UAAU,EACV,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,eAAe,EACf,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACpH,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChH,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzF,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC/E,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACvL,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,GACX,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,WAAW,GACZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAA0B,KAAK,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAErH,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC9C,kFAAkF;IAClF,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,UAAU,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC;IAClC,8EAA8E;IAC9E,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;CACzC;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,UAAe,EAAE,SAAqB,EAAE,EAAE,kBAAkB,GAAG,WAAW,CA2BxH"}
|
package/dist/index.js
CHANGED
|
@@ -1,28 +1,51 @@
|
|
|
1
1
|
export { NavigationStack } from "./navigation-stack.js";
|
|
2
|
-
export {
|
|
2
|
+
export { createNativeTransition, nativeTransitionPreset, NATIVE_TRANSITION_CSS_VARS } from "./native-transition.js";
|
|
3
3
|
export { cssVars, parseTime, parseNumber, parseRatio, parseEasing } from "./css-vars.js";
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
6
|
-
export { cubicBezier, easings, cssEasing, cssDuration, tween, commitStyles, animationsFinished, prefersReducedMotion } from "./animate.js";
|
|
4
|
+
export { attachBrowserHistory } from "./history-adapter.js";
|
|
5
|
+
export { detectPlatform, isIOSBrowser, isAndroidBrowser } from "./platform.js";
|
|
6
|
+
export { cubicBezier, linearEasing, easings, cssEasing, cssDuration, tween, commitStyles, animationsFinished, prefersReducedMotion, matchesMedia, isTouchPrimary } from "./animate.js";
|
|
7
7
|
export { resolveDirection, createDirectionResolver, defaultStrategies, fromHint, fromHistory, fromStack, fromLevel, fromTree, always, segmentsOf, } from "./direction.js";
|
|
8
8
|
export { STACKNAV_CSS, STACKNAV_STYLE_ID, injectStyles } from "./styles.js";
|
|
9
9
|
import { NavigationStack } from "./navigation-stack.js";
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
10
|
+
import { createNativeTransition } from "./native-transition.js";
|
|
11
|
+
import { suppressBrowserSwipe } from "./swipe-back.js";
|
|
12
12
|
/**
|
|
13
|
-
* Wires the
|
|
14
|
-
* transition
|
|
15
|
-
* `
|
|
13
|
+
* Wires the two pieces together in one call: a stack in `container` and the
|
|
14
|
+
* platform's native transition. The browser keeps the back gesture unless
|
|
15
|
+
* `disabled` asks for suppression; destroying releases that request.
|
|
16
|
+
*
|
|
17
|
+
* There is no gesture recognizer here on purpose. In a browser tab the browser
|
|
18
|
+
* already owns the edge and will not give it up, so a second recognizer reads
|
|
19
|
+
* as two backs at once. Apps that own the edge -- an installed PWA, a native
|
|
20
|
+
* webview -- can drive `beginInteractivePop()` from their own pointer handling.
|
|
16
21
|
*/
|
|
17
|
-
export function
|
|
18
|
-
const t =
|
|
19
|
-
const g = createEdgePanGesture(gesture);
|
|
22
|
+
export function createNativeStack({ container, transition = {}, swipeBack = 'browser' }) {
|
|
23
|
+
const t = createNativeTransition(transition);
|
|
20
24
|
const stack = new NavigationStack({ container, transition: t });
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
let mode;
|
|
26
|
+
let release;
|
|
27
|
+
let destroyed = false;
|
|
28
|
+
Object.defineProperty(stack, 'swipeBack', { get: () => mode });
|
|
29
|
+
stack.setSwipeBack = (next) => {
|
|
30
|
+
if (destroyed || next === mode)
|
|
31
|
+
return;
|
|
32
|
+
if (next !== 'browser' && next !== 'disabled')
|
|
33
|
+
throw new TypeError('Invalid swipeBack mode');
|
|
34
|
+
if (next === 'browser') {
|
|
35
|
+
release?.();
|
|
36
|
+
release = undefined;
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
release ??= suppressBrowserSwipe(container);
|
|
40
|
+
}
|
|
41
|
+
mode = next;
|
|
42
|
+
};
|
|
43
|
+
stack.setSwipeBack(swipeBack);
|
|
23
44
|
const destroy = stack.destroy.bind(stack);
|
|
24
45
|
stack.destroy = () => {
|
|
25
|
-
|
|
46
|
+
destroyed = true;
|
|
47
|
+
release?.();
|
|
48
|
+
release = undefined;
|
|
26
49
|
destroy();
|
|
27
50
|
};
|
|
28
51
|
return stack;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAkBxD,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAEpH,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEvL,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,GACX,MAAM,gBAAgB,CAAC;AAYxB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAuD,MAAM,wBAAwB,CAAC;AAErH,OAAO,EAAE,oBAAoB,EAAsB,MAAM,iBAAiB,CAAC;AAgB3E;;;;;;;;;GASG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,SAAS,GAAG,SAAS,EAAsB;IACzG,MAAM,CAAC,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EAAE,CAAgB,CAAC;IAC/E,IAAI,IAA+B,CAAC;IACpC,IAAI,OAAiC,CAAC;IACtC,IAAI,SAAS,GAAG,KAAK,CAAC;IACtB,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;IAC/D,KAAK,CAAC,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;QAC5B,IAAI,SAAS,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QACvC,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,UAAU;YAAE,MAAM,IAAI,SAAS,CAAC,wBAAwB,CAAC,CAAC;QAC7F,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,EAAE,EAAE,CAAC;YACZ,OAAO,GAAG,SAAS,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,OAAO,KAAK,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC9C,CAAC;QACD,IAAI,GAAG,IAAI,CAAC;IACd,CAAC,CAAC;IACF,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,KAAK,CAAC,OAAO,GAAG,GAAG,EAAE;QACnB,SAAS,GAAG,IAAI,CAAC;QACjB,OAAO,EAAE,EAAE,CAAC;QACZ,OAAO,GAAG,SAAS,CAAC;QACpB,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IACF,OAAO,KAAK,CAAC;AACf,CAAC"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { type Easing } from './animate.ts';
|
|
2
|
+
import type { Transition } from './navigation-stack.ts';
|
|
3
|
+
import { type Platform } from './platform.ts';
|
|
4
|
+
export interface NativeTransitionOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Whose push/pop to imitate. `auto` (the default) asks the browser and
|
|
7
|
+
* falls back to `ios`. It picks the defaults for everything below; an
|
|
8
|
+
* option given explicitly wins over the platform's, as a CSS variable wins
|
|
9
|
+
* over both.
|
|
10
|
+
*/
|
|
11
|
+
platform: Platform | 'auto';
|
|
12
|
+
/** ms, programmatic push/pop */
|
|
13
|
+
duration: number;
|
|
14
|
+
/**
|
|
15
|
+
* the curve a programmatic push/pop runs on. CSS runs it, so it has to be
|
|
16
|
+
* one CSS can spell: everything `cubicBezier()`, `bezierPath()` and
|
|
17
|
+
* `parseEasing()` build carries a `css` property. A bare `(t) => number` of
|
|
18
|
+
* your own has none, so the pages would run `linear` while `progress`
|
|
19
|
+
* reported your curve; give it a `css` property, or write the whole
|
|
20
|
+
* transition yourself.
|
|
21
|
+
*/
|
|
22
|
+
ease: Easing;
|
|
23
|
+
/** fraction of the width the upper page travels (1 = from off-screen; Android slides a short way and fades) */
|
|
24
|
+
travel: number;
|
|
25
|
+
/** fraction of the width the lower page travels */
|
|
26
|
+
parallax: number;
|
|
27
|
+
/** opacity of the upper page when fully closed (1 = no fade) */
|
|
28
|
+
fade: number;
|
|
29
|
+
dimColor: string;
|
|
30
|
+
/** lower-page overlay opacity at p = 1 (≈0.35 suits dark UIs) */
|
|
31
|
+
dimMax: number;
|
|
32
|
+
/** box-shadow on the incoming page */
|
|
33
|
+
shadow: string;
|
|
34
|
+
/** ms bounds for finishing an interactive pop */
|
|
35
|
+
settleMin: number;
|
|
36
|
+
settleMax: number;
|
|
37
|
+
/** the curve the remaining distance of an interactive pop runs on; see `ease` */
|
|
38
|
+
settleEase: Easing;
|
|
39
|
+
/** px/s assumed when the pointer was slower than this */
|
|
40
|
+
settleVelocityFloor: number;
|
|
41
|
+
/** multiplies every duration, for slow motion and tests */
|
|
42
|
+
timeScale: number;
|
|
43
|
+
}
|
|
44
|
+
/** Every option except the platform, which is decided once and has no CSS variable. */
|
|
45
|
+
export type NativeTransitionPreset = Readonly<Omit<NativeTransitionOptions, 'platform'>>;
|
|
46
|
+
/**
|
|
47
|
+
* Each platform's own push/pop, as its system animates it.
|
|
48
|
+
*
|
|
49
|
+
* - `ios`: UIKit's navigation push. The upper page slides the full width with
|
|
50
|
+
* a shadow on its leading edge, the lower page parallaxes 30% and dims.
|
|
51
|
+
* - `android`: the framework's activity open/close since Android 13
|
|
52
|
+
* (`activity_open_enter.xml` and friends): both pages slide 96 dp, about a
|
|
53
|
+
* quarter of a phone, over 450 ms on `fast_out_extra_slow_in`, and the
|
|
54
|
+
* upper page fades through the first part of it. No shadow, no dim.
|
|
55
|
+
*/
|
|
56
|
+
export declare function nativeTransitionPreset(platform: Platform): NativeTransitionPreset;
|
|
57
|
+
/** The CSS custom property behind each option. */
|
|
58
|
+
export declare const NATIVE_TRANSITION_CSS_VARS: Readonly<Record<keyof NativeTransitionPreset, string>>;
|
|
59
|
+
export interface NativeTransition extends Transition {
|
|
60
|
+
/** The JS options: the platform's preset with the caller's merged in. `platform` is the one chosen. Mutable at runtime. */
|
|
61
|
+
readonly options: NativeTransitionOptions & {
|
|
62
|
+
platform: Platform;
|
|
63
|
+
};
|
|
64
|
+
/** The values currently in force: `options` with the CSS variables applied over them. */
|
|
65
|
+
readonly resolved: Readonly<NativeTransitionOptions & {
|
|
66
|
+
platform: Platform;
|
|
67
|
+
}>;
|
|
68
|
+
/**
|
|
69
|
+
* Re-reads the CSS variables, from `el` or from the container of the last
|
|
70
|
+
* transition. Called at the start of every transition. Call it directly
|
|
71
|
+
* after changing `options` or the variables mid-animation.
|
|
72
|
+
*/
|
|
73
|
+
refresh(el?: Element | null): void;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* The platform's navigation transition: the upper page slides in from the
|
|
77
|
+
* trailing edge while the lower page parallaxes toward the leading edge. On
|
|
78
|
+
* iOS the upper page travels the full width under a shadow and the lower page
|
|
79
|
+
* dims; on Android both travel a short way and the upper page fades. Every
|
|
80
|
+
* value is a function of one number, p.
|
|
81
|
+
*
|
|
82
|
+
* Every option is also a CSS custom property on the container (see
|
|
83
|
+
* `NATIVE_TRANSITION_CSS_VARS`), read when a transition starts. A variable
|
|
84
|
+
* that is set wins over the JS option, so a stylesheet can slow the animation
|
|
85
|
+
* down or restyle it per theme without the app rebuilding the transition.
|
|
86
|
+
*
|
|
87
|
+
* p is only ever written at the ends of a phase. The stack puts that phase's
|
|
88
|
+
* duration and curve in `--sn-t` / `--sn-e` and CSS interpolates between the
|
|
89
|
+
* two writes, so the animation costs a handful of style writes rather than one
|
|
90
|
+
* per page per frame, and runs on the compositor rather than the main thread.
|
|
91
|
+
*/
|
|
92
|
+
export declare function createNativeTransition(options?: Partial<NativeTransitionOptions>): NativeTransition;
|
|
93
|
+
//# sourceMappingURL=native-transition.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"native-transition.d.ts","sourceRoot":"","sources":["../src/native-transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAA2B,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACtC;;;;;OAKG;IACH,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;;OAOG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,+GAA+G;IAC/G,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,uFAAuF;AACvF,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC,IAAI,CAAC,uBAAuB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEzF;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,QAAQ,GAAG,sBAAsB,CAKjF;AAED,kDAAkD;AAClD,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,sBAAsB,EAAE,MAAM,CAAC,CAc5F,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,2HAA2H;IAC3H,QAAQ,CAAC,OAAO,EAAE,uBAAuB,GAAG;QAAE,QAAQ,EAAE,QAAQ,CAAA;KAAE,CAAC;IACnE,yFAAyF;IACzF,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,uBAAuB,GAAG;QAAE,QAAQ,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,OAAO,CAAC,uBAAuB,CAAM,GAAG,gBAAgB,CAkGvG"}
|
|
@@ -1,10 +1,29 @@
|
|
|
1
1
|
import { easings, prefersReducedMotion } from "./animate.js";
|
|
2
2
|
import { cssVars, parseEasing, parseNumber, parseRatio, parseTime } from "./css-vars.js";
|
|
3
|
+
import { detectPlatform } from "./platform.js";
|
|
4
|
+
/**
|
|
5
|
+
* Each platform's own push/pop, as its system animates it.
|
|
6
|
+
*
|
|
7
|
+
* - `ios`: UIKit's navigation push. The upper page slides the full width with
|
|
8
|
+
* a shadow on its leading edge, the lower page parallaxes 30% and dims.
|
|
9
|
+
* - `android`: the framework's activity open/close since Android 13
|
|
10
|
+
* (`activity_open_enter.xml` and friends): both pages slide 96 dp, about a
|
|
11
|
+
* quarter of a phone, over 450 ms on `fast_out_extra_slow_in`, and the
|
|
12
|
+
* upper page fades through the first part of it. No shadow, no dim.
|
|
13
|
+
*/
|
|
14
|
+
export function nativeTransitionPreset(platform) {
|
|
15
|
+
const shared = { settleMin: 120, settleMax: 400, settleVelocityFloor: 900, timeScale: 1, dimColor: '#000' };
|
|
16
|
+
return platform === 'android'
|
|
17
|
+
? { ...shared, duration: 450, ease: easings.android, travel: 0.25, parallax: 0.25, fade: 0, dimMax: 0, shadow: 'none', settleEase: easings.androidSettle }
|
|
18
|
+
: { ...shared, duration: 500, ease: easings.ios, travel: 1, parallax: 0.3, fade: 1, dimMax: 0.1, shadow: '-3px 0 14px rgba(0,0,0,0.16)', settleEase: easings.easeOut };
|
|
19
|
+
}
|
|
3
20
|
/** The CSS custom property behind each option. */
|
|
4
|
-
export const
|
|
21
|
+
export const NATIVE_TRANSITION_CSS_VARS = /*#__PURE__*/ Object.freeze({
|
|
5
22
|
duration: '--sn-duration',
|
|
6
23
|
ease: '--sn-easing',
|
|
24
|
+
travel: '--sn-travel',
|
|
7
25
|
parallax: '--sn-parallax',
|
|
26
|
+
fade: '--sn-fade',
|
|
8
27
|
dimColor: '--sn-dim-color',
|
|
9
28
|
dimMax: '--sn-dim-max',
|
|
10
29
|
shadow: '--sn-shadow',
|
|
@@ -15,46 +34,39 @@ export const IOS_TRANSITION_CSS_VARS = /*#__PURE__*/ Object.freeze({
|
|
|
15
34
|
timeScale: '--sn-time-scale',
|
|
16
35
|
});
|
|
17
36
|
/**
|
|
18
|
-
* The
|
|
19
|
-
* edge
|
|
20
|
-
*
|
|
37
|
+
* The platform's navigation transition: the upper page slides in from the
|
|
38
|
+
* trailing edge while the lower page parallaxes toward the leading edge. On
|
|
39
|
+
* iOS the upper page travels the full width under a shadow and the lower page
|
|
40
|
+
* dims; on Android both travel a short way and the upper page fades. Every
|
|
41
|
+
* value is a function of one number, p.
|
|
21
42
|
*
|
|
22
43
|
* Every option is also a CSS custom property on the container (see
|
|
23
|
-
* `
|
|
24
|
-
* is set wins over the JS option, so a stylesheet can slow the animation
|
|
25
|
-
* or restyle it per theme without the app rebuilding the transition.
|
|
44
|
+
* `NATIVE_TRANSITION_CSS_VARS`), read when a transition starts. A variable
|
|
45
|
+
* that is set wins over the JS option, so a stylesheet can slow the animation
|
|
46
|
+
* down or restyle it per theme without the app rebuilding the transition.
|
|
26
47
|
*
|
|
27
48
|
* p is only ever written at the ends of a phase. The stack puts that phase's
|
|
28
49
|
* duration and curve in `--sn-t` / `--sn-e` and CSS interpolates between the
|
|
29
50
|
* two writes, so the animation costs a handful of style writes rather than one
|
|
30
51
|
* per page per frame, and runs on the compositor rather than the main thread.
|
|
31
52
|
*/
|
|
32
|
-
export function
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
ease: easings.ios,
|
|
36
|
-
parallax: 0.3,
|
|
37
|
-
dimColor: '#000',
|
|
38
|
-
dimMax: 0.1,
|
|
39
|
-
shadow: '-3px 0 14px rgba(0,0,0,0.16)',
|
|
40
|
-
settleMin: 120,
|
|
41
|
-
settleMax: 400,
|
|
42
|
-
settleEase: easings.easeOut,
|
|
43
|
-
settleVelocityFloor: 900,
|
|
44
|
-
timeScale: 1,
|
|
45
|
-
...options,
|
|
46
|
-
};
|
|
53
|
+
export function createNativeTransition(options = {}) {
|
|
54
|
+
const platform = !options.platform || options.platform === 'auto' ? detectPlatform() : options.platform;
|
|
55
|
+
const o = { ...nativeTransitionPreset(platform), ...options, platform };
|
|
47
56
|
let root = null;
|
|
48
57
|
let r = { ...o };
|
|
49
58
|
const refresh = (el) => {
|
|
50
59
|
if (el !== undefined)
|
|
51
60
|
root = el;
|
|
52
61
|
const read = cssVars(root);
|
|
53
|
-
const v =
|
|
62
|
+
const v = NATIVE_TRANSITION_CSS_VARS;
|
|
54
63
|
r = {
|
|
64
|
+
platform: o.platform,
|
|
55
65
|
duration: parseTime(read(v.duration)) ?? o.duration,
|
|
56
66
|
ease: parseEasing(read(v.ease)) ?? o.ease,
|
|
67
|
+
travel: parseRatio(read(v.travel)) ?? o.travel,
|
|
57
68
|
parallax: parseRatio(read(v.parallax)) ?? o.parallax,
|
|
69
|
+
fade: parseRatio(read(v.fade)) ?? o.fade,
|
|
58
70
|
dimColor: read(v.dimColor) ?? o.dimColor,
|
|
59
71
|
dimMax: parseRatio(read(v.dimMax)) ?? o.dimMax,
|
|
60
72
|
shadow: read(v.shadow) ?? o.shadow,
|
|
@@ -117,7 +129,11 @@ export function createIOSTransition(options = {}) {
|
|
|
117
129
|
* page, so a resize mid-transition stays honest.
|
|
118
130
|
*/
|
|
119
131
|
apply(lower, upper, p) {
|
|
120
|
-
upper.el.style.transform = shift(1 - p);
|
|
132
|
+
upper.el.style.transform = shift((1 - p) * r.travel);
|
|
133
|
+
// Only a look that fades writes opacity: a property that is not written
|
|
134
|
+
// starts no transition, and a page's own opacity is left alone.
|
|
135
|
+
if (r.fade < 1)
|
|
136
|
+
upper.el.style.opacity = String(round(r.fade + (1 - r.fade) * p));
|
|
121
137
|
if (lower) {
|
|
122
138
|
lower.el.style.transform = shift(-p * r.parallax);
|
|
123
139
|
dim.style.opacity = String(p * r.dimMax);
|
|
@@ -126,10 +142,11 @@ export function createIOSTransition(options = {}) {
|
|
|
126
142
|
end(lower, upper) {
|
|
127
143
|
upper.el.style.boxShadow = '';
|
|
128
144
|
upper.el.style.transform = '';
|
|
145
|
+
upper.el.style.opacity = '';
|
|
129
146
|
if (lower)
|
|
130
147
|
lower.el.style.transform = '';
|
|
131
148
|
dim?.remove();
|
|
132
149
|
},
|
|
133
150
|
};
|
|
134
151
|
}
|
|
135
|
-
//# sourceMappingURL=
|
|
152
|
+
//# sourceMappingURL=native-transition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"native-transition.js","sourceRoot":"","sources":["../src/native-transition.ts"],"names":[],"mappings":"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"}
|
|
@@ -112,6 +112,8 @@ export declare class NavigationStack {
|
|
|
112
112
|
readonly pageClass: string;
|
|
113
113
|
entries: StackEntry[];
|
|
114
114
|
busy: boolean;
|
|
115
|
+
private _destroyed;
|
|
116
|
+
private _activeTransition;
|
|
115
117
|
private _queue;
|
|
116
118
|
private _listeners;
|
|
117
119
|
constructor({ container, transition, pageClass }: NavigationStackOptions);
|
|
@@ -164,6 +166,7 @@ export declare class NavigationStack {
|
|
|
164
166
|
}): Promise<StackEntry[]>;
|
|
165
167
|
/** Starts a pointer-driven pop. Returns null if the stack cannot pop right now. */
|
|
166
168
|
beginInteractivePop(): InteractivePopHandle | null;
|
|
169
|
+
/** Terminal: queued and subsequent navigation reject with AbortError. */
|
|
167
170
|
destroy(): void;
|
|
168
171
|
private _setBusy;
|
|
169
172
|
/** Serializes operations: while a transition runs, later calls wait their turn. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-stack.d.ts","sourceRoot":"","sources":["../src/navigation-stack.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"navigation-stack.d.ts","sourceRoot":"","sources":["../src/navigation-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0F,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAEnI,4FAA4F;AAC5F,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,OAAO;IACrC,EAAE,EAAE,WAAW,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,kFAAkF;IAClF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,KAAK,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1D,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpE,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CACzD;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,KAAK,GAAG,aAAa,CAAC;AAE5D,8FAA8F;AAC9F,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAE7E,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,OAAO;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,MAAM,WAAW,SAAS;IAAG,KAAK,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAAC,MAAM,EAAE,gBAAgB,CAAA;CAAE;AACjG,MAAM,WAAW,QAAQ;IAAG,KAAK,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAAC,MAAM,EAAE,gBAAgB,CAAA;CAAE;AACvH,MAAM,WAAW,YAAY;IAAG,KAAK,EAAE,UAAU,CAAC;IAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAAC,MAAM,EAAE,gBAAgB,CAAA;CAAE;AAC3H,MAAM,WAAW,UAAU;IAAG,OAAO,EAAE,UAAU,EAAE,CAAC;IAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAAC,MAAM,EAAE,gBAAgB,CAAA;CAAE;AACtG,MAAM,WAAW,eAAe;IAAG,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAAC,KAAK,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,cAAc,CAAA;CAAE;AACtG,MAAM,WAAW,aAAa;IAAG,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAAC,KAAK,EAAE,UAAU,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE;AAEzF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,GAAG,EAAE,QAAQ,CAAC;IACd,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,eAAe,CAAC;IACjC,QAAQ,EAAE,aAAa,CAAC;IACxB,aAAa,EAAE,eAAe,CAAC;CAChC;AAED,MAAM,WAAW,oBAAoB;IACnC,wCAAwC;IACxC,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,+CAA+C;IAC/C,MAAM,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxE;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;AAEvC;;;;;;GAMG;AACH,qBAAa,eAAe;IAC1B,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,OAAO,EAAE,UAAU,EAAE,CAAM;IAC3B,IAAI,UAAS;IACb,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,iBAAiB,CAAgE;IACzF,OAAO,CAAC,MAAM,CAAsD;IACpE,OAAO,CAAC,UAAU,CAA6C;gBAEnD,EAAE,SAAS,EAAE,UAAU,EAAE,SAAqB,EAAE,EAAE,sBAAsB;IASpF,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,GAAG,IAAI,UAAU,GAAG,IAAI,CAE3B;IACD,KAAK,IAAI,MAAM;IAGf,MAAM,IAAI,OAAO;IAGjB,6EAA6E;IAC7E,OAAO,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI;IAIzD,EAAE,CAAC,CAAC,SAAS,MAAM,WAAW,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAQnF,OAAO,CAAC,KAAK;IAOb;;;;OAIG;IACH,IAAI,CAAC,CAAC,GAAG,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,EAAE,EAAE,QAAe,EAAE,IAAW,EAAE,GAAU,EAAE,MAAc,EAAE,GAAE,YAAY,CAAC,CAAC,CAAM,GAAG,OAAO,CAAC,UAAU,CAAC;IAc1K,+FAA+F;IAC/F,GAAG,CAAC,IAAI,GAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,gBAAgB,CAAA;KAAO,GAAG,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;IAI7F,iGAAiG;IACjG,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,QAAe,EAAE,MAAc,EAAE,GAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,gBAAgB,CAAA;KAAO,GAAG,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;IAO7I;;;;;;OAMG;IACH,OAAO,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,QAAe,EAAE,IAAW,EAAE,GAAU,EAAE,MAAc,EAAE,GAAE,YAAY,CAAC,CAAC,CAAM,GAAG,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;IAmBrJ,gFAAgF;IAChF,OAAO,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,IAAW,EAAE,GAAU,EAAE,MAAc,EAAE,GAAE,YAAY,CAAC,CAAC,CAAM,GAAG,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;IAcpI;;;OAGG;IACH,OAAO,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,EAAE,IAAI,GAAE,YAAY,CAAC,CAAC,CAAM,GAAG,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;IAMpI,8FAA8F;IAC9F,MAAM,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,MAAc,EAAE,GAAE;QAAE,MAAM,CAAC,EAAE,gBAAgB,CAAA;KAAO,GAAG,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;IAU3G,+EAA+E;IAC/E,KAAK,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,MAAc,EAAE,GAAE;QAAE,MAAM,CAAC,EAAE,gBAAgB,CAAA;KAAO,GAAG,OAAO,CAAC,UAAU,EAAE,CAAC;IAW7G,mFAAmF;IACnF,mBAAmB,IAAI,oBAAoB,GAAG,IAAI;IAgClD,yEAAyE;IACzE,OAAO,IAAI,IAAI;IAoBf,OAAO,CAAC,QAAQ;IAMhB,mFAAmF;IACnF,OAAO,CAAC,IAAI;IAmBZ,OAAO,CAAC,MAAM;YAIA,aAAa;IAa3B,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,QAAQ;IAMhB,2EAA2E;IAC3E,OAAO,CAAC,OAAO;IAOf;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,IAAI;IAUZ;;;;OAIG;YACW,QAAQ;IAYtB;;;;;;OAMG;IACH,OAAO,CAAC,OAAO;YAKD,WAAW;IAOzB,uGAAuG;IACvG,OAAO,CAAC,OAAO;CAQhB"}
|
package/dist/navigation-stack.js
CHANGED
|
@@ -12,6 +12,8 @@ export class NavigationStack {
|
|
|
12
12
|
pageClass;
|
|
13
13
|
entries = [];
|
|
14
14
|
busy = false;
|
|
15
|
+
_destroyed = false;
|
|
16
|
+
_activeTransition = null;
|
|
15
17
|
_queue = [];
|
|
16
18
|
_listeners = new Map();
|
|
17
19
|
constructor({ container, transition, pageClass = 'sn-page' }) {
|
|
@@ -49,6 +51,8 @@ export class NavigationStack {
|
|
|
49
51
|
};
|
|
50
52
|
}
|
|
51
53
|
_emit(event, detail) {
|
|
54
|
+
if (this._destroyed)
|
|
55
|
+
return;
|
|
52
56
|
const set = this._listeners.get(event);
|
|
53
57
|
if (set)
|
|
54
58
|
set.forEach((fn) => fn(detail));
|
|
@@ -171,13 +175,19 @@ export class NavigationStack {
|
|
|
171
175
|
this._begin(lower, upper, 'interactive');
|
|
172
176
|
return {
|
|
173
177
|
update: (v) => {
|
|
178
|
+
if (this._destroyed)
|
|
179
|
+
return;
|
|
174
180
|
p = Math.min(1, Math.max(0, v));
|
|
175
181
|
this._apply(lower, upper, p);
|
|
176
182
|
},
|
|
177
183
|
finish: async ({ complete, velocity = 0 }) => {
|
|
184
|
+
if (this._destroyed)
|
|
185
|
+
return;
|
|
178
186
|
const remainingPx = (complete ? p : 1 - p) * this.width();
|
|
179
187
|
const { duration, ease } = this.transition.settle({ remainingPx, velocity });
|
|
180
188
|
await this._animate(lower, upper, p, complete ? 0 : 1, duration, ease);
|
|
189
|
+
if (this._destroyed)
|
|
190
|
+
return;
|
|
181
191
|
this._end(lower, upper, 'interactive');
|
|
182
192
|
if (complete) {
|
|
183
193
|
this.entries.pop();
|
|
@@ -191,7 +201,23 @@ export class NavigationStack {
|
|
|
191
201
|
},
|
|
192
202
|
};
|
|
193
203
|
}
|
|
204
|
+
/** Terminal: queued and subsequent navigation reject with AbortError. */
|
|
194
205
|
destroy() {
|
|
206
|
+
if (this._destroyed)
|
|
207
|
+
return;
|
|
208
|
+
this._destroyed = true;
|
|
209
|
+
this._listeners.clear();
|
|
210
|
+
for (const task of this._queue.splice(0))
|
|
211
|
+
task.cancel();
|
|
212
|
+
this.busy = false;
|
|
213
|
+
const active = this._activeTransition;
|
|
214
|
+
this._activeTransition = null;
|
|
215
|
+
if (active) {
|
|
216
|
+
this.transition.end?.(active.lower, active.upper);
|
|
217
|
+
// During a pop the outgoing page has already left entries.
|
|
218
|
+
if (!this.entries.includes(active.upper))
|
|
219
|
+
this._unmount(active.upper);
|
|
220
|
+
}
|
|
195
221
|
while (this.entries.length)
|
|
196
222
|
this._unmount(this.entries.pop());
|
|
197
223
|
this.container.classList.remove('sn-container', 'sn-busy');
|
|
@@ -200,12 +226,17 @@ export class NavigationStack {
|
|
|
200
226
|
}
|
|
201
227
|
// -------------------------------------------------------------- internals
|
|
202
228
|
_setBusy(v) {
|
|
229
|
+
if (this._destroyed)
|
|
230
|
+
return;
|
|
203
231
|
this.busy = v;
|
|
204
232
|
this.container.classList.toggle('sn-busy', v);
|
|
205
233
|
}
|
|
206
234
|
/** Serializes operations: while a transition runs, later calls wait their turn. */
|
|
207
235
|
_run(fn) {
|
|
208
236
|
return new Promise((resolve, reject) => {
|
|
237
|
+
const cancel = () => reject(new DOMException('NavigationStack has been destroyed', 'AbortError'));
|
|
238
|
+
if (this._destroyed)
|
|
239
|
+
return cancel();
|
|
209
240
|
const task = async () => {
|
|
210
241
|
this._setBusy(true);
|
|
211
242
|
try {
|
|
@@ -220,14 +251,14 @@ export class NavigationStack {
|
|
|
220
251
|
}
|
|
221
252
|
};
|
|
222
253
|
if (this.busy)
|
|
223
|
-
this._queue.push(task);
|
|
254
|
+
this._queue.push({ run: task, cancel });
|
|
224
255
|
else
|
|
225
256
|
task();
|
|
226
257
|
});
|
|
227
258
|
}
|
|
228
259
|
_drain() {
|
|
229
|
-
if (!this.busy && this._queue.length)
|
|
230
|
-
this._queue.shift()();
|
|
260
|
+
if (!this._destroyed && !this.busy && this._queue.length)
|
|
261
|
+
this._queue.shift().run();
|
|
231
262
|
}
|
|
232
263
|
async _popRevealing(depth, animated, source) {
|
|
233
264
|
const upper = this.entries.pop(); // the visible page: it animates out
|
|
@@ -236,6 +267,8 @@ export class NavigationStack {
|
|
|
236
267
|
removed.push(this._unmount(this.entries.pop())); // intermediate pages: removed without animation
|
|
237
268
|
const lower = this.top;
|
|
238
269
|
await this._transition(lower, upper, 1, 0, animated, 'pop');
|
|
270
|
+
if (this._destroyed)
|
|
271
|
+
return upper;
|
|
239
272
|
removed.push(this._unmount(upper));
|
|
240
273
|
this._settle();
|
|
241
274
|
this._emit('pop', { entry: upper, removed, entries: this.entries.slice(), source });
|
|
@@ -269,10 +302,13 @@ export class NavigationStack {
|
|
|
269
302
|
* `prefers-reduced-motion` reduces every phase to.
|
|
270
303
|
*/
|
|
271
304
|
_timing(duration, ease) {
|
|
305
|
+
if (this._destroyed)
|
|
306
|
+
return;
|
|
272
307
|
this.container.style.setProperty('--sn-t', cssDuration(duration));
|
|
273
308
|
this.container.style.setProperty('--sn-e', cssEasing(ease));
|
|
274
309
|
}
|
|
275
310
|
_begin(lower, upper, kind) {
|
|
311
|
+
this._activeTransition = { lower, upper };
|
|
276
312
|
this._timing(0);
|
|
277
313
|
lower?.el.classList.add('sn-page-visible', 'sn-page-lower');
|
|
278
314
|
upper.el.classList.add('sn-page-visible', 'sn-page-upper');
|
|
@@ -284,6 +320,9 @@ export class NavigationStack {
|
|
|
284
320
|
this._emit('progress', { lower, upper, p });
|
|
285
321
|
}
|
|
286
322
|
_end(lower, upper, kind) {
|
|
323
|
+
if (this._destroyed)
|
|
324
|
+
return;
|
|
325
|
+
this._activeTransition = null;
|
|
287
326
|
this._timing(0);
|
|
288
327
|
upper.el.classList.remove('sn-page-upper');
|
|
289
328
|
lower?.el.classList.remove('sn-page-lower');
|