From 0b49b920c82deb494b8e557726de5ef2d6d36710 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 2 May 2019 18:48:01 +0200
Subject: [PATCH] wip #2657 @6

---
 js/libs/fluidbook/fluidbook.mobilefirst.js    | 16 +++-
 .../fluidbook/fluidbook.pagetransitions.js    |  7 +-
 style/fluidbook.less                          | 77 +++++++++++++++++++
 style/mobilefirst.less                        | 33 +++++++-
 4 files changed, 129 insertions(+), 4 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index d00d0941..1d035550 100644
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -16,9 +16,15 @@ FluidbookMobileFirst.prototype = {
         this.fluidbook.datas.soundTheme = '';
     },
 
+    triggerTransition: function (page) {
+        this.fluidbook.pagetransitions.getTurningPages(page);
+
+    },
+
     beforeTransition: function (page) {
+        $('#pages .mf-nav').css({opacity: 0});
+        var $this = this;
         var dimensions = this.fluidbook.loader.getPageDimensions(page);
-        $('#pages .mf-nav').css('opacity', 0);
         var max = Math.max(dimensions.height, $("#currentDoublePage").outerHeight());
         $("#nextDoublePage .page, #nextDoublePage").css({
             height: dimensions.height,
@@ -27,7 +33,13 @@ FluidbookMobileFirst.prototype = {
 
         $("#pages,#fluidbook").css({height: max, maxHeight: max});
 
-        TweenLite.to("#scroll", this.fluidbook.pagetransitions.getTransitionDuration(page), {scrollTo: 0});
+        setTimeout(function () {
+            TweenLite.to("#scroll", $this.fluidbook.pagetransitions.getTransitionDuration(page), {
+                scrollTo: 0,
+                ease: Power2.easeInOut
+            });
+        }, 10);
+
     },
 
     afterTransition: function (page) {
diff --git a/js/libs/fluidbook/fluidbook.pagetransitions.js b/js/libs/fluidbook/fluidbook.pagetransitions.js
index f21eba19..2b8de5d7 100644
--- a/js/libs/fluidbook/fluidbook.pagetransitions.js
+++ b/js/libs/fluidbook/fluidbook.pagetransitions.js
@@ -339,6 +339,11 @@ FluidbookPageTransition.prototype = {
     },
     pageTransition2DPortrait: function (pageNr) {
         this.transitionning = true;
+
+        if (this.fluidbook.mobilefirst.enabled) {
+            this.fluidbook.mobilefirst.triggerTransition(pageNr);
+        }
+
         var $this = this;
         var turning = this.getTurningPages(pageNr);
         $("#pages").append('<div id="nextDoublePage" class="doublePage _2d axis_' + this.transitionAxis + ' ' + turning.nextFromClass + '"></div>');
@@ -357,7 +362,7 @@ FluidbookPageTransition.prototype = {
                 $this.beforeTransition(pageNr, 2, turning);
                 $("#currentDoublePage").addClass('axis_' + $this.transitionAxis).addClass('_2d').addClass(turning.currentToClass);
                 $(doublePage).removeClass(turning.nextFromClass).one($this.fluidbook.support.getTransitionEndEvent(), function () {
-                    if ($this.transitionning == false) {
+                    if ($this.transitionning === false) {
                         return;
                     }
                     $("#currentDoublePage").remove();
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 6bea8c2c..8133b108 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -327,10 +327,83 @@ body, html {
 
 /* Espaces forcés */
 
+.portrait #pages, .portrait .doublePage.page, .page, .doublePage._3d {
+  width: @book-page-width;
+  max-width: @book-page-width;
+  height: @book-page-height;
+  max-height: @book-page-height
+}
+
+@book-page-width-double: @book-page-width*2;
+
+.doublePage, #pages, #links, #searchHighlights {
+  width: @book-page-width-double;
+  max-width: @book-page-width-double;
+  height: @book-page-height;
+  max-height: @book-page-height;
+
+  .mobilefirst & {
+    width: @book-page-width;
+    max-width: @book-page-width;
+  }
+}
+
+.landscape {
+  .doublePage {
+    &._2d.axis_x {
+      &.next {
+        transform: translate3d(@book-page-width-double, 0, 0, 0);
+      }
+
+      &.prev {
+        transform: translate3d(-@book-page-width-double, 0, 0, 0);
+      }
+    }
+  }
+}
+
+.portrait {
+  .doublePage {
+    &._2d.axis_x {
+      &.next {
+        transform: translate3d(@book-page-width, 0, 0);
+      }
+
+      &.prev {
+        transform: translate3d(-@book-page-width, 0, 0);
+      }
+    }
+  }
+}
+
+.doublePage {
+  &._2d.axis_y {
+    &.next {
+      transform: translate3d(0, @book-page-height, 0);
+    }
+
+    &.prev {
+      transform: translate3d(0, -@book-page-height, 0);
+    }
+  }
+}
+
+.doublePage._3d {
+  left: @book-page-width;
+}
+
+#links.right {
+  left: -@book-page-width;
+}
+
 #currentDoublePage {
   pointer-events: none;
 }
 
+.landscape .page.right {
+  left: @book-page-width
+}
+
 .page {
   overflow: hidden;
   position: absolute;
@@ -885,6 +958,10 @@ footer, header, #interface {
     z-index: 0;
   }
 
+  .mobilefirst & {
+    display: none;
+  }
+
 }
 
 a.bookmark {
diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index f487a348..bf159e3f 100644
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -21,8 +21,39 @@
       touch-action: none !important;
     }
   }
+
+  .page {
+    overflow: visible;
+  }
+
+  .doublePage {
+    box-shadow: 0 0 30px rgba(0, 0, 0, @shadow-opacity*0.6);
+  }
+
+  #pages {
+    overflow: visible;
+  }
+
+  .portrait {
+    .doublePage {
+      &._2d.axis_x {
+        opacity: 0;
+        @transition-margin: 200;
+        transition-timing-function: ease-in-out;
+
+        &.next {
+          transform: translate3d(unit(@book-page-width+@transition-margin, px), 0, 0);
+        }
+
+        &.prev {
+          transform: translate3d(unit(-1*(@book-page-width+@transition-margin), px), 0, 0);
+        }
+      }
+    }
+  }
 }
 
+
 .mf-nav {
   position: absolute;
   left: 0;
@@ -32,7 +63,7 @@
   color: @page-number-color;
   font-size: unit(20*@css-scale, px);
   font-weight: 600;
-  transition: opacity 0.25s;
+  transition: opacity 0.1s;
   opacity: 0;
 
   @media @small {
-- 
2.39.5