@pie-element/passage 7.1.2-next.1 → 7.1.2

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 (89) hide show
  1. package/CHANGELOG.json +227 -0
  2. package/CHANGELOG.md +1463 -0
  3. package/LICENSE.md +5 -0
  4. package/README.md +3 -0
  5. package/configure/CHANGELOG.md +682 -0
  6. package/configure/lib/common.js +74 -0
  7. package/configure/lib/common.js.map +1 -0
  8. package/configure/lib/defaults.js +174 -0
  9. package/configure/lib/defaults.js.map +1 -0
  10. package/configure/lib/design.js +185 -0
  11. package/configure/lib/design.js.map +1 -0
  12. package/configure/lib/index.js +86 -0
  13. package/configure/lib/index.js.map +1 -0
  14. package/configure/lib/passage.js +194 -0
  15. package/configure/lib/passage.js.map +1 -0
  16. package/configure/package.json +23 -0
  17. package/controller/CHANGELOG.json +1 -0
  18. package/controller/CHANGELOG.md +113 -0
  19. package/controller/lib/defaults.js +23 -0
  20. package/controller/lib/defaults.js.map +1 -0
  21. package/controller/lib/index.js +80 -0
  22. package/controller/lib/index.js.map +1 -0
  23. package/controller/package.json +13 -0
  24. package/docs/config-schema.json +1325 -0
  25. package/docs/config-schema.json.md +974 -0
  26. package/docs/demo/config.js +8 -0
  27. package/docs/demo/generate.js +32 -0
  28. package/docs/demo/index.html +1 -0
  29. package/docs/pie-schema.json +775 -0
  30. package/docs/pie-schema.json.md +561 -0
  31. package/lib/index.js +143 -0
  32. package/lib/index.js.map +1 -0
  33. package/lib/print.js +78 -0
  34. package/lib/print.js.map +1 -0
  35. package/lib/stimulus-tabs.js +323 -0
  36. package/lib/stimulus-tabs.js.map +1 -0
  37. package/module/configure.js +1 -0
  38. package/module/controller.js +920 -0
  39. package/module/demo.js +57 -0
  40. package/module/element.js +1 -0
  41. package/module/index.html +21 -0
  42. package/module/manifest.json +10 -0
  43. package/module/print-demo.js +95 -0
  44. package/module/print.html +18 -0
  45. package/module/print.js +1 -0
  46. package/package.json +19 -87
  47. package/configure.js +0 -2
  48. package/controller.js +0 -1
  49. package/dist/author/common.d.ts +0 -36
  50. package/dist/author/common.js +0 -56
  51. package/dist/author/defaults.d.ts +0 -175
  52. package/dist/author/defaults.js +0 -113
  53. package/dist/author/design.d.ts +0 -28
  54. package/dist/author/design.js +0 -120
  55. package/dist/author/index.d.ts +0 -36
  56. package/dist/author/index.js +0 -66
  57. package/dist/author/passage.d.ts +0 -27
  58. package/dist/author/passage.js +0 -127
  59. package/dist/browser/author/index.js +0 -38785
  60. package/dist/browser/author/index.js.map +0 -1
  61. package/dist/browser/controller/index.js +0 -64
  62. package/dist/browser/controller/index.js.map +0 -1
  63. package/dist/browser/delivery/index.js +0 -117
  64. package/dist/browser/delivery/index.js.map +0 -1
  65. package/dist/browser/dist-BC24ne2o.js +0 -88
  66. package/dist/browser/dist-BC24ne2o.js.map +0 -1
  67. package/dist/browser/dist-C_PfhNd9.js +0 -9611
  68. package/dist/browser/dist-C_PfhNd9.js.map +0 -1
  69. package/dist/browser/passage.css +0 -2
  70. package/dist/browser/print/index.js +0 -48
  71. package/dist/browser/print/index.js.map +0 -1
  72. package/dist/browser/stimulus-tabs-CMox8txJ.js +0 -218
  73. package/dist/browser/stimulus-tabs-CMox8txJ.js.map +0 -1
  74. package/dist/controller/defaults.d.ts +0 -23
  75. package/dist/controller/defaults.js +0 -17
  76. package/dist/controller/index.d.ts +0 -18
  77. package/dist/controller/index.js +0 -50
  78. package/dist/delivery/index.d.ts +0 -22
  79. package/dist/delivery/index.js +0 -83
  80. package/dist/delivery/stimulus-tabs.d.ts +0 -21
  81. package/dist/delivery/stimulus-tabs.js +0 -220
  82. package/dist/index.d.ts +0 -1
  83. package/dist/index.iife.d.ts +0 -8
  84. package/dist/index.iife.js +0 -145
  85. package/dist/index.js +0 -2
  86. package/dist/print/index.d.ts +0 -15
  87. package/dist/print/index.js +0 -47
  88. package/dist/runtime-support.d.ts +0 -12
  89. package/dist/runtime-support.js +0 -12
