]> _ Git - fluidbook-html5.git/commitdiff
wait #3825 @3
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 24 Sep 2020 16:07:09 +0000 (18:07 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 24 Sep 2020 16:07:09 +0000 (18:07 +0200)
_index.html
js/libs/fluidbook/fluidbook.loader.js
js/libs/fluidbook/fluidbook.pagetransitions.js
style/fluidbook.less

index 5ce8c44c6f3a4ade9061a226bb5d22c39d82cd74..a5911e75e9417e8abd65e16f259bd7cc29551512 100644 (file)
@@ -19,7 +19,7 @@
         }
 
         body, html {
-            background-color: #<!-- $bgcolor -->;
+            background-color: # <!-- $ bgcolor -->;
             width: 100%;
             height: 100%;
         }
                     <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>
index dc145d918c01b30a4fd4dd941cf7244d2019c598..323ed20eb74593d52af90f2b0234d58a28d02e69 100644 (file)
@@ -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();
         });
     },
index ed40c2c9175dba30a07b07ecee61657c21d054f9..38f21ccd8a25cef17a72c8a80d8e7f99f022fb54 100644 (file)
@@ -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;
index 349bc36d570adb85d7fd12b75a8f63bfb870ed29..e204264be2bf79289676d1b815881bbffbf56e0b 100644 (file)
@@ -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;