Handle RTL and inverted menu layouts in help view. Address bugs with resizing. WIP...

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index f4343d73e278490a96261b893036ec4dd4bf4ee9..a45dc0f6de820e543f41e73022c72c0e31bd4e2f 100644 (file)
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -49,10 +49,16 @@ FluidbookHelp.prototype = {
                // }, {\r
                //      preserve: true\r
                // });\r
-               var h = 20 + ($("#horizontalNav a[data-tooltip]").length - 1) * 25;\r
+\r
+        var tooltipSelector = '#horizontalNav a[data-tooltip]';\r
+\r
+        // When the menu position is inverted, the icon help lines need\r
+        // to be drawn in the reverse order to avoid text/line overlaps\r
+        var tooltips = this.fluidbook.datas.invertMenuPosition ? $(tooltipSelector).get().reverse() : $(tooltipSelector);\r
+               var h = 20 + ($(tooltipSelector).length - 1) * 25;\r
                var ww = $(window).width();\r
 \r
-               $("#horizontalNav a[data-tooltip]").each(function() {\r
+               $(tooltips).each(function() {\r
                        var text = $(this).data('tooltip');\r
                        if (text == null || text == undefined || text == '' || $(this).hasClass('hidden')) {\r
                                return;\r
@@ -104,7 +110,7 @@ FluidbookHelp.prototype = {
                }\r
 \r
                this.view.html(help);\r
-               resize();\r
+               //resize();\r
        },\r
        initEvents: function() {\r
                var $this = this;\r
@@ -140,14 +146,11 @@ FluidbookHelp.prototype = {
                        return false;\r
                }\r
 \r
-               if (this.view.html() == '') {\r
-                       this.init();\r
-               }\r
-\r
                var $this = this;\r
 \r
-               resize(); // Main resize function that later calls local resize() here...\r
-               this.overlay.show();\r
+               this.init(); // Re-run init because layout and options might have changed since last run\r
+               resize();\r
+        this.overlay.show();\r
                this.view.show();\r
 \r
                $("body,#previous,#next").addClass('help');\r
@@ -186,6 +189,11 @@ FluidbookHelp.prototype = {
        },\r
        resize: function(ww, hh, interfaceScale, navScale) {\r
 \r
+           // Repopulate and reposition help overlay elements.\r
+        // Mostly important for the RTL languages where icon label position must be recalculated/\r
+        // ToDo: Replace this sledgehammer approach with something more elegant\r
+           this.init();\r
+\r
                // ToDo: access variables from fluidbook.resize.* if they're not passed to the function. So resize function can be called directly...\r
 \r
                var $this = this;\r
@@ -203,15 +211,17 @@ FluidbookHelp.prototype = {
                        top: this.interfaceTop\r
                });\r
 \r
-               // Slider label - delay slightly to make sure co-ordinates are correct\r
-               setTimeout(function () {\r
-                       var sliderHelp = $this.view.find('.slider');\r
-                       var sliderCursor = $('#slidercursor .visible');\r
-                       sliderHelp.css({\r
-                               bottom: hh - sliderCursor.offset().top,\r
-                               left: sliderCursor.offset().left + (sliderCursor.width() / 2)\r
-                       });\r
-               }, 250);\r
+               // Slider label\r
+        var positionSliderLabel = function () {\r
+            var sliderHelp = $this.view.find('.slider');\r
+            var sliderCursor = $('#slidercursor .visible');\r
+            sliderHelp.css({\r
+                bottom: hh - sliderCursor.offset().top,\r
+                left: sliderCursor.offset().left + (sliderCursor.width() / 2)\r
+            });\r
+        };\r
+        positionSliderLabel(); // Run immediately\r
+               setTimeout(positionSliderLabel, 250); // delay slightly to make sure co-ordinates are correct\r
 \r
                $("#helpView #icons")\r
                        .css('top', menuHeightScaled)\r

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 4615c4de3dba04a35449df0da7222113a73be3cd..59f2a0b51d76e545e1e05c1f3916d220d1b3da23 100644 (file)
--- 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 3b4aa680232a15970fe4549ab595afff1927f0c4..c2fd35ca0f828d2932b36936b4c34bd4cd0e7328 100644 (file)
--- 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 {