From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 26 Sep 2017 13:58:37 +0000 (+0200)
Subject: fix #1696 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c9b1f0aae313621c2e3f99faa93dcb9fc2a72486;p=fluidbook-html5.git

fix #1696 @1.5
---

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 0148bfbe..3237594d 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -105,33 +105,37 @@ FluidbookMenu.prototype = {
         }
     },
     openingView: function (callback) {
-        this.showOverlay();
         var $this = this;
         this.fluidbook.resize.resizeView();
         this.fluidbook.tooltip.hideTooltip();
         var mview = $('#view .mview:last');
 
-        $(mview).show();
         if (!Modernizr.ftouch) {
             $(mview).find('.content').perfectScrollbar();
         } else {
             $(mview).find('.content').css({overflowY: 'auto'});
         }
 
-        var from = {y: -200, opacity: 0};
-        var to = {
-            y: 0, opacity: 1, onComplete: function () {
-                if (callback != undefined) {
-                    callback();
-                }
-                $this.fluidbook.hideLoader();
-                resize();
-            }
-        };
+        var from = {y: "-200px", opacity: 0};
+        var to = {y: "0px", opacity: 1};
         if (mview.hasClass('fs')) {
-            from.y = 0;
+            from.y = "0px";
+        } else {
+            this.showOverlay();
         }
-        TweenMax.fromTo($(mview), 0.5, from, to);
+
+        $(mview).addClass('notransition').css({opacity: from.opacity}).transform({translateY: from.y}).show().removeClass('notransition');
+        setTimeout(function () {
+            $(mview).css({opacity: to.opacity}).transform({translateY: to.y});
+        }, 20);
+
+        setTimeout(function () {
+            if (callback != undefined) {
+                callback();
+            }
+            $this.fluidbook.hideLoader();
+            resize();
+        }, 420);
     },
 
     displayResults: function (data, group, callback) {
@@ -329,7 +333,7 @@ FluidbookMenu.prototype = {
     }
     ,
     openShare: function (p1, p2, callback) {
-        this.fluidbook.share.openShare(p1,p2,callback);
+        this.fluidbook.share.openShare(p1, p2, callback);
     },
     openBookmark: function (p1, p2, callback) {
         var view = this.fluidbook.bookmarks.getView();
@@ -418,13 +422,12 @@ FluidbookMenu.prototype = {
         }
 
         if (mview.length > 0) {
-            TweenMax.to(mview, 0.25, {
-                autoAlpha: 0, onComplete: function () {
-                    $this.fluidbook.video.killVideosIn(mview);
-                    mview.remove();
-                    callback();
-                }
-            });
+            $(mview).css('opacity', 0);
+            setTimeout(function () {
+                $this.fluidbook.video.killVideosIn(mview);
+                mview.remove();
+                callback();
+            }, 420);
         }
 
         if (all) {
diff --git a/style/fluidbook.less b/style/fluidbook.less
index ed855d83..cdb902df 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1,5 +1,14 @@
 @import "00-import";
 
+.notransition {
+
+	-moz-transition: none !important;
+	-webkit-transition: none !important;
+	-ms-transition: none !important;
+	-o-transition: none !important;
+	transition: none !important;
+}
+
 /* Screenshot */
 .screenshot .mview {
 	overflow-y: hidden;
@@ -1074,6 +1083,14 @@ html.ios body.portrait #interface {
 	max-width: 600px;
 	width: 100%;
 
+	@menutransition:400ms;
+
+	-webkit-transition: all @menutransition;
+	-moz-transition: all @menutransition;
+	-ms-transition: all @menutransition;
+	-o-transition: all @menutransition;
+	transition: all @menutransition;
+
 	&[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"] {
 		.caption {
 			height: 0;
@@ -1609,37 +1626,36 @@ ul.chapters.shareList a.level0 img {
 
 /* multimedia */
 
-.mview .multimediaContainer {
-	padding: 0;
-	position: relative;
-	&:after {
-		content: '';
-		position: absolute;
-		z-index: 2;
+.mview {
+	.multimediaContainer {
+		padding: 0;
+		position: relative;
+		&:after {
+			content: '';
+			position: absolute;
+			z-index: 2;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			pointer-events: auto;
+		}
+	}
+	img.multimedia {
+		position: relative;
+		z-index: 1;
 		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0;
-		pointer-events: auto;
+		height: auto;
+		display: block;
+	}
+	.text {
+		padding: 20px;
+		white-space: pre-line;
+		text-align: left;
 	}
 }
 
-.mview img.multimedia {
-	position: relative;
-	z-index: 1;
-	width: 100%;
-	height: auto;
-	display: block;
-}
-
-/* texts */
-.mview .text {
-	padding: 20px;
-	white-space: pre-line;
-	text-align: left;
-}
-
-/* Chapters */
+// Chapters
 
 ul.chapters {
 	list-style: none;