wip #2816 @1

diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js
index 27ba10cda9b6080277836e989e5945a2fb6a0aab..2aa538a72904501e7e234338e103390552726e06 100644 (file)
--- 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 2f8cc0e7d90860b8cb84c52ab0a1fd61cf96a32d..8c0ce59268efcc1abac8075a92e9c174bbce8d44 100644 (file)
--- 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 43b5c3da153fab6bba6f403ec7cb88a45da1da52..fee8ab769e5eafac7946443d7fa883118b50b603 100644 (file)
--- 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 d6e286c451b694d134a4bc8a3b08d26f0b495a49..ad07d64b16da3202af093899c6fce2d209163b42 100644 (file)
--- 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;
+  }
 }