@pie-element/image-cloze-association 10.3.0-beta.0 → 10.3.0

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.
Files changed (32) hide show
  1. package/CHANGELOG.md +67 -7
  2. package/configure/CHANGELOG.md +60 -7
  3. package/configure/package.json +3 -3
  4. package/controller/CHANGELOG.md +10 -2
  5. package/controller/package.json +1 -1
  6. package/lib/image-container.js +12 -3
  7. package/lib/image-container.js.map +1 -1
  8. package/lib/image-drop-target.js +46 -6
  9. package/lib/image-drop-target.js.map +1 -1
  10. package/lib/index.js +2 -2
  11. package/lib/index.js.map +1 -1
  12. package/lib/keyboard-coordinates.js +111 -0
  13. package/lib/keyboard-coordinates.js.map +1 -0
  14. package/lib/possible-response.js +36 -5
  15. package/lib/possible-response.js.map +1 -1
  16. package/lib/possible-responses.js +39 -19
  17. package/lib/possible-responses.js.map +1 -1
  18. package/lib/root.js +120 -6
  19. package/lib/root.js.map +1 -1
  20. package/package.json +5 -5
  21. package/src/__tests__/image-drop-target.test.jsx +169 -0
  22. package/src/__tests__/keyboard-coordinates.test.js +127 -0
  23. package/src/__tests__/possible-response.test.jsx +113 -0
  24. package/src/__tests__/possible-responses.test.jsx +63 -0
  25. package/src/__tests__/root.test.jsx +261 -2
  26. package/src/image-container.jsx +9 -0
  27. package/src/image-drop-target.jsx +44 -1
  28. package/src/index.js +2 -2
  29. package/src/keyboard-coordinates.js +115 -0
  30. package/src/possible-response.jsx +45 -1
  31. package/src/possible-responses.jsx +37 -16
  32. package/src/root.jsx +117 -2
