From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 17 May 2019 18:19:47 +0000 (+0200)
Subject: wait #2710 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7146cc159b83f05427aba98b9a622240ad23ecb7;p=fluidbook-html5.git

wait #2710 @1
---

diff --git a/images/help/help-touch-scroll.svg b/images/help/help-touch-scroll.svg
new file mode 100644
index 00000000..73c4cece
--- /dev/null
+++ b/images/help/help-touch-scroll.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+     y="0px"
+     viewBox="0 0 101.9 84.2" style="enable-background:new 0 0 101.9 84.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
+	.st2{opacity:0.5;fill:#FFFFFF;}
+</style>
+    <path class="st0" d="M48.4,68.2c6.2,1,8.1,1.1,12.7,2.5c4.6,1.3,18.1,13.4,18.1,13.4s11.7,1.1,17.4-5.7c5.7-6.8,5.2-15.7,5.2-15.7
+	S92,55.4,86.4,47c-5.6-8.4-13.5-24.1-16.2-25.3c-2.7-1.2-2.6,0-4.6-0.2c-1.9-0.2-5.4-2.3-7.1-2.6c-1.7-0.2-4.5,2.7-5.9,2.6
+	c-1.5-0.1-6.8-2.2-8.8,0c-2,2.2-2.1,2.6-2.8,2.6c-0.7,0-2.5-1.1-4-2.4c-1.5-1.2-10.6-6.3-13.7-8.1c-3.1-1.8-9-6.9-11.4-5.2
+	c-3.4,2.4-2,5.5-0.9,6.4c1.2,0.9,10.9,7.7,15.3,12.5c4.4,4.7,9.5,8.9,15.1,18.1c1.1,1.8,0.8,3.8,0.3,3.5c-0.6-0.3-5-2.8-5.4-3.6
+	c-0.5-0.8-1.7-5.3-2.4-6.4c-0.7-1.1-3.4-4.9-7.5-4.4c-4.2,0.5-1.5,3.4-0.7,5.5c0.8,2.1,2.5,13.1,4.5,15c2,1.8,8.4,6.2,10.1,8.1
+	C41.9,64.9,44.1,67.5,48.4,68.2z"/>
+    <g>
+	<path class="st1"
+          d="M1.5,10.7c0-5.1,4.1-9.2,9.2-9.2c5.1,0,9.2,4.1,9.2,9.2c0,5.1-4.1,9.2-9.2,9.2C5.6,20,1.5,15.8,1.5,10.7z"/>
+        <path class="st0" d="M8.8,33.5l-7-5.4c-1.1-1.1-1.1-2.8,0-3.9c1.1-1.1,2.1-0.9,3.9,0l5,2.7l5-2.7c1.6-1,2.8-1.1,3.9,0
+		c1.1,1.1,1.1,2.8,0,3.9l-6.9,5.3c0,0-1,0.9-1.9,0.9C9.8,34.3,8.8,33.5,8.8,33.5z"/>
+        <path class="st2" d="M8.8,45.3l-7-5.4c-1.1-1.1-1.1-2.8,0-3.9C3,35,4,35.2,5.7,36.1l5,2.7l5-2.7c1.6-1,2.8-1.1,3.9,0
+		c1.1,1.1,1.1,2.8,0,3.9l-6.9,5.3c0,0-1,0.9-1.9,0.9C9.8,46.1,8.8,45.3,8.8,45.3z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index 7c0295f2..c9a97efe 100644
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -13,31 +13,41 @@ FluidbookHelp.prototype = {
         var help = '';
 
         // Image centrale
-        var ext = '';
-        if (this.fluidbook.support.SVG) {
-            ext = 'svg';
-        } else {
-            ext = 'png';
-        }
+        var ext = 'svg';
 
         var width = 400;
         var height = 200;
         var zoom = 2;
-        var name = 'fingers';
-        var text = this.fluidbook.l10n.__("tap twice or spread your fingers to zoom in");
 
-        help += '<div class="illustration touch">' + this.fluidbook.loader.getImage('data/images/help-' + name + '.' + ext, width * zoom, height * zoom);
-        help += '<p>' + text + '</p>';
-        help += '</div>';
+
+        if (this.fluidbook.mobilefirst.enabled) {
+            var name = 'fingers';
+            var text = this.fluidbook.l10n.__("scroll down to read the page content");
+            help += '<div class="illustration touch">' + this.fluidbook.loader.getImage('images/help/help-touch-scroll.svg', width * zoom, height * zoom);
+            help += '<p>' + text + '</p>';
+            help += '</div>';
+
+
+        } else {
+            var name = 'fingers';
+            var text = this.fluidbook.l10n.__("tap twice or spread your fingers to zoom in");
+            help += '<div class="illustration touch">' + this.fluidbook.loader.getImage('data/images/help-' + name + '.svg', width * zoom, height * zoom);
+            help += '<p>' + text + '</p>';
+            help += '</div>';
+        }
 
 
         var width = 100;
         var height = 200;
         var zoom = 1;
         name = 'mouse';
-        text = this.fluidbook.l10n.__('click once to zoom in, click again to zoom out') + '<br />' + this.fluidbook.l10n.__('roll the mouse wheel to zoom in/out');
+        if (this.fluidbook.mobilefirst.enabled) {
+            text = this.fluidbook.l10n.__('scroll down to read the page content');
+        } else {
+            text = this.fluidbook.l10n.__('click once to zoom in, click again to zoom out') + '<br />' + this.fluidbook.l10n.__('roll the mouse wheel to zoom in/out');
+        }
 
-        help += '<div class="illustration mouse">' + this.fluidbook.loader.getImage('data/images/help-' + name + '.' + ext, width * zoom, height * zoom);
+        help += '<div class="illustration mouse">' + this.fluidbook.loader.getImage('data/images/help-' + name + '.svg', width * zoom, height * zoom);
         help += '<p>' + text + '</p>';
         help += '</div>';
 
@@ -90,20 +100,25 @@ FluidbookHelp.prototype = {
         help += '</div>';
 
         // Interface
-
         var next = this.fluidbook.l10n.__('next double page');
         var previous = this.fluidbook.l10n.__('previous double page');
         if (this.fluidbook.pad.enabled) {
             next = this.fluidbook.l10n.__('next chapter');
             previous = this.fluidbook.l10n.__('previous chapter');
         }
+        if (this.fluidbook.mobilefirst.enabled) {
+            var next = this.fluidbook.l10n.__('next page');
+            var previous = this.fluidbook.l10n.__('previous page');
+        }
 
         help += '<div class="interface">';
         help += '<div class="next">' + next + '</div>';
         help += '<div class="last">' + this.fluidbook.l10n.__('last page') + '</div>';
         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>';
+        if ($("#slider").length > 0) {
+            help += '<div class="slider"><span>' + this.fluidbook.l10n.__('drag handle to switch page') + '</span></div>';
+        }
         help += this.bookmarkLabel();
         help += '</div>';
 
@@ -289,6 +304,7 @@ FluidbookHelp.prototype = {
             baseElement = $('#links .bookmark.' + side), // Original element used to provide position and sizing for overlay
             html = '';
 
+
         // 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) {
@@ -306,15 +322,13 @@ FluidbookHelp.prototype = {
 
         // Build a HTML string via jQuery with all the styling
         // Bookmark icon:
-        var icon = $('<div/>').css({
+        var iconHolder = $('<div class="bookmark right" data-enabled="enabled" />').css({
             width: Math.round(box.width),
             height: Math.round(box.height),
             margin: Math.round(circleOffset), // Centre inside circle
-            backgroundSize: 'contain',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-            backgroundImage: baseElement.css('backgroundImage').replace('off.svg', 'on.svg') // Show the "on" state if not already set
-        })[0].outerHTML;
+        });
+        iconHolder.html(getSpriteIcon('bookmark-corner'));
+        var icon = $(iconHolder).get(0).outerHTML;
 
         // Circle around the icon - slightly bigger
         html += $('<div>' + icon + '</div>').css({
diff --git a/style/help.less b/style/help.less
index 7dbcc340..9faafe3c 100644
--- a/style/help.less
+++ b/style/help.less
@@ -22,11 +22,6 @@
   overflow: hidden;
 
   .illustration {
-
-    .zoom-disabled & {
-      display: none;
-    }
-
     .no-using-touch &.touch {
       display: none;
     }
@@ -51,6 +46,10 @@
       position: static;
     }
 
+    &.touch {
+      top: 25%;
+    }
+
   }
 
   #icons {
diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index c745694e..e64c60d9 100644
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -69,6 +69,7 @@
           transform: translate3d(unit(-1*(@book-page-width+@transition-margin), px), 0, 0);
         }
       }
+
     }
 
     .link.multimedia.notinteractive {
@@ -80,6 +81,11 @@
         opacity: 1;
       }
     }
+
+
+    #helpView .interface {
+      display: block;
+    }
   }
 
   .mview.fs .fonctions {