From c3f0b0e1522a70e0458e0887b909e99d809711c8 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 7 Sep 2020 19:53:04 +0200
Subject: [PATCH] wip #3869 @1

---
 .../fluidbook/fluidbook.pagetransitions.js    | 57 +++++++++++++++++--
 style/fluidbook.less                          | 14 ++++-
 2 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.pagetransitions.js b/js/libs/fluidbook/fluidbook.pagetransitions.js
index ff34fc0c..ed40c2c9 100644
--- a/js/libs/fluidbook/fluidbook.pagetransitions.js
+++ b/js/libs/fluidbook/fluidbook.pagetransitions.js
@@ -26,7 +26,7 @@ FluidbookPageTransition.prototype = {
 
     getTransitionDuration: function (pageNr) {
         var type = this.getTransitionType(pageNr);
-        var f= 0;
+        var f = 0;
         if (type === 'immediate') {
             return 0;
         } else if (type === 'flip3d') {
@@ -45,6 +45,13 @@ FluidbookPageTransition.prototype = {
                 return "immediate";
             }
         }
+        if (this.fluidbook.settings.mobileTransitions === 'fade') {
+            if (this.fluidbook.displayOnePage) {
+                return 'fadeone';
+            } else {
+                return 'fade';
+            }
+        }
         if (!this.fluidbook.support.transitions2d ||
             this.fluidbook.settings.mobileTransitions === 'none') {
             return 'immediate';
@@ -72,7 +79,7 @@ FluidbookPageTransition.prototype = {
 
     },
 
-    pageTransition: function (pageNr,transitionType) {
+    pageTransition: function (pageNr, transitionType) {
         var $this = this;
         if (this.fluidbook.pad.enabled) {
             this.transitionAxis = this.fluidbook.pad.getTransitionAxis(this.fluidbook.currentPage, page);
@@ -84,7 +91,7 @@ FluidbookPageTransition.prototype = {
 
         this.fluidbook.tooltip.hideTooltip();
         pageNr = this.normalizeTransitionPageNr(pageNr);
-        if(transitionType===undefined) {
+        if (transitionType === undefined) {
             transitionType = this.getTransitionType(pageNr);
         }
 
@@ -94,6 +101,16 @@ FluidbookPageTransition.prototype = {
             return this.pageTransition1D(pageNr);
         }
 
+        if (transitionType === 'fade') {
+            this.fluidbook.zoom.resetZoom();
+            return this.pageTransitionFade(pageNr);
+        }
+
+        if (transitionType === 'fadeone') {
+            this.fluidbook.zoom.resetZoom();
+            return this.pageTransitionFadeOne(pageNr);
+        }
+
         if (transitionType === 'portrait') {
             this.fluidbook.zoom.resetZoom();
             return this.pageTransition2DPortrait(pageNr);
@@ -343,6 +360,39 @@ FluidbookPageTransition.prototype = {
             });
         });
     },
+
+    pageTransitionFadeOne: 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 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 () {
+                $this.pauseNetworkDuringTransition(pageNr);
+                $this.beforeTransition(pageNr, 2, 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;
@@ -470,7 +520,6 @@ FluidbookPageTransition.prototype = {
         }
 
 
-
         setTimeout(function () {
             $this.transitionning = false;
         }, 10);
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 219406ff..a99fb107 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2246,11 +2246,23 @@ ul.chapters.shareList a.level0 .svg-icon {
 /*  Transitions */
 
 .doublePage {
-  &._2d, &._3d {
+  &._2d, &._3d, &._fade {
     .page-transition(1);
   }
 }
 
+/* Fade */
+
+.doublePage._fade {
+  &#nextDoublePage {
+    z-index: 7;
+  }
+
+  &.next, &.prev {
+    opacity: 0;
+  }
+}
+
 /* 2D */
 .doublePage._2d.sliding {
   transition: none;
-- 
2.39.5