From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 27 Sep 2017 10:23:16 +0000 (+0200)
Subject: WIP #1699 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f8f3d0d78835655cb6c4bef738108c290c28fe0a;p=fluidbook-html5.git

WIP #1699 @1.5
---

diff --git a/_index.html b/_index.html
index 61b7ba8b..d55d4782 100644
--- a/_index.html
+++ b/_index.html
@@ -33,6 +33,7 @@
 	</header>
 	<div id="interface"></div>
 	<div id="helpView"></div>
+	<div id="helpViewOverlay"></div>
 
 	<div id="z" class="nozoom">
 		<div id="fluidbook">
diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index f648a7fc..f4343d73 100644
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -2,6 +2,7 @@ function FluidbookHelp(fluidbook) {
 	this.autoTimeout;
 	this.fluidbook = fluidbook;
 	this.view = $("#helpView");
+	this.overlay = $("#helpViewOverlay");
 	this.initEvents();
 	this.interfaceTop;
 }
@@ -117,7 +118,7 @@ FluidbookHelp.prototype = {
 		});
 
 		// Click handler on main helpView div to hide it
-		$this.view.click(function(e) {
+		$this.overlay.click(function(e) {
             e.stopImmediatePropagation();
             e.stopPropagation();
             e.preventDefault();
@@ -146,6 +147,7 @@ FluidbookHelp.prototype = {
 		var $this = this;
 
 		resize(); // Main resize function that later calls local resize() here...
+		this.overlay.show();
 		this.view.show();
 
 		$("body,#previous,#next").addClass('help');
@@ -163,6 +165,7 @@ FluidbookHelp.prototype = {
 		this.clearTimeout();
 		var $this = this;
 		if (this.isVisible()) {
+			this.overlay.hide();
 			this.view.hide();
 			$("body,#previous,#next").removeClass('help');
 			this.fluidbook.hideUnnecessaryButtons();
@@ -196,7 +199,7 @@ FluidbookHelp.prototype = {
 
 
 		this.interfaceTop = (hh - 100 * interfaceScale) / 2 + 30 * interfaceScale;
-		this.view.find(".interface > div").css({
+		this.view.find(".interface > div").not('.slider').css({
 			top: this.interfaceTop
 		});
 
@@ -205,7 +208,6 @@ FluidbookHelp.prototype = {
 			var sliderHelp = $this.view.find('.slider');
 			var sliderCursor = $('#slidercursor .visible');
 			sliderHelp.css({
-				top: 'auto',
 				bottom: hh - sliderCursor.offset().top,
 				left: sliderCursor.offset().left + (sliderCursor.width() / 2)
 			});
diff --git a/style/fluidbook.less b/style/fluidbook.less
index d294a7a1..3b4aa680 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -433,11 +433,6 @@ body, html {
 		-o-transition: all @zoomtransition ease-out;
 		transition: all @zoomtransition ease-out;
 	}
-
-	// Add a slight blur below the help overlay
-	.help & {
-		filter: blur(7px);
-	}
 }
 
 #cache {
@@ -1231,6 +1226,16 @@ ul.chapters.shareList a.level0 .svg-icon {
 }
 
 /* Help */
+#helpViewOverlay {
+	display: none;
+	z-index: 30;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: transparent;
+}
 #helpView {
 	background-color: rgba(0, 0, 0, 0.7);
 	position: absolute;