fix #1177 @5

diff --git a/_index.html b/_index.html
index 5fc9183c6e3520261e2832d0f86d078333539170..58ac21c9c703108d8a8bfb71bcab790eb5e1901f 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -29,18 +29,21 @@
        </header>
        <div id="interface"></div>
        <div id="helpView"></div>
-       <div id="fluidbook">
-               <div id="shadow">
-                       <div class="left"></div>
-                       <div class="right"></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="links"></div>
+
+       <div id="z">
+               <div id="fluidbook">
+                       <div id="shadow">
+                               <div class="left"></div>
+                               <div class="right"></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="links"></div>
+                       </div>
                </div>
        </div>
        <a id="down" href="#"></a>

diff --git a/js/libs/fluidbook/fluidbook.desktop.js b/js/libs/fluidbook/fluidbook.desktop.js
index 986387fb43ee251b59af4baa9155a5a1114dfa49..8892433a88585b47a5b8af782247f7c36933ff1d 100644 (file)
--- a/js/libs/fluidbook/fluidbook.desktop.js
+++ b/js/libs/fluidbook/fluidbook.desktop.js
@@ -1,120 +1,129 @@
 function FluidbookDesktop(fluidbook) {
-       this.fluidbook = fluidbook;
-       this.updateDesktopScale(1);
-       this.origin = ['50%', '50%'];
-       this.init();
+    this.fluidbook = fluidbook;
+    this.origin = ['0%', '0%'];
+    this.updateDesktopScale(1);
+    this.init();
 }
 
 FluidbookDesktop.prototype = {
-       init: function() {
-               var $this = this;
-               $(document).on('click', '#links', function(e) {
-                       $this.clickZoom(e);
-               });
-               $(document).on('click', '#links .link', function(e) {
-                       e.stopPropagation();
-               })
-
-               $("body").mousewheel(function(e, delta, deltaX, deltaY) {
-                       $this.wheelZoom(deltaY);
-               })
-
-               $(document).on('mousemove', 'body', function(e) {
-                       $this.moveZoom(e);
-               });
-       },
-       moveZoom: function(e) {
-               var x = 100 * e.pageX / $(window).width();
-               var y = 100 * e.pageY / $(window).height();
-               this.origin = [x + '%', y + '%'];
-               if (this.desktopScale == 1) {
-                       return;
-               } else {
-
-                       $("#fluidbook").transform({
-                               origin: this.origin
-                       }, {
-                               preserve: true
-                       })
-               }
-       },
-       clickZoom: function(e, way) {
-               if (way == undefined) {
-                       if (this.desktopScale == 1) {
-                               way = 'in';
-                       } else {
-                               way = 'out';
-                       }
-               }
-               var newScale;
-               if (way == 'in') {
-                       newScale = (this.fluidbook.datas.zoom / 100) / this.fluidbook.resize.bookScale;
-               } else if (way == 'out') {
-                       newScale = 1;
-               }
-               this.updateDesktopScale(newScale);
-               return false;
-       },
-       wheelZoom: function(delta) {
-               if ($("body").hasClass('view')) {
-                       return;
-               }
-               this.updateDesktopScale(this.desktopScale + delta / 3, delta > 0);
-       },
-       updateDesktopScale: function(v, zoomIn) {
-               var $this = this;
-               if (this.fluidbook.viewMode()) {
-                       v = 1;
-               }
-
-               var max = (this.fluidbook.datas.zoomw / 100) / this.fluidbook.resize.bookScale;
-
-               v = Math.max(Math.min(v, max), 1);
-
-               if (zoomIn === true) {
-                       if (v < 1.5) {
-                               v = 2;
-                       }
-               } else if (zoomIn === false) {
-                       if (v < 1.5) {
-                               v = 1;
-                       }
-               }
-
-
-               if (v == this.desktopScale) {
-                       return false;
-               }
-               this.desktopScale = v;
-
-
-               var animation = {
-                       scale: [this.desktopScale * this.fluidbook.resize.bookScale, this.desktopScale * this.fluidbook.resize.bookScale]
-               };
-               if (this.desktopScale == 1) {
-                       animation.origin = ['50%', '50%'];
-               } else {
-                       animation.origin = this.origin;
-               }
-
-               if (this.desktopScale != 1) {
-                       $("header,footer,#interface").addClass('hidden');
-
-               } else {
-                       $("header,footer,#interface").removeClass('hidden');
-               }
-               $("#fluidbook").addClass('animate').transform(animation);
-               setTimeout(function() {
-                       $("#fluidbook").removeClass('animate');
-               }, 1000);
-
-               if (this.desktopScale > 1) {
-                       $("body").addClass('zoomed');
-               } else {
-                       $("body").removeClass('zoomed');
-               }
-
-               return true;
-       }
+    init: function () {
+        var $this = this;
+        $(document).on('click', '#links', function (e) {
+            $this.clickZoom(e);
+        });
+        $(document).on('click', '#links .link', function (e) {
+            e.stopPropagation();
+        })
+
+        $("body").mousewheel(function (e, delta, deltaX, deltaY) {
+            $this.wheelZoom(deltaY);
+        })
+
+        $(document).on('mousemove', 'body', function (e) {
+            $this.moveZoom(e);
+        });
+    },
+    moveZoom: function (e) {
+        var x = 100 * e.pageX / $(window).width();
+        var y = 100 * e.pageY / $(window).height();
+
+
+        this.origin = [x + '%', y + '%'];
+        if (this.desktopScale == 1) {
+            return;
+        } else {
+            $("#z").transform({
+                origin: this.origin
+            }, {
+                preserve: true
+            })
+        }
+    },
+    clickZoom: function (e, way) {
+        if (way == undefined) {
+            if (this.desktopScale == 1) {
+                way = 'in';
+            } else {
+                way = 'out';
+                this.zoomingOut = true;
+            }
+        }
+        var newScale;
+        if (way == 'in') {
+            newScale = this.fluidbook.datas.zoom / 100;
+        } else if (way == 'out') {
+            newScale = 1;
+        }
+        this.updateDesktopScale(newScale);
+        return false;
+    },
+    wheelZoom: function (delta) {
+        if ($("body").hasClass('view')) {
+            return;
+        }
+        this.updateDesktopScale(this.desktopScale + delta / 3, delta > 0);
+    },
+    updateDesktopScale: function (v, zoomIn) {
+        var $this = this;
+        if (this.fluidbook.viewMode()) {
+            v = 1;
+        }
+
+        var max = this.fluidbook.datas.zoomw / 100;
+
+        v = Math.max(Math.min(v, max), 1);
+
+        if (v > 1) {
+            $("#z").removeClass('nozoom')
+        }
+
+        if (zoomIn === true) {
+            if (v < 1.5) {
+                v = 2;
+            }
+        } else if (zoomIn === false) {
+            if (v < 1.5) {
+                v = 1;
+            }
+        }
+
+
+        if (v == this.desktopScale) {
+            return false;
+        }
+        this.desktopScale = v;
+
+        var animation = {
+            scale: [v, v]
+        };
+
+        if (this.desktopScale == 1) {
+            animation.origin = ['50%', '50%'];
+        } else {
+            animation.origin = this.origin;
+        }
+
+        if (this.desktopScale != 1) {
+            $("header,footer,#interface").addClass('hidden');
+
+        } else {
+            $("header,footer,#interface").removeClass('hidden');
+        }
+        $("#z").addClass('animate').transform(animation);
+        setTimeout(function () {
+            $("#z").removeClass('animate');
+            if (v == 1) {
+                $("#z").addClass('nozoom');
+            }
+        }, 600);
+
+        if (this.desktopScale > 1) {
+            $("body").addClass('zoomed');
+        } else {
+            $("body").removeClass('zoomed');
+        }
+
+        return true;
+    }
 
 };
