From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 23 Oct 2017 17:15:06 +0000 (+0200)
Subject: wip #1710 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d9bcfc5f32696e7f0a1b95a9d82e1280b4ee9770;p=fluidbook-html5.git

wip #1710 @4
---

diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js
new file mode 100644
index 00000000..6ec053c9
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.interface.js
@@ -0,0 +1,94 @@
+function FluidbookInterface(fluidbook) {
+    this.fluidbook = fluidbook;
+
+    this.interfaceVisible = false;
+    this.visibleTimeout;
+    this.visibleTime = 5000;
+    this.interfaceVisible = false;
+
+    this.init();
+}
+
+FluidbookInterface.prototype = {
+    init: function () {
+        var res = '';
+        if ($('html').hasClass('ltr')) {
+            res += this.fluidbook.nav.getLink('interface-previous', '#', 'previous', '', '', '', true);
+            res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', '', '', true);
+        } else {
+            res += this.fluidbook.nav.getLink('interface-previous', '#', 'next', '', '', '', true);
+            res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', '', '', true);
+        }
+
+        $('#interface').append(res);
+        $(document).on('click', '#next', goNextPage);
+        $(document).on('click', '#previous', goPreviousPage);
+
+        this.initArrowsVisibilityManagement();
+    },
+
+    autoHideArrows: function () {
+        if (!this.fluidbook.resize.reduceHorizontalMargins()) {
+            return false;
+        }
+        return true;
+    },
+
+    initArrowsVisibilityManagement: function () {
+        var $this = this;
+        $(document).on('click', '.nonlinkarea', function () {
+            $this.toggleInterface();
+            return false;
+        });
+
+        $(this.fluidbook).on('fluidbook.ready', function () {
+            $this.resetTimeout();
+        });
+    },
+
+    toggleInterface: function () {
+        if (this.interfaceVisible) {
+            return this.hideInterface();
+        } else {
+            return this.displayInterface();
+        }
+    },
+    displayInterface: function () {
+        this.interfaceVisible = true;
+        this.getInterfaceSelector().addClass('visible');
+        this.resetTimeout();
+    },
+    resetTimeout: function () {
+        this.clearTimeout();
+        if (!this.autoHideArrows()) {
+            return false;
+        }
+        var $this = this;
+
+        this.visibleTimeout = setTimeout(function () {
+            $this.hideInterface();
+        }, this.visibleTime);
+    },
+    hideInterface: function () {
+        this.interfaceVisible = false;
+        if ($("#helpView").is(':visible') || document.activeElement.tagName.toLowerCase() === 'input') {
+            this.resetTimeout();
+            return;
+        }
+
+        this.getInterfaceSelector().css({opacity: 0}).delay(1100).css('visibility', 'hidden');
+        this.clearTimeout();
+    },
+
+    getInterfaceSelector: function () {
+        var selector = '#next,#previous';
+        if (this.fluidbook.pad.enabled) {
+            selector = 'header,#interface';
+        }
+        return $(selector);
+    },
+
+    clearTimeout: function () {
+        clearTimeout(this.visibleTimeout);
+    },
+};
\ No newline at end of file
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 12ef1584..ea5d0ea3 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -157,6 +157,7 @@ Fluidbook.prototype = {
         this.isReady = true;
         $("#main").css('display', 'block');
         this.nav = new FluidbookNav(this);
+        this.interface = new FluidbookInterface(this);
         this.slider = new FluidbookSlider(this);
         this.help = new FluidbookHelp(this);
         this.help.displayAtStartup();
diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 23967d51..3bc679f6 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -468,9 +468,7 @@ FluidbookNav.prototype = {
             // if (!visible) {
             //     $(link).addClass('hidden');
             // }
-        }
-
-        this.setInterface();
+        };
 
         if (navType == 'menu') {
 
@@ -705,24 +703,6 @@ FluidbookNav.prototype = {
 
     setInterface: function () {
 
-        // Ensure we don't add interface elements more than once
-        if (this._inited['interface'] == true) {
-            return;
-        }
-        this._inited['interface'] = true;
-
-        var res = '';
-        if ($('html').hasClass('ltr')) {
-            res += this.getLink('interface-previous', '#', 'previous', '', '', '', true);
-            res += this.getLink('interface-next', '#', 'next', '', '', '', true);
-        } else {
-            res += this.getLink('interface-previous', '#', 'next', '', '', '', true);
-            res += this.getLink('interface-next', '#', 'previous', '', '', '', true);
-        }
-
-        $('#interface').append(res);
-        $(document).on('click', '#next', goNextPage);
-        $(document).on('click', '#previous', goPreviousPage);
     },
 
     // Build nested lists from chapters
diff --git a/js/libs/fluidbook/fluidbook.pad.js b/js/libs/fluidbook/fluidbook.pad.js
index 0474704f..b4a85609 100644
--- a/js/libs/fluidbook/fluidbook.pad.js
+++ b/js/libs/fluidbook/fluidbook.pad.js
@@ -1,10 +1,7 @@
 function FluidbookPad(fluidbook) {
 	this.fluidbook = fluidbook;
 	this.enabled = this.fluidbook.datas.mobileNavigationType == 'tab';
-	this.tapHoldTimeout;
-	this.visibleTimeout;
-	this.visibleTime = 5000;
-	this.interfaceVisible = false;
+
 	if (this.enabled) {
 		this.init();
 	}
@@ -28,43 +25,8 @@ FluidbookPad.prototype = {
 			}
 			return false;
 		});
-
-		$(document).on('click', '.nonlinkarea', function() {
-			$this.toggleInterface();
-			return false;
-		});
-	},
-	toggleInterface: function() {
-		if (this.interfaceVisible) {
-			return this.hideInterface();
-		} else {
-			return this.displayInterface();
-		}
-	},
-	displayInterface: function() {
-		this.interfaceVisible = true;
-		$("header,#interface").css({visibility: 'visible', opacity: 1});
-		this.resetTimeout();
-	},
-	resetTimeout: function() {
-		var $this = this;
-		this.clearTimeout();
-		this.visibleTimeout = setTimeout(function() {
-			$this.hideInterface();
-		}, this.visibleTime);
-	},
-	hideInterface: function() {
-		this.interfaceVisible = false;
-		if ($("#helpView").is(':visible') || document.activeElement.tagName.toLowerCase() === 'input') {
-			this.resetTimeout();
-			return;
-		}
-		$("header,#interface").css({opacity: 0}).delay(1100).css('visibility', 'hidden');
-		this.clearTimeout();
-	},
-	clearTimeout: function() {
-		clearTimeout(this.visibleTimeout);
 	},
