]> _ Git - fluidbook-html5.git/commitdiff
wait #7356 @1.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 27 Feb 2025 11:13:46 +0000 (12:13 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 27 Feb 2025 11:13:46 +0000 (12:13 +0100)
js/libs/fluidbook/fluidbook.background.js
js/libs/fluidbook/fluidbook.pagetransitions.js
style/fluidbook.less
style/mixins.less

index 0d90b7c0a86bbd03460ffb878eaa34b752e682ca..959230b8535b197dc598e9ce18df6a62b0a28266 100644 (file)
@@ -23,20 +23,29 @@ FluidbookBackground.prototype = {
                     var s = $this.fluidbook.settings.dynamicBackgroundColor[page];
                     var back = s[0];
                     var arrows = '';
+                    var image = '';
                     if (s.length > 1) {
                         arrows = s[1];
+                        if (s.length > 2) {
+                            image = s[2];
+                        }
                     }
                 } catch (e) {
-
+                    image = '';
                     back = null;
                     arrows = '';
                 }
-                var style;
-                if (back === undefined || back === null || back === '' || back === '-') {
-                    style = '';
-                } else {
-                    style = "background-image:none !important;background-color:" + back + " !important;";
+                var noback = (back === undefined || back === null || back === '' || back === '-');
+
+                let bgi = image === '' ? 'none' : 'url(\'data/links/' + image + '\')';
+                let style = "";
+                if (!noback) {
+                    style += "background-color:" + back + " !important;";
                 }
+                if (image) {
+                    style += "background-image:" + bgi + " !important;background-size:cover !important;background-position:50% 50% !important;";
+                }
+
                 $('#background').attr('style', style);
                 $("#prev-arrows,#next-arrows,#menuOpener,.audio-description-button,#horizontalNav #iconList a .svg-icon, #horizontalNav #iconList a span").css('color', arrows);
             });
index d322341f802e0fad2db49eb01efde74f6aa38639..7de4b709ea7d31c66c1f1139435e1532d8c692ba 100644 (file)
@@ -42,8 +42,7 @@ FluidbookPageTransition.prototype = {
         if (pageNr !== undefined) {
             pageNr = this.normalizeTransitionPageNr(pageNr);
 
-            if (pageNr === this.fluidbook.normalizePage(this.fluidbook.currentPage) ||
-                this.fluidbook.currentPage === -1) {
+            if (pageNr === this.fluidbook.normalizePage(this.fluidbook.currentPage) || this.fluidbook.currentPage === -1) {
                 return "immediate";
             }
         }
@@ -54,8 +53,10 @@ FluidbookPageTransition.prototype = {
                 return 'fade';
             }
         }
-        if (!this.fluidbook.support.transitions2d ||
-            this.fluidbook.settings.mobileTransitions === 'none') {
+        if (this.fluidbook.settings.mobileTransitions === 'fadeoutin' || this.fluidbook.settings.mobileTransitions === 'fadeoutthenin') {
+            return this.fluidbook.settings.mobileTransitions;
+        }
+        if (!this.fluidbook.support.transitions2d || this.fluidbook.settings.mobileTransitions === 'none') {
             return 'immediate';
         }
         if (this.fluidbook.displayOnePage) {
@@ -108,6 +109,16 @@ FluidbookPageTransition.prototype = {
             return this.pageTransitionFade(pageNr);
         }
 
+        if (transitionType === 'fadeoutin') {
+            this.fluidbook.zoom.resetZoom();
+            return this.pageTransitionFadeOutIn(pageNr);
+        }
+
+        if (transitionType === 'fadeoutthenin') {
+            this.fluidbook.zoom.resetZoom();
+            return this.pageTransitionFadeOutThenIn(pageNr);
+        }
+
         if (transitionType === 'fadeone') {
             this.fluidbook.zoom.resetZoom();
             return this.pageTransitionFadeOne(pageNr);
@@ -300,8 +311,7 @@ FluidbookPageTransition.prototype = {
     },
 
     centerBookEnabled: function () {
-        return !!this.fluidbook.settings.centerBook &&
-            !this.fluidbook.displayOnePage;
+        return !!this.fluidbook.settings.centerBook && !this.fluidbook.displayOnePage;
     },
 
     centerBook: function (center, animationDuration) {
@@ -408,6 +418,78 @@ FluidbookPageTransition.prototype = {
         });
     },
 
+    pageTransitionFadeOutThenIn: function (pageNr) {
+        this.transitionning = true;
+        var $this = this;
+        var turning = this.getTurningPages(pageNr);
+        $("#pages").append('<div id="nextDoublePage" aria-hidden="true" class="doublePage _fade _quick ' + turning.nextFromClass + '"></div>');
+        var currentDoublePage = $("#currentDoublePage");
+        $(currentDoublePage).addClass('_fade').addClass('_quick');
+        var doublePage = $("#nextDoublePage");
+        if (this.fluidbook.displayOnePage) {
+            this.fluidbook.hidePage('right');
+        }
+
+        if (!this.fluidbook.loader.arePreloadedPages(turning.end)) {
+            this.fluidbook.displayLoader();
+        }
+        this.pauseNetworkDuringPagesPreload();
+
+        this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () {
+            $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () {
+                $(currentDoublePage).css('opacity', 0);
+                $(currentDoublePage).one($this.fluidbook.support.getTransitionEndEvent(), function () {
+                    $("#shade").addClass('fadetransition');
+                    $this.pauseNetworkDuringTransition(pageNr);
+                    $this.beforeTransition(pageNr, 1, turning);
+                    $(doublePage).removeClass(turning.nextFromClass).one($this.fluidbook.support.getTransitionEndEvent(), function () {
+                        if ($this.transitionning === false) {
+                            return;
+                        }
+                        $(currentDoublePage).remove();
+                        $("#nextDoublePage").attr('id', 'currentDoublePage');
+                        $this.afterTransition(pageNr);
+                    });
+                });
+            });
+        });
+    },
+
+    pageTransitionFadeOutIn: function (pageNr) {
+        this.transitionning = true;
+        var $this = this;
+        var turning = this.getTurningPages(pageNr);
+        $("#pages").append('<div id="nextDoublePage" aria-hidden="true" class="doublePage _fade ' + turning.nextFromClass + '"></div>');
+        var currentDoublePage = $("#currentDoublePage");
+        $(currentDoublePage).addClass('_fade');
+        var doublePage = $("#nextDoublePage");
+        if (this.fluidbook.displayOnePage) {
+            this.fluidbook.hidePage('right');
+        }
+
+        if (!this.fluidbook.loader.arePreloadedPages(turning.end)) {
+            this.fluidbook.displayLoader();
+        }
+        this.pauseNetworkDuringPagesPreload();
+
+        this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () {
+            $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () {
+                $(currentDoublePage).css('opacity', 0);
+                $("#shade").addClass('fadetransition');
+                $this.pauseNetworkDuringTransition(pageNr);
+                $this.beforeTransition(pageNr, 1, turning);
+                $(doublePage).removeClass(turning.nextFromClass).one($this.fluidbook.support.getTransitionEndEvent(), function () {
+                    if ($this.transitionning === false) {
+                        return;
+                    }
+                    $(currentDoublePage).remove();
+                    $("#nextDoublePage").attr('id', 'currentDoublePage');
+                    $this.afterTransition(pageNr);
+                });
+            });
+        });
+    },
+
     pageTransition2DPortrait: function (pageNr) {
         this.transitionning = true;
         var $this = this;
@@ -437,8 +519,7 @@ FluidbookPageTransition.prototype = {
                 });
             });
         });
