npm - bloom-player - Versions diffs - 2.9.4 → 2.9.6 - Mend

bloom-player 2.9.4 → 2.9.6

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

package/dist/bloomplayer.htm CHANGED Viewed

@@ -7,7 +7,7 @@
 <head>
     <meta charset="UTF-8" />
     <!-- At build time, we replace this with the actual css file -->
-    <link rel="stylesheet" href="bloomPlayer-Tbc3Emk_.css">
+    <link rel="stylesheet" href="bloomPlayer-fhe-RLAT.css">
 </head>
 <!-- About the background-color here... the bloomPlayer.js will set the background color
@@ -18,7 +18,7 @@
     <!-- At build time, we replace the target of this script tag to point at the
      the bloom player bundle with the cache-busting hash in its name. -->
-    <script src="bloomPlayer.CEAwsYWZ.js"></script>
+    <script src="bloomPlayer.y_DYVj0Z.js"></script>
 </body>

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
     "description": "A library for displaying Bloom books in iframes or WebViews",
     "author": "SIL Global",
     "license": "MIT",
-    "version": "2.9.4",
+    "version": "2.9.6",
     "private": false,
     "// sideeffects might need to be ['*.css'] to avoid 'shaking' our CSS, if we ever get tree shaking working": "",
     "sideEffects": false,
@@ -18,10 +18,10 @@
         "dist/bloomplayer.htm",
         "dist/*.mp3",
         "lib/*.js",
-        "src/event.ts",
-        "src/narration.ts",
-        "src/dragActivityRuntime.ts",
-        "src/scrolling.ts",
+        "src/shared/event.ts",
+        "src/shared/narration.ts",
+        "src/shared/dragActivityRuntime.ts",
+        "src/shared/scrolling.ts",
         "dist/*.css",
         "dist/*.tsv"
     ],

package/src/{dragActivityRuntime.ts → shared/dragActivityRuntime.ts} RENAMED Viewed

@@ -19,6 +19,10 @@ import {
     urlPrefix,
 } from "./narration";
