From 007088112522ebe0c25466f781ced18a1998af14 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 24 Sep 2020 18:07:09 +0200
Subject: [PATCH] wait #3825 @3

---
 _index.html                                   |  6 ++-
 js/libs/fluidbook/fluidbook.loader.js         | 10 ----
 .../fluidbook/fluidbook.pagetransitions.js    | 20 ++++++++
 style/fluidbook.less                          | 51 ++++++++++++-------
 4 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/_index.html b/_index.html
index 5ce8c44c..a5911e75 100644
--- a/_index.html
+++ b/_index.html
@@ -19,7 +19,7 @@
         }
 
         body, html {
-            background-color: #<!-- $bgcolor -->;
+            background-color: # <!-- $ bgcolor -->;
             width: 100%;
             height: 100%;
         }
@@ -93,6 +93,10 @@
                     <div id="currentDoublePage" class="doublePage" aria-hidden="true"></div>
                     <div id="searchHighlights" aria-hidden="true"></div>
                     <div id="links"></div>
+                    <div id="shade" aria-hidden="true">
+                        <div class="left"></div>
+                        <div class="right"></div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index dc145d91..323ed20e 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -286,7 +286,6 @@ FluidbookLoader.prototype = {
         })
 
         var page;
-        var shade;
         // Si la page existe déjà, on la place à la bonne position et on l'affiche
         if ($("#page_" + pageNr).length > 0) {
             page = $("#page_" + pageNr);
@@ -305,7 +304,6 @@ FluidbookLoader.prototype = {
                 $(page).show();
             }
 
-            $(page).children(".shade").html(this.loadPageShade(position));
             $(page).children('.clinks').html(this.fluidbook.settings.clinks[pageNr]);
             callback();
             return;
@@ -317,18 +315,10 @@ FluidbookLoader.prototype = {
         $(doublePage).append(page);
         $(page).show();
         $(page).addClass(position);
-        var back = $(page).children(".background")[0];
         var $this = this;
         this.loadDatas(pageNr, function () {
             $(page).addClass(position);
-
-            shade = 'shade' + position;
-            if ($this.fluidbook.settings.pageReflection) {
-                shade += '-reflet';
-            }
-            shade += '.png';
             $(page).children('.clinks').html($this.fluidbook.settings.clinks[pageNr]);
-            $(page).children(".shade").html($this.loadPageShade(position));
             callback();
         });
     },
diff --git a/js/libs/fluidbook/fluidbook.pagetransitions.js b/js/libs/fluidbook/fluidbook.pagetransitions.js
index ed40c2c9..38f21ccd 100644
--- a/js/libs/fluidbook/fluidbook.pagetransitions.js
+++ b/js/libs/fluidbook/fluidbook.pagetransitions.js
@@ -458,6 +458,13 @@ FluidbookPageTransition.prototype = {
             this.fluidbook.mobilefirst.beforeTransition(page);
         }
 
+        if (turning.flip.indexOf(1) >= 0 && turning.dir === -1) {
+            $("#shade .left").hide();
+        }
+        if (turning.flip.indexOf(this.fluidbook.contentlock.maxPage) >= 0 && this.fluidbook.contentlock.maxPage % 2 === 0 && turning.dir === 1) {
+            $("#shade .right").hide();
+        }
+
         this.fluidbook.hideLoader();
         this.fluidbook.hideUnnecessaryButtons(page);
         var animationDuration = transition <= 1 ? 0 : parseFloat(this.fluidbook.settings.mobileTransitionDuration);
@@ -519,6 +526,19 @@ FluidbookPageTransition.prototype = {
             $("#down").css('opacity', 0);
         }
 
+        // Manage shade visibility
+        if (this.fluidbook.getPhysicalPageNumberOfSide('left', true) === false) {
+            $("#shade .left").hide();
+        } else {
+            $("#shade .left").show();
+        }
+
+        if (this.fluidbook.getPhysicalPageNumberOfSide('right', true) === false) {
+            $("#shade .right").hide();
+        } else {
+            $("#shade .right").show();
+        }
+
 
         setTimeout(function () {
             $this.transitionning = false;
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 349bc36d..e204264b 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -201,7 +201,7 @@ body, html {
 
 /* Orientation */
 .portrait #fluidbook {
-  .shade, .page.right {
+  #shade .right, .page.right {
     display: none;
   }
 }
@@ -461,24 +461,8 @@ body, html {
     height: 100%;
   }
 
-  .shade {
-    position: absolute;
-    top: 0px;
-    z-index: 4;
-  }
-
   &.right {
     z-index: 1;
-
-    .shade {
-      left: 0px;
-    }
-  }
-
-  &.left {
-    .shade {
-      right: 0px;
-    }
   }
 }
 
@@ -490,6 +474,39 @@ body, html {
   overflow-y: hidden;
 }
 
+#shade {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 5;
+  pointer-events: none;
+  opacity: @page-shade-opacity;
+
+  .portrait & {
+    display: none;
+  }
+
+  > div {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 12.5%;
+    background-size: 100% 100%;
+
+    &.left {
+      right: 50%;
+      background-image: url("../images/shadows/pages/left.png");
+    }
+
+    &.right {
+      left: 50%;
+      background-image: url("../images/shadows/pages/right.png");
+    }
+  }
+}
+
 /* Search */
 #searchHighlights {
   position: absolute;
-- 
2.39.5