-    },
-    pageTransition1D: function (pageNr) {
+    }, pageTransition1D: function (pageNr) {
         var page = pageNr;
 
         var doublePage = $("#currentDoublePage");
@@ -453,15 +534,12 @@ FluidbookPageTransition.prototype = {
                 $this.afterTransition(page);
             });
         });
-    },
-    beforeTransition: function (page, transition, turning) {
+    }, beforeTransition: function (page, transition, turning) {
         if (transition == undefined) {
             transition = 1;
         }
         $(this.fluidbook).trigger('fluidbook.page.change.start', [page, {
-            transition: transition,
-            page: page,
-            turningPages: turning.flip
+            transition: transition, page: page, turningPages: turning.flip
         }]);
         var $this = this;
         this.fluidbook.tooltip.hideTooltip('beforeTransition');
@@ -497,8 +575,7 @@ FluidbookPageTransition.prototype = {
         } catch (err) {
 
         }
-    },
-    afterTransition: function (page, timeout) {
+    }, afterTransition: function (page, timeout) {
         if (timeout === undefined) {
             timeout = false;
         }
index 7bddfe12fc82cfe36d782da69a9a0800a0198e77..7507c85e51912ce4af538fc103a60986e5f4588c 100644 (file)
@@ -204,7 +204,7 @@ 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;
+  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;
 
   &.visible {
     opacity: 1;
@@ -2512,6 +2512,9 @@ ul.chapters.shareList a.level0 .svg-icon {
 .doublePage {
   &._2d, &._fade {
     .page-transition-slide(1);
+    &._quick{
+      .page-transition-slide(0.5);
+    }
   }
 
   &._3d {
index 127faf94f22956c4c85a0ef116b8d195426e4caf..3be76a07c4037d302e300af7b2f7ecf174878296 100644 (file)
@@ -24,7 +24,7 @@
   .prop-transition-slide(all, @factor);
 }
 
-.prop-transition(@property,@factor) {
+.prop-transition(@property, @factor) {
   -moz-transition: @property unit(@page-transition-duration*@factor, s) ease-in-out;
   -webkit-transition: @property unit(@page-transition-duration*@factor, s) ease-in-out;
   -ms-transition: @property unit(@page-transition-duration*@factor, s) ease-in-out;
@@ -32,7 +32,7 @@
   transition: @property unit(@page-transition-duration*@factor, s) ease-in-out;
 }
 
-.prop-transition-slide(@property,@factor) {
+.prop-transition-slide(@property, @factor) {
   -moz-transition: @property unit(@page-transition-slide-duration*@factor, s) ease-in-out;
   -webkit-transition: @property unit(@page-transition-slide-duration*@factor, s) ease-in-out;
   -ms-transition: @property unit(@page-transition-slide-duration*@factor, s) ease-in-out;