@@ -0,0 +1,561 @@
1
+ Model for the @pie-elements/passage
2
+
3
+ The schema defines the following properties:
4
+
5
+ # `passages` (array, required)
6
+
7
+ The object is an array with all elements of the type `object`.
8
+
9
+ The array object has the following properties:
10
+
11
+ ## `title` (string, required)
12
+
13
+ The title of the passage
14
+
15
+ ## `subtitle` (string)
16
+
17
+ The subtitle of the passage
18
+
19
+ ## `author` (string)
20
+
21
+ The author of the passage
22
+
23
+ ## `text` (string, required)
24
+
25
+ The content of the passage
26
+
27
+ ## `teacherInstructions` (string)
28
+
29
+ Indicates teacher instructions
30
+
31
+ # `teacherInstructionsEnabled` (boolean, required)
32
+
33
+ Indicates if Teacher Instructions are enabled
34
+
35
+ # `titleEnabled` (boolean, required)
36
+
37
+ Indicates if title is enabled
38
+
39
+ # `subtitleEnabled` (boolean, required)
40
+
41
+ Indicates if subtitle is enabled
42
+
43
+ # `textEnabled` (boolean, required)
44
+
45
+ Indicates if text is enabled
46
+
47
+ # `authorEnabled` (boolean, required)
48
+
49
+ Indicates if author is enabled
50
+
51
+ # `id` (string, required)
52
+
53
+ Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
54
+
55
+ # `element` (string, required)
56
+
57
+ The html Element tag name
58
+
59
+ ---
60
+
61
+ # Sub Schemas
62
+
63
+ The schema defines the following additional types:
64
+
65
+ ## `EditableHtmlPluginConfigureRequired` (object)
66
+
67
+ Properties of the `EditableHtmlPluginConfigureRequired` object:
68
+
69
+ ### `inputConfiguration` (object)
70
+
71
+ Properties of the `inputConfiguration` object:
72
+
73
+ #### `math` (object)
74
+
75
+ Properties of the `math` object:
76
+
77
+ ##### `disabled` (boolean)
78
+
79
+ Indicates if the plugin is disabled or not
80
+
81
+ #### `audio` (object)
82
+
83
+ Properties of the `audio` object:
84
+
85
+ ##### `disabled` (boolean)
86
+
87
+ Indicates if the plugin is disabled or not
88
+
89
+ #### `video` (object)
90
+
91
+ Properties of the `video` object:
92
+
93
+ ##### `disabled` (boolean)
94
+
95
+ Indicates if the plugin is disabled or not
96
+
97
+ #### `image` (object)
98
+
99
+ Properties of the `image` object:
100
+
101
+ ##### `disabled` (boolean)
102
+
103
+ Indicates if the plugin is disabled or not
104
+
105
+ #### `customPlugins` (array)
106
+
107
+ An array of objects that determine custom plugins.
108
+ A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).
109
+ Example can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.
110
+
111
+ The object is an array with all elements of the type `object`.
112
+
113
+ The array object has the following properties:
114
+
115
+ ##### `event` (string, required)
116
+
117
+ The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
118
+ PIE will emit the event prefixed with "PIE-".
119
+ Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
120
+
121
+ ##### `iconAlt` (string, required)
122
+
123
+ The alt for the custom button icon
124
+
125
+ ##### `iconType` (string, required)
126
+
127
+ The icon type.
128
+ Currently, only "SVG" is supported.
129
+
130
+ ##### `icon` (string, required)
131
+
132
+ The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
133
+
134
+ #### `blockquote` (object)
135
+
136
+ Properties of the `blockquote` object:
137
+
138
+ ##### `disabled` (boolean)
139
+
140
+ Indicates if the plugin is disabled or not
141
+
142
+ #### `h3` (object)
143
+
144
+ Properties of the `h3` object:
145
+
146
+ ##### `disabled` (boolean)
147
+
148
+ Indicates if the plugin is disabled or not
149
+
150
+ #### `characters` (object)
151
+
152
+ Properties of the `characters` object:
153
+
154
+ ##### `disabled` (boolean)
155
+
156
+ Indicates if the plugin is disabled or not
157
+
158
+ #### `bold` (object)
159
+
160
+ Properties of the `bold` object:
161
+
162
+ ##### `disabled` (boolean)
163
+
164
+ Indicates if the plugin is disabled or not
165
+
166
+ #### `html` (object)
167
+
168
+ Properties of the `html` object:
169
+
170
+ ##### `disabled` (boolean)
171
+
172
+ Indicates if the plugin is disabled or not
173
+
174
+ #### `italic` (object)
175
+
176
+ Properties of the `italic` object:
177
+
178
+ ##### `disabled` (boolean)
179
+
180
+ Indicates if the plugin is disabled or not
181
+
182
+ #### `ol_list` (object)
183
+
184
+ Properties of the `ol_list` object:
185
+
186
+ ##### `disabled` (boolean)
187
+
188
+ Indicates if the plugin is disabled or not
189
+
190
+ #### `redo` (object)
191
+
192
+ Properties of the `redo` object:
193
+
194
+ ##### `disabled` (boolean)
195
+
196
+ Indicates if the plugin is disabled or not
197
+
198
+ #### `strikethrough` (object)
199
+
200
+ Properties of the `strikethrough` object:
201
+
202
+ ##### `disabled` (boolean)
203
+
204
+ Indicates if the plugin is disabled or not
205
+
206
+ #### `sub` (object)
207
+
208
+ Properties of the `sub` object:
209
+
210
+ ##### `disabled` (boolean)
211
+
212
+ Indicates if the plugin is disabled or not
213
+
214
+ #### `sup` (object)
215
+
216
+ Properties of the `sup` object:
217
+
218
+ ##### `disabled` (boolean)
219
+
220
+ Indicates if the plugin is disabled or not
221
+
222
+ #### `table` (object)
223
+
224
+ Properties of the `table` object:
225
+
226
+ ##### `disabled` (boolean)
227
+
228
+ Indicates if the plugin is disabled or not
229
+
230
+ #### `ul_list` (object)
231
+
232
+ Properties of the `ul_list` object:
233
+
234
+ ##### `disabled` (boolean)
235
+
236
+ Indicates if the plugin is disabled or not
237
+
238
+ #### `underline` (object)
239
+
240
+ Properties of the `underline` object:
241
+
242
+ ##### `disabled` (boolean)
243
+
244
+ Indicates if the plugin is disabled or not
245
+
246
+ #### `undo` (object)
247
+
248
+ Properties of the `undo` object:
249
+
250
+ ##### `disabled` (boolean)
251
+
252
+ Indicates if the plugin is disabled or not
253
+
254
+ ### `required` (boolean)
255
+
256
+ Indicates if the item is required and the value cannot be empty
257
+
258
+ ### `settings` (boolean)
259
+
260
+ Indicates if the item has to be displayed in the Settings Panel
261
+
262
+ ### `label` (string)
263
+
264
+ Indicates the label for the item that has to be displayed in the Settings Panel
265
+
266
+ ## `EditableHtmlConfigureProp` (object)
267
+
268
+ Properties of the `EditableHtmlConfigureProp` object:
269
+
270
+ ### `math` (object)
271
+
272
+ Properties of the `math` object:
273
+
274
+ #### `disabled` (boolean)
275
+
276
+ Indicates if the plugin is disabled or not
277
+
278
+ ### `audio` (object)
279
+
280
+ Properties of the `audio` object:
281
+
282
+ #### `disabled` (boolean)
283
+
284
+ Indicates if the plugin is disabled or not
285
+
286
+ ### `video` (object)
287
+
288
+ Properties of the `video` object:
289
+
290
+ #### `disabled` (boolean)
291
+
292
+ Indicates if the plugin is disabled or not
293
+
294
+ ### `image` (object)
295
+
296
+ Properties of the `image` object:
297
+
298
+ #### `disabled` (boolean)
299
+
300
+ Indicates if the plugin is disabled or not
301
+
302
+ ### `customPlugins` (array)
303
+
304
+ An array of objects that determine custom plugins.
305
+ A custom plugin is an object which determines how the button will look like (icon) and the event name that will be triggered when button gets pressed (event).
306
+ Example can be found at https://github.com/pie-framework/pie-lib/blob/develop/packages/demo/pages/editable-html.js#L425.
307
+
308
+ The object is an array with all elements of the type `object`.
309
+
310
+ The array object has the following properties:
311
+
312
+ #### `event` (string, required)
313
+
314
+ The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
315
+ PIE will emit the event prefixed with "PIE-".
316
+ Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
317
+
318
+ #### `iconAlt` (string, required)
319
+
320
+ The alt for the custom button icon
321
+
322
+ #### `iconType` (string, required)
323
+
324
+ The icon type.
325
+ Currently, only "SVG" is supported.
326
+
327
+ #### `icon` (string, required)
328
+
329
+ The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
330
+
331
+ ### `blockquote` (object)
332
+
333
+ Properties of the `blockquote` object:
334
+
335
+ #### `disabled` (boolean)
336
+
337
+ Indicates if the plugin is disabled or not
338
+
339
+ ### `h3` (object)
340
+
341
+ Properties of the `h3` object:
342
+
343
+ #### `disabled` (boolean)
344
+
345
+ Indicates if the plugin is disabled or not
346
+
347
+ ### `characters` (object)
348
+
349
+ Properties of the `characters` object:
350
+
351
+ #### `disabled` (boolean)
352
+
353
+ Indicates if the plugin is disabled or not
354
+
355
+ ### `bold` (object)
356
+
357
+ Properties of the `bold` object:
358
+
359
+ #### `disabled` (boolean)
360
+
361
+ Indicates if the plugin is disabled or not
362
+
363
+ ### `html` (object)
364
+
365
+ Properties of the `html` object:
366
+
367
+ #### `disabled` (boolean)
368
+
369
+ Indicates if the plugin is disabled or not
370
+
371
+ ### `italic` (object)
372
+
373
+ Properties of the `italic` object:
374
+
375
+ #### `disabled` (boolean)
376
+
377
+ Indicates if the plugin is disabled or not
378
+
379
+ ### `ol_list` (object)
380
+
381
+ Properties of the `ol_list` object:
382
+
383
+ #### `disabled` (boolean)
384
+
385
+ Indicates if the plugin is disabled or not
386
+
387
+ ### `redo` (object)
388
+
389
+ Properties of the `redo` object:
390
+
391
+ #### `disabled` (boolean)
392
+
393
+ Indicates if the plugin is disabled or not
394
+
395
+ ### `strikethrough` (object)
396
+
397
+ Properties of the `strikethrough` object:
398
+
399
+ #### `disabled` (boolean)
400
+
401
+ Indicates if the plugin is disabled or not
402
+
403
+ ### `sub` (object)
404
+
405
+ Properties of the `sub` object:
406
+
407
+ #### `disabled` (boolean)
408
+
409
+ Indicates if the plugin is disabled or not
410
+
411
+ ### `sup` (object)
412
+
413
+ Properties of the `sup` object:
414
+
415
+ #### `disabled` (boolean)
416
+
417
+ Indicates if the plugin is disabled or not
418
+
419
+ ### `table` (object)
420
+
421
+ Properties of the `table` object:
422
+
423
+ #### `disabled` (boolean)
424
+
425
+ Indicates if the plugin is disabled or not
426
+
427
+ ### `ul_list` (object)
428
+
429
+ Properties of the `ul_list` object:
430
+
431
+ #### `disabled` (boolean)
432
+
433
+ Indicates if the plugin is disabled or not
434
+
435
+ ### `underline` (object)
436
+
437
+ Properties of the `underline` object:
438
+
439
+ #### `disabled` (boolean)
440
+
441
+ Indicates if the plugin is disabled or not
442
+
443
+ ### `undo` (object)
444
+
445
+ Properties of the `undo` object:
446
+
447
+ #### `disabled` (boolean)
448
+
449
+ Indicates if the plugin is disabled or not
450
+
451
+ ## `EditableHtmlButtonConfigure` (object)
452
+
453
+ Properties of the `EditableHtmlButtonConfigure` object:
454
+
455
+ ### `disabled` (boolean)
456
+
457
+ Indicates if the plugin is disabled or not
458
+
459
+ ## `CustomPlugin` (object)
460
+
461
+ Properties of the `CustomPlugin` object:
462
+
463
+ ### `event` (string, required)
464
+
465
+ The name of the custom event. It needs to be valid (only letters, numbers and "_" can be used).
466
+ PIE will emit the event prefixed with "PIE-".
467
+ Eg: event = 'client_custom_event_A' => the emitted event will be "PIE-client_custom_event_A"
468
+
469
+ ### `iconAlt` (string, required)
470
+
471
+ The alt for the custom button icon
472
+
473
+ ### `iconType` (string, required)
474
+
475
+ The icon type.
476
+ Currently, only "SVG" is supported.
477
+
478
+ ### `icon` (string, required)
479
+
480
+ The icon string. Currently, only "SVG" is supported, so it needs to be a valid svg.
481
+
482
+ ## `ConfigureMaxImageDimensionsProp` (object)
483
+
484
+ Properties of the `ConfigureMaxImageDimensionsProp` object:
485
+
486
+ ### `teacherInstructions` (number)
487
+
488
+ Indicates the max dimension for images in teacher instructions
489
+
490
+ ### `prompt` (number)
491
+
492
+ Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
493
+
494
+ ### `rationale` (number)
495
+
496
+ Indicates the max dimension for images in rationale
497
+
498
+ ## `ConfigureMathMLProp` (object)
499
+
500
+ Properties of the `ConfigureMathMLProp` object:
501
+
502
+ ### `mmlOutput` (number)
503
+
504
+ Indicates if model should have mathML output instead of latex
505
+
506
+ ### `mmlEditing` (number)
507
+
508
+ Indicates if mathML that's already in model should be editable
509
+
510
+ ## `ConfigurePropWithEnabled` (object)
511
+
512
+ Properties of the `ConfigurePropWithEnabled` object:
513
+
514
+ ### `enabled` (boolean)
515
+
516
+ Indicates the value of the item if it affects config-ui
517
+ (eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
518
+
519
+ ### `settings` (boolean)
520
+
521
+ Indicates if the item has to be displayed in the Settings Panel
522
+
523
+ ### `label` (string)
524
+
525
+ Indicates the label for the item that has to be displayed in the Settings Panel
526
+
527
+ ## `ConfigureLanguageOptionsProp` (object)
528
+
529
+ Properties of the `ConfigureLanguageOptionsProp` object:
530
+
531
+ ### `value` (string, required)
532
+
533
+ Value of the language option
534
+
535
+ ### `label` (string, required)
536
+
537
+ Label of the language option
538
+
539
+ ## `Passage` (object)
540
+
541
+ Properties of the `Passage` object:
542
+
543
+ ### `title` (string, required)
544
+
545
+ The title of the passage
546
+
547
+ ### `subtitle` (string)
548
+
549
+ The subtitle of the passage
550
+
551
+ ### `author` (string)
552
+
553
+ The author of the passage
554
+
555
+ ### `text` (string, required)
556
+
557
+ The content of the passage
558
+
559
+ ### `teacherInstructions` (string)
560
+
561
+ Indicates teacher instructions
package/lib/index.js ADDED
@@ -0,0 +1,143 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _piePlayerEvents = require("@pie-framework/pie-player-events");
10
+ var _mathRendering = require("@pie-lib/math-rendering");
11
+ var _react = _interopRequireDefault(require("react"));
12
+ var _client = require("react-dom/client");
13
+ var _stimulusTabs = _interopRequireDefault(require("./stimulus-tabs"));
14
+ function getBaseHeadingLevel(element) {
15
+ const player = element.closest('pie-player') || element.closest('pie-item-player');
16
+ if (player) {
17
+ let raw = player.baseHeadingLevel;
18
+
19
+ // fallback in case someone sets via HTML attribute manually
20
+ if (raw == null) {
21
+ raw = player.getAttribute('base-heading-level') ?? player.getAttribute('baseheadinglevel');
22
+ }
23
+ const playerLevel = parseInt(raw, 10);
24
+ if (Number.isFinite(playerLevel) && playerLevel >= 1 && playerLevel <= 6) {
25
+ return playerLevel;
26
+ }
27
+ }
28
+ return undefined;
29
+ }
30
+ class PiePassage extends HTMLElement {
31
+ constructor() {
32
+ super();
33
+ (0, _defineProperty2.default)(this, "_scheduleMathRender", () => {
34
+ if (this._mathRenderPending) return;
35
+ this._mathRenderPending = true;
36
+ requestAnimationFrame(() => {
37
+ if (this._mathObserver) {
38
+ this._mathObserver.disconnect();
39
+ }
40
+ (0, _mathRendering.renderMath)(this);
41
+ this._mathRenderPending = false;
42
+ setTimeout(() => {
43
+ if (this._mathObserver) {
44
+ this._mathObserver.observe(this, {
45
+ childList: true,
46
+ subtree: true
47
+ });
48
+ }
49
+ }, 50);
50
+ });
51
+ });
52
+ this._model = {
53
+ passages: []
54
+ };
55
+ this._session = null;
56
+ this._root = null;
57
+ this._mathObserver = null;
58
+ this._mathRenderPending = false;
59
+ this._playerObserver = null;
60
+ }
61
+ setLangAttribute() {
62
+ const language = this._model && typeof this._model.language ? this._model.language : '';
63
+ const lang = language ? language.slice(0, 2) : 'en';
64
+ this.setAttribute('lang', lang);
65
+ }
66
+ _initMathObserver() {
67
+ if (this._mathObserver) return;
68
+ this._mathObserver = new MutationObserver(this._scheduleMathRender);
69
+ this._mathObserver.observe(this, {
70
+ childList: true,
71
+ subtree: true
72
+ });
73
+ }
74
+ _disconnectMathObserver() {
75
+ if (this._mathObserver) {
76
+ this._mathObserver.disconnect();
77
+ this._mathObserver = null;
78
+ }
79
+ }
80
+ set model(s) {
81
+ this._model = s;
82
+ this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this._session, !!this._model));
83
+ this.setLangAttribute();
84
+ this._render();
85
+ }
86
+ set session(s) {
87
+ this._session = s;
88
+ }
89
+ connectedCallback() {
90
+ this.setAttribute('aria-label', 'Passage');
91
+ this.setAttribute('role', 'region');
92
+ this._initMathObserver();
93
+ this._initPlayerObserver();
94
+ this._render();
95
+ }
96
+ _render() {
97
+ const {
98
+ passages = []
99
+ } = this._model;
100
+ if (this._model.passages.length > 0) {
101
+ const passagesTabs = passages.map((passage, index) => ({
102
+ id: index,
103
+ ...passage
104
+ }));
105
+ const elem = /*#__PURE__*/_react.default.createElement(_stimulusTabs.default, {
106
+ tabs: passagesTabs,
107
+ model: this._model,
108
+ baseHeadingLevel: getBaseHeadingLevel(this)
109
+ });
110
+ if (!this._root) {
111
+ this._root = (0, _client.createRoot)(this);
112
+ }
113
+ this._root.render(elem);
114
+ this._initMathObserver();
115
+ }
116
+ }
117
+ _initPlayerObserver() {
118
+ const player = this.closest('pie-player') || this.closest('pie-item-player');
119
+ if (!player) return;
120
+ this._playerObserver = new MutationObserver(() => {
121
+ this._render();
122
+ });
123
+ this._playerObserver.observe(player, {
124
+ attributes: true,
125
+ attributeFilter: ['base-heading-level']
126
+ });
127
+ }
128
+ _disconnectPlayerObserver() {
129
+ if (this._playerObserver) {
130
+ this._playerObserver.disconnect();
131
+ this._playerObserver = null;
132
+ }
133
+ }
134
+ disconnectedCallback() {
135
+ this._disconnectMathObserver();
136
+ this._disconnectPlayerObserver();
137
+ if (this._root) {
138
+ this._root.unmount();
139
+ }
140
+ }
141
+ }
142
+ exports.default = PiePassage;
143
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["_piePlayerEvents","require","_mathRendering","_react","_interopRequireDefault","_client","_stimulusTabs","getBaseHeadingLevel","element","player","closest","raw","baseHeadingLevel","getAttribute","playerLevel","parseInt","Number","isFinite","undefined","PiePassage","HTMLElement","constructor","_defineProperty2","default","_mathRenderPending","requestAnimationFrame","_mathObserver","disconnect","renderMath","setTimeout","observe","childList","subtree","_model","passages","_session","_root","_playerObserver","setLangAttribute","language","lang","slice","setAttribute","_initMathObserver","MutationObserver","_scheduleMathRender","_disconnectMathObserver","model","s","dispatchEvent","ModelSetEvent","tagName","toLowerCase","_render","session","connectedCallback","_initPlayerObserver","length","passagesTabs","map","passage","index","id","elem","React","createElement","StimulusTabs","tabs","createRoot","render","attributes","attributeFilter","_disconnectPlayerObserver","disconnectedCallback","unmount","exports"],"sources":["../src/index.js"],"sourcesContent":["import { ModelSetEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport StimulusTabs from './stimulus-tabs';\n\nfunction getBaseHeadingLevel(element) {\n const player =\n element.closest('pie-player') ||\n element.closest('pie-item-player');\n\n if (player) {\n let raw = player.baseHeadingLevel;\n\n // fallback in case someone sets via HTML attribute manually\n if (raw == null) {\n raw =\n player.getAttribute('base-heading-level') ??\n player.getAttribute('baseheadinglevel');\n }\n\n const playerLevel = parseInt(raw, 10);\n\n if (Number.isFinite(playerLevel) && playerLevel >= 1 && playerLevel <= 6) {\n return playerLevel;\n }\n }\n\n return undefined;\n}\n\nexport default class PiePassage extends HTMLElement {\n constructor() {\n super();\n this._model = {\n passages: [],\n };\n this._session = null;\n this._root = null;\n this._mathObserver = null;\n this._mathRenderPending = false;\n this._playerObserver = null;\n }\n\n setLangAttribute() {\n const language = this._model && typeof this._model.language ? this._model.language : '';\n const lang = language ? language.slice(0, 2) : 'en';\n this.setAttribute('lang', lang);\n }\n\n _scheduleMathRender = () => {\n if (this._mathRenderPending) return;\n this._mathRenderPending = true;\n\n requestAnimationFrame(() => {\n if (this._mathObserver) {\n this._mathObserver.disconnect();\n }\n renderMath(this);\n this._mathRenderPending = false;\n setTimeout(() => {\n if (this._mathObserver) {\n this._mathObserver.observe(this, { childList: true, subtree: true });\n }\n }, 50);\n });\n };\n\n _initMathObserver() {\n if (this._mathObserver) return;\n this._mathObserver = new MutationObserver(this._scheduleMathRender);\n this._mathObserver.observe(this, { childList: true, subtree: true });\n }\n\n _disconnectMathObserver() {\n if (this._mathObserver) {\n this._mathObserver.disconnect();\n this._mathObserver = null;\n }\n }\n\n set model(s) {\n this._model = s;\n this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this._session, !!this._model));\n this.setLangAttribute();\n\n this._render();\n }\n\n set session(s) {\n this._session = s;\n }\n\n connectedCallback() {\n this.setAttribute('aria-label', 'Passage');\n this.setAttribute('role', 'region');\n this._initMathObserver();\n this._initPlayerObserver();\n this._render();\n }\n\n _render() {\n const { passages = [] } = this._model;\n\n if (this._model.passages.length > 0) {\n const passagesTabs = passages.map((passage, index) => ({\n id: index,\n ...passage,\n }));\n\n const elem = React.createElement(StimulusTabs, {\n tabs: passagesTabs,\n model: this._model,\n baseHeadingLevel: getBaseHeadingLevel(this),\n });\n\n if (!this._root) {\n this._root = createRoot(this);\n }\n this._root.render(elem);\n\n this._initMathObserver();\n }\n }\n\n _initPlayerObserver() {\n const player = this.closest('pie-player') || this.closest('pie-item-player');\n if (!player) return;\n\n this._playerObserver = new MutationObserver(() => {\n this._render();\n });\n this._playerObserver.observe(player, { attributes: true, attributeFilter: ['base-heading-level'] });\n }\n\n _disconnectPlayerObserver() {\n if (this._playerObserver) {\n this._playerObserver.disconnect();\n this._playerObserver = null;\n }\n }\n\n disconnectedCallback() {\n this._disconnectMathObserver();\n this._disconnectPlayerObserver();\n if (this._root) {\n this._root.unmount();\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}