BL-15514 update imgs to the new way in templates and origami

src/BloomBrowserUI/bookEdit/js/CanvasElementManager.ts

@@ -537,6 +537,7 @@ export class CanvasElementManager {
         const bloomCanvases: HTMLElement[] = this.getAllBloomCanvasesOnPage();
 
         bloomCanvases.forEach((bloomCanvas) => {
+            this.setupBackgroundImageAttributes(bloomCanvas);
             this.adjustCanvasElementsForCurrentLanguage(bloomCanvas);
             this.ensureCanvasElementsIntersectParent(bloomCanvas);
             // image containers are already set by CSS to overflow:hidden, so they
@@ -6918,16 +6919,7 @@ export class CanvasElementManager {
             newImg.classList.remove("bloom-imageLoadError");
             newImgContainer.appendChild(newImg);
 
-            // Set level so Comical will consider the new canvas element to be under the existing ones.
-            const canvasElementElements = Array.from(
-                bloomCanvas.getElementsByClassName(kCanvasElementClass),
-            ) as HTMLElement[];
-            CanvasElementManager.putBubbleBefore(
-                bgCanvasElement,
-                canvasElementElements,
-                1,
-            );
-            bgCanvasElement.style.visibility = "none"; // hide it until we adjust its shape and position
+            bgCanvasElement.style.visibility = "hidden"; // hide it until we adjust its shape and position
             // consistent with level, we want it in front of the (new, placeholder) background image
             // and behind the other canvas elements.
             if (oldBgImage) {
@@ -6962,14 +6954,43 @@ export class CanvasElementManager {
             "src",
             oldBgImage?.getAttribute("src") ?? "placeHolder.png",
         );
-        this.adjustBackgroundImageSize(bloomCanvas, bgCanvasElement, true);
+        this.setupBackgroundImageAttributes(bloomCanvas, bgCanvasElement, true);
         bgCanvasElement.style.visibility = ""; // now we can show it, if it was new and hidden
         SetupMetadataButton(bloomCanvas);
         if (oldBgImage) {
             oldBgImage.remove();
         }
     }
 
+    public setupBackgroundImageAttributes(
+        bloomCanvas: HTMLElement,
+        bgElement?: HTMLElement,
+        useSizeOfNewImage: boolean = false,
+    ) {
+        if (!bgElement) {
+            bgElement = bloomCanvas.getElementsByClassName(
+                kBackgroundImageClass,
+            )[0] as HTMLElement;
+        }
+        if (bgElement?.getAttribute("data-bubble")) {
+            return; // setup has already been done (data-bubble is added by putBubbleBefore)
+        }
+        // Newly added background image element has not yet been given its size
+        this.adjustBackgroundImageSize(
+            bloomCanvas,
+            bgElement,
+            useSizeOfNewImage,
+        );
+        // Set level so Comical will consider the new canvas element to be under the existing ones.
+        CanvasElementManager.putBubbleBefore(
+            bgElement,
+            Array.from(
+                bloomCanvas.getElementsByClassName(kCanvasElementClass),
+            ) as HTMLElement[],
+            1,
+        );
+    }
+
     // Adjust the levels of all the bubbles of all the listed canvas elements so that
     // the one passed can be given the required level and all the others (keeping their
     // current order) will be perceived by ComicalJs as having a higher level

src/BloomBrowserUI/bookEdit/js/origami.ts

@@ -501,12 +501,18 @@ function makeImageOrCanvasFieldClickHandler(
     const container = clickedElement.closest(".split-pane-component-inner");
     addUndoPoint();
     const bloomCanvas = $(
-        `<div class='bloom-canvas bloom-leadingElement'${
+        `<div class='bloom-canvas bloom-has-canvas-element bloom-leadingElement'${
             isCanvasClick ? ` data-tool-id='${kCanvasToolId}'` : ""
         }></div>`,
     );
+    const canvasElement = $(
+        "<div class='bloom-canvas-element bloom-backgroundImage' style='width:100%; height:100%;'></div>",
+    );
+    const imageContainer = $("<div class='bloom-imageContainer'></div>");
     const image = $("<img src='placeHolder.png'/>");
-    bloomCanvas.append(image);
+    imageContainer.append(image);
+    canvasElement.append(imageContainer);
+    bloomCanvas.append(canvasElement);
     SetupImage(image); // Must attach it first so event handler gets added to parent
     container.append(bloomCanvas);
     clickedElement.closest(".selector-links").remove();

src/BloomBrowserUI/collectionsTab/collectionsTabBookPane/previewMode.less

@@ -145,7 +145,8 @@ and as a result, the labels are shifted to this many pixels to the width. This s
     }
 }
 
-// As of 6.3 it is currently still possible to get old-style placeholder img elements wrapped in nothing but a bloom-canvas (BL-15763) at publication.
+// If the book was created in 6.3 or earlier, it could possibly have old-style placeholder img elements wrapped in
+// nothing but a bloom-canvas (BL-15763)
 .hidePlaceHolders img[src*="placeHolder.png"] {
     display: none;
 }

src/BloomBrowserUI/placeHolderImages.less

@@ -37,12 +37,11 @@
     background-size: contain;
 }
 
-// When previewing in the Collection Tab, and also when in Change Layout mode in the Edit tab, or when dealing with
-// freshly added pages that have not yet been touched by the Canvas Element Manager,
-// img elements may not always be wrapped in canvas-element divs (see BL-15514 and BL-15763). Also below.
+// If the book was created in 6.3 or earlier, it could possibly have old-style placeholder img elements wrapped in
+// nothing but a bloom-canvas until that page is touched in Edit Mode, in which case we need this for placeholder images
+// in the collection tab preview and Add Page dialog thumbnails of custom templates
 .preview,
-.bloom-templateThumbnail,
-.origami-layout-mode {
+.bloom-templateThumbnail {
     .bloom-canvas:not(:has(.bloom-imageContainer)):has(
             img[src*="placeHolder.png"]
         ) {
@@ -58,12 +57,6 @@
         background-image: @canvas-placeholder;
     }
 }
-.origami-layout-mode
-    .bloom-canvas[data-tool-id="canvas"]:not(:has(.bloom-canvas-element)):has(
-        img[src*="placeHolder.png"]
-    ) {
-    background-image: @canvas-placeholder;
-}
 
 // In a bloom-canvas that has canvas elements other than the background image, we want to
 // hide the placeholder except for when the background image is active/selected

src/BloomExe/Book/Book.cs

@@ -2627,7 +2627,7 @@ private void FixUrlEncodedCoverImageIfNeeded()
                 "//body/div[@id='bloomDataDiv']/div[@data-book='coverImage']"
             );
             if (node == null)
-                return; // shouldn't happen, but nothing to fix if it does.
+                return;
             var text = node.InnerText;
             if (
                 !String.IsNullOrWhiteSpace(text)

src/content/templates/bloom-foundation-mixins.pug

@@ -114,11 +114,13 @@ mixin field-version1(placeholder)
 //- but that needs sizes and positions that depend on the page size and orientation. I tentatively
 //- think it's better to make the template books with the old architecture, and let them be migrated
 //- and sized when the page opens in our editor.
+//- height and width will be replaced with pixel values by the Canvas Element Manager at edit time
 mixin image
 	- requireZeroArguments('image', arguments);
-	.bloom-canvas&attributes(attributes)
-		img(src="placeHolder.png", width=attributes.initialImageWidth)
-		block
+	.bloom-canvas.bloom-has-canvas-element&attributes(attributes)
+		.bloom-canvas-element.bloom-backgroundImage(style="width:100%; height:100%;")
+			.bloom-imageContainer
+				img(src="placeHolder.png") 
 
 mixin video
 	- requireZeroArguments('video', arguments);

src/content/templates/template books/Activity/Activity.pug

@@ -47,6 +47,7 @@ html
 		+chooseWordFromPicture
 		+choosePictureFromWord
 
+		//- Note: we have since made changes to the image mixins; if we revive this code check the behavior here 
 		//- This will eventually be reinstated in the Games template, but temporarily we will reinstate it here and convert pug to HTML.
 		//-Slider: +page("Word Picture Slider Activity", "An interactive page where the user chooses pictures to match words.").customPage.bloom-ignoreForReaderStats.bloom-interactive-page.no-margin-page.numberedPage#3325A8B6-EA15-4FB7-9F8D-271D7B3C8D58(data-page='extra' data-analyticscategories="drag-game" data-activity="drag-word-chooser-slider" data-tool-id="game" data-feature="game")
 		//- 	.split-pane-component-inner

src/content/templates/template books/Digital Comic Book/Digital Comic Book.htm

@@ -209,8 +209,15 @@
                         data-book="bookTitle"
                     ></div>
                 </div>
-                <div class="bloom-canvas">
-                    <img data-book="coverImage" src="placeHolder.png" />
+                <div class="bloom-canvas bloom-has-canvas-element">
+                    <div
+                        class="bloom-canvas-element bloom-backgroundImage"
+                        style="width: 100%; height: 100%"
+                    >
+                        <div class="bloom-imageContainer">
+                            <img data-book="coverImage" src="placeHolder.png" />
+                        </div>
+                    </div>
                 </div>
                 <div class="bottomBlock"></div>
             </div>
@@ -240,8 +247,15 @@
 
             <div class="marginBox">
                 <div class="split-pane-component-inner">
-                    <div title="" class="bloom-canvas">
-                        <img src="placeHolder.png" alt="" />
+                    <div title="" class="bloom-canvas bloom-has-canvas-element">
+                        <div
+                            class="bloom-canvas-element bloom-backgroundImage"
+                            style="width: 100%; height: 100%"
+                        >
+                            <div class="bloom-imageContainer">
+                                <img src="placeHolder.png" />
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

src/content/templates/template books/Games/Games.html

@@ -193,9 +193,15 @@
                     </div>
                 </div>
 
-                <div class="bloom-canvas">
-                    <img data-book="coverImage" src="placeHolder.png" alt="" />
-
+                <div class="bloom-canvas bloom-has-canvas-element">
+                    <div
+                        class="bloom-canvas-element bloom-backgroundImage"
+                        style="width: 100%; height: 100%"
+                    >
+                        <div class="bloom-imageContainer">
+                            <img data-book="coverImage" src="placeHolder.png" />
+                        </div>
+                    </div>
                     <div
                         class="bloom-translationGroup bloom-imageDescription bloom-trailingElement"
                         data-default-languages="auto"

src/content/templates/template books/Paper Comic Book/Paper Comic Book.htm

@@ -182,8 +182,15 @@
                         data-book="bookTitle"
                     ></div>
                 </div>
-                <div class="bloom-canvas">
-                    <img data-book="coverImage" src="placeHolder.png" />
+                <div class="bloom-canvas bloom-has-canvas-element">
+                    <div
+                        class="bloom-canvas-element bloom-backgroundImage"
+                        style="width: 100%; height: 100%"
+                    >
+                        <div class="bloom-imageContainer">
+                            <img data-book="coverImage" src="placeHolder.png" />
+                        </div>
+                    </div>
                 </div>
                 <div class="bottomBlock"></div>
             </div>
@@ -213,12 +220,18 @@
 
             <div class="marginBox">
                 <div class="split-pane-component-inner">
-                    <div title="" class="bloom-canvas">
-                        <img
-                            class="bloom-imageObjectFit-cover"
-                            src="placeHolder.png"
-                            alt=""
-                        />
+                    <div class="bloom-canvas bloom-has-canvas-element">
+                        <div
+                            class="bloom-canvas-element bloom-backgroundImage"
+                            style="width: 100%; height: 100%"
+                        >
+                            <div class="bloom-imageContainer">
+                                <img
+                                    class="bloom-imageObjectFit-cover"
+                                    src="placeHolder.png"
+                                />
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -251,14 +264,19 @@
                 <div class="split-pane-component-inner">
                     <div
                         title="placeHolder.png 6.58 KB 341 x 335 52 DPI (should be 300-600) Bit Depth: 32"
-                        class="bloom-canvas"
+                        class="bloom-canvas bloom-has-canvas-element"
                     >
-                        <img
-                            class="bloom-imageObjectFit-cover"
-                            src="placeHolder.png"
-                            alt=""
-                        />
-
+                        <div
+                            class="bloom-canvas-element bloom-backgroundImage"
+                            style="width: 100%; height: 100%"
+                        >
+                            <div class="bloom-imageContainer">
+                                <img
+                                    class="bloom-imageObjectFit-cover"
+                                    src="placeHolder.png"
+                                />
+                            </div>
+                        </div>
                         <div
                             class="bloom-canvas-element ui-resizable ui-draggable bloom-allowAutoShrink"
                             style="

src/content/templates/template books/Wall Calendar/Wall Calendar.pug

@@ -17,8 +17,10 @@ mixin field-classOnChild(internalClass)
 
 mixin image-largePage
 	- requireZeroArguments('image', arguments);
-	.bloom-canvas(style="opacity: 1; overflow: hidden;")
-		img(src="placeHolder.png", width=attributes.initialImageWidth)
+	.bloom-canvas.bloom-has-canvas-element(style="opacity: 1; overflow: hidden;")
+		.bloom-canvas-element.bloom-backgroundImage(style="width:100%; height:100%;")
+			.bloom-imageContainer
+				img(src="placeHolder.png")
 		block
 
 html

src/content/templates/template books/preview-xmatter-mixins.pug

@@ -22,9 +22,12 @@ mixin preview-cover-contents
 
 	.bottomBlock
 
+//- height and width will be replaced with pixel values by the Canvas Element Manager at edit time
 mixin preview-cover-image
-	.bloom-canvas
-		img(data-book="coverImage", src="placeHolder.png")
+	.bloom-canvas.bloom-has-canvas-element
+		.bloom-canvas-element.bloom-backgroundImage(style="width:100%; height:100%;")
+			.bloom-imageContainer
+				img(data-book="coverImage", src="placeHolder.png")
 
 mixin preview-outsideFrontCover
 	// FRONT COVER

src/content/templates/xMatter/TemplateStarter-XMatter/TemplateStarter-XMatter.pug

@@ -9,9 +9,11 @@ html
 		+stylesheets('TemplateStarter-XMatter.css')
 	body
 		+page-cover('Image For Thumbnail')(data-export='front-matter-cover', data-xmatter-page='frontCover')&attributes(attributes).frontCover.outsideFrontCover#36e4a8d9-c61c-496d-9f37-2cc274d28b34
-			.bloom-canvas
+			.bloom-canvas.bloom-has-canvas-element
 				label.bubble Simple line drawings look best. Instead of using this page, you can also make your own thumbnail.png file and set it to Read-only so Bloom doesn't write over it.
-				img(src='placeHolder.png' data-book='coverImage')
+				.bloom-canvas-element.bloom-backgroundImage(style="width:100%; height:100%;")
+					.bloom-imageContainer
+						img(data-book="coverImage", src="placeHolder.png")
 
 		+page-xmatter("About").bloom-frontMatter(data-export='front-matter-about',data-xmatter-page="about")#26e4a8d9-c61c-496d-9f37-2cc274d28b32
 			| Template Title

src/content/templates/xMatter/bloom-xmatter-mixins.pug

@@ -153,12 +153,12 @@ mixin standard-cover-contents
 //- The usual code for creating image description on demand is not satisfactory,
 //- because the cover image description needs to have a data-book attribute
 //- so that the contents will survive changes to xmatter (and updates in bringBookUpToDate)
+//- Height and width will be replaced with pixel values by the Canvas Element Manager at edit time
 mixin standard-cover-image
-	.bloom-canvas
-		//- We're using the old structure with the img a direct child of the bloom-canvas,
-		//- because we can't set the right size of the new background-image structure until
-		//- we've loaded the page into a browser.
-		img(data-book="coverImage", src="placeHolder.png")&attributes(attributes)
+	.bloom-canvas.bloom-has-canvas-element
+		.bloom-canvas-element.bloom-backgroundImage(style="width:100%; height:100%;")
+			.bloom-imageContainer
+				img(data-book="coverImage", src="placeHolder.png")&attributes(attributes)
 		+field-cover-image("auto").bloom-imageDescription.bloom-trailingElement
 
 mixin field-cover-image(languages)

src/content/templates/xMatter/project-specific/Afghan-Children-Read-Common/Afghan-Children-Read-XMatter-mixins.pug

@@ -92,7 +92,7 @@ mixin afg-outsideFrontCover(langForBubbles)
 					+field-prototypeDeclaredExplicity("V").levelInfo
 						+hint-bubble(langForBubbles,'معلومات صنف، سمستر و سویه','د ټولگی، سمستر او سویي معلومات','Grade, Semester, and Level Information, in {lang}')
 						+editable(kLanguageForPrototypeOnly).Cover-Default-style.bloom-padForOverflow(data-book='levelInformation')
-
+		//- Note: we have since made changes to the image handling; check the behavior here if we revive this pug file.
 		.bloom-canvas.bloom-background-image-in-style-attr(data-book='coverImage', style="background-image:url('placeHolder.png')")
 
 		//- 2 columns: first for an optional logo, then text content
@@ -134,6 +134,7 @@ mixin afg-titlePage(langForBubbles)
 		.topBlock
 			+title-page-branding-top-left
 			.topContent.bishmallah
+				//- Note: we have since made changes to the image mixins; check the behavior here if we revive this pug file.
 				+image-xmatter('bishmallah')
 		+field-prototypeDeclaredExplicity("V")#titlePageTitleBlock
 			label.bubble Book title in {lang}

src/content/templates/xMatter/project-specific/Afghan-Children-Read-Dari-Device-XMatter/Afghan-Children-Read-Dari-Device-XMatter.pug

@@ -1,4 +1,6 @@
 include ../Afghan-Children-Read-Dari-XMatter/Dari-XMatter-mixins.pug
+//- Note: we have since made changes to the image mixins which could affect behavior here if we revive this pug file.
+
 
 doctype html
 html

src/content/templates/xMatter/project-specific/Afghan-Children-Read-Dari-XMatter/Afghan-Children-Read-Dari-XMatter.pug

@@ -1,4 +1,5 @@
 include Dari-XMatter-mixins.pug
+//- Note: we have since made changes to the image mixins which could affect behavior here if we revive this pug file.
 
 doctype html
 html

src/content/templates/xMatter/project-specific/Afghan-Children-Read-Pashto-Device-XMatter/Afghan-Children-Read-Pashto-Device-XMatter.pug

@@ -1,4 +1,5 @@
 include ../Afghan-Children-Read-Pashto-XMatter/Pashto-XMatter-mixins.pug
+//- Note: we have since made changes to the image mixins which could affect behavior here if we revive this pug file.
 
 doctype html
 html

src/content/templates/xMatter/project-specific/Afghan-Children-Read-Pashto-XMatter/Afghan-Children-Read-Pashto-XMatter.pug

@@ -1,4 +1,5 @@
 include Pashto-XMatter-mixins.pug
+//- Note: we have since made changes to the image mixins which could affect behavior here if we revive this pug file.
 
 doctype html
 html

src/content/templates/xMatter/project-specific/Kyrgyzstan2020-XMatter/Kyrgyzstan2020-XMatter.pug

@@ -1,3 +1,5 @@
+//- Note: we have since made changes to the image mixins which could affect behavior here if we revive this pug file.
+
 extends ../../Traditional-XMatter/Traditional-XMatter.pug
 
 mixin divider