\ No newline at end of file

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 8192e7c7666eccf576d722440a50aa0a20429ef4..a2c9ef27d8101ad91132601ada1b437a40529fe6 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -82,7 +82,7 @@ FluidbookResize.prototype = {
         var cssInterfaceScale = [interfaceScale, interfaceScale];
         var cssNavScale = [navScale, navScale];
 
-        $("#main").css({
+        $("#main,#z").css({
             width: this.ww,
             height: this.hh
         });

diff --git a/style/fluidbook.css b/style/fluidbook.css
index fdc4eb14baafd4af4f669edd78d9d04f76c6e47e..953736f0f27c2856ab94b44b514aceec42e27e62 100644 (file)
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -151,10 +151,12 @@ a {
 }
 /* Desktop devices */
 .desktop #links {
-  cursor: url(../images/cur-zoom-in.png), -moz-zoom-in;
+  cursor: url("../images/cur-zoom-in.png");
+  cursor: zoom-in;
 }
 .desktop.zoomed #links {
-  cursor: url(../images/cur-zoom-out.png), -moz-zoom-out;
+  cursor: url("../images/cur-zoom-out.png");
+  cursor: zoom-out;
 }
 #links .link {
   cursor: auto;
@@ -278,21 +280,53 @@ a {
   vertical-align: middle;
   margin: -2px 20px 0 0;
 }
+#z {
+  position: absolute;
+  z-index: 11;
+  direction: ltr;
+  top: 0;
+  left: 0;
+  -moz-transition: -moz-transform 600ms ease-out, transform 600ms ease-out;
+  -webkit-transition: -webkit-transform 600ms ease-out, transform 600ms ease-out;
+  -o-transition: -o-transform 600ms ease-out, transform 600ms ease-out;
+  -ms-transition: -ms-transform 600ms ease-out, transform 600ms ease-out;
+  transition: transform 600ms ease-out;
+}
+#z.animate {
+  -moz-transition: all 600ms ease-out;
+  -webkit-transition: all 600ms ease-out;
+  -ms-transition: all 600ms ease-out;
+  -o-transition: all 600ms ease-out;
+  transition: all 600ms ease-out;
+}
+#z.nozoom {
+  height: 0 !important;
+}
 /* Fluidbook */
 #fluidbook {
   position: absolute;
   z-index: 11;
   direction: ltr;
