@pie-players/pie-tool-calculator-inline-desmos 0.3.74 → 0.3.75
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 +13 -11
- package/dist/tool-calculator-inline.js +833 -789
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -13,21 +13,21 @@ packages share.
|
|
|
13
13
|
|
|
14
14
|
- **Web Component** - Custom element with an open shadow root
|
|
15
15
|
- **Toolkit context** - Takes its ToolCoordinator from the toolkit runtime context and its item from the enclosing item shell
|
|
16
|
-
- **Shared state** - Opens the item toolbar's calculator
|
|
16
|
+
- **Shared state** - Opens the item toolbar's calculator through the toolkit's tool request path, so the button and the toolbar stay in step and policy applies to both
|
|
17
17
|
- **Size Variants** - Supports sm, md, lg button sizes
|
|
18
18
|
- **WCAG 2.2 Level AA** - Fully accessible with proper ARIA attributes
|
|
19
19
|
- **Material Design Icon** - Calculator icon from Material Design
|
|
20
20
|
|
|
21
21
|
## Usage
|
|
22
22
|
|
|
23
|
-
The element renders inside `<pie-item-
|
|
23
|
+
The element renders inside `<pie-item-scope>` under `<pie-assessment-toolkit>`.
|
|
24
24
|
The toolkit runtime context supplies the ToolCoordinator and the shell supplies
|
|
25
25
|
the item; section players provide both.
|
|
26
26
|
|
|
27
27
|
```javascript
|
|
28
28
|
import '@pie-players/pie-tool-calculator-inline-desmos';
|
|
29
29
|
|
|
30
|
-
// itemHeader: an element inside <pie-item-
|
|
30
|
+
// itemHeader: an element inside <pie-item-scope>
|
|
31
31
|
const calculatorButton = document.createElement('pie-tool-calculator-inline');
|
|
32
32
|
calculatorButton.setAttribute('calculator-type', 'scientific');
|
|
33
33
|
itemHeader.append(calculatorButton);
|
|
@@ -35,27 +35,29 @@ itemHeader.append(calculatorButton);
|
|
|
35
35
|
|
|
36
36
|
The calculator it opens is the item toolbar's: the toolkit's tool configuration
|
|
37
37
|
places `calculator` in the item toolbar and names its provider, and the item
|
|
38
|
-
toolbar renders that calculator. The button adds no calculator of its own
|
|
39
|
-
|
|
38
|
+
toolbar renders that calculator. The button adds no calculator of its own and is
|
|
39
|
+
disabled while the toolbar does not render one, as when the item's tool policy
|
|
40
|
+
leaves the calculator out or its module failed to load.
|
|
40
41
|
|
|
41
42
|
### Props
|
|
42
43
|
|
|
43
44
|
#### Attributes (String)
|
|
44
45
|
|
|
45
|
-
- `target-tool-id` -
|
|
46
|
+
- `target-tool-id` - Scoped id of the calculator the button toggles, `<toolId>:<section|item|passage>:<scopeId>` (default: `''`). Empty resolves the enclosing item's calculator, `calculator:item:<itemId>`; set it only to toggle another toolbar's calculator
|
|
46
47
|
- `calculator-type` - Calculator type named in the button's label and announcements (default: `'basic'`); a type outside `available-types` falls back to `'basic'`
|
|
47
48
|
- `available-types` - Comma-separated list of calculator types (default: `'basic,scientific,graphing'`)
|
|
48
49
|
- `size` - Button size: `'sm' | 'md' | 'lg'` (default: `'md'`)
|
|
49
50
|
|
|
50
51
|
The button is disabled until the toolkit runtime context supplies a
|
|
51
|
-
ToolCoordinator and
|
|
52
|
-
`target-tool-id`, it stays disabled and logs a console
|
|
52
|
+
ToolCoordinator and the target toolbar renders the calculator. With no item
|
|
53
|
+
shell and no valid `target-tool-id`, it stays disabled and logs a console
|
|
54
|
+
warning.
|
|
53
55
|
|
|
54
56
|
## Toggle behavior
|
|
55
57
|
|
|
56
|
-
1. The button resolves its target from the item shell context:
|
|
57
|
-
2.
|
|
58
|
-
3.
|
|
58
|
+
1. The button resolves its target from the item shell context: the item toolbar for `<canonicalItemId or itemId>`, which shows the calculator as `calculator:item:<id>`.
|
|
59
|
+
2. It asks the toolkit coordinator whether a tool request for `calculator` at that level and scope reaches a toolbar (`canRequestTool`), and re-asks when toolbars register or policy changes.
|
|
60
|
+
3. A click on a closed calculator sends the request (`requestTool`), and the toolbar shows its calculator; a click on an open one hides it.
|
|
59
61
|
4. `aria-pressed`, the active style and a status announcement follow the target's visibility, including changes made from the toolbar.
|
|
60
62
|
|
|
61
63
|
## Accessibility
|