From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 28 Feb 2017 16:30:42 +0000 (+0100)
Subject: fix #1177 @5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=49e6f48bb0f8c5acb4471a3a966e2dd06ecc76c0;p=fluidbook-html5.git

fix #1177 @5
---

diff --git a/_index.html b/_index.html
index 5fc9183c..58ac21c9 100644
--- 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 986387fb..8892433a 100644
--- 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 8192e7c7..a2c9ef27 100644
--- 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 fdc4eb14..953736f0 100644
--- 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 368bca91..f5153704 100644
--- 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;