WIP #1699 @5.5

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index 52574b4f606a2bc80fb94aa47e10355e42e451eb..f648a7fc559d85a00595e1c9e380894c7d11550c 100644 (file)
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -48,7 +48,7 @@ FluidbookHelp.prototype = {
                // }, {\r
                //      preserve: true\r
                // });\r
-               var h = 40 + ($("#horizontalNav a[data-tooltip]").length - 1) * 25;\r
+               var h = 20 + ($("#horizontalNav a[data-tooltip]").length - 1) * 25;\r
                var ww = $(window).width();\r
 \r
                $("#horizontalNav a[data-tooltip]").each(function() {\r
@@ -56,13 +56,15 @@ FluidbookHelp.prototype = {
                        if (text == null || text == undefined || text == '' || $(this).hasClass('hidden')) {\r
                                return;\r
                        }\r
-                       var offset = $(this).offset();\r
+\r
+                       var icon = $(this).find('.svg-icon');\r
+                       var offset = icon.offset();\r
                        var left;\r
 \r
                        if ($this.fluidbook.l10n.dir == 'ltr') {\r
-                               left = offset.left + ($(this).outerWidth() / 2);\r
+                               left = offset.left + (icon.outerWidth() / 2);\r
                        } else {\r
-                               left = (ww - offset.left - ($(this).outerWidth() / 2)) * -1;\r
+                               left = (ww - offset.left - (icon.outerWidth() / 2)) * -1;\r
                        }\r
 \r
                        var c = 'nav';\r
@@ -93,6 +95,7 @@ FluidbookHelp.prototype = {
                help += '<div class="last">' + this.fluidbook.l10n.__('last page') + '</div>';\r
                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 += '</div>';\r
 \r
                if (this.fluidbook.pad.enabled) {\r
@@ -104,24 +107,14 @@ FluidbookHelp.prototype = {
        },\r
        initEvents: function() {\r
                var $this = this;\r
-               if (!this.fluidbook.support.isMobile) {\r
-                       $(document).on('click', '.icon-help', function(e) {\r
-                               $this.show();\r
-                               if (fluidbook.nav.menuIsOpen) {\r
-                                       fluidbook.nav.menuAPI.close();\r
-                               }\r
-                               e.preventDefault();\r
-                       }/*, function() {\r
-                               $this.hide();\r
-                       }).click(function() {\r
-                               return false;\r
-                       }*/);\r
-               } else {\r
-                       $(document).on('click', '.icon-help', function() {\r
-                               $this.show();\r
-                               return false;\r
-                       });\r
-               }\r
+\r
+               $(document).on('click', '.icon-help', function(e) {\r
+                       $this.show();\r
+                       if (fluidbook.nav.menuIsOpen) {\r
+                               fluidbook.nav.menuAPI.close();\r
+                       }\r
+                       e.preventDefault();\r
+               });\r
 \r
                // Click handler on main helpView div to hide it\r
                $this.view.click(function(e) {\r
@@ -152,8 +145,10 @@ FluidbookHelp.prototype = {
 \r
                var $this = this;\r
 \r
+               resize(); // Main resize function that later calls local resize() here...\r
                this.view.show();\r
-               $("#previous,#next").addClass('help');\r
+\r
+               $("body,#previous,#next").addClass('help');\r
                this.fluidbook.showAllButtons();\r
 \r
         if (time != 0) {\r
@@ -169,7 +164,7 @@ FluidbookHelp.prototype = {
                var $this = this;\r
                if (this.isVisible()) {\r
                        this.view.hide();\r
-                       $("#previous,#next").removeClass('help');\r
+                       $("body,#previous,#next").removeClass('help');\r
                        this.fluidbook.hideUnnecessaryButtons();\r
                        if (this.fluidbook.support.isMobile) {\r
                                $("*").unbind('click', function() {\r
@@ -187,20 +182,38 @@ FluidbookHelp.prototype = {
                }\r
        },\r
        resize: function(ww, hh, interfaceScale, navScale) {\r
-               var menuHeightScaled = (this.fluidbook.datas.menuHeight) * navScale\r
-               this.view.css({\r
-                       width: ww,\r
-                       minHeight: hh - menuHeightScaled,\r
-                       top: menuHeightScaled\r
-               });\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
+               var menuHeightScaled = (this.fluidbook.datas.menuHeight) * navScale;\r
+\r
+               // this.view.css({\r
+               //      width: ww,\r
+               //      minHeight: hh - menuHeightScaled,\r
+               //      top: menuHeightScaled\r
+               // });\r
 \r
 \r
                this.interfaceTop = (hh - 100 * interfaceScale) / 2 + 30 * interfaceScale;\r
-               this.view.find(".interface>div").css({\r
-                       top: this.interfaceTop - menuHeightScaled\r
+               this.view.find(".interface > div").css({\r
+                       top: this.interfaceTop\r
                });\r
 \r
-               $("#helpView #icons").transform({\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
+                               top: 'auto',\r
+                               bottom: hh - sliderCursor.offset().top,\r
+                               left: sliderCursor.offset().left + (sliderCursor.width() / 2)\r
+                       });\r
+               }, 250);\r
+\r
+               $("#helpView #icons")\r
+                       .css('top', menuHeightScaled)\r
+                       .transform({\r
                        scale: [navScale, navScale],\r
                        origin: ['0%', '0%']\r
                });\r
@@ -243,7 +256,7 @@ FluidbookHelp.prototype = {
                        preserve: true\r
                });\r
 \r
-               this.view.find('.illustration').css('margin-top', (hh - 400 * interfaceScale) / 2);\r
+               this.view.find('.illustration').css('margin-top', (hh - 200 * interfaceScale) / 2);\r
        },\r
        clearTimeout: function() {\r
                clearTimeout(this.autoTimeout);\r

diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
index 761f766014b6194ddbac81676ebd2467511f9c54..bb86822b2491b6c260bd5149db87b696a119d45e 100644 (file)
--- a/js/libs/fluidbook/fluidbook.tooltip.js
+++ b/js/libs/fluidbook/fluidbook.tooltip.js
@@ -74,6 +74,13 @@ FluidbookTooltip.prototype = {
         if (Modernizr.ftouch && !$(target).is("[data-tooltip-touch]")) {
             return true;
         }
+
+        // When the help is open, we don't want tooltips because they are already displayed under the icons
+        if (this.fluidbook.help.isVisible()) {
+            return true;
+        }
+
+
         var $this = this;
 
         var text = $(target).data('tooltip');

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 48bb886fa09ad887e895d6d34f3faa6d95a27d33..d294a7a15620718ff3645a6fe8514dfcb8d754aa 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -433,6 +433,11 @@ 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 {
@@ -582,6 +587,11 @@ body, html {
 header {
        position: relative;
        z-index: 12;
+
+       // Header should sit above help overlay when it is open
+       .help & {
+               z-index: 21;
+       }
 }
 
 #nav > a {
@@ -1224,6 +1234,9 @@ ul.chapters.shareList a.level0 .svg-icon {
 #helpView {
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;
+       top: 0;
+       height: 100%;
+       width: 100%;
        z-index: 20;
        display: none;
        color: #ffffff;
@@ -1240,7 +1253,6 @@ ul.chapters.shareList a.level0 .svg-icon {
 
        #icons {
                position: absolute;
-               top: 0px;
 
                @media all and (max-width: @menu-breakpoint) {
                        display: none;
@@ -1255,15 +1267,17 @@ ul.chapters.shareList a.level0 .svg-icon {
                top: 0px;
                display: inline-block;
                border-left: 1px solid #ffffff;
-               padding-left: 5px;
+               padding-left: 0.5em;
                white-space: nowrap;
        }
 
        .icon span {
+               position: relative;
+               bottom: -0.5em;
+
                & .rtl {
                        position: absolute;
                        right: 1em;
-                       display: block;
                        margin-top: -1em;
                }
        }
@@ -1296,6 +1310,19 @@ ul.chapters.shareList a.level0 .svg-icon {
        vertical-align: middle;
 }
 
+#helpView .interface .slider {
+       position: absolute;
+       display: inline-block;
+       border-left: 1px solid #fff;
+       padding: 0 0 20px 0.5em;
+       white-space: nowrap;
+
+       span {
+               position: relative;
+               top: -0.5em;
+       }
+}
+
 .ltr #helpView .interface .next,
 .ltr #helpView .interface .last,
 .rtl #helpView .interface .first,

diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
index 551b49f6d4c62c503594765665639a233b04a9e6..3c4aaa13b520f11106360c663e91c551e165fc04 100644 (file)
--- a/style/nav-horizontal.less
+++ b/style/nav-horizontal.less
@@ -59,6 +59,11 @@
   a {
     color: @icon-color;
     display: inline-block;
+
+    // Styling when help overlay is open
+    .help & {
+      color: #ccc;
+    }
   }
 
   .svg-icon {
@@ -67,6 +72,10 @@
     margin: 0 17px;
     color: @icon-color;
     vertical-align: middle;
+
+    .help & {
+      color: #ccc;
+    }
   }
 }
 

diff --git a/style/slider.less b/style/slider.less
index 409cb8e2a15ccaa06bf3bd314542cf912cf3c482..491e85a64dff7d2a0ffd503a5b33a003a7d571e1 100644 (file)
--- a/style/slider.less
+++ b/style/slider.less
@@ -26,6 +26,11 @@
                z-index: 12;
        }
 
+       // When help overlay is active
+       .help & {
+               z-index: 22;
+       }
+
        #sliderback {
                position: absolute;
                top: -20px;