Help overlay for bookmarks with handling for LTR, RTL and inverted layout versions...

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