@stacknav/core 0.2.0 → 0.3.1
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 +72 -17
- package/dist/animate.d.ts +36 -3
- package/dist/animate.d.ts.map +1 -1
- package/dist/animate.js +78 -15
- package/dist/animate.js.map +1 -1
- package/dist/edge-pan-gesture.d.ts +3 -0
- package/dist/edge-pan-gesture.d.ts.map +1 -1
- package/dist/edge-pan-gesture.js +35 -8
- package/dist/edge-pan-gesture.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/ios-transition.d.ts +13 -2
- package/dist/ios-transition.d.ts.map +1 -1
- package/dist/ios-transition.js +35 -22
- package/dist/ios-transition.js.map +1 -1
- package/dist/navigation-stack.d.ts +29 -1
- package/dist/navigation-stack.d.ts.map +1 -1
- package/dist/navigation-stack.js +53 -11
- package/dist/navigation-stack.js.map +1 -1
- package/dist/stacknav.css +38 -1
- package/dist/styles.d.ts +33 -7
- package/dist/styles.d.ts.map +1 -1
- package/dist/styles.js +42 -9
- package/dist/styles.js.map +1 -1
- package/package.json +1 -1
- package/src/animate.ts +85 -16
- package/src/edge-pan-gesture.ts +36 -8
- package/src/index.ts +1 -1
- package/src/ios-transition.ts +42 -25
- package/src/navigation-stack.ts +63 -10
- package/src/styles.ts +42 -9
package/README.md
CHANGED
|
@@ -11,6 +11,9 @@ styling stay the app's own; the engine only moves them.
|
|
|
11
11
|
- **Scroll and state are preserved.** Pages beneath the top stay mounted and
|
|
12
12
|
hidden. Only `transform` is written, so scroll offsets, form state and focus
|
|
13
13
|
survive.
|
|
14
|
+
- **CSS runs the animation.** The engine writes where the pages should end up
|
|
15
|
+
and hands the browser that phase's duration and curve; the frames in between
|
|
16
|
+
are the compositor's, not the main thread's.
|
|
14
17
|
- **Direction resolution** for router-driven apps: composable strategies decide
|
|
15
18
|
push / pop / replace.
|
|
16
19
|
- **Browser back** for apps without a router, through an optional history
|
|
@@ -19,8 +22,8 @@ styling stay the app's own; the engine only moves them.
|
|
|
19
22
|
- **Tunable from CSS.** Duration, curve, parallax, dim and shadow are custom
|
|
20
23
|
properties on the container, so a media query or theme class can retune the
|
|
21
24
|
animation without touching the app's JS.
|
|
22
|
-
- **Custom chrome.**
|
|
23
|
-
|
|
25
|
+
- **Custom chrome.** Move a header or a tab bar in step with the pages from CSS,
|
|
26
|
+
or subscribe to `progress` events and drive it from the same `p`.
|
|
24
27
|
- No dependencies. Plain ES modules with type declarations.
|
|
25
28
|
|
|
26
29
|
## Use
|
|
@@ -45,6 +48,18 @@ The container needs a height; it becomes `position: relative; overflow: hidden`.
|
|
|
45
48
|
Each page is an element you create. The stack gives it
|
|
46
49
|
`position: absolute; inset: 0; overflow-y: auto` and manages its visibility.
|
|
47
50
|
|
|
51
|
+
## How it moves
|
|
52
|
+
|
|
53
|
+
The engine does not animate anything. For each phase it writes two custom properties on the container — `--sn-t` and `--sn-e`, the duration and curve in force — and then writes where the pages should end up. CSS does the rest:
|
|
54
|
+
|
|
55
|
+
| Phase | `--sn-t` | What is written |
|
|
56
|
+
| --- | --- | --- |
|
|
57
|
+
| push / pop | the transition's `duration` | the far endpoint, once |
|
|
58
|
+
| a finger on the screen | `0s` | the current `p`, per pointer move |
|
|
59
|
+
| the release | `settle()`'s duration | the endpoint it is settling to, once |
|
|
60
|
+
|
|
61
|
+
So a 500 ms push costs about a dozen style writes in total rather than one per page per frame, the travel is a percentage of the page (no layout is ever measured), and `transform` and `opacity` stay on the compositor — a busy main thread no longer stutters the transition. `prefers-reduced-motion` is a media query in the stylesheet, so it wins even over a duration the engine wrote.
|
|
62
|
+
|
|
48
63
|
## API
|
|
49
64
|
|
|
50
65
|
### `createIOSStack({ container, transition?, gesture? })`
|
|
@@ -164,7 +179,13 @@ variable name.
|
|
|
164
179
|
A transition is just
|
|
165
180
|
`{ duration, ease, settle(), begin?(), apply(lower, upper, p), end?() }`, so you
|
|
166
181
|
can write a different one (a fade, a vertical sheet) and pass it to
|
|
167
|
-
`new NavigationStack({ container, transition })`. `
|
|
182
|
+
`new NavigationStack({ container, transition })`. `apply` is a declarative
|
|
183
|
+
write, not a frame: the stack calls it once at each end of a phase and lets CSS
|
|
184
|
+
interpolate between them, so keep it to `transform` and `opacity` and the
|
|
185
|
+
browser keeps it off the main thread. `ease` is sampled to report `progress`,
|
|
186
|
+
but its `css` property is what drives the pixels — `cubicBezier()` and
|
|
187
|
+
`parseEasing()` set one, and a bare `(t) => number` of your own does not, so
|
|
188
|
+
such a curve runs `linear` on screen unless you give it a `css` property too. `cssVars()` and the
|
|
168
189
|
`parseTime` / `parseNumber` / `parseRatio` / `parseEasing` helpers are exported
|
|
169
190
|
so a custom transition can read variables the same way. Each returns `undefined`
|
|
170
191
|
rather than `NaN` for anything it cannot parse, so `?? yourDefault` is all the
|
|
@@ -184,6 +205,12 @@ handling a value needs.
|
|
|
184
205
|
|
|
185
206
|
Call `gesture.refresh()` after changing options at runtime.
|
|
186
207
|
|
|
208
|
+
The leading edge is whichever edge the container reads from, so in a
|
|
209
|
+
right-to-left container the strip sits on the right and back is a drag to the
|
|
210
|
+
left. The recognizer and the transition both take that from `--sn-dir`, which
|
|
211
|
+
the stylesheet sets under `:dir(rtl)`, falling back to the container's computed
|
|
212
|
+
`direction`; set `--sn-dir: -1` yourself to flip both without an RTL document.
|
|
213
|
+
|
|
187
214
|
### `attachBrowserHistory(stack, { key = "snDepth", animateHistoryPop, onForward })`
|
|
188
215
|
|
|
189
216
|
For apps without a router. Mirrors stack depth into `history.state`. Returns a
|
|
@@ -191,14 +218,29 @@ detach function. `animateHistoryPop` defaults to `false` on iOS browsers and
|
|
|
191
218
|
`true` elsewhere. Forward navigation has no page to show, so by default it
|
|
192
219
|
bounces back; pass `onForward(targetDepth)` to re-push something instead.
|
|
193
220
|
|
|
221
|
+
### Your own chrome
|
|
222
|
+
|
|
223
|
+
A header or tab bar that should move with the pages can read the same state the engine gives CSS — `--sn-t` and `--sn-e` on the container, and the `sn-page-upper` / `sn-page-lower` classes on the two pages taking part — and it will run on the compositor alongside them:
|
|
224
|
+
|
|
225
|
+
```css
|
|
226
|
+
.my-header { transition: opacity var(--sn-t) var(--sn-e); }
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
For chrome that needs the number itself, `progress` still fires with `(lower, upper, p)`. It now costs a frame loop, so the engine only runs one while something is subscribed.
|
|
230
|
+
|
|
194
231
|
### Styles
|
|
195
232
|
|
|
196
|
-
`injectStyles()` inserts the engine's
|
|
233
|
+
`injectStyles()` inserts the engine's rules once. `STACKNAV_CSS` is the same
|
|
197
234
|
CSS as a string, minified because it rides along in your JS bundle, and
|
|
198
|
-
`@stacknav/core/stacknav.css` is the same CSS as a readable file.
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
235
|
+
`@stacknav/core/stacknav.css` is the same CSS as a readable file.
|
|
236
|
+
|
|
237
|
+
It covers layout and the motion itself — the `transition` rules the pages run
|
|
238
|
+
on — and declares none of the tuning variables above: they are listed in a
|
|
239
|
+
comment in the file rather than set, so that leaving one out means "use the
|
|
240
|
+
default". While a phase is in flight the engine writes two properties of its own
|
|
241
|
+
on the container, `--sn-t` and `--sn-e`, and marks the two pages taking part
|
|
242
|
+
`sn-page-upper` and `sn-page-lower`. Anything of yours that should move with
|
|
243
|
+
them can transition off the same four.
|
|
202
244
|
|
|
203
245
|
## Footprint
|
|
204
246
|
|
|
@@ -206,30 +248,43 @@ Plain ES modules, no dependencies, no work at module load: a bundler keeps only
|
|
|
206
248
|
|
|
207
249
|
| You import | Costs |
|
|
208
250
|
| --- | --- |
|
|
209
|
-
| `createIOSStack` (stack, iOS look, swipe back) | ~4.
|
|
210
|
-
| `NavigationStack` with your own transition | ~2.
|
|
251
|
+
| `createIOSStack` (stack, iOS look, swipe back) | ~4.5 kB |
|
|
252
|
+
| `NavigationStack` with your own transition | ~2.4 kB |
|
|
211
253
|
| the direction strategies | ~0.6 kB |
|
|
212
|
-
| `attachBrowserHistory` | ~0.
|
|
213
|
-
| `injectStyles` | ~0.
|
|
214
|
-
| everything | ~5.
|
|
254
|
+
| `attachBrowserHistory` | ~0.5 kB |
|
|
255
|
+
| `injectStyles` | ~0.5 kB |
|
|
256
|
+
| everything | ~5.9 kB |
|
|
215
257
|
|
|
216
258
|
## Develop
|
|
217
259
|
|
|
218
260
|
```sh
|
|
219
|
-
pnpm test # node:test with a
|
|
261
|
+
pnpm test # node:test with a small DOM stub, no browser; includes the tree-shaking checks
|
|
220
262
|
pnpm build # tsc → dist/, plus dist/stacknav.css
|
|
221
263
|
pnpm size # what each entry point costs, minified + gzipped (after a build)
|
|
222
264
|
```
|
|
223
265
|
|
|
224
266
|
```
|
|
225
267
|
src/
|
|
226
|
-
animate.ts
|
|
268
|
+
animate.ts curves CSS and JS can both read, the tween, the waits
|
|
227
269
|
css-vars.ts reading and parsing the engine's custom properties
|
|
228
270
|
navigation-stack.ts the stack: mounting, ordering, transition lifecycle, queueing
|
|
229
|
-
ios-transition.ts the look:
|
|
271
|
+
ios-transition.ts the look: the endpoints, the settle timing, the variables
|
|
230
272
|
edge-pan-gesture.ts pointer-event recognizer that drives the interactive pop
|
|
231
273
|
direction.ts push / pop / replace strategies and the resolver
|
|
232
274
|
history-adapter.ts history.state mirroring for apps without a router
|
|
233
|
-
styles.ts the CSS the engine needs, and injectStyles()
|
|
275
|
+
styles.ts the CSS the engine needs, motion included, and injectStyles()
|
|
234
276
|
index.ts exports + createIOSStack()
|
|
235
277
|
```
|
|
278
|
+
|
|
279
|
+
### Animation implementation notes
|
|
280
|
+
|
|
281
|
+
Timed transforms and opacity run as CSS transitions. Pointer handling, velocity
|
|
282
|
+
sampling, distance-dependent settle timing, and completion promises remain in
|
|
283
|
+
JavaScript. A `progress` subscriber also needs a JavaScript frame loop; omit
|
|
284
|
+
that subscription when CSS can drive your page chrome.
|
|
285
|
+
|
|
286
|
+
The browser resolves `--sn-dim-color` and `--sn-shadow` directly, so theme changes
|
|
287
|
+
to these variables take effect during a transition without `refresh()`. The JS
|
|
288
|
+
options remain their fallbacks. `resolved` remains a snapshot taken by
|
|
289
|
+
`begin()` or `refresh()`; numeric options still use that snapshot, including
|
|
290
|
+
support for percentage ratios and bare millisecond values.
|
package/dist/animate.d.ts
CHANGED
|
@@ -1,10 +1,23 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* An easing curve. Callable, so the engine can sample it; `css` is the same
|
|
3
|
+
* curve spelled for `transition-timing-function`, which is what actually
|
|
4
|
+
* drives the pixels. A plain `(t) => number` is still a valid easing, it just
|
|
5
|
+
* falls back to `linear` on the CSS side.
|
|
6
|
+
*/
|
|
7
|
+
export interface Easing {
|
|
8
|
+
(t: number): number;
|
|
9
|
+
readonly css?: string;
|
|
10
|
+
}
|
|
2
11
|
export declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): Easing;
|
|
3
12
|
export declare const easings: {
|
|
4
13
|
linear: Easing;
|
|
5
14
|
ios: Easing;
|
|
6
15
|
easeOut: Easing;
|
|
7
16
|
};
|
|
17
|
+
/** How an easing should be spelled for CSS. A curve with no spelling runs linearly. */
|
|
18
|
+
export declare const cssEasing: (ease: Easing | undefined) => string;
|
|
19
|
+
/** How a duration should be spelled for CSS. */
|
|
20
|
+
export declare const cssDuration: (ms: number) => string;
|
|
8
21
|
export interface TweenOptions {
|
|
9
22
|
from: number;
|
|
10
23
|
to: number;
|
|
@@ -18,9 +31,29 @@ export type CancellableTween = Promise<void> & {
|
|
|
18
31
|
/**
|
|
19
32
|
* Animates a number from `from` to `to` over `duration` ms, calling `onUpdate`
|
|
20
33
|
* every frame. Returns a promise that resolves when the tween is done;
|
|
21
|
-
* `promise.cancel()` stops it early. A duration of
|
|
22
|
-
* to `to`.
|
|
34
|
+
* `promise.cancel()` stops it early and resolves the promise. A duration of
|
|
35
|
+
* 0 or less jumps straight to `to`.
|
|
36
|
+
*
|
|
37
|
+
* The engine does not use this to move pages, CSS does that. It uses it to
|
|
38
|
+
* report `progress` to listeners, and only while someone is listening.
|
|
23
39
|
*/
|
|
24
40
|
export declare function tween({ from, to, duration, ease, onUpdate }: TweenOptions): CancellableTween;
|
|
41
|
+
/**
|
|
42
|
+
* Commits the styles written so far, so the *next* write is seen as a change
|
|
43
|
+
* and starts a CSS transition from here instead of being collapsed into it.
|
|
44
|
+
* One forced layout per transition, in place of a frame of JavaScript per
|
|
45
|
+
* frame of animation.
|
|
46
|
+
*/
|
|
47
|
+
export declare function commitStyles(el: HTMLElement): void;
|
|
48
|
+
/**
|
|
49
|
+
* Resolves once the CSS transitions of `properties` on these elements have
|
|
50
|
+
* finished. Nothing running resolves immediately: no transition started, a
|
|
51
|
+
* zero duration, `prefers-reduced-motion`, an element that is not being
|
|
52
|
+
* rendered. Interrupted animations reject, which counts as finished.
|
|
53
|
+
*
|
|
54
|
+
* Only the named properties are waited on, so an app is free to keep its own
|
|
55
|
+
* animation running on a page without stalling the stack.
|
|
56
|
+
*/
|
|
57
|
+
export declare function animationsFinished(els: Array<HTMLElement | null | undefined>, properties?: readonly string[]): Promise<void>;
|
|
25
58
|
export declare const prefersReducedMotion: () => boolean;
|
|
26
59
|
//# sourceMappingURL=animate.d.ts.map
|
package/dist/animate.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../src/animate.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../src/animate.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,MAAM,WAAW,MAAM;IACrB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CA8BlF;AAKD,eAAO,MAAM,OAAO,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAInE,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,GAAG,SAAS,KAAG,MAA+B,CAAC;AAErF,gDAAgD;AAChD,eAAO,MAAM,WAAW,GAAI,IAAI,MAAM,KAAG,MAAqC,CAAC;AAE/E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG;IAAE,MAAM,IAAI,IAAI,CAAA;CAAE,CAAC;AAElE;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAqB,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG,gBAAgB,CA+B7G;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAElD;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,UAAU,GAAE,SAAS,MAAM,EAA6B,GAAG,OAAO,CAAC,IAAI,CAAC,CAUtJ;AAED,eAAO,MAAM,oBAAoB,QAAO,OACoD,CAAC"}
|
package/dist/animate.js
CHANGED
|
@@ -1,44 +1,73 @@
|
|
|
1
|
-
// A small animation toolkit
|
|
2
|
-
//
|
|
1
|
+
// A small animation toolkit. The pages themselves are moved by CSS (see
|
|
2
|
+
// styles.ts), so what is here is the arithmetic CSS cannot do for the engine:
|
|
3
|
+
// a curve it can both hand to CSS and sample in JS, the spellings CSS wants,
|
|
4
|
+
// a cancellable tween used only to report progress, and the two helpers that
|
|
5
|
+
// hand a run over to the browser.
|
|
3
6
|
export function cubicBezier(x1, y1, x2, y2) {
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
|
|
7
|
+
// The coefficients are constant for the lifetime of a curve.
|
|
8
|
+
const ax = 1 - 3 * x2 + 3 * x1, bx = 3 * x2 - 6 * x1, cx = 3 * x1;
|
|
9
|
+
const ay = 1 - 3 * y2 + 3 * y1, by = 3 * y2 - 6 * y1, cy = 3 * y1;
|
|
10
|
+
const sampleX = (t) => ((ax * t + bx) * t + cx) * t;
|
|
11
|
+
const sampleY = (t) => ((ay * t + by) * t + cy) * t;
|
|
12
|
+
const f = (x) => {
|
|
10
13
|
if (x <= 0)
|
|
11
14
|
return 0;
|
|
12
15
|
if (x >= 1)
|
|
13
16
|
return 1;
|
|
14
17
|
let t = x;
|
|
18
|
+
// Newton converges quickly for ordinary curves. Flat slopes can send it
|
|
19
|
+
// outside [0, 1], so fall back to a bounded search when it fails.
|
|
15
20
|
for (let i = 0; i < 8; i++) {
|
|
16
|
-
const
|
|
17
|
-
if (
|
|
21
|
+
const error = sampleX(t) - x;
|
|
22
|
+
if (Math.abs(error) < 1e-8)
|
|
23
|
+
return sampleY(t);
|
|
24
|
+
const slope = (3 * ax * t + 2 * bx) * t + cx;
|
|
25
|
+
if (Math.abs(slope) < 1e-8)
|
|
18
26
|
break;
|
|
19
|
-
|
|
27
|
+
const next = t - error / slope;
|
|
28
|
+
if (next < 0 || next > 1)
|
|
29
|
+
break;
|
|
30
|
+
t = next;
|
|
31
|
+
}
|
|
32
|
+
let lo = 0, hi = 1;
|
|
33
|
+
for (let i = 0; i < 30; i++) {
|
|
34
|
+
t = (lo + hi) / 2;
|
|
35
|
+
if (sampleX(t) < x)
|
|
36
|
+
lo = t;
|
|
37
|
+
else
|
|
38
|
+
hi = t;
|
|
20
39
|
}
|
|
21
|
-
return
|
|
40
|
+
return sampleY(t);
|
|
22
41
|
};
|
|
42
|
+
return Object.assign(f, { css: `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})` });
|
|
23
43
|
}
|
|
24
44
|
// `#__PURE__` marks the module-load calls as droppable, so a bundler that does
|
|
25
45
|
// not honour the package's `sideEffects` flag can still leave this module out
|
|
26
46
|
// when nothing here is imported.
|
|
27
47
|
export const easings = {
|
|
28
|
-
linear: (t) => t,
|
|
48
|
+
linear: /*#__PURE__*/ Object.assign((t) => t, { css: 'linear' }),
|
|
29
49
|
ios: /*#__PURE__*/ cubicBezier(0.32, 0.72, 0, 1), // the common approximation of UIKit's navigation curve
|
|
30
50
|
easeOut: /*#__PURE__*/ cubicBezier(0.2, 0.8, 0.2, 1),
|
|
31
51
|
};
|
|
52
|
+
/** How an easing should be spelled for CSS. A curve with no spelling runs linearly. */
|
|
53
|
+
export const cssEasing = (ease) => ease?.css ?? 'linear';
|
|
54
|
+
/** How a duration should be spelled for CSS. */
|
|
55
|
+
export const cssDuration = (ms) => (ms > 0 ? `${ms}ms` : '0s');
|
|
32
56
|
/**
|
|
33
57
|
* Animates a number from `from` to `to` over `duration` ms, calling `onUpdate`
|
|
34
58
|
* every frame. Returns a promise that resolves when the tween is done;
|
|
35
|
-
* `promise.cancel()` stops it early. A duration of
|
|
36
|
-
* to `to`.
|
|
59
|
+
* `promise.cancel()` stops it early and resolves the promise. A duration of
|
|
60
|
+
* 0 or less jumps straight to `to`.
|
|
61
|
+
*
|
|
62
|
+
* The engine does not use this to move pages, CSS does that. It uses it to
|
|
63
|
+
* report `progress` to listeners, and only while someone is listening.
|
|
37
64
|
*/
|
|
38
65
|
export function tween({ from, to, duration, ease = easings.linear, onUpdate }) {
|
|
39
66
|
let raf = 0;
|
|
40
67
|
let done = false;
|
|
68
|
+
let finish;
|
|
41
69
|
const promise = new Promise((resolve) => {
|
|
70
|
+
finish = resolve;
|
|
42
71
|
if (duration <= 0) {
|
|
43
72
|
onUpdate(to);
|
|
44
73
|
done = true;
|
|
@@ -50,6 +79,8 @@ export function tween({ from, to, duration, ease = easings.linear, onUpdate }) {
|
|
|
50
79
|
return;
|
|
51
80
|
const k = Math.min(1, (now - t0) / duration);
|
|
52
81
|
onUpdate(from + (to - from) * ease(k));
|
|
82
|
+
if (done)
|
|
83
|
+
return;
|
|
53
84
|
if (k < 1)
|
|
54
85
|
raf = requestAnimationFrame(step);
|
|
55
86
|
else {
|
|
@@ -62,8 +93,40 @@ export function tween({ from, to, duration, ease = easings.linear, onUpdate }) {
|
|
|
62
93
|
promise.cancel = () => {
|
|
63
94
|
done = true;
|
|
64
95
|
cancelAnimationFrame(raf);
|
|
96
|
+
finish();
|
|
65
97
|
};
|
|
66
98
|
return promise;
|
|
67
99
|
}
|
|
100
|
+
/**
|
|
101
|
+
* Commits the styles written so far, so the *next* write is seen as a change
|
|
102
|
+
* and starts a CSS transition from here instead of being collapsed into it.
|
|
103
|
+
* One forced layout per transition, in place of a frame of JavaScript per
|
|
104
|
+
* frame of animation.
|
|
105
|
+
*/
|
|
106
|
+
export function commitStyles(el) {
|
|
107
|
+
void el.offsetWidth;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Resolves once the CSS transitions of `properties` on these elements have
|
|
111
|
+
* finished. Nothing running resolves immediately: no transition started, a
|
|
112
|
+
* zero duration, `prefers-reduced-motion`, an element that is not being
|
|
113
|
+
* rendered. Interrupted animations reject, which counts as finished.
|
|
114
|
+
*
|
|
115
|
+
* Only the named properties are waited on, so an app is free to keep its own
|
|
116
|
+
* animation running on a page without stalling the stack.
|
|
117
|
+
*/
|
|
118
|
+
export function animationsFinished(els, properties = ['transform', 'opacity']) {
|
|
119
|
+
const running = [];
|
|
120
|
+
for (const el of els) {
|
|
121
|
+
if (typeof el?.getAnimations !== 'function')
|
|
122
|
+
continue;
|
|
123
|
+
for (const animation of el.getAnimations()) {
|
|
124
|
+
const property = animation.transitionProperty;
|
|
125
|
+
if (property && properties.includes(property))
|
|
126
|
+
running.push(animation.finished.catch(() => { }));
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
return running.length ? Promise.all(running).then(() => { }) : Promise.resolve();
|
|
130
|
+
}
|
|
68
131
|
export const prefersReducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
69
132
|
//# sourceMappingURL=animate.js.map
|
package/dist/animate.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate.js","sourceRoot":"","sources":["../src/animate.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,
|
|
1
|
+
{"version":3,"file":"animate.js","sourceRoot":"","sources":["../src/animate.ts"],"names":[],"mappings":"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"}
|
|
@@ -28,6 +28,9 @@ export interface EdgePanGesture {
|
|
|
28
28
|
* interactive pop from it. Built on pointer events, so it handles both mouse
|
|
29
29
|
* and touch. Vertical movement early in the gesture hands the touch back to
|
|
30
30
|
* native scrolling.
|
|
31
|
+
*
|
|
32
|
+
* "Leading" is whichever edge the container reads from, so in a right-to-left
|
|
33
|
+
* container the strip sits on the right and back is a drag to the left.
|
|
31
34
|
*/
|
|
32
35
|
export declare function createEdgePanGesture(options?: Partial<EdgePanGestureOptions>): EdgePanGesture;
|
|
33
36
|
//# sourceMappingURL=edge-pan-gesture.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"edge-pan-gesture.d.ts","sourceRoot":"","sources":["../src/edge-pan-gesture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAwB,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEnF,MAAM,WAAW,qBAAqB;IACpC,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kFAAkF;IAClF,gBAAgB,EAAE,MAAM,CAAC;IACzB,oFAAoF;IACpF,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,qBAAqB,CAAC;IACxC,+EAA+E;IAC/E,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,CAAC,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB;
|
|
1
|
+
{"version":3,"file":"edge-pan-gesture.d.ts","sourceRoot":"","sources":["../src/edge-pan-gesture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAwB,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEnF,MAAM,WAAW,qBAAqB;IACpC,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kFAAkF;IAClF,gBAAgB,EAAE,MAAM,CAAC;IACzB,oFAAoF;IACpF,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,qBAAqB,CAAC;IACxC,+EAA+E;IAC/E,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,CAAC,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB;AAcD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,GAAE,OAAO,CAAC,qBAAqB,CAAM,GAAG,cAAc,CA4IjG"}
|
package/dist/edge-pan-gesture.js
CHANGED
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
* interactive pop from it. Built on pointer events, so it handles both mouse
|
|
4
4
|
* and touch. Vertical movement early in the gesture hands the touch back to
|
|
5
5
|
* native scrolling.
|
|
6
|
+
*
|
|
7
|
+
* "Leading" is whichever edge the container reads from, so in a right-to-left
|
|
8
|
+
* container the strip sits on the right and back is a drag to the left.
|
|
6
9
|
*/
|
|
7
10
|
export function createEdgePanGesture(options = {}) {
|
|
8
11
|
const o = {
|
|
@@ -18,6 +21,21 @@ export function createEdgePanGesture(options = {}) {
|
|
|
18
21
|
};
|
|
19
22
|
let stack;
|
|
20
23
|
let strip = null;
|
|
24
|
+
/**
|
|
25
|
+
* Which way forward is, read the same way the pages read it: `--sn-dir` when
|
|
26
|
+
* the stylesheet sets it, the container's reading direction otherwise. Taking
|
|
27
|
+
* it from one place is what keeps the drag and the transition from disagreeing
|
|
28
|
+
* about which edge is the back edge.
|
|
29
|
+
*/
|
|
30
|
+
const direction = () => {
|
|
31
|
+
const style = typeof getComputedStyle === 'function' ? getComputedStyle(stack.container) : null;
|
|
32
|
+
const declared = Number(style?.getPropertyValue('--sn-dir'));
|
|
33
|
+
if (declared < 0)
|
|
34
|
+
return -1;
|
|
35
|
+
if (declared > 0)
|
|
36
|
+
return 1;
|
|
37
|
+
return style?.direction === 'rtl' ? -1 : 1;
|
|
38
|
+
};
|
|
21
39
|
let drag = null;
|
|
22
40
|
let suppressClick = false;
|
|
23
41
|
let offs = [];
|
|
@@ -26,14 +44,16 @@ export function createEdgePanGesture(options = {}) {
|
|
|
26
44
|
return;
|
|
27
45
|
if (ev.pointerType === 'mouse' && ev.button !== 0)
|
|
28
46
|
return;
|
|
29
|
-
if (
|
|
47
|
+
if (!o.anywhere && ev.target !== strip)
|
|
30
48
|
return;
|
|
31
|
-
drag = { id: ev.pointerId, target: ev.currentTarget, x0: ev.clientX, y0: ev.clientY, handle: null, p: 1, samples: [[ev.clientX, performance.now()]] };
|
|
49
|
+
drag = { id: ev.pointerId, target: ev.currentTarget, x0: ev.clientX, y0: ev.clientY, dir: direction(), handle: null, p: 1, samples: [[ev.clientX, performance.now()]] };
|
|
32
50
|
};
|
|
33
51
|
const onMove = (ev) => {
|
|
34
52
|
if (!drag || ev.pointerId !== drag.id)
|
|
35
53
|
return;
|
|
36
|
-
|
|
54
|
+
// Signed so that "forward along the drag" is always positive, whichever
|
|
55
|
+
// edge the container calls leading.
|
|
56
|
+
const dx = (ev.clientX - drag.x0) * drag.dir;
|
|
37
57
|
const dy = ev.clientY - drag.y0;
|
|
38
58
|
if (!drag.handle) {
|
|
39
59
|
if (Math.abs(dy) > o.verticalCancelSlop && Math.abs(dy) > Math.abs(dx)) {
|
|
@@ -71,7 +91,7 @@ export function createEdgePanGesture(options = {}) {
|
|
|
71
91
|
const s = d.samples;
|
|
72
92
|
const [x1, t1] = s[0];
|
|
73
93
|
const [x2, t2] = s[s.length - 1];
|
|
74
|
-
const velocity = t2 > t1 ? ((x2 - x1) / (t2 - t1)) * 1000 : 0;
|
|
94
|
+
const velocity = (t2 > t1 ? ((x2 - x1) / (t2 - t1)) * 1000 : 0) * d.dir;
|
|
75
95
|
const cancelled = ev.type === 'pointercancel';
|
|
76
96
|
const complete = !cancelled && (velocity > o.completeVelocity || (d.p < 1 - o.completeThreshold && velocity > o.cancelVelocity));
|
|
77
97
|
// The click that follows a drag release must not activate whatever is under the pointer.
|
|
@@ -90,11 +110,17 @@ export function createEdgePanGesture(options = {}) {
|
|
|
90
110
|
const EVENTS = { pointerdown: onDown, pointermove: onMove, pointerup: onUp, pointercancel: onUp };
|
|
91
111
|
const listen = (el) => Object.entries(EVENTS).forEach(([k, f]) => el.addEventListener(k, f));
|
|
92
112
|
const unlisten = (el) => Object.entries(EVENTS).forEach(([k, f]) => el.removeEventListener(k, f));
|
|
113
|
+
/**
|
|
114
|
+
* Whether the strip is shown at all is a CSS question — the stylesheet hides
|
|
115
|
+
* it when there is nothing to go back to, or when the whole page is the
|
|
116
|
+
* target — so this only has to say what is true.
|
|
117
|
+
*/
|
|
93
118
|
const refresh = () => {
|
|
94
119
|
if (!strip)
|
|
95
120
|
return;
|
|
96
121
|
strip.style.width = o.edgeWidth + 'px';
|
|
97
|
-
|
|
122
|
+
stack.container.classList.toggle('sn-anywhere', o.anywhere);
|
|
123
|
+
stack.container.classList.toggle('sn-can-pop', stack.entries.length > 1);
|
|
98
124
|
};
|
|
99
125
|
const gesture = {
|
|
100
126
|
options: o,
|
|
@@ -102,10 +128,11 @@ export function createEdgePanGesture(options = {}) {
|
|
|
102
128
|
attach(s) {
|
|
103
129
|
stack = s;
|
|
104
130
|
strip = document.createElement('div');
|
|
131
|
+
strip.className = 'sn-edge';
|
|
105
132
|
strip.setAttribute('aria-hidden', 'true');
|
|
106
|
-
Object.assign(strip.style, { position: 'absolute', left: '0', top: '0', bottom: '0', zIndex: '10', touchAction: 'none' });
|
|
107
133
|
stack.container.append(strip);
|
|
108
|
-
|
|
134
|
+
// Pointer events from the strip bubble here; one listener per event
|
|
135
|
+
// avoids applying each move and recording its velocity sample twice.
|
|
109
136
|
listen(stack.container);
|
|
110
137
|
stack.container.addEventListener('click', onClick, true);
|
|
111
138
|
offs = ['push', 'pop', 'replace', 'reset'].map((e) => stack.on(e, refresh));
|
|
@@ -116,9 +143,9 @@ export function createEdgePanGesture(options = {}) {
|
|
|
116
143
|
if (!strip)
|
|
117
144
|
return;
|
|
118
145
|
offs.forEach((f) => f());
|
|
119
|
-
unlisten(strip);
|
|
120
146
|
unlisten(stack.container);
|
|
121
147
|
stack.container.removeEventListener('click', onClick, true);
|
|
148
|
+
stack.container.classList.remove('sn-anywhere', 'sn-can-pop');
|
|
122
149
|
strip.remove();
|
|
123
150
|
strip = null;
|
|
124
151
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"edge-pan-gesture.js","sourceRoot":"","sources":["../src/edge-pan-gesture.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"edge-pan-gesture.js","sourceRoot":"","sources":["../src/edge-pan-gesture.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export { createEdgePanGesture } from './edge-pan-gesture.ts';
|
|
|
8
8
|
export type { EdgePanGesture, EdgePanGestureOptions } from './edge-pan-gesture.ts';
|
|
9
9
|
export { attachBrowserHistory, isIOSBrowser } from './history-adapter.ts';
|
|
10
10
|
export type { BrowserHistoryOptions } from './history-adapter.ts';
|
|
11
|
-
export { cubicBezier, easings, tween, prefersReducedMotion } from './animate.ts';
|
|
11
|
+
export { cubicBezier, easings, cssEasing, cssDuration, tween, commitStyles, animationsFinished, prefersReducedMotion } from './animate.ts';
|
|
12
12
|
export type { Easing, TweenOptions, CancellableTween } from './animate.ts';
|
|
13
13
|
export { resolveDirection, createDirectionResolver, defaultStrategies, fromHint, fromHistory, fromStack, fromLevel, fromTree, always, segmentsOf, } from './direction.ts';
|
|
14
14
|
export type { Direction, DirectionOpinion, DirectionStrategy, DirectionResolver, NavigationContext, NavigationTrigger, RouteRef, LevelOptions, TreeOptions, } from './direction.ts';
|
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,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnF,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,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,uBAAuB,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC1E,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;
|
|
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,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnF,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,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,uBAAuB,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC1E,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAC3I,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,EAAuB,KAAK,aAAa,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACzG,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9G,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,QAAS,SAAQ,eAAe;IAC/C,UAAU,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,UAAe,EAAE,OAAY,EAAE,EAAE,eAAe,GAAG,QAAQ,CAYtG"}
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ export { createIOSTransition, IOS_TRANSITION_CSS_VARS } from "./ios-transition.j
|
|
|
3
3
|
export { cssVars, parseTime, parseNumber, parseRatio, parseEasing } from "./css-vars.js";
|
|
4
4
|
export { createEdgePanGesture } from "./edge-pan-gesture.js";
|
|
5
5
|
export { attachBrowserHistory, isIOSBrowser } from "./history-adapter.js";
|
|
6
|
-
export { cubicBezier, easings, tween, prefersReducedMotion } from "./animate.js";
|
|
6
|
+
export { cubicBezier, easings, cssEasing, cssDuration, tween, commitStyles, animationsFinished, prefersReducedMotion } 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";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAkBxD,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEnF,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAkBxD,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEnF,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAE3I,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,mBAAmB,EAAiD,MAAM,qBAAqB,CAAC;AACzG,OAAO,EAAE,oBAAoB,EAAmD,MAAM,uBAAuB,CAAC;AAa9G;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAmB;IAC1F,MAAM,CAAC,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC1C,MAAM,CAAC,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EAAE,CAAa,CAAC;IAC5E,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,KAAK,CAAC,OAAO,GAAG,GAAG,EAAE;QACnB,CAAC,CAAC,MAAM,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IACF,OAAO,KAAK,CAAC;AACf,CAAC"}
|
package/dist/ios-transition.d.ts
CHANGED
|
@@ -3,7 +3,13 @@ import type { Transition } from './navigation-stack.ts';
|
|
|
3
3
|
export interface IOSTransitionOptions {
|
|
4
4
|
/** ms, programmatic push/pop */
|
|
5
5
|
duration: number;
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* the curve a programmatic push/pop runs on. CSS runs it, so it has to be
|
|
8
|
+
* one CSS can spell: everything `cubicBezier()` and `parseEasing()` build
|
|
9
|
+
* carries a `css` property. A bare `(t) => number` of your own has none, so
|
|
10
|
+
* the pages would run `linear` while `progress` reported your curve; give it
|
|
11
|
+
* a `css` property, or write the whole transition yourself.
|
|
12
|
+
*/
|
|
7
13
|
ease: Easing;
|
|
8
14
|
/** fraction of the width the lower page travels */
|
|
9
15
|
parallax: number;
|
|
@@ -15,7 +21,7 @@ export interface IOSTransitionOptions {
|
|
|
15
21
|
/** ms bounds for finishing an interactive pop */
|
|
16
22
|
settleMin: number;
|
|
17
23
|
settleMax: number;
|
|
18
|
-
/** the curve the remaining distance of an interactive pop runs on */
|
|
24
|
+
/** the curve the remaining distance of an interactive pop runs on; see `ease` */
|
|
19
25
|
settleEase: Easing;
|
|
20
26
|
/** px/s assumed when the pointer was slower than this */
|
|
21
27
|
settleVelocityFloor: number;
|
|
@@ -45,6 +51,11 @@ export interface IOSTransition extends Transition {
|
|
|
45
51
|
* `IOS_TRANSITION_CSS_VARS`), read when a transition starts. A variable that
|
|
46
52
|
* is set wins over the JS option, so a stylesheet can slow the animation down
|
|
47
53
|
* or restyle it per theme without the app rebuilding the transition.
|
|
54
|
+
*
|
|
55
|
+
* p is only ever written at the ends of a phase. The stack puts that phase's
|
|
56
|
+
* duration and curve in `--sn-t` / `--sn-e` and CSS interpolates between the
|
|
57
|
+
* two writes, so the animation costs a handful of style writes rather than one
|
|
58
|
+
* per page per frame, and runs on the compositor rather than the main thread.
|
|
48
59
|
*/
|
|
49
60
|
export declare function createIOSTransition(options?: Partial<IOSTransitionOptions>): IOSTransition;
|
|
50
61
|
//# sourceMappingURL=ios-transition.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ios-transition.d.ts","sourceRoot":"","sources":["../src/ios-transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAA2B,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEjF,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB
|
|
1
|
+
{"version":3,"file":"ios-transition.d.ts","sourceRoot":"","sources":["../src/ios-transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAA2B,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEjF,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,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,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,oBAAoB,EAAE,MAAM,CAAC,CAYvF,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,oFAAoF;IACpF,QAAQ,CAAC,OAAO,EAAE,oBAAoB,CAAC;IACvC,yFAAyF;IACzF,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAClD;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,OAAO,CAAC,oBAAoB,CAAM,GAAG,aAAa,CAuG9F"}
|