@jsenv/navi 0.29.502 → 0.29.503
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/dist/dev/jsenv_navi.js +185 -63
- package/dist/dev/jsenv_navi.js.map +10 -8
- package/dist/jsenv_navi.js +185 -63
- package/dist/jsenv_navi.js.map +10 -8
- package/docs/route_transitions.md +44 -5
- package/package.json +1 -1
|
@@ -62,7 +62,14 @@ defineRouteTransition(null, SETTINGS_PAGE, "cover-top");
|
|
|
62
62
|
Arriving there plays forward from wherever, leaving plays back to wherever. It is
|
|
63
63
|
tried last — a pair naming the same destination still owns its crossing — and it
|
|
64
64
|
is not `defineRouteDefaultTransition`, which is about every navigation nothing
|
|
65
|
-
was said about.
|
|
65
|
+
was said about.
|
|
66
|
+
|
|
67
|
+
Leaving means ANY navigation out of it towards a page no relation names, not
|
|
68
|
+
only the way back: leaving is taken to be closing it. A link from it to a page
|
|
69
|
+
below it (a profile's list of games, from the profile) then plays back, as if
|
|
70
|
+
the reader were going up. That is right for a door in the furniture, and wrong
|
|
71
|
+
for a page in a stack — a default that reads the history knows the difference
|
|
72
|
+
(see [below](#a-default-transition--when)). Write it only for a door that really is furniture: a page reached from a
|
|
66
73
|
screen has that screen to be paired with, and the pair says more.
|
|
67
74
|
|
|
68
75
|
A page with no door at all is from anywhere too: reached by its address from
|
|
@@ -121,16 +128,48 @@ Two recommendations that matter more than the individual choices:
|
|
|
121
128
|
`defineRouteDefaultTransition("cross-fade")` plays on every navigation no relation
|
|
122
129
|
was written for. Two situations, two answers:
|
|
123
130
|
|
|
124
|
-
- **App-shaped UI** (bars, tabs, pages one goes into):
|
|
125
|
-
sibling tabs is part of the grammar, and a default
|
|
131
|
+
- **App-shaped UI** (bars, tabs, pages one goes into): not a directionless one.
|
|
132
|
+
The silence between sibling tabs is part of the grammar, and such a default
|
|
133
|
+
erases it. An app that is a navigation stack has one of its own (below).
|
|
126
134
|
- **Content-shaped site** (documents, articles, browsing): a global cross-fade can
|
|
127
|
-
be right — every navigation is a soft change of subject.
|
|
128
|
-
export exists for.
|
|
135
|
+
be right — every navigation is a soft change of subject.
|
|
129
136
|
|
|
130
137
|
A default has no direction (nothing says which of two arbitrary pages is
|
|
131
138
|
"before" the other), so navi's `slide-*` and `cover-*`, written on the direction,
|
|
132
139
|
play nothing there. Written relations, and `"none"`, always win over it.
|
|
133
140
|
|
|
141
|
+
One thing does order two arbitrary pages: the history. An app built as a
|
|
142
|
+
**navigation stack** — every link goes one level deeper, every back one level
|
|
143
|
+
up, and the level is the depth in the history rather than a rank per page —
|
|
144
|
+
says so on its default:
|
|
145
|
+
|
|
146
|
+
```js
|
|
147
|
+
defineRouteDefaultTransition({ type: "slide-x", direction: "history" });
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
- a push plays forward;
|
|
151
|
+
- a traversal retraces its crossing (see
|
|
152
|
+
[below](#a-traversal-retraces-its-crossing)), or with none remembered plays
|
|
153
|
+
back when it lands lower in the history and forward when it lands higher;
|
|
154
|
+
- a replace stays on its level and plays nothing;
|
|
155
|
+
- a navigation that keeps the page plays nothing either: a push opening a
|
|
156
|
+
[layer](./navigation.md#a-layer-over-the-screen-what-its-address-may-say) moves
|
|
157
|
+
the layer.
|
|
158
|
+
|
|
159
|
+
The relations still answer first, so they only say what is NOT one level deeper:
|
|
160
|
+
a sheet that flips to be edited, a composer covering from the bottom, a link
|
|
161
|
+
going up on purpose (a pair read in reverse). A page written from anywhere then
|
|
162
|
+
answers for its way out only on a back — a link out of it is a push like any
|
|
163
|
+
other. Destinations that replace each other without movement (the tabs of a
|
|
164
|
+
bottom bar) are each written from anywhere with `"none"`: arriving there plays
|
|
165
|
+
nothing, by the bar or by any link.
|
|
166
|
+
|
|
167
|
+
```js
|
|
168
|
+
for (const destination of [MY_GAMES_PAGE, ALERTS_PAGE, PLAYERS_PAGE]) {
|
|
169
|
+
defineRouteTransition(null, destination, "none");
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
134
173
|
## When one navigation knows better
|
|
135
174
|
|
|
136
175
|
A relation is written on a PAIR, so it holds for every way of reaching the page —
|