+
 	getTransitionAxis: function(currentPage, nextPage) {
 		var linkedPages = this.fluidbook.bookmarks.getLinkedPages(currentPage);
 		if (linkedPages.indexOf(nextPage) == -1) {
diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index b9cdba68..2e0bb5f2 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -19,14 +19,23 @@ function FluidbookResize(fluidbook) {
 }
 
 FluidbookResize.prototype = {
+    reduceHorizontalMargins: function () {
+        return this.orientation == 'portrait' && this.fluidbook.support.isMobile && Modernizr.touch;
+    },
+
     setMargins: function () {
-        var marginX = 20;
         var marginY = 20;
 
+        var marginX = 60;
+        if (this.reduceHorizontalMargins()) {
+            marginX = 20;
+        }
+
         this.marginleft = marginX + parseInt(this.fluidbook.datas.extraXSpace);
         this.margintop = marginY + parseInt(this.fluidbook.datas.extraYSpace);
         this.marginbottom = marginY + 20;
-        this.marginright = marginX;
+        this.marginright = marginX + parseInt(this.fluidbook.datas.extraXSpace);
+
     },
 
     init: function () {
@@ -92,6 +101,7 @@ FluidbookResize.prototype = {
         });
 
         this.resizeView();
+        this.setMargins();
 
         var marginTop, marginBottom, marginLeft, marginRight;
 
@@ -110,7 +120,7 @@ FluidbookResize.prototype = {
             marginTop = (parseInt(this.fluidbook.datas.menuHeight) + this.margintop) * interfaceScale;
             marginBottom = (10 + this.marginbottom) * interfaceScale;
             marginLeft = (this.marginleft + parseInt(extraX)) * interfaceScale;
-            marginRight = marginLeft;
+            marginRight = (this.marginright + parseInt(extraX)) * interfaceScale;
         }
 
         var aw = this.ww - marginLeft - marginRight;