From 21faefa1be6a37df200db9929837997cf50721cb Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 27 Feb 2025 17:53:27 +0100
Subject: [PATCH] wip #7357 @1.5

---
 .../fluidbook/fluidbook.pagetransitions.js    | 54 ++++++++++++++++---
 style/fluidbook.less                          | 20 +++++++
 2 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.pagetransitions.js b/js/libs/fluidbook/fluidbook.pagetransitions.js
index 7de4b709..5c2273b6 100644
--- a/js/libs/fluidbook/fluidbook.pagetransitions.js
+++ b/js/libs/fluidbook/fluidbook.pagetransitions.js
@@ -53,12 +53,13 @@ FluidbookPageTransition.prototype = {
                 return 'fade';
             }
         }
-        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 (['fadeoutin', 'fadeoutthenin', 'slidefullwidth'].indexOf(this.fluidbook.settings.mobileTransitions) >= 0) {
+            return this.fluidbook.settings.mobileTransitions;
+        }
         if (this.fluidbook.displayOnePage) {
             return 'portrait';
         }
@@ -134,6 +135,11 @@ FluidbookPageTransition.prototype = {
             return this.pageTransition2D(pageNr);
         }
 
+        if (transitionType === 'slidefullwidth') {
+            this.fluidbook.zoom.resetZoom();
+            return this.pageTransitionSlideFullWidth(pageNr);
+        }
+
         if (transitionType === 'flip3d') {
             this.fluidbook.zoom.resetZoom(function () {
                 return $this.pageTransition3DFlip(pageNr);
@@ -378,6 +384,36 @@ FluidbookPageTransition.prototype = {
         });
     },
 
+    pageTransitionSlideFullWidth: function (pageNr) {
+        this.transitionning = true;
+        var $this = this;
+        var turning = this.getTurningPages(pageNr);
+        $("#pages").addClass('overflow');
+        $("#pages").append('<div id="nextDoublePage" aria-hidden="true" class="doublePage _2d _fullwidth axis_' + this.transitionAxis + ' ' + turning.nextFromClass + '"></div>');
+        var doublePage = $("#nextDoublePage");
+        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 () {
+                $("#shade").addClass('transition');
+                $this.pauseNetworkDuringTransition(pageNr);
+                $this.beforeTransition(pageNr, 2, turning);
+                $("#currentDoublePage").addClass('_2d').addClass('_fullwidth').addClass('axis_' + $this.transitionAxis).addClass(turning.currentToClass);
+                $(doublePage).removeClass(turning.nextFromClass).one($this.fluidbook.support.getTransitionEndEvent(), function (event) {
+                    if ($this.transitionning === false) {
+                        return;
+                    }
+                    $("#currentDoublePage").remove();
+                    $("#nextDoublePage").attr('id', 'currentDoublePage');
+                    $this.afterTransition(pageNr);
+                    $("#pages").removeClass('overflow');
+                });
+            });
+        });
+    },
+
     pageTransitionFade: function (pageNr) {
         return this.pageTransitionFadeOne(pageNr);
     },
@@ -519,7 +555,9 @@ FluidbookPageTransition.prototype = {
                 });
             });
         });
-    }, pageTransition1D: function (pageNr) {
+    },
+
+    pageTransition1D: function (pageNr) {
         var page = pageNr;
 
         var doublePage = $("#currentDoublePage");
@@ -534,7 +572,9 @@ FluidbookPageTransition.prototype = {
                 $this.afterTransition(page);
             });
         });
-    }, beforeTransition: function (page, transition, turning) {
+    },
+
+    beforeTransition: function (page, transition, turning) {
         if (transition == undefined) {
             transition = 1;
         }
@@ -575,7 +615,9 @@ FluidbookPageTransition.prototype = {
         } catch (err) {
 
         }
-    }, afterTransition: function (page, timeout) {
+    },
+
+    afterTransition: function (page, timeout) {
         if (timeout === undefined) {
             timeout = false;
         }
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 2bed0264..d94dd1b7 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -498,6 +498,8 @@ body, html {
   }
 }
 
+
+
 .portrait {
   .doublePage {
     &._2d.axis_x {
@@ -524,6 +526,19 @@ body, html {
   }
 }
 
+// Fullwidth slide
+.doublePage {
+  &._2d._fullwidth.axis_x {
+    &.next {
+      transform: translate3d(100vw, 0, 0);
+    }
+
+    &.prev {
+      transform: translate3d(-100vw, 0, 0);
+    }
+  }
+}
+
 .doublePage._3d {
   left: 50%;
 }
@@ -612,6 +627,11 @@ body, html {
   left: 0px;
   overflow-x: hidden;
   overflow-y: hidden;
+
+  &.overflow {
+    overflow-x: visible;
+    overflow-y: visible;
+  }
 }
 
 #shade {
-- 
2.39.5