bloom-player 2.9.4 → 2.9.5

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 (8) hide show
  1. package/dist/{bloomPlayer-Tbc3Emk_.css → bloomPlayer-Cz-YWJ7V.css} +1 -1
  2. package/dist/{bloomPlayer.CEAwsYWZ.js → bloomPlayer._QoLSOyA.js} +36 -36
  3. package/dist/bloomplayer.htm +2 -2
  4. package/package.json +5 -5
  5. package/src/{dragActivityRuntime.ts → shared/dragActivityRuntime.ts} +29 -26
  6. package/src/{scrolling.ts → shared/scrolling.ts} +6 -3
  7. /package/src/{event.ts → shared/event.ts} +0 -0
  8. /package/src/{narration.ts → shared/narration.ts} +0 -0
package/dist/bloomplayer.htm CHANGED
@@ -7,7 +7,7 @@
7
7
  <head>
8
8
  <meta charset="UTF-8" />
9
9
  <!-- At build time, we replace this with the actual css file -->
10
- <link rel="stylesheet" href="bloomPlayer-Tbc3Emk_.css">
10
+ <link rel="stylesheet" href="bloomPlayer-Cz-YWJ7V.css">
11
11
  </head>
12
12
 
13
13
  <!-- About the background-color here... the bloomPlayer.js will set the background color
@@ -18,7 +18,7 @@
18
18
 
19
19
  <!-- At build time, we replace the target of this script tag to point at the
20
20
  the bloom player bundle with the cache-busting hash in its name. -->
21
- <script src="bloomPlayer.CEAwsYWZ.js"></script>
21
+ <script src="bloomPlayer._QoLSOyA.js"></script>
22
22
  </body>
23
23
 
24
24
 
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "A library for displaying Bloom books in iframes or WebViews",
4
4
  "author": "SIL Global",
5
5
  "license": "MIT",
6
- "version": "2.9.4",
6
+ "version": "2.9.5",
7
7
  "private": false,
8
8
  "// sideeffects might need to be ['*.css'] to avoid 'shaking' our CSS, if we ever get tree shaking working": "",
9
9
  "sideEffects": false,
@@ -18,10 +18,10 @@
18
18
  "dist/bloomplayer.htm",
19
19
  "dist/*.mp3",
20
20
  "lib/*.js",
21
- "src/event.ts",
22
- "src/narration.ts",
23
- "src/dragActivityRuntime.ts",
24
- "src/scrolling.ts",
21
+ "src/shared/event.ts",
22
+ "src/shared/narration.ts",
23
+ "src/shared/dragActivityRuntime.ts",
24
+ "src/shared/scrolling.ts",
25
25
  "dist/*.css",
26
26
  "dist/*.tsv"
27
27
  ],
package/src/{dragActivityRuntime.ts → shared/dragActivityRuntime.ts} RENAMED
@@ -19,6 +19,10 @@ import {
19
19
  urlPrefix,
20
20
  } from "./narration";
21
21
 
