diff --git a/src/BloomBrowserUI/bookEdit/js/CanvasElementManager.ts b/src/BloomBrowserUI/bookEdit/js/CanvasElementManager.ts index 143c7eeda616..4a0d43566a3d 100644 --- a/src/BloomBrowserUI/bookEdit/js/CanvasElementManager.ts +++ b/src/BloomBrowserUI/bookEdit/js/CanvasElementManager.ts @@ -529,6 +529,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 @@ -6728,15 +6729,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. @@ -6772,12 +6764,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 e5bb91a50156..eb1f7cb618d5 100644 --- a/src/BloomBrowserUI/bookEdit/js/origami.ts +++ b/src/BloomBrowserUI/bookEdit/js/origami.ts @@ -507,12 +507,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/placeHolderImages.less b/src/BloomBrowserUI/placeHolderImages.less index 1160caac05d2..6864816d72b7 100644 --- a/src/BloomBrowserUI/placeHolderImages.less +++ b/src/BloomBrowserUI/placeHolderImages.less @@ -20,26 +20,11 @@ .image-placeholder-background(); } -// When previewing templates in the Collection Tab, and also when in Change Layout mode in the Edit tab, -// img elements may not be wrapped in canvas-element divs (see BL-15514). Also below. -.preview:not([data-l1]), // Real books always have a data-l1 attribute added -.origami-layout-mode { - .bloom-canvas:not(:has(.bloom-canvas-element)):has( - img[src*="placeHolder.png"] - ) { - .image-placeholder-background(); - } -} - // Use the easel placeholder instead of the usual flower placeholder for the background image whenever there is data-tool-id="canvas" // (there are no legacy-style templates that should have the easel icon) .bloom-canvas[data-tool-id="canvas"] .bloom-backgroundImage.bloom-canvas-element:has( img[src*="placeHolder.png"] - ), -.origami-layout-mode - .bloom-canvas[data-tool-id="canvas"]:not(:has(.bloom-canvas-element)):has( - img[src*="placeHolder.png"] ) { background-image: @canvas-placeholder; } diff --git a/src/BloomExe/Book/Book.cs b/src/BloomExe/Book/Book.cs index 4888420858cc..b378a8870bc0 100644 --- a/src/BloomExe/Book/Book.cs +++ b/src/BloomExe/Book/Book.cs @@ -2640,7 +2640,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 8553829f62b3..e7f5b1ce4756 100644 --- a/src/content/templates/bloom-foundation-mixins.pug +++ b/src/content/templates/bloom-foundation-mixins.pug @@ -116,9 +116,10 @@ mixin field-version1(placeholder) //- and sized when the page opens in our editor. 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..5dfc12ab5bb5 100644 --- a/src/content/templates/template books/Activity/Activity.pug +++ b/src/content/templates/template books/Activity/Activity.pug @@ -51,6 +51,7 @@ 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 //- //- there's a background image that fills the page. Todo: find a good one that doesn't take much space for a demo + // TODO Note: we have since made changes to the image mixins; check the behavior here //- +image //- //- this div is moved to the bottom of the page and stretched to fill it by the javascript //- //- then we copy images into it and allow them to be slid around. 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 b3907022b185..41432afb46bb 100644 --- a/src/content/templates/template books/Games/Games.html +++ b/src/content/templates/template books/Games/Games.html @@ -193,9 +193,15 @@
-
- - +
+
+
+ +
+
-
- +
+
+
+ +
+
@@ -214,12 +221,18 @@
-
- +
+
+
+ +
+
@@ -252,14 +265,19 @@
- - +
+
+ +
+