From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 27 Feb 2025 13:35:34 +0000 (+0100)
Subject: wait #7321 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=0649d64c979f0cafd23001ca14958550c3e8d993;p=fluidbook-html5.git

wait #7321 @2
---

diff --git a/js/libs/fluidbook/fluidbook.background.js b/js/libs/fluidbook/fluidbook.background.js
index 959230b8..887b4794 100644
--- a/js/libs/fluidbook/fluidbook.background.js
+++ b/js/libs/fluidbook/fluidbook.background.js
@@ -7,13 +7,18 @@ function FluidbookBackground(fluidbook) {
 
 FluidbookBackground.prototype = {
     init: function () {
-        if (this.fluidbook.settings.links.background !== undefined
-            && (this.fluidbook.settings.repeat !== Fluidbook.REPEAT || this.fluidbook.tabs.hasTabs())
-            && this.fluidbook.settings.links.background !== ''
-            && this.fluidbook.settings.mobileIgnoreBackgroundLinks === false) {
+        if (this.fluidbook.settings.links.background !== undefined && (this.fluidbook.settings.repeat !== Fluidbook.REPEAT || this.fluidbook.tabs.hasTabs()) && this.fluidbook.settings.links.background !== '' && this.fluidbook.settings.mobileIgnoreBackgroundLinks === false) {
 
             $("#background").prepend('<div class="links">' + this.fluidbook.loader.handleExtension(this.fluidbook.settings.links.background) + '</div>');
             this.hasLinks = true;
+            if (Object.keys(this.fluidbook.settings.dynamicBackgroundColor).length > 0) {
+                $.each(this.fluidbook.settings.dynamicBackgroundColor, function (k, v) {
+                    if (v.length > 2 && v[2] !== '') {
+                        let image = v[2];
+                        $("#background").append('<div class="image" data-image="' + image + '" style="background-image:url(\'data/links/' + image + '\')"></div>');
+                    }
+                });
+            }
         }
 
         if (Object.keys(this.fluidbook.settings.dynamicBackgroundColor).length > 0) {
@@ -35,23 +40,31 @@ FluidbookBackground.prototype = {
                     back = null;
                     arrows = '';
                 }
-                var noback = (back === undefined || back === null || back === '' || back === '-');
 
-                let bgi = image === '' ? 'none' : 'url(\'data/links/' + image + '\')';
+                var noback = (back === undefined || back === null || back === '' || back === '-');
                 let style = "";
                 if (!noback) {
                     style += "background-color:" + back + " !important;";
                 }
+
+                $('#background').attr('style', style);
+
+                // Image
+                let currentImage = $("#background .image.active").data('image');
                 if (image) {
-                    style += "background-image:" + bgi + " !important;background-size:cover !important;background-position:50% 50% !important;";
+                    let i = $("#background .image[data-image='" + image + "']");
+                    if (currentImage !== image) {
+                        $("#background .image.active").removeClass("active");
+                        i.addClass('active');
+                    }
+                } else {
+                    $("#background .image.active").removeClass("active");
                 }
 
-                $('#background').attr('style', style);
                 $("#prev-arrows,#next-arrows,#menuOpener,.audio-description-button,#horizontalNav #iconList a .svg-icon, #horizontalNav #iconList a span").css('color', arrows);
             });
         }
-    },
-    resize: function (w, h) {
+    }, resize: function (w, h) {
         if (!this.hasLinks) {
             return;
         }
@@ -86,8 +99,7 @@ FluidbookBackground.prototype = {
             }
 
             $("#background .links").css({
-                top: top,
-                left: left
+                top: top, left: left
             });
         } else if (this.fluidbook.settings.repeat === Fluidbook.RATIO || this.fluidbook.settings.repeat === Fluidbook.STRETCH) {
 
@@ -133,11 +145,7 @@ FluidbookBackground.prototype = {
             }
             if ($("#background .links .tabslink").length > 0) {
                 var transform = {
-                    scaleX: scaleX,
-                    scaleY: scaleY,
-                    translateX: translateX,
-                    translateY: translateY,
-                    origin: origin
+                    scaleX: scaleX, scaleY: scaleY, translateX: translateX, translateY: translateY, origin: origin
                 };
                 $("#background .links").transform(transform).css(css);
             }
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 7507c85e..2bed0264 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -204,7 +204,25 @@ body, html {
   width: 100%;
   height: 100%;
   z-index: 0;
-  transition: opacity 500ms ease-in-out, background-color unit(@page-transition-duration, s) ease-in-out, background-image unit(@page-transition-duration, s) ease-in-out;
+  transition: opacity 500ms ease-in-out, background-color unit(@page-transition-duration, s) ease-in-out;
+
+  .image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    opacity: 0;
+    pointer-events: none;
+    background-size: cover;
+    background-position: 50% 50%;
+    transition: opacity unit(@page-transition-duration, s) ease-in-out;
+
+    &.active {
+      opacity: 1;
+    }
+  }
 
   &.visible {
     opacity: 1;
@@ -2512,7 +2530,8 @@ ul.chapters.shareList a.level0 .svg-icon {
 .doublePage {
   &._2d, &._fade {
     .page-transition-slide(1);
-    &._quick{
+
+    &._quick {
       .page-transition-slide(0.5);
     }
   }