+// Probably not the most logical place to define this constant, but this file needs it,
+// and if we define it here we don't have to share another file with bloom editor.
+export const kLegacyCanvasElementSelector =
+    ".bloom-textOverPicture, .bloom-canvas-element";
 let targetPositions: {
     x: number;
     y: number;
@@ -36,7 +40,7 @@ let positionsToRestore: { x: string; y: string; elt: HTMLElement }[] = [];
 // Save the current positions of all draggables (when entering Play tab, so we can restore them when leaving).
 const savePositions = (page: HTMLElement) => {
     positionsToRestore = [];
-    page.querySelectorAll("[data-bubble-id]").forEach((elt: HTMLElement) => {
+    page.querySelectorAll("[data-draggable-id]").forEach((elt: HTMLElement) => {
         positionsToRestore.push({
             x: elt.style.left,
             y: elt.style.top,
@@ -61,7 +65,7 @@ export function adjustDraggablesForLanguage(page: HTMLElement) {
     if (page.getAttribute("data-activity") !== "drag-letter-to-target") {
         return;
     }
-    const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
+    const draggables = Array.from(page.querySelectorAll("[data-draggable-id]"));
     draggables.shift(); // The first one is always visible.
     draggables.forEach((draggable: HTMLElement) => {
         const shouldBeVisible = !!(
@@ -110,6 +114,11 @@ export function prepareActivity(
     );
     // Hide image titles, which might give too much away, or distract.
+    Array.from(document.getElementsByClassName("bloom-canvas")).forEach(
+        (container) => {
+            (container as HTMLElement).title = "";
+        },
+    );
     Array.from(document.getElementsByClassName("bloom-imageContainer")).forEach(
         (container) => {
             (container as HTMLElement).title = "";
@@ -126,10 +135,10 @@ export function prepareActivity(
     // Add event listeners to draggables to start dragging.
     targetPositions = [];
     originalPositions = new Map<HTMLElement, { x: number; y: number }>();
-    const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
+    const draggables = Array.from(page.querySelectorAll("[data-draggable-id]"));
     const targets: HTMLElement[] = [];
     draggables.forEach((elt: HTMLElement) => {
-        const targetId = elt.getAttribute("data-bubble-id");
+        const targetId = elt.getAttribute("data-draggable-id");
         const target = page.querySelector(
             `[data-target-of="${targetId}"]`,
         ) as HTMLElement;
@@ -144,7 +153,7 @@ export function prepareActivity(
             });
             targets.push(target);
         }
-        // if it has data-bubble-id, it should be draggable, just not needed
+        // if it has data-draggable-id, it should be draggable, just not needed
         // for the right answer.
         originalPositions.set(elt, { x: elt.offsetLeft, y: elt.offsetTop });
         elt.addEventListener("pointerdown", startDrag, { capture: true });
@@ -155,8 +164,8 @@ export function prepareActivity(
         video.addEventListener("pointerdown", playVideo);
         if (
             video
-                .closest(".bloom-textOverPicture")
-                ?.hasAttribute("data-bubble-id")
+                .closest(kLegacyCanvasElementSelector)
+                ?.hasAttribute("data-draggable-id")
         ) {
             // don't want to show controls on these, because they are typically too small,
             // and the play time is short enough that just click-to-play is fine
@@ -169,7 +178,7 @@ export function prepareActivity(
     const otherTextItems = Array.from(
         page.getElementsByClassName("bloom-visibility-code-on"),
     ).filter((e) => {
-        var top = e.closest(".bloom-textOverPicture") as HTMLElement;
+        var top = e.closest(kLegacyCanvasElementSelector) as HTMLElement;
         if (!top) {
             // don't think this can happen with current game templates,
             // but if there's some other text on the page, may as well play when clicked
@@ -276,7 +285,7 @@ export function undoPrepareActivity(page: HTMLElement) {
         },
     );
-    page.querySelectorAll("[data-bubble-id]").forEach((elt: HTMLElement) => {
+    page.querySelectorAll("[data-draggable-id]").forEach((elt: HTMLElement) => {
         elt.removeEventListener("pointerdown", startDrag, { capture: true });
     });
@@ -389,28 +398,27 @@ function changePageButtonClicked(e: MouseEvent) {
 export function playInitialElements(page: HTMLElement, playVideos: boolean) {
     const initialFilter = (e) => {
-        const top = e.closest(".bloom-textOverPicture") as HTMLElement;
-        if (!top) {
-            // not an overlay at all. (Note that all overlays have this class, including
-            // video and image overlays.) Maybe not possible in a drag-activity, but just in case
+        const ce = e.closest(kLegacyCanvasElementSelector) as HTMLElement;
+        if (!ce) {
+            // not a canvas element at all. Maybe not possible in a drag-activity, but just in case
             return false;
         }
-        if (top.classList.contains("draggable-text")) {
+        if (ce.classList.contains("draggable-text")) {
             return false; // draggable items are played only when clicked
         }
-        if (top.hasAttribute("data-bubble-id")) {
+        if (ce.hasAttribute("data-draggable-id")) {
             return false; // another indication of a draggable item; in fact, the one above might be obsolete
         }
-        if (top.classList.contains("drag-item-order-sentence")) {
+        if (ce.classList.contains("drag-item-order-sentence")) {
             return false; // This would give away the answer
         }
-        if (top.classList.contains("bloom-wordChoice")) {
+        if (ce.classList.contains("bloom-wordChoice")) {
             return false; // Only one of these should be played, after any instructions
         }
         // This might be redundant since they are not visible, but just in case
         if (
-            top.classList.contains("drag-item-correct") ||
-            top.classList.contains("drag-item-wrong")
+            ce.classList.contains("drag-item-correct") ||
+            ce.classList.contains("drag-item-wrong")
         ) {
             return false; // These are only played after they become visible
         }
@@ -493,9 +501,9 @@ const showCorrect = (e: MouseEvent) => {
         return; // huh?? but makes TS happy
     }
     currentPage
-        .querySelectorAll("[data-bubble-id]")
+        .querySelectorAll("[data-draggable-id]")
         .forEach((elt: HTMLElement) => {
-            const targetId = elt.getAttribute("data-bubble-id");
+            const targetId = elt.getAttribute("data-draggable-id");
             const target = currentPage?.querySelector(
                 `[data-target-of="${targetId}"]`,
             ) as HTMLElement;
@@ -606,7 +614,7 @@ const stopDrag = (e: PointerEvent) => {
     // back to its original position.
     // Enhance: animate?
     const page = dragTarget.closest(".bloom-page") as HTMLElement;
-    const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
+    const draggables = Array.from(page.querySelectorAll("[data-draggable-id]"));
     draggables.forEach((elt: HTMLElement) => {
         if (elt === dragTarget) {
             return;
@@ -738,9 +746,9 @@ function playSound(someElt: HTMLElement, soundFile: string) {
 function checkDraggables(page: HTMLElement) {
     let allCorrect = true;
-    const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
+    const draggables = Array.from(page.querySelectorAll("[data-draggable-id]"));
     draggables.forEach((draggableToCheck: HTMLElement) => {
-        const targetId = draggableToCheck.getAttribute("data-bubble-id");
+        const targetId = draggableToCheck.getAttribute("data-draggable-id");
         const target = page.querySelector(
             `[data-target-of="${targetId}"]`,
         ) as HTMLElement;
@@ -1021,7 +1029,7 @@ function checkRandomSentences(page: HTMLElement) {
 }
 export const doShowAnswersInTargets = (showNow: boolean, page: HTMLElement) => {
-    const draggables = Array.from(page.querySelectorAll("[data-bubble-id]"));
+    const draggables = Array.from(page.querySelectorAll("[data-draggable-id]"));
     if (showNow) {
         draggables.forEach((draggable) => {
             copyContentToTarget(draggable as HTMLElement);
@@ -1075,9 +1083,13 @@ export function copyContentToTarget(draggable: HTMLElement) {
     Array.from(throwAway.querySelectorAll("[tabindex]")).forEach((e) => {
         e.removeAttribute("tabindex");
     });
-    const imageContainer = throwAway.getElementsByClassName(
-        "bloom-imageContainer",
+    let imageContainer = throwAway.getElementsByClassName(
+        "bloom-canvas",
     )[0] as HTMLElement;
+    if (!imageContainer)
+        imageContainer = throwAway.getElementsByClassName(
+            "bloom-imageContainer",
+        )[0] as HTMLElement;
     if (imageContainer) {
         // We need another layer to manage clipping and centering. The one we were going to
         // throw away becomes the wrapper, and we add a new throwAway outside it
@@ -1096,7 +1108,7 @@ export function copyContentToTarget(draggable: HTMLElement) {
 }
 export const getTarget = (draggable: HTMLElement): HTMLElement | undefined => {
-    const targetId = draggable.getAttribute("data-bubble-id");
+    const targetId = draggable.getAttribute("data-draggable-id");
     if (!targetId) {
         return undefined;
     }
@@ -1179,6 +1191,7 @@ export function setupWordChooserSlider(page: HTMLElement) {
     //         // I'm not finding anything that works that way, and the code below finds a full URL
     //         sliderImgSrc = img.getAttribute("src")!;
     //     } else {
+    //          WOULD THIS NEED ADJUSTING FOR .bloom-canvas IF THIS CODE WERE RESURRECTED?
     //         // In bloom-player, for a forgotten and possibly obsolete reason, we use a background image
     //         // on the container. (I vaguely recall it may be important when animating the main image.)
     //         const imgContainer = imgTop.getElementsByClassName(

package/src/{scrolling.ts → shared/scrolling.ts} RENAMED Viewed

@@ -1,6 +1,9 @@
 import $ from "jquery";
 import "jquery.nicescroll";
-import { IsRunningOnBloomDesktop } from "./dragActivityRuntime";
+import {
+    IsRunningOnBloomDesktop,
+    kLegacyCanvasElementSelector,
+} from "./dragActivityRuntime";
 export const kSelectorForPotentialNiceScrollElements =
     ".bloom-translationGroup:not(.bloom-imageDescription) .bloom-editable.bloom-visibility-code-on, " +
@@ -20,7 +23,7 @@ export function addScrollbarsToPage(
     // on a browser so obsolete that it doesn't have IntersectionObserver (e.g., IE or Safari before 12.2),
     // we just won't get scrolling.
     if ("IntersectionObserver" in window) {
-        // Attach overlaid scrollbar to all editables except textOverPictures (e.g. comics)
+        // Attach overlaid scrollbar to all editables except canvas elements (e.g. comics)
         // Expected behavior for comic bubbles:  "we want overflow to show, but not generate scroll bars"
         let scrollBlocks: HTMLElement[] = [];
         let countOfObserversExpectedToReport = 0;
@@ -104,7 +107,7 @@ export function addScrollbarsToPage(
                             countOfObserversThatHaveReported++;
                             ob.unobserve(entry.target); // don't want to keep getting them, or leak observers
                             const isBubble = !!entry.target.closest(
-                                ".bloom-textOverPicture",
+                                kLegacyCanvasElementSelector,
                             );
                             // In bloom desktop preview, we set width to 200% and then scale down by 50%.
                             // This can lead to intersection ratios very slightly less than 1, probably due

/package/src/{event.ts → shared/event.ts} RENAMED Viewed

File without changes

/package/src/{narration.ts → shared/narration.ts} RENAMED Viewed

File without changes