@pie-players/pie-tool-line-reader 0.3.61 → 0.3.63
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 +56 -9
- package/dist/{sre-yGY3u7Xp.js → sre-BRYZH3eI.js} +4020 -3920
- package/dist/tool-line-reader.js +2180 -2091
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -4,7 +4,9 @@ Draggable reading guide overlay tool for PIE assessment players.
|
|
|
4
4
|
|
|
5
5
|
## Overview
|
|
6
6
|
|
|
7
|
-
Provides a movable, resizable
|
|
7
|
+
Provides a movable, resizable reading window that helps students focus on specific lines of text during assessments.
|
|
8
|
+
|
|
9
|
+
The tool renders as a "window": a fully transparent **pane** through which the underlying page content is visible unchanged, surrounded on all four edges by an obscuring **frame** (black at 80% opacity by default) that largely hides the neighbouring lines. The frame starts as a 48px band above and below the pane and a 12px edge to its left and right.
|
|
8
10
|
|
|
9
11
|
## Custom Element
|
|
10
12
|
|
|
@@ -17,18 +19,63 @@ Tag: `pie-tool-line-reader`
|
|
|
17
19
|
|
|
18
20
|
## Features
|
|
19
21
|
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
22
|
+
- Clear window pane inside an obscuring frame; adjustable frame opacity
|
|
23
|
+
- Drag anywhere on the frame to reposition
|
|
24
|
+
- Three controls on the frame:
|
|
25
|
+
- **Close** (top right) hides the tool through `ToolCoordinator.hideTool`, which also
|
|
26
|
+
deactivates its toolbar button
|
|
27
|
+
- **Reading-window resize** (bottom centre) changes the pane height
|
|
28
|
+
- **Frame resize** (bottom right) changes the frame band height and the overall width
|
|
23
29
|
- Full keyboard support:
|
|
24
|
-
-
|
|
25
|
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
|
|
30
|
+
- On the tool: arrow keys to move, `+`/`-` to resize the reading window, `[`/`]` to
|
|
31
|
+
adjust frame opacity, `Escape` to close
|
|
32
|
+
- On the reading-window handle: up/down arrows change the pane height
|
|
33
|
+
- On the frame handle: up/down arrows change the frame band height, left/right arrows
|
|
34
|
+
change the width
|
|
35
|
+
- Every drag has a keyboard equivalent (WCAG 2.5.7) and controls meet the 24x24 minimum
|
|
36
|
+
target size (WCAG 2.5.8)
|
|
29
37
|
- Screen reader announcements for all state changes
|
|
30
38
|
- Connects to `AssessmentToolkitRuntimeContext` for ToolCoordinator integration
|
|
31
39
|
|
|
40
|
+
## Theming
|
|
41
|
+
|
|
42
|
+
These are package-private custom properties, not part of the registered host
|
|
43
|
+
token contract in `packages/theme/src/token-registry.json`: they are read as
|
|
44
|
+
`var(--x, fallback)` (or set inline by the component, for the geometry ones), so
|
|
45
|
+
a host can override them, but they carry no compatibility guarantee and may
|
|
46
|
+
change with the tool's internals. Prefer the semantic tokens they derive from.
|
|
47
|
+
|
|
48
|
+
| Custom property | Default | Description |
|
|
49
|
+
|---|---|---|
|
|
50
|
+
| `--pie-tool-line-reader-frame-color` | `#000` | Fill of the obscuring frame |
|
|
51
|
+
| `--pie-tool-line-reader-frame-opacity` | `0.8` | Frame opacity; the pane is always fully transparent |
|
|
52
|
+
| `--pie-tool-line-reader-outline-color` | `--pie-text` at 70% | Hairline marking the window boundary |
|
|
53
|
+
| `--pie-tool-line-reader-control-color` | `#fff` | Glyph colour of the close and resize controls |
|
|
54
|
+
|
|
55
|
+
The frame opacity custom property is set inline by the component from its current
|
|
56
|
+
state, so host overrides need `!important` (or a higher-specificity rule) to win.
|
|
57
|
+
The controls sit on top of the frame rather than inside it, so they stay fully
|
|
58
|
+
opaque whatever the frame opacity is.
|
|
59
|
+
|
|
60
|
+
### Colour schemes
|
|
61
|
+
|
|
62
|
+
The frame stays a dark scrim in every PIE colour scheme instead of following
|
|
63
|
+
`--pie-text`. Masking works by collapsing the contrast of whatever it covers, and
|
|
64
|
+
an ink-coloured scrim defeats that on its own scheme — a yellow scrim over
|
|
65
|
+
`yellow-on-blue` text hides nothing, and a white one glares in a dark scheme the
|
|
66
|
+
reader chose to avoid glare. Dimming works in both directions: across all six
|
|
67
|
+
built-in schemes the covered text drops from 10.9–19.3:1 down to 1.09–1.71:1.
|
|
68
|
+
|
|
69
|
+
What does follow the scheme is the boundary. On a light page the dark scrim shows
|
|
70
|
+
its own edge against the background (11.7–17.6:1), but on a dark page it blends in,
|
|
71
|
+
so `--pie-tool-line-reader-outline-color` draws an ink hairline that reads against
|
|
72
|
+
the scrim (7.6–9.8:1 in the dark schemes). The drop shadow is ink-derived for the
|
|
73
|
+
same reason, becoming a soft halo rather than disappearing.
|
|
74
|
+
|
|
75
|
+
Overriding `--pie-tool-line-reader-frame-color` to a light fill means overriding
|
|
76
|
+
`--pie-tool-line-reader-control-color` too — the glyphs are white to pair with the
|
|
77
|
+
dark scrim, not with the page.
|
|
78
|
+
|
|
32
79
|
## Integration
|
|
33
80
|
|
|
34
81
|
Registered through the `ToolRegistry` as `lineReader`. Managed by `ToolkitCoordinator` via `tools.placement`.
|