From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 3 Jun 2019 16:09:55 +0000 (+0200)
Subject: wip #2816 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=42dc22d36f1f67bc890cdf0588000a393ada46c8;p=fluidbook-html5.git

wip #2816 @1
---

diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js
index 27ba10cd..2aa538a7 100644
--- a/js/libs/fluidbook/fluidbook.interface.js
+++ b/js/libs/fluidbook/fluidbook.interface.js
@@ -41,12 +41,13 @@ FluidbookInterface.prototype = {
     },
 
     areArrowsOverlapingPublication: function () {
-        //return true;
-        return $("#fluidbook").get(0).getBoundingClientRect().left < $("#previous").get(0).getBoundingClientRect().width;
+        var res = $("#fluidbook").get(0).getBoundingClientRect().left < 60;
+        return res;
     },
 
     autoHideArrows: function () {
-        return this.fluidbook.resize.reduceHorizontalMargins() && this.areArrowsOverlapingPublication() && $("#helpView:visible").length == 0;
+        var res = this.fluidbook.resize.reduceHorizontalMargins() && this.areArrowsOverlapingPublication() && ($("#helpView:visible").length === 0);
+        return res;
     },
 
     initArrowsVisibilityManagement: function () {
@@ -54,7 +55,7 @@ FluidbookInterface.prototype = {
 
         this.getInterfaceSelector().addClass('interfacecomponent');
 
-        $('#z').on('click', '.nonlinkarea', function () {
+        $(document).on('click', '#z', function () {
             $this.toggleInterface();
             return true;
         });
@@ -62,7 +63,7 @@ FluidbookInterface.prototype = {
         if (this.autoHideArrows()) {
             $(document).on('click', ':not(a)', function () {
                 var selector = '#background,header,footer';
-                if (!$(this).is(selector) && $(this).closest(selector).length == 0) {
+                if (!$(this).is(selector) && $(this).closest(selector).length === 0) {
                     return true;
                 }
                 $this.toggleInterface();
@@ -86,6 +87,7 @@ FluidbookInterface.prototype = {
         }
     },
     displayInterface: function () {
+        console.log('show interface');
         this.interfaceVisible = true;
         this.getInterfaceSelector().removeClass('interfacehidden');
         this.resetTimeout();
@@ -111,6 +113,7 @@ FluidbookInterface.prototype = {
             return;
         }
 
+        console.log('hide interface');
         this.getInterfaceSelector().addClass('interfacehidden');
         this.clearTimeout();
     },
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 2f8cc0e7..8c0ce592 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -545,32 +545,16 @@ Fluidbook.prototype = {
 
         var visibility = this.getButtonsVisibility(page);
 
-        if (Modernizr.csstransitions) {
-            if (visibility.next) {
-                $("#next").removeClass('hidden');
-            } else {
-                $("#next").addClass('hidden');
-            }
-
-            if (visibility.previous) {
-                $("#previous").removeClass('hidden');
-            } else {
-                $("#previous").addClass('hidden');
-            }
+        if (visibility.next) {
+            $("#next").removeClass('hidden');
         } else {
-            $("#previous,#next").removeClass('hidden');
-
-            if (visibility.previous) {
-                $("#previous:hidden").fadeIn(speed);
-            } else {
-                $("#previous:visible").fadeOut(speed);
-            }
+            $("#next").addClass('hidden');
+        }
 
-            if (visibility.next) {
-                $("#next:hidden").fadeIn(speed);
-            } else {
-                $("#next:visible").fadeOut(speed);
-            }
+        if (visibility.previous) {
+            $("#previous").removeClass('hidden');
+        } else {
+            $("#previous").addClass('hidden');
         }
     }
     ,
diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 43b5c3da..fee8ab76 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -21,7 +21,7 @@ function FluidbookResize(fluidbook) {
 
 FluidbookResize.prototype = {
     reduceHorizontalMargins: function () {
-        return this.orientation == 'portrait' && Modernizr.ftouch;
+        return this.orientation === 'portrait' && (this.fluidbook.support.iOS || this.fluidbook.support.android);
     },
 
     setMargins: function () {
@@ -272,7 +272,7 @@ FluidbookResize.prototype = {
         }
 
         if (timeout > 0) {
-            $("#next,#previous").hide();
+            //$("#next,#previous").hide();
             clearTimeout(this.navresizeTimeout);
             this.navresizeTimeout = setTimeout(function () {
                 $this.resizeNav(interfaceScale)
diff --git a/style/interface.less b/style/interface.less
index d6e286c4..ad07d64b 100644
--- a/style/interface.less
+++ b/style/interface.less
@@ -2,88 +2,89 @@
 
 /* Interface */
 #interface {
-	position: static;
+  position: static;
 }
 
 #next, #previous {
-	width: 53px;
-	height: 107px;
-	background-size: 53px 107px;
-	position: absolute;
-	top: 310px;
-	display: block;
-	opacity: 1;
-	z-index: 21;
-	color: @arrows-color;
-	background-color: @arrows-background;
+  width: 53px;
+  height: 107px;
+  background-size: 53px 107px;
+  position: absolute;
+  top: 310px;
+  display: block;
+  opacity: 1;
+  z-index: 21;
+  color: @arrows-color;
+  background-color: @arrows-background;
 }
 
 #next, #previous, #down, #splash {
-	transition: opacity 400ms ease-in-out;
+  transition: opacity 400ms ease-in-out;
 
-	.ios & {
-		transition: none;
-	}
+  .ios & {
+    transition: none;
+  }
 }
 
 #next.hidden.help, #previous.hidden.help {
-	transition: none;
-	opacity: 1;
+  transition: none;
+  opacity: 1;
 }
 
 #next.hidden, #previous.hidden {
-	opacity: 0;
-	cursor: default;
+  opacity: 0;
+  cursor: default;
+  pointer-events: none;
 }
 
 .rtl #previous, .ltr #next {
-	border-top-left-radius: 1px;
-	border-bottom-left-radius: 1px;
-	right: 0px;
-	transform-origin: 100% 0;
+  border-top-left-radius: 1px;
+  border-bottom-left-radius: 1px;
+  right: 0px;
+  transform-origin: 100% 0;
 }
 
 .rtl #next, .ltr #previous {
-	border-top-right-radius: 1px;
-	border-bottom-right-radius: 1px;
-	left: 0px;
-	transform-origin: 0 0;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
+  left: 0px;
+  transform-origin: 0 0;
 }
 
 .audio-description-button {
-	background-color: @arrows-background;
-	background-image: url("../data/images/interface-audio-description-on.svg");
-	width: 52px;
-	height: 52px;
-	background-size: 52px 52px;
-	display: inline-block;
-	border: 0;
-	outline: none;
-	position: absolute;
-	cursor: pointer;
-	transform-origin: 0% 0;
+  background-color: @arrows-background;
+  background-image: url("../data/images/interface-audio-description-on.svg");
+  width: 52px;
+  height: 52px;
+  background-size: 52px 52px;
+  display: inline-block;
+  border: 0;
+  outline: none;
+  position: absolute;
+  cursor: pointer;
+  transform-origin: 0% 0;
 
-	&.right {
-		right: 0;
-		transform-origin: 100% 0;
-	}
+  &.right {
+    right: 0;
+    transform-origin: 100% 0;
+  }
 
-	&.playing {
-		background-image: url("../data/images/interface-audio-description-off.svg");
-	}
+  &.playing {
+    background-image: url("../data/images/interface-audio-description-off.svg");
+  }
 }
 
 .interfacecomponent {
-	transition: opacity 100ms;
-	opacity: 1;
+  transition: opacity 100ms, top 100ms;
+  opacity: 1;
 
-	.ios & {
-		transition: none !important;
-	}
+  .ios & {
+    transition: none !important;
+  }
 
-	&.interfacehidden {
-		opacity: 0 !important;
-		pointer-events: none !important;
-	}
+  &.interfacehidden {
+    opacity: 0 !important;
+    pointer-events: none !important;
+  }
 }