22
+ // Probably not the most logical place to define this constant, but this file needs it,
23
+ // and if we define it here we don't have to share another file with bloom editor.
24
+ export const kLegacyCanvasElementSelector =
25
+ ".bloom-textOverPicture, .bloom-canvas-element";
22
26
  let targetPositions: {
23
27
  x: number;
24
28
  y: number;
@@ -36,7 +40,7 @@ let positionsToRestore: { x: string; y: string; elt: HTMLElement }[] = [];
36
40
  // Save the current positions of all draggables (when entering Play tab, so we can restore them when leaving).
37
41
  const savePositions = (page: HTMLElement) => {
38
42
  positionsToRestore = [];
39
- page.querySelectorAll("[data-bubble-id]").forEach((elt: HTMLElement) => {
43
+ page.querySelectorAll("[data-draggable-id]").forEach((elt: HTMLElement) => {
40
44
  positionsToRestore.push({
41
45
  x: elt.style.left,
42
46
  y: elt.style.top,
@@ -61,7 +65,7 @@ export function adjustDraggablesForLanguage(page: HTMLElement) {
61
65
  if (page.getAttribute("data-activity") !== "drag-letter-to-target") {
62
66
  return;
63
67
  }
64
- const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
68
+ const draggables = Array.from(page.querySelectorAll("[data-draggable-id]"));
65
69
  draggables.shift(); // The first one is always visible.
66
70
  draggables.forEach((draggable: HTMLElement) => {
67
71
  const shouldBeVisible = !!(
@@ -126,10 +130,10 @@ export function prepareActivity(
126
130
  // Add event listeners to draggables to start dragging.
127
131
  targetPositions = [];
128
132
  originalPositions = new Map<HTMLElement, { x: number; y: number }>();
129
- const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
133
+ const draggables = Array.from(page.querySelectorAll("[data-draggable-id]"));
130
134
  const targets: HTMLElement[] = [];
131
135
  draggables.forEach((elt: HTMLElement) => {
132
- const targetId = elt.getAttribute("data-bubble-id");
136
+ const targetId = elt.getAttribute("data-draggable-id");
133
137
  const target = page.querySelector(
134
138
  `[data-target-of="${targetId}"]`,
135
139
  ) as HTMLElement;
@@ -144,7 +148,7 @@ export function prepareActivity(
144
148
  });
145
149
  targets.push(target);
146
150
  }
147
- // if it has data-bubble-id, it should be draggable, just not needed
151
+ // if it has data-draggable-id, it should be draggable, just not needed
148
152
  // for the right answer.
149
153
  originalPositions.set(elt, { x: elt.offsetLeft, y: elt.offsetTop });
150
154
  elt.addEventListener("pointerdown", startDrag, { capture: true });
@@ -155,8 +159,8 @@ export function prepareActivity(
155
159
  video.addEventListener("pointerdown", playVideo);
156
160
  if (
157
161
  video
158
- .closest(".bloom-textOverPicture")
159
- ?.hasAttribute("data-bubble-id")
162
+ .closest(kLegacyCanvasElementSelector)
163
+ ?.hasAttribute("data-draggable-id")
160
164
  ) {
161
165
  // don't want to show controls on these, because they are typically too small,
162
166
  // and the play time is short enough that just click-to-play is fine
@@ -169,7 +173,7 @@ export function prepareActivity(
169
173
  const otherTextItems = Array.from(
170
174
  page.getElementsByClassName("bloom-visibility-code-on"),
171
175
  ).filter((e) => {
172
- var top = e.closest(".bloom-textOverPicture") as HTMLElement;
176
+ var top = e.closest(kLegacyCanvasElementSelector) as HTMLElement;
173
177
  if (!top) {
174
178
  // don't think this can happen with current game templates,
175
179
  // but if there's some other text on the page, may as well play when clicked
@@ -276,7 +280,7 @@ export function undoPrepareActivity(page: HTMLElement) {
276
280
  },
277
281
  );
278
282
 
279
- page.querySelectorAll("[data-bubble-id]").forEach((elt: HTMLElement) => {
283
+ page.querySelectorAll("[data-draggable-id]").forEach((elt: HTMLElement) => {
280
284
  elt.removeEventListener("pointerdown", startDrag, { capture: true });
281
285
  });
282
286
 
@@ -389,28 +393,27 @@ function changePageButtonClicked(e: MouseEvent) {
389
393
 
390
394
  export function playInitialElements(page: HTMLElement, playVideos: boolean) {
391
395
  const initialFilter = (e) => {
392
- const top = e.closest(".bloom-textOverPicture") as HTMLElement;
393
- if (!top) {
394
- // not an overlay at all. (Note that all overlays have this class, including
395
- // video and image overlays.) Maybe not possible in a drag-activity, but just in case
396
+ const ce = e.closest(kLegacyCanvasElementSelector) as HTMLElement;
397
+ if (!ce) {
398
+ // not a canvas element at all. Maybe not possible in a drag-activity, but just in case
396
399
  return false;
397
400
  }
398
- if (top.classList.contains("draggable-text")) {
401
+ if (ce.classList.contains("draggable-text")) {
399
402
  return false; // draggable items are played only when clicked
400
403
  }
401
- if (top.hasAttribute("data-bubble-id")) {
404
+ if (ce.hasAttribute("data-draggable-id")) {
402
405
  return false; // another indication of a draggable item; in fact, the one above might be obsolete
403
406
  }
404
- if (top.classList.contains("drag-item-order-sentence")) {
407
+ if (ce.classList.contains("drag-item-order-sentence")) {
405
408
  return false; // This would give away the answer
406
409
  }
407
- if (top.classList.contains("bloom-wordChoice")) {
410
+ if (ce.classList.contains("bloom-wordChoice")) {
408
411
  return false; // Only one of these should be played, after any instructions
409
412
  }
410
413
  // This might be redundant since they are not visible, but just in case
411
414
  if (
412
- top.classList.contains("drag-item-correct") ||
413
- top.classList.contains("drag-item-wrong")
415
+ ce.classList.contains("drag-item-correct") ||
416
+ ce.classList.contains("drag-item-wrong")
414
417
  ) {
415
418
  return false; // These are only played after they become visible
416
419
  }
@@ -493,9 +496,9 @@ const showCorrect = (e: MouseEvent) => {
493
496
  return; // huh?? but makes TS happy
494
497
  }
495
498
  currentPage
496
- .querySelectorAll("[data-bubble-id]")
499
+ .querySelectorAll("[data-draggable-id]")
497
500
  .forEach((elt: HTMLElement) => {
498
- const targetId = elt.getAttribute("data-bubble-id");
501
+ const targetId = elt.getAttribute("data-draggable-id");
499
502
  const target = currentPage?.querySelector(
500
503
  `[data-target-of="${targetId}"]`,
501
504
  ) as HTMLElement;
@@ -606,7 +609,7 @@ const stopDrag = (e: PointerEvent) => {
606
609
  // back to its original position.
607
610
  // Enhance: animate?
608
611
  const page = dragTarget.closest(".bloom-page") as HTMLElement;
609
- const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
612
+ const draggables = Array.from(page.querySelectorAll("[data-draggable-id]"));
610
613
  draggables.forEach((elt: HTMLElement) => {
611
614
  if (elt === dragTarget) {
612
615
  return;
@@ -738,9 +741,9 @@ function playSound(someElt: HTMLElement, soundFile: string) {
738
741
 
739
742
  function checkDraggables(page: HTMLElement) {
740
743
  let allCorrect = true;
741
- const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
744
+ const draggables = Array.from(page.querySelectorAll("[data-draggable-id]"));
742
745
  draggables.forEach((draggableToCheck: HTMLElement) => {
743
- const targetId = draggableToCheck.getAttribute("data-bubble-id");
746
+ const targetId = draggableToCheck.getAttribute("data-draggable-id");
744
747
  const target = page.querySelector(
745
748
  `[data-target-of="${targetId}"]`,
746
749
  ) as HTMLElement;
@@ -1021,7 +1024,7 @@ function checkRandomSentences(page: HTMLElement) {
1021
1024
  }
1022
1025
 
1023
1026
  export const doShowAnswersInTargets = (showNow: boolean, page: HTMLElement) => {
1024
- const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
1027
+ const draggables = Array.from(page.querySelectorAll("[data-draggable-id]"));
1025
1028
  if (showNow) {
1026
1029
  draggables.forEach((draggable) => {
1027
1030
  copyContentToTarget(draggable as HTMLElement);
@@ -1096,7 +1099,7 @@ export function copyContentToTarget(draggable: HTMLElement) {
1096
1099
  }
1097
1100
 
1098
1101
  export const getTarget = (draggable: HTMLElement): HTMLElement | undefined => {
1099
- const targetId = draggable.getAttribute("data-bubble-id");
1102
+ const targetId = draggable.getAttribute("data-draggable-id");
1100
1103
  if (!targetId) {
1101
1104
  return undefined;
1102
1105
  }
package/src/{scrolling.ts → shared/scrolling.ts} RENAMED
@@ -1,6 +1,9 @@
1
1
  import $ from "jquery";
2
2
  import "jquery.nicescroll";
3
- import { IsRunningOnBloomDesktop } from "./dragActivityRuntime";
3
+ import {
4
+ IsRunningOnBloomDesktop,
5
+ kLegacyCanvasElementSelector,
6
+ } from "./dragActivityRuntime";
4
7
 
5
8
  export const kSelectorForPotentialNiceScrollElements =
6
9
  ".bloom-translationGroup:not(.bloom-imageDescription) .bloom-editable.bloom-visibility-code-on, " +
@@ -20,7 +23,7 @@ export function addScrollbarsToPage(
20
23
  // on a browser so obsolete that it doesn't have IntersectionObserver (e.g., IE or Safari before 12.2),
21
24
  // we just won't get scrolling.
22
25
  if ("IntersectionObserver" in window) {
23
- // Attach overlaid scrollbar to all editables except textOverPictures (e.g. comics)
26
+ // Attach overlaid scrollbar to all editables except canvas elements (e.g. comics)
24
27
  // Expected behavior for comic bubbles: "we want overflow to show, but not generate scroll bars"
25
28
  let scrollBlocks: HTMLElement[] = [];
26
29
  let countOfObserversExpectedToReport = 0;
@@ -104,7 +107,7 @@ export function addScrollbarsToPage(
104
107
  countOfObserversThatHaveReported++;
105
108
  ob.unobserve(entry.target); // don't want to keep getting them, or leak observers
106
109
  const isBubble = !!entry.target.closest(
107
- ".bloom-textOverPicture",
110
+ kLegacyCanvasElementSelector,
108
111
  );
109
112
  // In bloom desktop preview, we set width to 200% and then scale down by 50%.
110
113
  // This can lead to intersection ratios very slightly less than 1, probably due
/package/src/{event.ts → shared/event.ts} RENAMED
File without changes
/package/src/{narration.ts → shared/narration.ts} RENAMED
File without changes