diff --git a/src/BloomBrowserUI/bookEdit/js/CanvasElementManager.ts b/src/BloomBrowserUI/bookEdit/js/CanvasElementManager.ts index 9ae5722241b5..25034229ffa9 100644 --- a/src/BloomBrowserUI/bookEdit/js/CanvasElementManager.ts +++ b/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,15 +6919,6 @@ 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 // consistent with level, we want it in front of the (new, placeholder) background image // and behind the other canvas elements. @@ -6962,12 +6954,31 @@ export class CanvasElementManager { "src", oldBgImage?.getAttribute("src") ?? "placeHolder.png", ); - this.adjustBackgroundImageSize(bloomCanvas, bgCanvasElement, true); - bgCanvasElement.style.visibility = ""; // now we can show it, if it was new and hidden - SetupMetadataButton(bloomCanvas); - if (oldBgImage) { - oldBgImage.remove(); + this.setupBackgroundImageAttributes(bloomCanvas, bgCanvasElement); + } + + public setupBackgroundImageAttributes( + bloomCanvas: HTMLElement, + bgElement?: HTMLElement, + ) { + 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, false); + // 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 diff --git a/src/BloomBrowserUI/bookEdit/js/origami.ts b/src/BloomBrowserUI/bookEdit/js/origami.ts index bca7c23a80ea..6da140e5121f 100644 --- a/src/BloomBrowserUI/bookEdit/js/origami.ts +++ b/src/BloomBrowserUI/bookEdit/js/origami.ts @@ -501,12 +501,18 @@ function makeImageOrCanvasFieldClickHandler( const container = clickedElement.closest(".split-pane-component-inner"); addUndoPoint(); const bloomCanvas = $( - `
`, ); + const canvasElement = $( + "
", + ); + const imageContainer = $("
"); const image = $(""); - 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(); diff --git a/src/BloomBrowserUI/collectionsTab/collectionsTabBookPane/previewMode.less b/src/BloomBrowserUI/collectionsTab/collectionsTabBookPane/previewMode.less index de6aa2cf1f56..dedf28a05441 100644 --- a/src/BloomBrowserUI/collectionsTab/collectionsTabBookPane/previewMode.less +++ b/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; } diff --git a/src/BloomBrowserUI/placeHolderImages.less b/src/BloomBrowserUI/placeHolderImages.less index 8725a689762a..4fd3ba5bff30 100644 --- a/src/BloomBrowserUI/placeHolderImages.less +++ b/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 diff --git a/src/BloomExe/Book/Book.cs b/src/BloomExe/Book/Book.cs index f5bad4207bdb..e07e9817fc1e 100644 --- a/src/BloomExe/Book/Book.cs +++ b/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) diff --git a/src/content/templates/bloom-foundation-mixins.pug b/src/content/templates/bloom-foundation-mixins.pug index ffcadb67cb2e..4e27f2807806 100644 --- a/src/content/templates/bloom-foundation-mixins.pug +++ b/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); diff --git a/src/content/templates/template books/Activity/Activity.pug b/src/content/templates/template books/Activity/Activity.pug index 8ebdecf6da61..4b8a3c723739 100644 --- a/src/content/templates/template books/Activity/Activity.pug +++ b/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 diff --git a/src/content/templates/template books/Digital Comic Book/Digital Comic Book.htm b/src/content/templates/template books/Digital Comic Book/Digital Comic Book.htm index 31414fa44a16..3969385f3415 100644 --- a/src/content/templates/template books/Digital Comic Book/Digital Comic Book.htm +++ b/src/content/templates/template books/Digital Comic Book/Digital Comic Book.htm @@ -209,10 +209,18 @@ data-book="bookTitle" > -
- +
+
+
+ +
+
+ `
@@ -240,8 +248,15 @@
-
- +
+
+
+ +
+
diff --git a/src/content/templates/template books/Games/Games.html b/src/content/templates/template books/Games/Games.html index 74624d7e00c2..8db33a3dda76 100644 --- a/src/content/templates/template books/Games/Games.html +++ b/src/content/templates/template books/Games/Games.html @@ -193,9 +193,15 @@
-
- - +
+
+
+ +
+
-
- +
+
+
+ +
+
@@ -213,12 +220,18 @@
-
- +
+
+
+ +
+
@@ -251,14 +264,19 @@
- - +
+
+ +
+