wip #1739 @1.5

diff --git a/_index.html b/_index.html
index 8f70248e7b10e1854b4d6420f772ac64a242ec1a..e1b137b24413768595bce75b3efc9b166319630d 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -25,12 +25,13 @@
 <!--googleon: all-->
 <div id="main">
        <div id="background">
-
-               <div id="shadow">
-                       <div class="shadow bottom left"></div>
-                       <div class="shadow bottom right"></div>
-                       <div class="shadow side left"></div>
-                       <div class="shadow side right"></div>
+               <div id="center-shadow">
+                       <div id="shadow">
+                               <div class="shadow bottom left"></div>
+                               <div class="shadow bottom right"></div>
+                               <div class="shadow side left"></div>
+                               <div class="shadow side right"></div>
+                       </div>
                </div>
        </div>
        <header>
@@ -44,27 +45,29 @@
        <div id="helpViewOverlay"></div>
 
        <div id="z" class="nozoom">
-               <div id="fluidbook">
-                       <div id="edges">
-                               <div class="edge left">
-                                       <div class="top"></div>
-                                       <div class="middle"></div>
-                                       <div class="bottom"></div>
+               <div id="center-fluidbook">
+                       <div id="fluidbook">
+                               <div id="edges">
+                                       <div class="edge left">
+                                               <div class="top"></div>
+                                               <div class="middle"></div>
+                                               <div class="bottom"></div>
+                                       </div>
+                                       <div class="edge right">
+                                               <div class="top"></div>
+                                               <div class="middle"></div>
+                                               <div class="bottom"></div>
+                                       </div>
                                </div>
-                               <div class="edge right">
-                                       <div class="top"></div>
-                                       <div class="middle"></div>
-                                       <div class="bottom"></div>
+                               <div id="pagesnumbers">
+                                       <div class="left"></div>
+                                       <div class="right"></div>
+                               </div>
+                               <div id="pages" class="double">
+                                       <div id="currentDoublePage" class="doublePage"></div>
+                                       <div id="searchHighlights"></div>
+                                       <div id="links"></div>
                                </div>