package/CHANGELOG.md CHANGED
@@ -3,24 +3,84 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- # [10.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.2.0-beta.0...@pie-element/image-cloze-association@10.3.0-beta.0) (2026-08-07)
6
+ # [10.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.2.0...@pie-element/image-cloze-association@10.3.0) (2026-08-26)
7
+
8
+ ### Features
9
+
10
+ - **image-cloze-association:** add additional keyboard navigation (Tab/Shift+Tab placement) PIE-802 and click-to-select/click-to-place functionality PIE-795 ([603e597](https://github.com/pie-framework/pie-elements/commit/603e5972c1de522b5578ade70fcf26be31cb5685))
11
+
12
+ # [10.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.11...@pie-element/image-cloze-association@10.2.0) (2026-08-21)
13
+
14
+ ### Bug Fixes
15
+
16
+ - move [@pie-lib](https://github.com/pie-lib) deps back to latest, off next prereleases PIE-927 ([a53e012](https://github.com/pie-framework/pie-elements/commit/a53e0127eb4ac95ece54e1e2bd669ae4974f4251))
17
+ - read the prompt container by class, not by the id pie-lib removed PIE-927 ([aaaf6c2](https://github.com/pie-framework/pie-elements/commit/aaaf6c2f189de3b39f9de85969aeb2e50376c548))
18
+
19
+ ### Features
20
+
21
+ - bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
22
+
23
+ ## [10.1.11](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.10...@pie-element/image-cloze-association@10.1.11) (2026-08-19)
24
+
25
+ ### Bug Fixes
26
+
27
+ - bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
28
+
29
+ ## [10.1.10](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.8...@pie-element/image-cloze-association@10.1.10) (2026-08-13)
30
+
31
+ **Note:** Version bump only for package @pie-element/image-cloze-association
32
+
33
+ ## [10.1.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.7...@pie-element/image-cloze-association@10.1.9) (2026-08-11)
34
+
35
+ **Note:** Version bump only for package @pie-element/image-cloze-association
36
+
37
+ ## [10.1.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.7...@pie-element/image-cloze-association@10.1.8) (2026-07-31)
7
38
 
8
39
  **Note:** Version bump only for package @pie-element/image-cloze-association
9
40
 
10
- # [10.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.0...@pie-element/image-cloze-association@10.2.0-beta.0) (2026-08-07)
41
+ ## [10.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.6...@pie-element/image-cloze-association@10.1.7) (2026-07-08)
11
42
 
12
43
  ### Bug Fixes
13
44
 
14
45
  - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
15
- - bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
16
- - bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
17
- - bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
46
+
47
+ ## [10.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.5...@pie-element/image-cloze-association@10.1.6) (2026-07-02)
48
+
49
+ ### Bug Fixes
50
+
18
51
  - bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
52
+ - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
53
+
54
+ ## [10.1.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.4...@pie-element/image-cloze-association@10.1.5) (2026-06-22)
55
+
56
+ ### Bug Fixes
57
+
58
+ - bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
59
+ - handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
60
+
61
+ ## [10.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.3...@pie-element/image-cloze-association@10.1.4) (2026-06-17)
62
+
63
+ ### Bug Fixes
64
+
65
+ - bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
66
+
67
+ ## [10.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.2...@pie-element/image-cloze-association@10.1.3) (2026-06-12)
68
+
69
+ ### Bug Fixes
70
+
19
71
  - bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
72
+
73
+ ## [10.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.1...@pie-element/image-cloze-association@10.1.2) (2026-06-04)
74
+
75
+ ### Bug Fixes
76
+
77
+ - bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
20
78
  - dedupe @tiptap/\* and react-transition-group PIE-624 ([87f07f3](https://github.com/pie-framework/pie-elements/commit/87f07f31c38b0fe876f87229c48adc566c369bb9))
21
- - handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
22
79
  - **image-cloze-association:** preserve response areas position PIE-430 ([ae083d6](https://github.com/pie-framework/pie-elements/commit/ae083d660a56b050939deaab488ecf281ad14437))
23
- - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
80
+
81
+ ## [10.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.0...@pie-element/image-cloze-association@10.1.1) (2026-05-21)
82
+
83
+ **Note:** Version bump only for package @pie-element/image-cloze-association
24
84
 
25
85
  # [10.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.0-next.1...@pie-element/image-cloze-association@10.1.0) (2026-05-21)
26
86
 
package/configure/CHANGELOG.md CHANGED
@@ -3,23 +3,76 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- # [9.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.2.0-beta.0...@pie-element/image-cloze-association-configure@9.3.0-beta.0) (2026-08-07)
6
+ ## [9.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.2.0...@pie-element/image-cloze-association-configure@9.2.1) (2026-08-26)
7
7
 
8
8
  **Note:** Version bump only for package @pie-element/image-cloze-association-configure
9
9
 
10
- # [9.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.0...@pie-element/image-cloze-association-configure@9.2.0-beta.0) (2026-08-07)
10
+ # [9.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.11...@pie-element/image-cloze-association-configure@9.2.0) (2026-08-21)
11
+
12
+ ### Features
13
+
14
+ - bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
15
+
16
+ ## [9.1.11](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.10...@pie-element/image-cloze-association-configure@9.1.11) (2026-08-19)
17
+
18
+ ### Bug Fixes
19
+
20
+ - bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
21
+
22
+ ## [9.1.10](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.8...@pie-element/image-cloze-association-configure@9.1.10) (2026-08-13)
23
+
24
+ **Note:** Version bump only for package @pie-element/image-cloze-association-configure
25
+
26
+ ## [9.1.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.7...@pie-element/image-cloze-association-configure@9.1.9) (2026-08-11)
27
+
28
+ **Note:** Version bump only for package @pie-element/image-cloze-association-configure
29
+
30
+ ## [9.1.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.7...@pie-element/image-cloze-association-configure@9.1.8) (2026-07-31)
31
+
32
+ **Note:** Version bump only for package @pie-element/image-cloze-association-configure
33
+
34
+ ## [9.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.6...@pie-element/image-cloze-association-configure@9.1.7) (2026-07-08)
11
35
 
12
36
  ### Bug Fixes
13
37
 
14
38
  - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
15
- - bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
16
- - bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
17
- - bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
39
+
40
+ ## [9.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.5...@pie-element/image-cloze-association-configure@9.1.6) (2026-07-02)
41
+
42
+ ### Bug Fixes
43
+
18
44
  - bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
19
- - bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
20
- - handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
21
45
  - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
22
46
 
47
+ ## [9.1.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.4...@pie-element/image-cloze-association-configure@9.1.5) (2026-06-22)
48
+
49
+ ### Bug Fixes
50
+
51
+ - bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
52
+ - handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
53
+
54
+ ## [9.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.3...@pie-element/image-cloze-association-configure@9.1.4) (2026-06-17)
55
+
56
+ ### Bug Fixes
57
+
58
+ - bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
59
+
60
+ ## [9.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.2...@pie-element/image-cloze-association-configure@9.1.3) (2026-06-12)
61
+
62
+ ### Bug Fixes
63
+
64
+ - bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
65
+
66
+ ## [9.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.1...@pie-element/image-cloze-association-configure@9.1.2) (2026-06-04)
67
+
68
+ ### Bug Fixes
69
+
70
+ - bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
71
+
72
+ ## [9.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.0...@pie-element/image-cloze-association-configure@9.1.1) (2026-05-21)
73
+
74
+ **Note:** Version bump only for package @pie-element/image-cloze-association-configure
75
+
23
76
  # [9.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.0-next.1...@pie-element/image-cloze-association-configure@9.1.0) (2026-05-21)
24
77
 
25
78
  ### Bug Fixes
package/configure/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/image-cloze-association-configure",
3
3
  "private": true,
4
- "version": "9.3.0-beta.0",
4
+ "version": "9.2.1",
5
5
  "description": "",
6
6
  "main": "lib/index.js",
7
7
  "module": "src/index.js",
@@ -12,8 +12,8 @@
12
12
  "@mui/icons-material": "^7.3.4",
13
13
  "@mui/material": "^7.3.4",
14
14
  "@pie-framework/pie-configure-events": "^1.3.0",
15
- "@pie-lib/config-ui": "13.1.0-beta.1",
16
- "@pie-lib/editable-html-tip-tap": "2.2.0-beta.1",
15
+ "@pie-lib/config-ui": "13.0.17",
16
+ "@pie-lib/editable-html-tip-tap": "2.1.15",
17
17
  "debug": "^4.1.1",
18
18
  "prop-types": "^15.8.1",
19
19
  "react": "18.3.1",
package/controller/CHANGELOG.md CHANGED
@@ -3,16 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- # [8.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.2.0-beta.0...@pie-element/image-cloze-association-controller@8.3.0-beta.0) (2026-08-07)
6
+ ## [8.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.2...@pie-element/image-cloze-association-controller@8.1.4) (2026-08-13)
7
7
 
8
8
  **Note:** Version bump only for package @pie-element/image-cloze-association-controller
9
9
 
10
- # [8.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.0...@pie-element/image-cloze-association-controller@8.2.0-beta.0) (2026-08-07)
10
+ ## [8.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.2...@pie-element/image-cloze-association-controller@8.1.3) (2026-08-11)
11
+
12
+ **Note:** Version bump only for package @pie-element/image-cloze-association-controller
13
+
14
+ ## [8.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.1...@pie-element/image-cloze-association-controller@8.1.2) (2026-07-02)
11
15
 
12
16
  ### Bug Fixes
13
17
 
14
18
  - bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
15
19
 
20
+ ## [8.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.0...@pie-element/image-cloze-association-controller@8.1.1) (2026-05-21)
21
+
22
+ **Note:** Version bump only for package @pie-element/image-cloze-association-controller
23
+
16
24
  # [8.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.0-next.1...@pie-element/image-cloze-association-controller@8.1.0) (2026-05-21)
17
25
 
18
26
  ### Bug Fixes
package/controller/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/image-cloze-association-controller",
3
3
  "private": true,
4
- "version": "8.3.0-beta.0",
4
+ "version": "8.1.4",
5
5
  "description": "",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
package/lib/image-container.js CHANGED
@@ -37,7 +37,10 @@ class ImageContainer extends _react.Component {
37
37
  answerChoiceTransparency,
38
38
  responseContainerPadding,
39
39
  imageDropTargetPadding,
40
- maxResponsePerZone
40
+ maxResponsePerZone,
41
+ selectedResponse,
42
+ onSelectClick,
43
+ onPlacementClick
41
44
  } = this.props;
42
45
  return /*#__PURE__*/_react.default.createElement(BaseContainer, null, /*#__PURE__*/_react.default.createElement("img", {
43
46
  src: src,
@@ -69,7 +72,10 @@ class ImageContainer extends _react.Component {
69
72
  answerChoiceTransparency: answerChoiceTransparency,
70
73
  responseContainerPadding: responseContainerPadding,
71
74
  imageDropTargetPadding: imageDropTargetPadding,
72
- maxResponsePerZone: maxResponsePerZone
75
+ maxResponsePerZone: maxResponsePerZone,
76
+ selectedResponse: selectedResponse,
77
+ onSelectClick: onSelectClick,
78
+ onPlacementClick: onPlacementClick
73
79
  });
74
80
  }));
75
81
  }
@@ -88,7 +94,10 @@ ImageContainer.propTypes = {
88
94
  responseAreaFill: _propTypes.default.string,
89
95
  responseContainerPadding: _propTypes.default.string,
90
96
  imageDropTargetPadding: _propTypes.default.string,
91
- maxResponsePerZone: _propTypes.default.number
97
+ maxResponsePerZone: _propTypes.default.number,
98
+ selectedResponse: _propTypes.default.object,
99
+ onSelectClick: _propTypes.default.func,
100
+ onPlacementClick: _propTypes.default.func
92
101
  };
93
102
  var _default = exports.default = ImageContainer;
94
103
  //# sourceMappingURL=image-container.js.map
package/lib/image-container.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"image-container.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_imageDropTarget","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseContainer","styled","theme","margin","spacing","position","width","ImageContainer","Component","render","answers","canDrag","draggingElement","image","height","src","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","maxResponsePerZone","props","createElement","map","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","containerStyle","left","top","key","id","onDrop","item","propTypes","PropTypes","array","isRequired","bool","shape","object","func","string","number","_default","exports"],"sources":["../src/image-container.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nimport ImageDropTarget from './image-drop-target';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n margin: theme.spacing(2),\n position: 'relative',\n width: 'fit-content',\n}));\n\nclass ImageContainer extends Component {\n render() {\n const {\n answers,\n canDrag,\n draggingElement,\n image: { height, src, width } = {},\n onAnswerSelect,\n onDragAnswerBegin,\n onDragAnswerEnd,\n responseContainers,\n showDashedBorder,\n responseAreaFill,\n answerChoiceTransparency,\n responseContainerPadding,\n imageDropTargetPadding,\n maxResponsePerZone,\n } = this.props;\n\n return (\n <BaseContainer>\n <img src={src} height={height} width={width} />\n\n {(responseContainers || []).map((r, i) => {\n const rHeight = (r.height.replace('%', '') / 100) * height;\n const rWidth = (r.width.replace('%', '') / 100) * width;\n const rLeft = (r.x / 100) * width;\n const rTop = (r.y / 100) * height;\n const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n return (\n <ImageDropTarget\n answers={answersParsed}\n canDrag={canDrag}\n containerStyle={{\n height: rHeight,\n width: rWidth,\n left: rLeft,\n top: rTop,\n }}\n key={r.id + i}\n draggingElement={draggingElement}\n index={r.index}\n onDrop={(item) => onAnswerSelect(item, r.index)}\n onDragAnswerBegin={onDragAnswerBegin}\n onDragAnswerEnd={onDragAnswerEnd}\n showDashedBorder={showDashedBorder}\n responseAreaFill={responseAreaFill}\n answerChoiceTransparency={answerChoiceTransparency}\n responseContainerPadding={responseContainerPadding}\n imageDropTargetPadding={imageDropTargetPadding}\n maxResponsePerZone={maxResponsePerZone}\n />\n );\n })}\n </BaseContainer>\n );\n }\n}\n\nImageContainer.propTypes = {\n answers: PropTypes.array.isRequired,\n canDrag: PropTypes.bool.isRequired,\n draggingElement: PropTypes.shape({}).isRequired,\n image: PropTypes.object.isRequired,\n onAnswerSelect: PropTypes.func.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n responseContainers: PropTypes.array.isRequired,\n showDashedBorder: PropTypes.bool,\n answerChoiceTransparency: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n responseContainerPadding: PropTypes.string,\n imageDropTargetPadding: PropTypes.string,\n maxResponsePerZone: PropTypes.number,\n};\n\nexport default ImageContainer;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"image-container.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_imageDropTarget","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseContainer","styled","theme","margin","spacing","position","width","ImageContainer","Component","render","answers","canDrag","draggingElement","image","height","src","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","maxResponsePerZone","selectedResponse","onSelectClick","onPlacementClick","props","createElement","map","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","containerStyle","left","top","key","id","onDrop","item","propTypes","PropTypes","array","isRequired","bool","shape","object","func","string","number","_default","exports"],"sources":["../src/image-container.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nimport ImageDropTarget from './image-drop-target';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n margin: theme.spacing(2),\n position: 'relative',\n width: 'fit-content',\n}));\n\nclass ImageContainer extends Component {\n render() {\n const {\n answers,\n canDrag,\n draggingElement,\n image: { height, src, width } = {},\n onAnswerSelect,\n onDragAnswerBegin,\n onDragAnswerEnd,\n responseContainers,\n showDashedBorder,\n responseAreaFill,\n answerChoiceTransparency,\n responseContainerPadding,\n imageDropTargetPadding,\n maxResponsePerZone,\n selectedResponse,\n onSelectClick,\n onPlacementClick,\n } = this.props;\n\n return (\n <BaseContainer>\n <img src={src} height={height} width={width} />\n\n {(responseContainers || []).map((r, i) => {\n const rHeight = (r.height.replace('%', '') / 100) * height;\n const rWidth = (r.width.replace('%', '') / 100) * width;\n const rLeft = (r.x / 100) * width;\n const rTop = (r.y / 100) * height;\n const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n return (\n <ImageDropTarget\n answers={answersParsed}\n canDrag={canDrag}\n containerStyle={{\n height: rHeight,\n width: rWidth,\n left: rLeft,\n top: rTop,\n }}\n key={r.id + i}\n draggingElement={draggingElement}\n index={r.index}\n onDrop={(item) => onAnswerSelect(item, r.index)}\n onDragAnswerBegin={onDragAnswerBegin}\n onDragAnswerEnd={onDragAnswerEnd}\n showDashedBorder={showDashedBorder}\n responseAreaFill={responseAreaFill}\n answerChoiceTransparency={answerChoiceTransparency}\n responseContainerPadding={responseContainerPadding}\n imageDropTargetPadding={imageDropTargetPadding}\n maxResponsePerZone={maxResponsePerZone}\n selectedResponse={selectedResponse}\n onSelectClick={onSelectClick}\n onPlacementClick={onPlacementClick}\n />\n );\n })}\n </BaseContainer>\n );\n }\n}\n\nImageContainer.propTypes = {\n answers: PropTypes.array.isRequired,\n canDrag: PropTypes.bool.isRequired,\n draggingElement: PropTypes.shape({}).isRequired,\n image: PropTypes.object.isRequired,\n onAnswerSelect: PropTypes.func.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n responseContainers: PropTypes.array.isRequired,\n showDashedBorder: PropTypes.bool,\n answerChoiceTransparency: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n responseContainerPadding: PropTypes.string,\n imageDropTargetPadding: PropTypes.string,\n maxResponsePerZone: PropTypes.number,\n selectedResponse: PropTypes.object,\n onSelectClick: PropTypes.func,\n onPlacementClick: PropTypes.func,\n};\n\nexport default ImageContainer;\n"],"mappings":"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","ignoreList":[]}
package/lib/image-drop-target.js CHANGED
@@ -46,8 +46,12 @@ const ImageDropTarget = ({
46
46
  answerChoiceTransparency,
47
47
  maxResponsePerZone,
48
48
  onDrop,
49
- index
49
+ index,
50
+ selectedResponse,
51
+ onSelectClick,
52
+ onPlacementClick
50
53
  }) => {
54
+ const [isHovered, setIsHovered] = (0, _react.useState)(false);
51
55
  const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = (0, _react.useState)(false);
52
56
  const dropContainerRef = (0, _react.useRef)(null);
53
57
  const dropContainerResponsesHeightRef = (0, _react.useRef)(null);
@@ -75,8 +79,10 @@ const ImageDropTarget = ({
75
79
  };
76
80
  }, []);
77
81
  const isDraggingElement = !!draggingElement.id;
82
+ const hasSelection = !!selectedResponse;
83
+ const showsHoverEffect = isOver || hasSelection && isHovered && canDrag;
78
84
  const containerClasses = (0, _classnames.default)({
79
- 'is-over': isOver,
85
+ 'is-over': showsHoverEffect,
80
86
  dashed: showDashedBorder && !isDraggingElement,
81
87
  active: isDraggingElement
82
88
  });
@@ -85,7 +91,29 @@ const ImageDropTarget = ({
85
91
  ...containerStyle,
86
92
  ...(responseAreaFill && !isDraggingElement && {
87
93
  backgroundColor: responseAreaFill
88
- })
94
+ }),
95
+ cursor: hasSelection && canDrag ? 'pointer' : undefined
96
+ };
97
+ const handleContainerClick = () => {
98
+ if (!canDrag) return;
99
+ if (selectedResponse) {
100
+ onPlacementClick?.(index);
101
+ }
102
+
103
+ // Empty background clicked with nothing selected: nothing to place.
104
+ };
105
+
106
+ // Only a native Tab stop when there's nothing else in this container to carry
107
+ // tabbability — once it holds an answer, that answer's own tile (rendered by
108
+ // PossibleResponse, via dnd-kit's `useDraggable`) is already independently tabbable,
109
+ // and adding a second stop for the same visual container would add an extra stop to
110
+ // the existing Tab order (match-list's equivalent)
111
+ const isNativeTabStop = answers.length === 0 && canDrag;
112
+ const handleContainerKeyDown = e => {
113
+ if (e.code === 'Space' || e.code === 'Enter') {
114
+ e.preventDefault();
115
+ handleContainerClick();
116
+ }
89
117
  };
90
118
  return /*#__PURE__*/_react.default.createElement(ResponseContainer, {
91
119
  ref: ref => {
@@ -93,7 +121,13 @@ const ImageDropTarget = ({
93
121
  setNodeRef(ref);
94
122
  },
95
123
  className: containerClasses,
96
- style: updatedContainerStyle
124
+ style: updatedContainerStyle,
125
+ role: isNativeTabStop ? 'button' : undefined,
126
+ tabIndex: isNativeTabStop ? 0 : -1,
127
+ onClick: handleContainerClick,
128
+ onKeyDown: isNativeTabStop ? handleContainerKeyDown : undefined,
129
+ onMouseEnter: () => setIsHovered(true),
130
+ onMouseLeave: () => setIsHovered(false)
97
131
  }, answers.length ? /*#__PURE__*/_react.default.createElement(AnswersContainer, {
98
132
  ref: ref => {
99
133
  dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;
@@ -107,7 +141,10 @@ const ImageDropTarget = ({
107
141
  answerChoiceTransparency: answerChoiceTransparency,
108
142
  containerStyle: {
109
143
  padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px'
110
- }
144
+ },
145
+ selectedResponse: selectedResponse,
146
+ onSelectClick: onSelectClick,
147
+ onPlacementClick: onPlacementClick
111
148
  }))) : null);
112
149
  };
113
150
  ImageDropTarget.propTypes = {
@@ -124,7 +161,10 @@ ImageDropTarget.propTypes = {
124
161
  answerChoiceTransparency: _propTypes.default.bool,
125
162
  responseContainerPadding: _propTypes.default.string,
126
163
  imageDropTargetPadding: _propTypes.default.string,
127
- maxResponsePerZone: _propTypes.default.number
164
+ maxResponsePerZone: _propTypes.default.number,
165
+ selectedResponse: _propTypes.default.object,
166
+ onSelectClick: _propTypes.default.func,
167
+ onPlacementClick: _propTypes.default.func
128
168
  };
129
169
  var _default = exports.default = ImageDropTarget;
130
170
  //# sourceMappingURL=image-drop-target.js.map
package/lib/image-drop-target.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"image-drop-target.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_renderUi","_classnames","_possibleResponse","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnswersContainer","styled","display","flexWrap","ResponseContainer","position","boxSizing","border","color","text","backgroundColor","ImageDropTarget","answers","canDrag","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","answerChoiceTransparency","maxResponsePerZone","onDrop","index","shouldHaveSmallPadding","setShouldHaveSmallPadding","useState","dropContainerRef","useRef","dropContainerResponsesHeightRef","setNodeRef","isOver","useDroppable","id","data","containerIndex","useEffect","container","current","handleTouchStart","preventDefault","addEventListener","passive","removeEventListener","isDraggingElement","containerClasses","cx","dashed","active","updatedContainerStyle","padding","createElement","ref","className","style","length","getBoundingClientRect","height","map","answer","key","onDragBegin","onDragEnd","propTypes","PropTypes","object","array","bool","isRequired","func","string","number","_default","exports"],"sources":["../src/image-drop-target.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\n\nconst AnswersContainer = styled('div')(() => ({\n display: 'flex',\n flexWrap: 'wrap',\n}));\n\nconst ResponseContainer = styled('div')(() => ({\n position: 'absolute',\n boxSizing: 'border-box',\n '&.active': {\n border: `2px solid ${color.text()}`,\n backgroundColor: 'rgba(230, 242, 252, .8)',\n },\n '&.dashed': {\n border: `2px dashed ${color.text()}`,\n },\n '&.is-over': {\n border: '1px solid rgb(158, 158, 158)',\n backgroundColor: 'rgb(224, 224, 224)',\n },\n}));\n\nconst ImageDropTarget = ({\n answers,\n canDrag,\n containerStyle,\n draggingElement,\n onDragAnswerBegin,\n onDragAnswerEnd,\n showDashedBorder,\n responseAreaFill,\n responseContainerPadding = '10px',\n imageDropTargetPadding,\n answerChoiceTransparency,\n maxResponsePerZone,\n onDrop,\n index,\n}) => {\n const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = useState(false);\n const dropContainerRef = useRef(null);\n const dropContainerResponsesHeightRef = useRef(null);\n\n const { setNodeRef, isOver } = useDroppable({\n id: `response-container-${index}`,\n data: {\n containerIndex: index,\n onDrop,\n },\n });\n\n useEffect(() => {\n const container = dropContainerRef.current;\n\n if (!container) return;\n\n const handleTouchStart = (e) => {\n e.preventDefault();\n };\n\n container.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n return () => {\n container.removeEventListener('touchstart', handleTouchStart);\n };\n }, []);\n\n const isDraggingElement = !!draggingElement.id;\n\n const containerClasses = cx({\n 'is-over': isOver,\n dashed: showDashedBorder && !isDraggingElement,\n active: isDraggingElement,\n });\n\n const updatedContainerStyle = {\n padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n ...containerStyle,\n ...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill }),\n };\n\n return (\n <ResponseContainer\n ref={(ref) => {\n dropContainerRef.current = ref;\n setNodeRef(ref);\n }}\n className={containerClasses}\n style={updatedContainerStyle}\n >\n {answers.length ? (\n <AnswersContainer\n ref={(ref) => {\n dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;\n }}\n >\n {answers.map((answer) => (\n <PossibleResponse\n key={answer.id}\n data={answer}\n canDrag={canDrag}\n onDragBegin={() => onDragAnswerBegin(answer)}\n onDragEnd={onDragAnswerEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n containerStyle={{\n padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px',\n }}\n />\n ))}\n </AnswersContainer>\n ) : null}\n </ResponseContainer>\n );\n};\n\nImageDropTarget.propTypes = {\n answer: PropTypes.object,\n answers: PropTypes.array,\n canDrag: PropTypes.bool.isRequired,\n containerStyle: PropTypes.object.isRequired,\n draggingElement: PropTypes.object.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n onDrop: PropTypes.func.isRequired,\n showDashedBorder: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n answerChoiceTransparency: PropTypes.bool,\n responseContainerPadding: PropTypes.string,\n imageDropTargetPadding: PropTypes.string,\n maxResponsePerZone: PropTypes.number,\n};\n\nexport default ImageDropTarget;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"image-drop-target.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_renderUi","_classnames","_possibleResponse","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnswersContainer","styled","display","flexWrap","ResponseContainer","position","boxSizing","border","color","text","backgroundColor","ImageDropTarget","answers","canDrag","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","answerChoiceTransparency","maxResponsePerZone","onDrop","index","selectedResponse","onSelectClick","onPlacementClick","isHovered","setIsHovered","useState","shouldHaveSmallPadding","setShouldHaveSmallPadding","dropContainerRef","useRef","dropContainerResponsesHeightRef","setNodeRef","isOver","useDroppable","id","data","containerIndex","useEffect","container","current","handleTouchStart","preventDefault","addEventListener","passive","removeEventListener","isDraggingElement","hasSelection","showsHoverEffect","containerClasses","cx","dashed","active","updatedContainerStyle","padding","cursor","undefined","handleContainerClick","isNativeTabStop","length","handleContainerKeyDown","code","createElement","ref","className","style","role","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","getBoundingClientRect","height","map","answer","key","onDragBegin","onDragEnd","propTypes","PropTypes","object","array","bool","isRequired","func","string","number","_default","exports"],"sources":["../src/image-drop-target.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\n\nconst AnswersContainer = styled('div')(() => ({\n display: 'flex',\n flexWrap: 'wrap',\n}));\n\nconst ResponseContainer = styled('div')(() => ({\n position: 'absolute',\n boxSizing: 'border-box',\n '&.active': {\n border: `2px solid ${color.text()}`,\n backgroundColor: 'rgba(230, 242, 252, .8)',\n },\n '&.dashed': {\n border: `2px dashed ${color.text()}`,\n },\n '&.is-over': {\n border: '1px solid rgb(158, 158, 158)',\n backgroundColor: 'rgb(224, 224, 224)',\n },\n}));\n\nconst ImageDropTarget = ({\n answers,\n canDrag,\n containerStyle,\n draggingElement,\n onDragAnswerBegin,\n onDragAnswerEnd,\n showDashedBorder,\n responseAreaFill,\n responseContainerPadding = '10px',\n imageDropTargetPadding,\n answerChoiceTransparency,\n maxResponsePerZone,\n onDrop,\n index,\n selectedResponse,\n onSelectClick,\n onPlacementClick,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = useState(false);\n const dropContainerRef = useRef(null);\n const dropContainerResponsesHeightRef = useRef(null);\n\n const { setNodeRef, isOver } = useDroppable({\n id: `response-container-${index}`,\n data: {\n containerIndex: index,\n onDrop,\n },\n });\n\n useEffect(() => {\n const container = dropContainerRef.current;\n\n if (!container) return;\n\n const handleTouchStart = (e) => {\n e.preventDefault();\n };\n\n container.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n return () => {\n container.removeEventListener('touchstart', handleTouchStart);\n };\n }, []);\n\n const isDraggingElement = !!draggingElement.id;\n const hasSelection = !!selectedResponse;\n const showsHoverEffect = isOver || (hasSelection && isHovered && canDrag);\n\n const containerClasses = cx({\n 'is-over': showsHoverEffect,\n dashed: showDashedBorder && !isDraggingElement,\n active: isDraggingElement,\n });\n\n const updatedContainerStyle = {\n padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n ...containerStyle,\n ...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill }),\n cursor: hasSelection && canDrag ? 'pointer' : undefined,\n };\n\n const handleContainerClick = () => {\n if (!canDrag) return;\n\n if (selectedResponse) {\n onPlacementClick?.(index);\n }\n\n // Empty background clicked with nothing selected: nothing to place.\n };\n\n // Only a native Tab stop when there's nothing else in this container to carry\n // tabbability — once it holds an answer, that answer's own tile (rendered by\n // PossibleResponse, via dnd-kit's `useDraggable`) is already independently tabbable,\n // and adding a second stop for the same visual container would add an extra stop to\n // the existing Tab order (match-list's equivalent)\n const isNativeTabStop = answers.length === 0 && canDrag;\n\n const handleContainerKeyDown = (e) => {\n if (e.code === 'Space' || e.code === 'Enter') {\n e.preventDefault();\n handleContainerClick();\n }\n };\n\n return (\n <ResponseContainer\n ref={(ref) => {\n dropContainerRef.current = ref;\n setNodeRef(ref);\n }}\n className={containerClasses}\n style={updatedContainerStyle}\n role={isNativeTabStop ? 'button' : undefined}\n tabIndex={isNativeTabStop ? 0 : -1}\n onClick={handleContainerClick}\n onKeyDown={isNativeTabStop ? handleContainerKeyDown : undefined}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {answers.length ? (\n <AnswersContainer\n ref={(ref) => {\n dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;\n }}\n >\n {answers.map((answer) => (\n <PossibleResponse\n key={answer.id}\n data={answer}\n canDrag={canDrag}\n onDragBegin={() => onDragAnswerBegin(answer)}\n onDragEnd={onDragAnswerEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n containerStyle={{\n padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px',\n }}\n selectedResponse={selectedResponse}\n onSelectClick={onSelectClick}\n onPlacementClick={onPlacementClick}\n />\n ))}\n </AnswersContainer>\n ) : null}\n </ResponseContainer>\n );\n};\n\nImageDropTarget.propTypes = {\n answer: PropTypes.object,\n answers: PropTypes.array,\n canDrag: PropTypes.bool.isRequired,\n containerStyle: PropTypes.object.isRequired,\n draggingElement: PropTypes.object.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n onDrop: PropTypes.func.isRequired,\n showDashedBorder: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n answerChoiceTransparency: PropTypes.bool,\n responseContainerPadding: PropTypes.string,\n imageDropTargetPadding: PropTypes.string,\n maxResponsePerZone: PropTypes.number,\n selectedResponse: PropTypes.object,\n onSelectClick: PropTypes.func,\n onPlacementClick: PropTypes.func,\n};\n\nexport default ImageDropTarget;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAEA,IAAAO,iBAAA,GAAAL,sBAAA,CAAAF,OAAA;AAAmD,SAAAD,wBAAAS,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAS,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEnD,MAAMkB,gBAAgB,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EAC5CC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,iBAAiB,GAAG,IAAAH,cAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EAC7CI,QAAQ,EAAE,UAAU;EACpBC,SAAS,EAAE,YAAY;EACvB,UAAU,EAAE;IACVC,MAAM,EAAE,aAAaC,eAAK,CAACC,IAAI,CAAC,CAAC,EAAE;IACnCC,eAAe,EAAE;EACnB,CAAC;EACD,UAAU,EAAE;IACVH,MAAM,EAAE,cAAcC,eAAK,CAACC,IAAI,CAAC,CAAC;EACpC,CAAC;EACD,WAAW,EAAE;IACXF,MAAM,EAAE,8BAA8B;IACtCG,eAAe,EAAE;EACnB;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,eAAe,GAAGA,CAAC;EACvBC,OAAO;EACPC,OAAO;EACPC,cAAc;EACdC,eAAe;EACfC,iBAAiB;EACjBC,eAAe;EACfC,gBAAgB;EAChBC,gBAAgB;EAChBC,wBAAwB,GAAG,MAAM;EACjCC,sBAAsB;EACtBC,wBAAwB;EACxBC,kBAAkB;EAClBC,MAAM;EACNC,KAAK;EACLC,gBAAgB;EAChBC,aAAa;EACbC;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACjD,MAAM,CAACC,sBAAsB,EAAEC,yBAAyB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAC3E,MAAMG,gBAAgB,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EACrC,MAAMC,+BAA+B,GAAG,IAAAD,aAAM,EAAC,IAAI,CAAC;EAEpD,MAAM;IAAEE,UAAU;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAY,EAAC;IAC1CC,EAAE,EAAE,sBAAsBf,KAAK,EAAE;IACjCgB,IAAI,EAAE;MACJC,cAAc,EAAEjB,KAAK;MACrBD;IACF;EACF,CAAC,CAAC;EAEF,IAAAmB,gBAAS,EAAC,MAAM;IACd,MAAMC,SAAS,GAAGV,gBAAgB,CAACW,OAAO;IAE1C,IAAI,CAACD,SAAS,EAAE;IAEhB,MAAME,gBAAgB,GAAIjE,CAAC,IAAK;MAC9BA,CAAC,CAACkE,cAAc,CAAC,CAAC;IACpB,CAAC;IAEDH,SAAS,CAACI,gBAAgB,CAAC,YAAY,EAAEF,gBAAgB,EAAE;MAAEG,OAAO,EAAE;IAAM,CAAC,CAAC;IAE9E,OAAO,MAAM;MACXL,SAAS,CAACM,mBAAmB,CAAC,YAAY,EAAEJ,gBAAgB,CAAC;IAC/D,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,iBAAiB,GAAG,CAAC,CAACpC,eAAe,CAACyB,EAAE;EAC9C,MAAMY,YAAY,GAAG,CAAC,CAAC1B,gBAAgB;EACvC,MAAM2B,gBAAgB,GAAGf,MAAM,IAAKc,YAAY,IAAIvB,SAAS,IAAIhB,OAAQ;EAEzE,MAAMyC,gBAAgB,GAAG,IAAAC,mBAAE,EAAC;IAC1B,SAAS,EAAEF,gBAAgB;IAC3BG,MAAM,EAAEtC,gBAAgB,IAAI,CAACiC,iBAAiB;IAC9CM,MAAM,EAAEN;EACV,CAAC,CAAC;EAEF,MAAMO,qBAAqB,GAAG;IAC5BC,OAAO,EAAEpC,kBAAkB,KAAK,CAAC,GAAG,GAAG,GAAGH,wBAAwB;IAClE,GAAGN,cAAc;IACjB,IAAIK,gBAAgB,IAAI,CAACgC,iBAAiB,IAAI;MAAEzC,eAAe,EAAES;IAAiB,CAAC,CAAC;IACpFyC,MAAM,EAAER,YAAY,IAAIvC,OAAO,GAAG,SAAS,GAAGgD;EAChD,CAAC;EAED,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;IACjC,IAAI,CAACjD,OAAO,EAAE;IAEd,IAAIa,gBAAgB,EAAE;MACpBE,gBAAgB,GAAGH,KAAK,CAAC;IAC3B;;IAEA;EACF,CAAC;;EAED;EACA;EACA;EACA;EACA;EACA,MAAMsC,eAAe,GAAGnD,OAAO,CAACoD,MAAM,KAAK,CAAC,IAAInD,OAAO;EAEvD,MAAMoD,sBAAsB,GAAIpF,CAAC,IAAK;IACpC,IAAIA,CAAC,CAACqF,IAAI,KAAK,OAAO,IAAIrF,CAAC,CAACqF,IAAI,KAAK,OAAO,EAAE;MAC5CrF,CAAC,CAACkE,cAAc,CAAC,CAAC;MAClBe,oBAAoB,CAAC,CAAC;IACxB;EACF,CAAC;EAED,oBACE3F,MAAA,CAAAoB,OAAA,CAAA4E,aAAA,CAAC/D,iBAAiB;IAChBgE,GAAG,EAAGA,GAAG,IAAK;MACZlC,gBAAgB,CAACW,OAAO,GAAGuB,GAAG;MAC9B/B,UAAU,CAAC+B,GAAG,CAAC;IACjB,CAAE;IACFC,SAAS,EAAEf,gBAAiB;IAC5BgB,KAAK,EAAEZ,qBAAsB;IAC7Ba,IAAI,EAAER,eAAe,GAAG,QAAQ,GAAGF,SAAU;IAC7CW,QAAQ,EAAET,eAAe,GAAG,CAAC,GAAG,CAAC,CAAE;IACnCU,OAAO,EAAEX,oBAAqB;IAC9BY,SAAS,EAAEX,eAAe,GAAGE,sBAAsB,GAAGJ,SAAU;IAChEc,YAAY,EAAEA,CAAA,KAAM7C,YAAY,CAAC,IAAI,CAAE;IACvC8C,YAAY,EAAEA,CAAA,KAAM9C,YAAY,CAAC,KAAK;EAAE,GAEvClB,OAAO,CAACoD,MAAM,gBACb7F,MAAA,CAAAoB,OAAA,CAAA4E,aAAA,CAACnE,gBAAgB;IACfoE,GAAG,EAAGA,GAAG,IAAK;MACZhC,+BAA+B,CAACS,OAAO,GAAGuB,GAAG,EAAES,qBAAqB,CAAC,CAAC,CAACC,MAAM;IAC/E;EAAE,GAEDlE,OAAO,CAACmE,GAAG,CAAEC,MAAM,iBAClB7G,MAAA,CAAAoB,OAAA,CAAA4E,aAAA,CAACvF,iBAAA,CAAAW,OAAgB;IACf0F,GAAG,EAAED,MAAM,CAACxC,EAAG;IACfC,IAAI,EAAEuC,MAAO;IACbnE,OAAO,EAAEA,OAAQ;IACjBqE,WAAW,EAAEA,CAAA,KAAMlE,iBAAiB,CAACgE,MAAM,CAAE;IAC7CG,SAAS,EAAElE,eAAgB;IAC3BK,wBAAwB,EAAEA,wBAAyB;IACnDR,cAAc,EAAE;MACd6C,OAAO,EAAEtC,sBAAsB,GAAGA,sBAAsB,GAAGW,sBAAsB,GAAG,KAAK,GAAG;IAC9F,CAAE;IACFN,gBAAgB,EAAEA,gBAAiB;IACnCC,aAAa,EAAEA,aAAc;IAC7BC,gBAAgB,EAAEA;EAAiB,CACpC,CACF,CACe,CAAC,GACjB,IACa,CAAC;AAExB,CAAC;AAEDjB,eAAe,CAACyE,SAAS,GAAG;EAC1BJ,MAAM,EAAEK,kBAAS,CAACC,MAAM;EACxB1E,OAAO,EAAEyE,kBAAS,CAACE,KAAK;EACxB1E,OAAO,EAAEwE,kBAAS,CAACG,IAAI,CAACC,UAAU;EAClC3E,cAAc,EAAEuE,kBAAS,CAACC,MAAM,CAACG,UAAU;EAC3C1E,eAAe,EAAEsE,kBAAS,CAACC,MAAM,CAACG,UAAU;EAC5CzE,iBAAiB,EAAEqE,kBAAS,CAACK,IAAI,CAACD,UAAU;EAC5CxE,eAAe,EAAEoE,kBAAS,CAACK,IAAI,CAACD,UAAU;EAC1CjE,MAAM,EAAE6D,kBAAS,CAACK,IAAI,CAACD,UAAU;EACjCvE,gBAAgB,EAAEmE,kBAAS,CAACG,IAAI;EAChCrE,gBAAgB,EAAEkE,kBAAS,CAACM,MAAM;EAClCrE,wBAAwB,EAAE+D,kBAAS,CAACG,IAAI;EACxCpE,wBAAwB,EAAEiE,kBAAS,CAACM,MAAM;EAC1CtE,sBAAsB,EAAEgE,kBAAS,CAACM,MAAM;EACxCpE,kBAAkB,EAAE8D,kBAAS,CAACO,MAAM;EACpClE,gBAAgB,EAAE2D,kBAAS,CAACC,MAAM;EAClC3D,aAAa,EAAE0D,kBAAS,CAACK,IAAI;EAC7B9D,gBAAgB,EAAEyD,kBAAS,CAACK;AAC9B,CAAC;AAAC,IAAAG,QAAA,GAAAC,OAAA,CAAAvG,OAAA,GAEaoB,eAAe","ignoreList":[]}
package/lib/index.js CHANGED
@@ -37,7 +37,7 @@ class ImageClozeAssociation extends HTMLElement {
37
37
  if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
38
38
  if (elementContext) {
39
39
  const audio = elementContext.querySelector('audio');
40
- const isInsidePrompt = audio && audio.closest('#preview-prompt');
40
+ const isInsidePrompt = audio && audio.closest('.preview-prompt');
41
41
 
42
42
  // only require audio completion if audio exists and is inside the prompt
43
43
  if (audio && isInsidePrompt) {
@@ -129,7 +129,7 @@ class ImageClozeAssociation extends HTMLElement {
129
129
  mutationsList.forEach(mutation => {
130
130
  if (mutation.type === 'childList') {
131
131
  const audio = this.querySelector('audio');
132
- const isInsidePrompt = audio && audio.closest('#preview-prompt');
132
+ const isInsidePrompt = audio && audio.closest('.preview-prompt');
133
133
  if (!this._model) return;
134
134
  if (!this._model.autoplayAudioEnabled) return;
135
135
  if (audio && !isInsidePrompt) return;
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_mathRendering","_renderUi","_piePlayerEvents","_root","ImageClozeAssociation","HTMLElement","constructor","model","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","autoplayAudioEnabled","completeAudioEnabled","completeResponses","duplicateResponses","hasUnplacedChoices","maxResponsePerZone","responseAreasToBeFilled","elementContext","audioComplete","audio","querySelector","isInsidePrompt","closest","_session","answers","Array","isArray","filledResponseAreas","Map","map","item","containerIndex","values","length","areResponseAreasFilled","allAnswersValue","answer","value","requiredAnswersPlaced","some","response","every","val","includes","session","s","updateAnswer","data","selector","SessionChangedEvent","_createAudioInfoToast","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","connectedCallback","observer","MutationObserver","mutationsList","forEach","mutation","type","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","disconnectedCallback","unmount","el","React","ImageClozeAssociationComponent","bind","createRoot","render","queueMicrotask","renderMath","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport ImageClozeAssociationComponent from './root';\n\nexport default class ImageClozeAssociation extends HTMLElement {\n constructor() {\n super();\n this._root = null;\n }\n\n set model(m) {\n this._model = m;\n\n this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n this._render();\n }\n\n isComplete() {\n const {\n autoplayAudioEnabled,\n completeAudioEnabled,\n completeResponses,\n duplicateResponses,\n hasUnplacedChoices,\n maxResponsePerZone,\n responseAreasToBeFilled,\n } = this._model || {};\n const elementContext = this;\n\n // check audio completion if audio settings are enabled and audio actually exists\n if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n if (elementContext) {\n const audio = elementContext.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n // only require audio completion if audio exists and is inside the prompt\n if (audio && isInsidePrompt) {\n return false;\n }\n }\n }\n\n if (!this._session || !this._session.answers) {\n return false;\n }\n\n const { answers } = this._session;\n\n if (!Array.isArray(answers)) {\n return false;\n }\n\n // filter answers by containerIndex and count the ones with content\n const filledResponseAreas = [...new Map(answers.map((item) => [item.containerIndex, item])).values()].length;\n // check if an answer choice was added to at least as many response areas\n // as the number of populated response areas in the correct answer\n const areResponseAreasFilled = filledResponseAreas >= responseAreasToBeFilled;\n\n if (maxResponsePerZone > 1) {\n if (duplicateResponses) {\n // an answer choice can be used multiple times\n return areResponseAreasFilled;\n }\n\n // any correct answer have any unplaced answer choices (by the author)\n if (hasUnplacedChoices) {\n return areResponseAreasFilled;\n }\n\n const allAnswersValue = answers.map((answer) => answer.value);\n\n // check if any correct answer have any unplaced answer choices (by the student)\n const requiredAnswersPlaced = completeResponses.some((response) =>\n response.every((val) => allAnswersValue.includes(val)),\n );\n\n // true - all choices (required for a correct response) were placed into a response area\n return requiredAnswersPlaced;\n }\n\n return areResponseAreasFilled;\n }\n\n set session(s) {\n if (s && !s.answers) {\n s.answers = [];\n }\n\n this._session = s;\n this._render();\n }\n\n get session() {\n return this._session;\n }\n\n updateAnswer(data) {\n this._session.answers = data;\n this._session.selector = 'Mouse';\n\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n this._render();\n }\n\n _createAudioInfoToast() {\n const info = document.createElement('div');\n info.id = 'play-audio-info';\n\n Object.assign(info.style, {\n position: 'absolute',\n top: 0,\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'white',\n zIndex: '1000',\n cursor: 'pointer',\n });\n\n const img = document.createElement('img');\n img.src = EnableAudioAutoplayImage;\n img.alt = 'Click anywhere to enable audio autoplay';\n img.width = 500;\n img.height = 300;\n\n info.appendChild(img);\n return info;\n }\n\n connectedCallback() {\n this._render();\n\n // Observation: audio in Chrome will have the autoplay attribute,\n // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n const observer = new MutationObserver((mutationsList, observer) => {\n mutationsList.forEach((mutation) => {\n if (mutation.type === 'childList') {\n const audio = this.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n if (!this._model) return;\n if (!this._model.autoplayAudioEnabled) return;\n if (audio && !isInsidePrompt) return;\n if (!audio) return;\n\n const info = this._createAudioInfoToast();\n const container = this.querySelector('#main-container');\n const enableAudio = () => {\n if (this.querySelector('#play-audio-info')) {\n audio.play();\n container.removeChild(info);\n }\n\n document.removeEventListener('click', enableAudio);\n };\n\n // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n setTimeout(() => {\n if (audio.paused && !this.querySelector('#play-audio-info')) {\n // add info message as a toast to enable audio playback\n container.appendChild(info);\n document.addEventListener('click', enableAudio);\n } else {\n document.removeEventListener('click', enableAudio);\n }\n }, 500);\n\n // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n const handlePlaying = () => {\n const info = this.querySelector('#play-audio-info');\n\n if (info) {\n container.removeChild(info);\n }\n\n audio.removeEventListener('playing', handlePlaying);\n };\n\n audio.addEventListener('playing', handlePlaying);\n\n // we need to listen for the ended event to update the isComplete state\n const handleEnded = () => {\n this.audioComplete = true;\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n audio.removeEventListener('ended', handleEnded);\n };\n\n audio.addEventListener('ended', handleEnded);\n\n // store references to remove later\n this._audio = audio;\n this._handlePlaying = handlePlaying;\n this._handleEnded = handleEnded;\n this._enableAudio = enableAudio;\n\n observer.disconnect();\n }\n });\n });\n\n observer.observe(this, { childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this._enableAudio);\n\n if (this._audio) {\n this._audio.removeEventListener('playing', this._handlePlaying);\n this._audio.removeEventListener('ended', this._handleEnded);\n this._audio = null;\n }\n\n if (this._root) {\n this._root.unmount();\n this._root = null;\n }\n }\n\n _render() {\n if (this._model && this._session) {\n const el = React.createElement(ImageClozeAssociationComponent, {\n model: this._model,\n session: this._session,\n updateAnswer: this.updateAnswer.bind(this),\n });\n\n if (!this._root) {\n this._root = createRoot(this);\n }\n this._root.render(el);\n queueMicrotask(() => {\n renderMath(this);\n });\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_mathRendering","_renderUi","_piePlayerEvents","_root","ImageClozeAssociation","HTMLElement","constructor","model","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","autoplayAudioEnabled","completeAudioEnabled","completeResponses","duplicateResponses","hasUnplacedChoices","maxResponsePerZone","responseAreasToBeFilled","elementContext","audioComplete","audio","querySelector","isInsidePrompt","closest","_session","answers","Array","isArray","filledResponseAreas","Map","map","item","containerIndex","values","length","areResponseAreasFilled","allAnswersValue","answer","value","requiredAnswersPlaced","some","response","every","val","includes","session","s","updateAnswer","data","selector","SessionChangedEvent","_createAudioInfoToast","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","connectedCallback","observer","MutationObserver","mutationsList","forEach","mutation","type","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","disconnectedCallback","unmount","el","React","ImageClozeAssociationComponent","bind","createRoot","render","queueMicrotask","renderMath","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport ImageClozeAssociationComponent from './root';\n\nexport default class ImageClozeAssociation extends HTMLElement {\n constructor() {\n super();\n this._root = null;\n }\n\n set model(m) {\n this._model = m;\n\n this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n this._render();\n }\n\n isComplete() {\n const {\n autoplayAudioEnabled,\n completeAudioEnabled,\n completeResponses,\n duplicateResponses,\n hasUnplacedChoices,\n maxResponsePerZone,\n responseAreasToBeFilled,\n } = this._model || {};\n const elementContext = this;\n\n // check audio completion if audio settings are enabled and audio actually exists\n if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n if (elementContext) {\n const audio = elementContext.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('.preview-prompt');\n\n // only require audio completion if audio exists and is inside the prompt\n if (audio && isInsidePrompt) {\n return false;\n }\n }\n }\n\n if (!this._session || !this._session.answers) {\n return false;\n }\n\n const { answers } = this._session;\n\n if (!Array.isArray(answers)) {\n return false;\n }\n\n // filter answers by containerIndex and count the ones with content\n const filledResponseAreas = [...new Map(answers.map((item) => [item.containerIndex, item])).values()].length;\n // check if an answer choice was added to at least as many response areas\n // as the number of populated response areas in the correct answer\n const areResponseAreasFilled = filledResponseAreas >= responseAreasToBeFilled;\n\n if (maxResponsePerZone > 1) {\n if (duplicateResponses) {\n // an answer choice can be used multiple times\n return areResponseAreasFilled;\n }\n\n // any correct answer have any unplaced answer choices (by the author)\n if (hasUnplacedChoices) {\n return areResponseAreasFilled;\n }\n\n const allAnswersValue = answers.map((answer) => answer.value);\n\n // check if any correct answer have any unplaced answer choices (by the student)\n const requiredAnswersPlaced = completeResponses.some((response) =>\n response.every((val) => allAnswersValue.includes(val)),\n );\n\n // true - all choices (required for a correct response) were placed into a response area\n return requiredAnswersPlaced;\n }\n\n return areResponseAreasFilled;\n }\n\n set session(s) {\n if (s && !s.answers) {\n s.answers = [];\n }\n\n this._session = s;\n this._render();\n }\n\n get session() {\n return this._session;\n }\n\n updateAnswer(data) {\n this._session.answers = data;\n this._session.selector = 'Mouse';\n\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n this._render();\n }\n\n _createAudioInfoToast() {\n const info = document.createElement('div');\n info.id = 'play-audio-info';\n\n Object.assign(info.style, {\n position: 'absolute',\n top: 0,\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'white',\n zIndex: '1000',\n cursor: 'pointer',\n });\n\n const img = document.createElement('img');\n img.src = EnableAudioAutoplayImage;\n img.alt = 'Click anywhere to enable audio autoplay';\n img.width = 500;\n img.height = 300;\n\n info.appendChild(img);\n return info;\n }\n\n connectedCallback() {\n this._render();\n\n // Observation: audio in Chrome will have the autoplay attribute,\n // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n const observer = new MutationObserver((mutationsList, observer) => {\n mutationsList.forEach((mutation) => {\n if (mutation.type === 'childList') {\n const audio = this.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('.preview-prompt');\n\n if (!this._model) return;\n if (!this._model.autoplayAudioEnabled) return;\n if (audio && !isInsidePrompt) return;\n if (!audio) return;\n\n const info = this._createAudioInfoToast();\n const container = this.querySelector('#main-container');\n const enableAudio = () => {\n if (this.querySelector('#play-audio-info')) {\n audio.play();\n container.removeChild(info);\n }\n\n document.removeEventListener('click', enableAudio);\n };\n\n // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n setTimeout(() => {\n if (audio.paused && !this.querySelector('#play-audio-info')) {\n // add info message as a toast to enable audio playback\n container.appendChild(info);\n document.addEventListener('click', enableAudio);\n } else {\n document.removeEventListener('click', enableAudio);\n }\n }, 500);\n\n // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n const handlePlaying = () => {\n const info = this.querySelector('#play-audio-info');\n\n if (info) {\n container.removeChild(info);\n }\n\n audio.removeEventListener('playing', handlePlaying);\n };\n\n audio.addEventListener('playing', handlePlaying);\n\n // we need to listen for the ended event to update the isComplete state\n const handleEnded = () => {\n this.audioComplete = true;\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n audio.removeEventListener('ended', handleEnded);\n };\n\n audio.addEventListener('ended', handleEnded);\n\n // store references to remove later\n this._audio = audio;\n this._handlePlaying = handlePlaying;\n this._handleEnded = handleEnded;\n this._enableAudio = enableAudio;\n\n observer.disconnect();\n }\n });\n });\n\n observer.observe(this, { childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this._enableAudio);\n\n if (this._audio) {\n this._audio.removeEventListener('playing', this._handlePlaying);\n this._audio.removeEventListener('ended', this._handleEnded);\n this._audio = null;\n }\n\n if (this._root) {\n this._root.unmount();\n this._root = null;\n }\n }\n\n _render() {\n if (this._model && this._session) {\n const el = React.createElement(ImageClozeAssociationComponent, {\n model: this._model,\n session: this._session,\n updateAnswer: this.updateAnswer.bind(this),\n });\n\n if (!this._root) {\n this._root = createRoot(this);\n }\n this._root.render(el);\n queueMicrotask(() => {\n renderMath(this);\n });\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}