@jsenv/navi 0.30.35 → 0.30.37
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 +231 -69
- package/dist/dev/jsenv_navi.js.map +8 -8
- package/dist/jsenv_navi.js +206 -69
- package/dist/jsenv_navi.js.map +8 -8
- package/docs/AI_INSTRUCTIONS.md +3 -2
- package/docs/drag_to_travel.md +5 -3
- package/docs/interactions.md +19 -0
- package/docs/popup_open.md +7 -6
- package/docs/resource.md +4 -0
- package/docs/safe_area.md +27 -0
- package/package.json +1 -1
package/docs/AI_INSTRUCTIONS.md
CHANGED
|
@@ -176,7 +176,7 @@ start when unsure which export solves a problem.
|
|
|
176
176
|
- `interactions.md` — a gesture is named, not read by hand: the `interactions`
|
|
177
177
|
prop, swipes, holds, counted taps, the gate, a gesture's write verb
|
|
178
178
|
(`{ answer, verb }`, held by the network policy), `selfInteractions`,
|
|
179
|
-
registering a detector. Before a `pointerdown` listener of your own, and before
|
|
179
|
+
registering a detector, why a popup's own element is not swiped. Before a `pointerdown` listener of your own, and before
|
|
180
180
|
stopping propagation to keep a popup shut.
|
|
181
181
|
- `drag_interactions.md` — an element carried: `move`, `reorder`, `land`,
|
|
182
182
|
`toss`, `leave`, `moving`, the `grab`/`release`/`refuse` moments, an
|
|
@@ -197,7 +197,8 @@ start when unsure which export solves a problem.
|
|
|
197
197
|
component style or writing `import.meta.css`.
|
|
198
198
|
- `safe_area.md` — the app's rectangle and the band left free inside it, an app
|
|
199
199
|
narrower than the window (`--navi-app-max-width`), `data-navi-safe-area`, a
|
|
200
|
-
popup kept clear of the bars (`container="safe-area"`, a toast
|
|
200
|
+
popup kept clear of the bars (`container="safe-area"`, a toast and how it is
|
|
201
|
+
pushed away), the viewport
|
|
201
202
|
under a virtual keyboard, a document wider than the screen. Before
|
|
202
203
|
hand-writing an offset to clear a `FixedBar`.
|
|
203
204
|
- `scroll.md` — where scrolling happens: `header`/`body`/`footer`, a `List`'s
|
package/docs/drag_to_travel.md
CHANGED
|
@@ -6,8 +6,9 @@ are two families, and they do not work the same way:
|
|
|
6
6
|
- **A row of screens** (`SlideContainer`, `RouteTravel`) is a real scroller with
|
|
7
7
|
one snap point per screen. The browser reads the hand. See
|
|
8
8
|
[The browser scrolls the row](#the-browser-scrolls-the-row).
|
|
9
|
-
- **A box pushed aside** (a docked `Dialog
|
|
10
|
-
it, a row swiped with `interactions`) has
|
|
9
|
+
- **A box pushed aside** (a docked `Dialog`, a `SidePanel` or a `Popover` with
|
|
10
|
+
`closeByDrag` pushed out to close it, a row swiped with `interactions`) has
|
|
11
|
+
nothing to scroll to, so the press is
|
|
11
12
|
read by one module, `drag_to_travel.js` in @jsenv/dom. See
|
|
12
13
|
[A box pushed aside: the press](#a-box-pushed-aside-the-press).
|
|
13
14
|
|
|
@@ -143,7 +144,8 @@ box moves:
|
|
|
143
144
|
And one thing narrows it from the other end: a docked `Dialog` reads the press
|
|
144
145
|
only on its grip — its header, plus anything carrying `data-swipe-grip` — so a
|
|
145
146
|
board, a map or a list it holds keeps its own gestures, and a sheet with neither
|
|
146
|
-
is not pushed back at all. A `SidePanel
|
|
147
|
+
is not pushed back at all. A `SidePanel`, and a `Popover` with `closeByDrag`,
|
|
148
|
+
are pushed from their whole surface.
|
|
147
149
|
|
|
148
150
|
### Boxes inside boxes
|
|
149
151
|
|
package/docs/interactions.md
CHANGED
|
@@ -310,6 +310,25 @@ rejecting with nothing comes back without a word. What a success does to it is
|
|
|
310
310
|
yours (a list that redemands its rows, a row that leaves): navi does not make it
|
|
311
311
|
disappear.
|
|
312
312
|
|
|
313
|
+
### Not on a popup's own element
|
|
314
|
+
|
|
315
|
+
What navi moves is the element that declares the swipe, through its `translate`.
|
|
316
|
+
A popup's `translate` is where it stands: its placement writes it on the
|
|
317
|
+
element, inline, and an inline value wins. A swipe declared on a `Popover`, a
|
|
318
|
+
`Dialog` or a `SidePanel` itself is still answered, but nothing follows the
|
|
319
|
+
finger: the popup stays put, and goes at the release if the answer closes it.
|
|
320
|
+
navi warns about it in dev.
|
|
321
|
+
|
|
322
|
+
Pushing a popup away is not a swipe to answer, it is a way of closing it:
|
|
323
|
+
`closeByDrag` on a `Popover` (on by default on a `SidePanel`; a docked `Dialog`
|
|
324
|
+
sheet is pushed by its header). The popup follows the finger without its
|
|
325
|
+
placement being touched, is hidden behind the edge it leaves by, and closes once
|
|
326
|
+
it is out — a close that keeps, like the cross's. A toast is the usual case, see
|
|
327
|
+
[safe_area.md](./safe_area.md#pushed-away-by-hand).
|
|
328
|
+
|
|
329
|
+
A swipe on something the popup holds, a row of a menu, is that element's, and it
|
|
330
|
+
moves like any other.
|
|
331
|
+
|
|
313
332
|
## Twice, whichever hand it is
|
|
314
333
|
|
|
315
334
|
At the finger there is no `dblclick`, and not even a second `click`: two taps in
|
package/docs/popup_open.md
CHANGED
|
@@ -563,12 +563,13 @@ does next.
|
|
|
563
563
|
The gestures that close a popup do not all mean the same thing, and that is on
|
|
564
564
|
purpose:
|
|
565
565
|
|
|
566
|
-
| gesture | means | who decides
|
|
567
|
-
| ------------------------------ | ----------- |
|
|
568
|
-
| Escape | cancel | always on a `Dialog`/`Popover`; a `Picker`'s `escapeEffect="cancel"` (default)
|
|
569
|
-
| a press outside | close, keep | `pressOutside="close"`, default of `Dialog` and `Picker` (`Popover`: `"ignore"`)
|
|
570
|
-
| a close cross (`--navi-close`) | close, keep | [the cross](#the-close-cross)
|
|
571
|
-
| `--navi-cancel` on a button | cancel | the button
|
|
566
|
+
| gesture | means | who decides |
|
|
567
|
+
| ------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------- |
|
|
568
|
+
| Escape | cancel | always on a `Dialog`/`Popover`; a `Picker`'s `escapeEffect="cancel"` (default) |
|
|
569
|
+
| a press outside | close, keep | `pressOutside="close"`, default of `Dialog` and `Picker` (`Popover`: `"ignore"`) |
|
|
570
|
+
| a close cross (`--navi-close`) | close, keep | [the cross](#the-close-cross) |
|
|
571
|
+
| `--navi-cancel` on a button | cancel | the button |
|
|
572
|
+
| pushed out by hand | close, keep | `closeByDrag`: on by default on a `SidePanel`, off on a `Popover`; a docked `Dialog` sheet by its header |
|
|
572
573
|
|
|
573
574
|
Escape says "forget it". It is the one gesture that has meant that everywhere,
|
|
574
575
|
for as long as there have been dialogs, and navi keeps it that way. **A popup
|
package/docs/resource.md
CHANGED
|
@@ -536,6 +536,10 @@ const ORDER = resource("order", {
|
|
|
536
536
|
<Button action={ORDER.cancel.bindParams({ id })}>Cancel</Button>;
|
|
537
537
|
```
|
|
538
538
|
|
|
539
|
+
A write's name is its own: never a verb's, in any case (`post`, `Patch`,
|
|
540
|
+
`get_many`…), nor a member the resource already exposes (`store`, `one`,
|
|
541
|
+
`scopedMany`, `withParams`…). Declaring the resource throws otherwise.
|
|
542
|
+
|
|
539
543
|
`ORDER.cancel` is an action beside the verbs: its own loading and error on the
|
|
540
544
|
button that runs it, held by the network policy as its `verb`, and answered as
|
|
541
545
|
that verb is (a `PATCH` returns the item, which is upserted). Its `rerunOn` says
|
package/docs/safe_area.md
CHANGED
|
@@ -198,6 +198,33 @@ above the device's own band, and it follows a bar coming or going while it is
|
|
|
198
198
|
open. A sliding entrance is cut at that edge, so it comes out from behind the
|
|
199
199
|
bar.
|
|
200
200
|
|
|
201
|
+
#### Pushed away by hand
|
|
202
|
+
|
|
203
|
+
A toast one has read is pushed away. `closeByDrag` pushes it back down, behind
|
|
204
|
+
the bar it came out of; a list of sides lets it be thrown sideways as well, and
|
|
205
|
+
it leaves the way it was thrown:
|
|
206
|
+
|
|
207
|
+
```jsx
|
|
208
|
+
<Popover
|
|
209
|
+
signal={toastSignal}
|
|
210
|
+
positionArea="bottom"
|
|
211
|
+
container="safe-area"
|
|
212
|
+
marginWithContainer={12}
|
|
213
|
+
animation="slide-from-bottom"
|
|
214
|
+
closeByDrag={["bottom", "left", "right"]}
|
|
215
|
+
>
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
It follows the finger, and on release it finishes leaving or comes back. The way
|
|
219
|
+
out covers the 12px too, so nothing of it is left showing at the edge. A button
|
|
220
|
+
in it keeps its tap, and a push that starts on the button does not press it.
|
|
221
|
+
|
|
222
|
+
The push closes the popover, which writes the signal like any other close. A
|
|
223
|
+
toast that hides itself after a delay is then simply hidden sooner, and that
|
|
224
|
+
delay was set for one toast: when it runs out, it closes the toast only if the
|
|
225
|
+
signal still holds that one. Otherwise the next toast, shown in the meantime, is
|
|
226
|
+
the one it closes.
|
|
227
|
+
|
|
201
228
|
Not a fixed box carrying the insets with a `layer="local"` popover in it: that
|
|
202
229
|
box is a second copy of the rectangle, and its popover is under the top layer,
|
|
203
230
|
so a sheet open at the time hides it.
|