fix #1710 @6

diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js
index 6ec053c9f4aa7b0621c8dfceafdff10ab6fbd11a..fc46c8a64406d5d3f3a6f904a3300fe7d909b353 100644 (file)
--- a/js/libs/fluidbook/fluidbook.interface.js
+++ b/js/libs/fluidbook/fluidbook.interface.js
@@ -36,9 +36,21 @@ FluidbookInterface.prototype = {
 
     initArrowsVisibilityManagement: function () {
         var $this = this;
-        $(document).on('click', '.nonlinkarea', function () {
+
+        this.getInterfaceSelector().addClass('interfacecomponent');
+
+        $('#z').on('click', '.nonlinkarea', function () {
             $this.toggleInterface();
-            return false;
+            return true;
+        });
+
+        $(document).on('click', ':not(a)', function () {
+            var selector = '#background,header,footer';
+            if (!$(this).is(selector) && $(this).closest(selector).length == 0) {
+                return true;
+            }
+            $this.toggleInterface();
+            return true;
         });
 
         $(this.fluidbook).on('fluidbook.ready', function () {
@@ -47,6 +59,7 @@ FluidbookInterface.prototype = {
     },
 
     toggleInterface: function () {
+        console.log('toogle interface; current : ' + this.interfaceVisible);
         if (this.interfaceVisible) {
             return this.hideInterface();
         } else {
@@ -55,7 +68,7 @@ FluidbookInterface.prototype = {
     },
     displayInterface: function () {
         this.interfaceVisible = true;
-        this.getInterfaceSelector().addClass('visible');
+        this.getInterfaceSelector().removeClass('interfacehidden');
         this.resetTimeout();
     },
     resetTimeout: function () {
@@ -76,7 +89,7 @@ FluidbookInterface.prototype = {
             return;
         }
 
-        this.getInterfaceSelector().css({opacity: 0}).delay(1100).css('visibility', 'hidden');
+        this.getInterfaceSelector().addClass('interfacehidden');
         this.clearTimeout();
     },
 

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index a19ac4403096386cc9b8acdaaa8bdc199eb613c7..5ac7530802b212f22f7b53aa33a2e17f744c1458 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -74,7 +74,7 @@ FluidbookLinks.prototype = {
         $(document).on('click touchend', '[data-action]', function () {
             var map = {'pdf': 'print', 'fullScreen': "fullscreen", 'locales': 'localesContainers'};
             var action = $(this).data('action');
-            if(action=='share'){
+            if (action == 'share') {
                 // Let share class handle this
                 return true;
             }
@@ -114,7 +114,7 @@ FluidbookLinks.prototype = {
         $("#links").find('.rightContainer').append($("#links").children('.link.odd'));
         $("#links").find('.leftContainer').append($("#links").children('.link'));
 
-        $("#links").prepend('<a href="#" class="nonlinkarea"></a>');
+        $("#links").prepend('<div class="nonlinkarea"></div>');
         var $this = this;
         if (this.fluidbook.datas.linkBlinkTime > 0 && this.fluidbook.datas.mobileLinksRevealAnim) {
             setTimeout(function () {

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 465b901be04ff3c3291e9a65206fccb85ca14ee1..4c0039a145a279505469491edf7a579ff08fe088 100644 (file)
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -82,7 +82,7 @@ FluidbookLoader.prototype = {
         }
         var min = Math.max(1, page - 1);
         var max = Math.min(min + this.numPreload, this.fluidbook.datas.pages);
-        min = max - (this.numPreload);
+        min = Math.max(1, max - (this.numPreload));
         this.toPreload = [];
         for (var i = min; i <= max; i++) {
             this.toPreload.push(i);
@@ -265,7 +265,6 @@ FluidbookLoader.prototype = {
             div = $('<div />');
         }
 
-
         left = ((page % 2 == 0) && this.fluidbook.l10n.ltr) || ((page % 2 == 1) && this.fluidbook.l10n.rtl);
 
         var h = this.fluidbook.datas.thumbHeight;

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 64bc12ec377f25c6eab9cb303d3677ec1d0eef03..7026d9e1102802ab757201d3f12b388861f9c563 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -20,7 +20,7 @@ function FluidbookResize(fluidbook) {
 
 FluidbookResize.prototype = {
     reduceHorizontalMargins: function () {
-        return this.orientation == 'portrait' && this.fluidbook.support.isMobile && Modernizr.touch;
+        return this.orientation == 'portrait';//&& this.fluidbook.support.isMobile /*&& Modernizr.touch*/;
     },
 
     setMargins: function () {
@@ -35,7 +35,6 @@ FluidbookResize.prototype = {
         this.margintop = marginY + parseInt(this.fluidbook.datas.extraYSpace);
         this.marginbottom = marginY + 20;
         this.marginright = marginX + parseInt(this.fluidbook.datas.extraXSpace);
-
     },
 
     init: function () {
@@ -85,7 +84,7 @@ FluidbookResize.prototype = {
             var nminwidth = ($("#nav a").length * 51) + 205 + 50;
             var refWidth = Math.max(this.referenceWidthPortrait, nminwidth);
 
-            interfaceScale = Math.min(1, this.ww / refWidth, this.hh / this.referenceHeight);
+            interfaceScale = Math.min(1, this.ww / refWidth * 0.7, this.hh / this.referenceHeight * 0.7);
         }
         this.interfaceScale = interfaceScale;
 

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 8b8b1ecd0caf3b71c53289ff23a8f90e56edea96..77a244b494f5f757fed4cb505ed4610dc124f526 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -644,81 +644,7 @@ body, html {
        display: none;
 }
 
-/* Interface */
-#interface {
-       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;
-}
-
-#next, #previous, #down, #splash {
-       transition: opacity 400ms ease-in-out;
-       -moz-transition: opacity 400ms ease-in-out;
-       -webkit-transition: opacity 400ms ease-in-out;
-       -o-transition: opacity 400ms ease-in-out;
-       -ms-transition: opacity 400ms ease-in-out;
-}
-
-#next.hidden.help, #previous.hidden.help {
-       transition: none;
-       -moz-transition: none;
-       -webkit-transition: none;
-       -o-transition: none;
-       -ms-transition: none;
-       opacity: 1;
-}
-
-#next.hidden, #previous.hidden {
-       opacity: 0;
-       cursor: default;
-}
-
-.rtl #previous, .ltr #next {
-       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;
-}
-
-.audio-description-button {
-       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;
-       }
-
-       &.playing {
-               background-image: url("../data/images/interface-audio-description-off.svg");
-       }
-}
+@import "interface";
 
 /* Header */
 header {
@@ -995,21 +921,18 @@ html.ios body.portrait #interface {
        }
 }
 
-#links .nonlinkarea {
-       display: none;
-}
-
 #links .bookmark {
        z-index: 3;
 }
 
-.pad #links .nonlinkarea {
+#links .nonlinkarea {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
+       cursor: zoom-in;
 }
 
 /* Bookmarks */

diff --git a/style/interface.less b/style/interface.less
new file mode 100644 (file)
index 0000000..2c20430
--- /dev/null
+++ b/style/interface.less
@@ -0,0 +1,88 @@
+@import "00-import";
+
+/* Interface */
+#interface {
+       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;
+}
+
+#next, #previous, #down, #splash {
+       transition: opacity 400ms ease-in-out;
+       -moz-transition: opacity 400ms ease-in-out;
+       -webkit-transition: opacity 400ms ease-in-out;
+       -o-transition: opacity 400ms ease-in-out;
+       -ms-transition: opacity 400ms ease-in-out;
+}
+
+#next.hidden.help, #previous.hidden.help {
+       transition: none;
+       -moz-transition: none;
+       -webkit-transition: none;
+       -o-transition: none;
+       -ms-transition: none;
+       opacity: 1;
+}
+
+#next.hidden, #previous.hidden {
+       opacity: 0;
+       cursor: default;
+}
+
+.rtl #previous, .ltr #next {
+       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;
+}
+
+.audio-description-button {
+       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;
+       }
+
+       &.playing {
+               background-image: url("../data/images/interface-audio-description-off.svg");
+       }
+}
+
+.interfacecomponent {
+       transition: opacity 100ms;
+       opacity: 1;
+
+       &.interfacehidden {
+               opacity: 0 !important;
+               pointer-events: none !important;
+       }
+}
+