From 0d4732f5a054a8fd5868bd3bc150c67454f2f75f Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 28 Sep 2017 18:28:27 +0200
Subject: [PATCH] Help overlay for bookmarks with handling for LTR, RTL and
 inverted layout versions. Done #1691 @6.5

---
 js/libs/fluidbook/fluidbook.help.js | 89 ++++++++++++++++++++++++++++-
 1 file changed, 87 insertions(+), 2 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index a45dc0f6..c85e96de 100644
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -103,6 +103,7 @@ FluidbookHelp.prototype = {
 		help += '<div class="previous">' + previous + '</div>';
 		help += '<div class="first">' + this.fluidbook.l10n.__('frontpage') + '</div>';
 		help += '<div class="slider"><span>' + this.fluidbook.l10n.__('drag handle to switch page') + '</span></div>';
+		help += this.bookmarkLabel();
 		help += '</div>';
 
 		if (this.fluidbook.pad.enabled) {
@@ -206,8 +207,9 @@ FluidbookHelp.prototype = {
 		// });
 
 
+        // Navigation arrows
 		this.interfaceTop = (hh - 100 * interfaceScale) / 2 + 30 * interfaceScale;
-		this.view.find(".interface > div").not('.slider').css({
+		this.view.find('.next, .previous, .first, .last').css({
 			top: this.interfaceTop
 		});
 
@@ -282,6 +284,89 @@ FluidbookHelp.prototype = {
 		} else {
 			this.fluidbook.hideUnnecessaryButtons();
 		}
-	}
+	},
+
+    bookmarkLabel: function() {
+
+	    // The bookmark help element is a bit complex because it must be placed in a section of the help overlay that is
+        // not already used by the icon labels. Since the menu can be either on the left or right, this needs to be taken
+        // into account. On the first and last pages of the Fluidbook we don't have a left or right page so it might not
+        // be possible to always display the bookmark icon in this case...
+
+        var dir = this.fluidbook.l10n.dir,
+            inverted = this.fluidbook.datas.invertMenuPosition,
+            side = ((dir == 'ltr' && inverted) || (dir == 'rtl' && !inverted)) ? 'left' : 'right',
+            baseElement = $('#links .bookmark.' + side), // Original element used to provide position and sizing for overlay
+            html = '';
+
+        // Don't show the label if there's no space for it (ie. the side doesn't exist in this view)
+        // if ((isFirst && side == firstMissing) || (isLast && side == lastMissing)) {
+        //     return '';
+        // }
+
+        // If bookmark icon isn't present on the side we want, it means that we're on
+        // the first/last page and that side is missing so we can't display the help
+        if (baseElement.length == 0) {
+            return '';
+        }
+
+        // Get the offset and dimensions of the element, taking into account the scaling
+        var box = baseElement[0].getBoundingClientRect(),
+            circleExtra = 20, // How much bigger the circle should be around the bookmark icon
+            lineLength = 30; // Length of the line to the label text
+
+        // Build a HTML string via jQuery with all the styling
+        // Bookmark icon:
+        html += $('<div/>').css({
+            'position': 'absolute',
+            'display': 'block',
+            'top': Math.round(box.top),
+            'left': Math.round(box.left),
+            'width': Math.round(box.width),
+            'height': Math.round(box.height),
+            'background': baseElement.css('background').replace('off.svg', 'on.svg'), // Show the "on" state if not already set
+            'backgroundSize': 'contain'
+        })[0].outerHTML;
+
+        // Circle around the icon - slightly bigger
+        html += $('<div/>').css({
+            'position': 'absolute',
+            'display': 'block',
+            'top': Math.round(box.top - circleExtra / 2),
+            'left': Math.round(box.left - circleExtra / 2),
+            'width': Math.round(box.width + circleExtra),
+            'height': Math.round(box.height + circleExtra),
+            'borderRadius': '50%',
+            'border': '1px solid'
+        })[0].outerHTML;
+
+        // The line and text need to be positioned differently depending on which side the icon is on
+        var lineLeft = (side == 'left') ? Math.round(box.left + box.width + circleExtra / 2) : Math.round(box.left - circleExtra / 2 - lineLength),
+            labelLeft = (side == 'left') ? Math.round(box.left + box.width + circleExtra / 2 + lineLength + 10) : Math.round(box.left - circleExtra / 2 - lineLength - 10),
+            labelTransform = (side == 'left') ? 'translateY(-50%)' : 'translateY(-50%) translateX(-100%)'; // TranslateX -100% since we don't know how long the text is
+
+        // Line to text
+        html += $('<div/>').css({
+            'position': 'absolute',
+            'display': 'block',
+            'top': Math.round(box.top + box.height / 2),
+            'left': lineLeft,
+            'width': lineLength,
+            'height': 0,
+            'borderBottom': '1px solid',
+        })[0].outerHTML;
+
+        // Help text label
+        html += $('<div>'+ this.fluidbook.l10n.__('add / remove bookmark') +'</div>').css({
+            'position': 'absolute',
+            'display': 'block',
+            'top': Math.round(box.top + box.height / 2),
+            'left': labelLeft,
+            'transform': labelTransform,
+            'whiteSpace': 'nowrap'
+        })[0].outerHTML;
+
+        return html;
+    }
 };
 
-- 
2.39.5