+  -moz-transition: -moz-transform 600ms ease-out, transform 600ms ease-out;
+  -webkit-transition: -webkit-transform 600ms ease-out, transform 600ms ease-out;
+  -o-transition: -o-transform 600ms ease-out, transform 600ms ease-out;
+  -ms-transition: -ms-transform 600ms ease-out, transform 600ms ease-out;
+  transition: transform 600ms ease-out;
+}
+#fluidbook.animate {
+  -moz-transition: all 600ms ease-out;
+  -webkit-transition: all 600ms ease-out;
+  -ms-transition: all 600ms ease-out;
+  -o-transition: all 600ms ease-out;
+  transition: all 600ms ease-out;
 }
 #cache {
   display: none;
 }
 #pagesnumbers {
-  font-size: 12px;
   padding: 0;
   position: absolute;
   white-space: nowrap;
-  margin: 5px 0 0 0;
 }
 #pagesnumbers div {
   text-align: center;
@@ -547,20 +581,6 @@ header.hidden,
   opacity: 0;
   z-index: 0;
 }
-#fluidbook {
-  -moz-transition: -moz-transform 1s ease-out, transform 1s ease-out;
-  -webkit-transition: -webkit-transform 1s ease-out, transform 1s ease-out;
-  -o-transition: -o-transform 1s ease-out, transform 1s ease-out;
-  -ms-transition: -ms-transform 1s ease-out, transform 1s ease-out;
-  transition: transform 1s ease-out;
-}
-#fluidbook.animate {
-  -moz-transition: all 1s ease-out;
-  -webkit-transition: all 1s ease-out;
-  -ms-transition: all 1s ease-out;
-  -o-transition: all 1s ease-out;
-  transition: all 1s ease-out;
-}
 /* Links */
 #links {
   position: absolute;

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 368bca91cb6562ee34f77a6dad60da884b85f4d6..f515370456604d1c9424eee78702d7382754b0c3 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -172,11 +172,13 @@ a {
 /* Desktop devices */
 
 .desktop #links {
-       cursor: url(../images/cur-zoom-in.png), -moz-zoom-in;
+       cursor: url("../images/cur-zoom-in.png");
+       cursor: zoom-in;
 }
 
 .desktop.zoomed #links {
-       cursor: url(../images/cur-zoom-out.png), -moz-zoom-out;
+       cursor: url("../images/cur-zoom-out.png");
+       cursor: zoom-out;
 }
 
 #links .link {
@@ -319,11 +321,53 @@ a {
        margin: -2px 20px 0 0;
 }
 
+@zoomtransition: 600ms;
+
+#z {
+       position: absolute;
+       z-index: 11;
+       direction: ltr;
+       top: 0;
+       left: 0;
+
+       -moz-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+       -webkit-transition: -webkit-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+       -o-transition: -o-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+       -ms-transition: -ms-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+       transition: transform @zoomtransition ease-out;
+
+       &.animate {
+               -moz-transition: all @zoomtransition ease-out;
+               -webkit-transition: all @zoomtransition ease-out;
+               -ms-transition: all @zoomtransition ease-out;
+               -o-transition: all @zoomtransition ease-out;
+               transition: all @zoomtransition ease-out;
+       }
+
+       &.nozoom {
+               height: 0 !important;
+       }
+}
+
 /* Fluidbook */
 #fluidbook {
        position: absolute;
        z-index: 11;
        direction: ltr;
+
+       -moz-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+       -webkit-transition: -webkit-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+       -o-transition: -o-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+       -ms-transition: -ms-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+       transition: transform @zoomtransition ease-out;
+
+       &.animate {
+               -moz-transition: all @zoomtransition ease-out;
+               -webkit-transition: all @zoomtransition ease-out;
+               -ms-transition: all @zoomtransition ease-out;
+               -o-transition: all @zoomtransition ease-out;
+               transition: all @zoomtransition ease-out;
+       }
 }
 
 #cache {
@@ -331,11 +375,9 @@ a {
 }
 
 #pagesnumbers {
-       font-size: 12px;
        padding: 0;
        position: absolute;
        white-space: nowrap;
-       margin: 5px 0 0 0;
 }
 
 #pagesnumbers div {
@@ -627,22 +669,6 @@ footer.hidden, header.hidden, #interface.hidden {
        z-index: 0;
 }
 
-#fluidbook {
-       -moz-transition: -moz-transform 1s ease-out, transform 1s ease-out;
-       -webkit-transition: -webkit-transform 1s ease-out, transform 1s ease-out;
-       -o-transition: -o-transform 1s ease-out, transform 1s ease-out;
-       -ms-transition: -ms-transform 1s ease-out, transform 1s ease-out;
-       transition: transform 1s ease-out;
-}
-
-#fluidbook.animate {
-       -moz-transition: all 1s ease-out;
-       -webkit-transition: all 1s ease-out;
-       -ms-transition: all 1s ease-out;
-       -o-transition: all 1s ease-out;
-       transition: all 1s ease-out;
-}
-
 /* Links */
 #links {
        position: absolute;