From 8111533e66b165da4ea85ebffb6cd4f49a67c23d Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 27 Sep 2017 17:38:49 +0200
Subject: [PATCH] Handle RTL and inverted menu layouts in help view. Address
 bugs with resizing. WIP #1699 @4

---
 js/libs/fluidbook/fluidbook.help.js | 46 ++++++++++++++++++-----------
 js/libs/fluidbook/fluidbook.js      |  2 ++
 style/fluidbook.less                | 12 ++++++--
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index f4343d73..a45dc0f6 100644
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -49,10 +49,16 @@ FluidbookHelp.prototype = {
 		// }, {
 		// 	preserve: true
 		// });
-		var h = 20 + ($("#horizontalNav a[data-tooltip]").length - 1) * 25;
+
+        var tooltipSelector = '#horizontalNav a[data-tooltip]';
+
+        // When the menu position is inverted, the icon help lines need
+        // to be drawn in the reverse order to avoid text/line overlaps
+        var tooltips = this.fluidbook.datas.invertMenuPosition ? $(tooltipSelector).get().reverse() : $(tooltipSelector);
+		var h = 20 + ($(tooltipSelector).length - 1) * 25;
 		var ww = $(window).width();
 
-		$("#horizontalNav a[data-tooltip]").each(function() {
+		$(tooltips).each(function() {
 			var text = $(this).data('tooltip');
 			if (text == null || text == undefined || text == '' || $(this).hasClass('hidden')) {
 				return;
@@ -104,7 +110,7 @@ FluidbookHelp.prototype = {
 		}
 
 		this.view.html(help);
-		resize();
+		//resize();
 	},
 	initEvents: function() {
 		var $this = this;
@@ -140,14 +146,11 @@ FluidbookHelp.prototype = {
 			return false;
 		}
 
-		if (this.view.html() == '') {
-			this.init();
-		}
-
 		var $this = this;
 
-		resize(); // Main resize function that later calls local resize() here...
-		this.overlay.show();
+		this.init(); // Re-run init because layout and options might have changed since last run
+		resize();
+        this.overlay.show();
 		this.view.show();
 
 		$("body,#previous,#next").addClass('help');
@@ -186,6 +189,11 @@ FluidbookHelp.prototype = {
 	},
 	resize: function(ww, hh, interfaceScale, navScale) {
 
+	    // Repopulate and reposition help overlay elements.
+        // Mostly important for the RTL languages where icon label position must be recalculated/
+        // ToDo: Replace this sledgehammer approach with something more elegant
+	    this.init();
+
 		// ToDo: access variables from fluidbook.resize.* if they're not passed to the function. So resize function can be called directly...
 
 		var $this = this;
@@ -203,15 +211,17 @@ FluidbookHelp.prototype = {
 			top: this.interfaceTop
 		});
 
-		// Slider label - delay slightly to make sure co-ordinates are correct
-		setTimeout(function () {
-			var sliderHelp = $this.view.find('.slider');
-			var sliderCursor = $('#slidercursor .visible');
-			sliderHelp.css({
-				bottom: hh - sliderCursor.offset().top,
-				left: sliderCursor.offset().left + (sliderCursor.width() / 2)
-			});
-		}, 250);
+		// Slider label
+        var positionSliderLabel = function () {
+            var sliderHelp = $this.view.find('.slider');
+            var sliderCursor = $('#slidercursor .visible');
+            sliderHelp.css({
+                bottom: hh - sliderCursor.offset().top,
+                left: sliderCursor.offset().left + (sliderCursor.width() / 2)
+            });
+        };
+        positionSliderLabel(); // Run immediately
+		setTimeout(positionSliderLabel, 250); // delay slightly to make sure co-ordinates are correct
 
 		$("#helpView #icons")
 			.css('top', menuHeightScaled)
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 4615c4de..59f2a0b5 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -93,6 +93,8 @@ Fluidbook.prototype = {
 
         if (this.datas.invertMenuPosition) {
             $('html').addClass('menu-inverted');
+        } else {
+            $('html').addClass('menu-default');
         }
 
         this.initLoading();
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 3b4aa680..c2fd35ca 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1271,9 +1271,17 @@ ul.chapters.shareList a.level0 .svg-icon {
 		position: absolute;
 		top: 0px;
 		display: inline-block;
-		border-left: 1px solid #ffffff;
-		padding-left: 0.5em;
 		white-space: nowrap;
+		padding: 0 0.5em;
+        border-color: #fff;
+        border-style: solid;
+        border-width: 0 0 0 1px; // Left border
+
+        // When in RTL default or LTR with menu inverted, the labels need to be on the other side of the line
+        .rtl.menu-default &, .ltr.menu-inverted & {
+          border-width: 0 1px 0 0; // Right border
+          transform: translateX(-100%); // Flip position back to where it would be if it was based on a left border line
+        }
 	}
 
 	.icon span {
-- 
2.39.5