From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 5 May 2025 16:03:39 +0000 (+0200)
Subject: wip #7469 @0.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=348bf7ef6595c6d01a279b928d36a6388fbf84d5;p=fluidbook-html5.git

wip #7469 @0.5
---

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index c09e4015..8e326867 100644
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -52,8 +52,7 @@ FluidbookHelp.prototype = {
             var name = 'fingers';
             var text = this.fluidbook.l10n.__("scroll down to read the page content");
             help += '<div class="illustration touch">' + getSpriteIcon('help-touch-scroll', {
-                widh: 50 * touchzoom,
-                height: 38 * touchzoom
+                widh: 50 * touchzoom, height: 38 * touchzoom
             });
             help += '<p>' + text + '</p>';
             help += '</div>';
@@ -61,8 +60,7 @@ FluidbookHelp.prototype = {
             var name = 'fingers';
             var text = this.fluidbook.l10n.__("tap twice or spread your fingers to zoom in");
             help += '<div class="illustration touch">' + getSpriteIcon('help-touch-zoom', {
-                width: 180 * touchzoom,
-                height: 170 * touchzoom
+                width: 180 * touchzoom, height: 170 * touchzoom
             });
             help += '<p>' + text + '</p>';
             help += '</div>';
@@ -70,6 +68,8 @@ FluidbookHelp.prototype = {
 
 
         help += '<div class="illustration keyboard">';
+        help += '<div class="bigkeys"><kbd>Esc</kbd></div>';
+        help += '<p>' + this.fluidbook.l10n.__('close windows and pop-ups') + '</p>';
         help += '<div class="bigkeys"><kbd>Ctrl</kbd><span>+</span><kbd class="big">+</kbd><div class="separator"></div><kbd>Ctrl</kbd><span>+</span><kbd class="big">–</kbd></div>';
         help += '<p>' + this.fluidbook.l10n.__('zoom in and zoom out') + '</p>';
         help += '</div>'
@@ -87,16 +87,14 @@ FluidbookHelp.prototype = {
         }
 
         help += '<div class="illustration mouse">' + getSpriteIcon('help-mouse', {
-            width: 60 * mousezoom,
-            height: 100 * mousezoom
+            width: 60 * mousezoom, height: 100 * mousezoom
         });
         help += '<p>' + text + '</p>';
         help += '</div>';
 
         if (this.fluidbook.mobilefirst.enabled) {
             help += '<div class="illustration touch">' + getSpriteIcon('help-touch-swipe', {
-                width: 50 * touchzoom,
-                height: 38 * touchzoom
+                width: 50 * touchzoom, height: 38 * touchzoom
             });
             help += '<p>' + this.fluidbook.l10n.__('swipe to change the page') + '</p>';
             help += '</div>';
@@ -191,8 +189,7 @@ FluidbookHelp.prototype = {
         }
 
         this.view.html(help);
-    },
-    initEvents: function () {
+    }, initEvents: function () {
         var $this = this;
 
         $(document).on(this.fluidbook.input.clickEvent, '.icon-help', function (e) {
@@ -218,11 +215,9 @@ FluidbookHelp.prototype = {
                 $this.hide();
             }
         })
-    },
-    isVisible: function () {
+    }, isVisible: function () {
         return this.view.is(":visible");
-    },
-    show: function (time) {
+    }, show: function (time) {
         this.clearTimeout();
         if (time === undefined) {
             time = 0;
@@ -264,8 +259,7 @@ FluidbookHelp.prototype = {
         $(this.fluidbook).trigger('fluidbook.help.show');
 
         return false;
-    },
-    hide: function () {
+    }, hide: function () {
         this.clearTimeout();
         this.fluidbook.interface.checkHidden();
         var $this = this;
@@ -282,15 +276,13 @@ FluidbookHelp.prototype = {
             $(this.fluidbook).trigger('fluidbook.help.hide');
         }
         return false;
-    },
-    toggle: function () {
+    }, toggle: function () {
         if (this.isVisible()) {
             this.hide();
         } else {
             this.show();
         }
-    },
-    resize: function () {
+    }, resize: function () {
 
         this.view.find('#help-illustrations').css({
             transform: ''
@@ -335,7 +327,7 @@ FluidbookHelp.prototype = {
         }
 
         if (this.fluidbook.bookmarks.enabled) {
-            var inverted = this.fluidbook.nav.isInverted() ;
+            var inverted = this.fluidbook.nav.isInverted();
             var side = ((this.fluidbook.l10n.dir === 'ltr' && inverted) || (this.fluidbook.l10n.dir === 'rtl' && !inverted)) ? 'left' : 'right';
             if (this.fluidbook.mobilefirst.enabled) {
                 side = 'right';
@@ -351,14 +343,11 @@ FluidbookHelp.prototype = {
                 var circleOffset = circleExtra / 2;
 
                 $(".bookmark-help .bookmark").css({
-                    width: Math.round(box.width),
-                    height: Math.round(box.height),
-                    margin: Math.round(circleOffset), // Centre inside circle
+                    width: Math.round(box.width), height: Math.round(box.height), margin: Math.round(circleOffset), // Centre inside circle
                 });
 
                 $(".bookmark-help .bookmark-help-icon").css({
-                    width: Math.round(box.width + circleExtra),
-                    height: Math.round(box.height + circleExtra)
+                    width: Math.round(box.width + circleExtra), height: Math.round(box.height + circleExtra)
                 });
 
                 var css = {top: Math.round(box.top - circleOffset)};
@@ -383,25 +372,21 @@ FluidbookHelp.prototype = {
                 var sliderCursor = $('#slidercursor .visible');
                 var bottom = Math.round(hh - sliderCursor.offset().top);
                 var left = Math.round(sliderCursor.offset().left + (sliderCursor.width() / 2));
-                var spanTop=-8;
-                var spanLeft=0;
-                var diff=($(span).width() + left) - ($this.fluidbook.resize.ww-10);
-                var height=null;
-                if (diff>0) {
-                    spanLeft=-diff;
-                    spanTop=-25;
-                    height=0;
+                var spanTop = -8;
+                var spanLeft = 0;
+                var diff = ($(span).width() + left) - ($this.fluidbook.resize.ww - 10);
+                var height = null;
+                if (diff > 0) {
+                    spanLeft = -diff;
+                    spanTop = -25;
+                    height = 0;
                 }
 
                 sliderHelp.css({
-                    bottom: bottom,
-                    left: left,
-                    height:height,
-                    transformOrigin: 'left bottom'
+                    bottom: bottom, left: left, height: height, transformOrigin: 'left bottom'
                 });
                 $(span).css({
-                    top:spanTop,
-                    left:spanLeft,
+                    top: spanTop, left: spanLeft,
                 });
             };
             positionSliderLabel(); // Run immediately
@@ -409,8 +394,7 @@ FluidbookHelp.prototype = {
         }
 
         this.view.find('#icons').css({
-            top: menuHeightScaled,
-            transform: 'scale(' + navScale + ')'
+            top: menuHeightScaled, transform: 'scale(' + navScale + ')'
         });
 
         var s = Math.max(0.9, Math.min(1.5, interfaceScale));
@@ -432,8 +416,7 @@ FluidbookHelp.prototype = {
         var top = (hh - $("#help-illustrations").outerHeight()) / 2;
         $("#help-illustrations").css('top', top);
 
-    },
-    clearTimeout: function () {
+    }, clearTimeout: function () {
         clearTimeout(this.autoTimeout);
     },
 
@@ -469,7 +452,7 @@ FluidbookHelp.prototype = {
             return true;
         }
 
-        if (!this.fluidbook.nav.isInverted()  && !this.fluidbook.getButtonsVisibility().next && this.fluidbook.contentlock.getMaxPage() % 2 === 0) {
+        if (!this.fluidbook.nav.isInverted() && !this.fluidbook.getButtonsVisibility().next && this.fluidbook.contentlock.getMaxPage() % 2 === 0) {
             return false;
         }
 
diff --git a/style/help.less b/style/help.less
index b550b78b..6b2812ea 100644
--- a/style/help.less
+++ b/style/help.less
@@ -103,6 +103,11 @@
 
       .bigkeys {
         font-weight: 600;
+        margin-top: 50px;
+
+        &:first-child {
+          margin-top: 0;
+        }
 
         kbd {
           display: inline-block;