-                       </div>
-                       <div id="pagesnumbers">
-                               <div class="left"></div>
-                               <div class="right"></div>
-                       </div>
-                       <div id="pages" class="double">
-                               <div id="currentDoublePage" class="doublePage"></div>
-                               <div id="searchHighlights"></div>
-                               <div id="links"></div>
                        </div>
                </div>
        </div>

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 5093584eb6149a8afededd96a6012acc5bf30c5f..c547a3bba1cccdf3e45c2cf3232c613b885e46ca 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -379,7 +379,6 @@ Fluidbook.prototype = {
         return this.pageTransition3D(pageNr);
     },
     pageTransition3D: function (pageNr) {
-
         var $this = this;
         if ($("#pages").hasClass('_3dtransition')) {
             return;
@@ -395,7 +394,7 @@ Fluidbook.prototype = {
             $("#pages").addClass('_3dtransition');
             $this.loader.setContentsInDoublePage(currentDoublePage, turning.flat, true, function () {
                 $this.loader.setContentsInDoublePage(doublePage, turning.flip, true, function () {
-                    $this.beforeTransition(pageNr, 3, turning.flip);
+                    $this.beforeTransition(pageNr, 3, turning);
                     $(doublePage).addClass(turning.nextFromClass + 'end').one($this.support.getTransitionEndEvent(), function () {
                         if ($this.transitionning == false) {
                             return;
@@ -420,6 +419,33 @@ Fluidbook.prototype = {
             });
         });
     },
+
+    centerBook: function (center, animationDuration) {
+        var animate = animationDuration != undefined && animationDuration > 0;
+        var move = $("#center-fluidbook,#center-shadow");
+        var currentLeft = $("#center-fluidbook").data('left');
+        var left = 0;
+        if (center != 0) {
+            left = this.resize.centerOffset * center;
+        }
+
+
+        if (currentLeft == left) {
+            return;
+        }
+
+        $("#center-fluidbook").data('left', left);
+
+        if (animate) {
+            $(move).addClass('animate');
+        } else {
+            $(move).removeClass('animate');
+        }
+        setTimeout(function () {
+            move.css('left', left);
+        }, 10);
+    },
+
     getTurningPages: function (newPage) {
         var res = {};
         res.dir = 1;
@@ -441,6 +467,7 @@ Fluidbook.prototype = {
                 res.flat = [newPage, res.currentRight];
                 res.flip = [res.currentLeft, newPage + 1];
             }
+
             res['end'] = [newPage, newPage + 1];
         } else {
             res.currentRight = this.currentPage - this.currentPage % 2;
@@ -463,8 +490,20 @@ Fluidbook.prototype = {
                 res.end = [newPage + 1, newPage];
             }
         }
+
+        var center = !!this.datas.centerBook && !this.displayOnePage;
+        res.center = 0;
+        if (center) {
+            if (newPage <= 1) {
+                res.center = -1;
+            } else if (this.datas.pages % 2 == 0 && newPage == this.datas.pages) {
+                res.center = 1;
+            }
+        }
+
         res.loading = [res.currentLeft, res.currentRight];
-        return json_parse(JSON.stringify(res));
+        res = json_parse(JSON.stringify(res));
+        return res;
     },
     reloadCurrentPage: function () {
         this.pageTransition(this.currentPage);
@@ -617,7 +656,7 @@ Fluidbook.prototype = {
             this.hidePage('right');
         }
         var turning = this.getTurningPages(pageNr);
-        this.beforeTransition(pageNr,1, turning);
+        this.beforeTransition(pageNr, 1, turning);
         this.loader.setContentsInDoublePage(doublePage, turning.end, true, function () {
             $this.afterTransition(page);
         });
@@ -626,7 +665,7 @@ Fluidbook.prototype = {
         if (d == undefined) {
             d = 1;
         }
-        $(this).trigger('fluidbook.page.change.start', [page, {transition: d, page: page, turningPages: turning}]);
+        $(this).trigger('fluidbook.page.change.start', [page, {transition: d, page: page, turningPages: turning.flip}]);
         this.tooltip.hideTooltip();
         $(".axis_y").removeClass('axis_y');
         $(".axis_x").removeClass('axis_x');
@@ -635,6 +674,8 @@ Fluidbook.prototype = {
         this.hideUnnecessaryButtons(page);
         var animationDuration = d <= 1 ? 0 : parseFloat(this.datas.mobileTransitionDuration);
         this.updateShadows(page, animationDuration);
+        this.centerBook(turning.center, animationDuration);
+
         try {
             this.search.clearHighlights();
         } catch (err) {

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 6d162edd0555687dc672dce9f33ddca219b99fa8..426675d05b76e0b234ca0ce1a8f48180dcc8cd8c 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -137,6 +137,7 @@ FluidbookResize.prototype = {
             width: fww,
             height: fhh
         });
+        this.centerOffset = fw / 4;
 
         if ($("#pagesnumbers").data('size') == null) {
             $("#pagesnumbers").data('size', parseInt($("#pagesnumbers").css('font-size')));

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 0fb168be4f3da8dc131b69008349b2d80cfe059a..66163aa95854eac1c0351011163adb6587f2c30b 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -585,6 +585,17 @@ body, html {
 
 @import "slider";
 
+/* Center */
+#center-fluidbook, #center-shadow {
+       position: absolute;
+       top: 0;
+       left: 0;
+
+       &.animate {
+               .page-transition(0.7);
+       }
+}
+
 /* Fluidbook */
 #fluidbook {
        position: absolute;
@@ -1904,6 +1915,12 @@ ul.chapters {
 
 /*  Transitions */
 
+.doublePage {
+       &._2d, &._3d {
+               .page-transition(1);
+       }
+}
+
 /* 2D */
 .doublePage._2d.sliding {
        -moz-transition: none;

diff --git a/style/mixins.less b/style/mixins.less
index 7ec6c1ace5667ca8615c6077b27f3d3f4cb37563..cbd47273d0d2fb0cefdfdb49738eada2a33f31e3 100644 (file)
--- a/style/mixins.less
+++ b/style/mixins.less
@@ -11,4 +11,12 @@
 .highlight-area(@color) {
        border-color: @color;
        background-color: fade(@color, 30%);
+}
+
+.page-transition(@factor) {
+       -moz-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
+       -webkit-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
+       -ms-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
+       -o-transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
+       transition: all unit(@page-transition-duration*@factor, s) ease-in-out;
 }
\ No newline at end of file