From f44804411c558d8cb1a745c14676e2bffbb0e517 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 2 Jul 2020 18:09:23 +0200
Subject: [PATCH] fix #3759 @2

---
 images/interface.svg                     | 22 ++++--
 js/libs/fluidbook/fluidbook.help.js      | 19 +++---
 js/libs/fluidbook/fluidbook.interface.js | 87 ++++++++++++++++++++++--
 js/libs/fluidbook/fluidbook.js           | 10 +--
 js/libs/fluidbook/fluidbook.nav.js       |  9 ++-
 js/libs/fluidbook/fluidbook.resize.js    | 15 ++--
 style/interface.less                     | 75 ++++++++++++++++++--
 7 files changed, 192 insertions(+), 45 deletions(-)

diff --git a/images/interface.svg b/images/interface.svg
index d14f49a0..c53dcee2 100644
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -15,11 +15,23 @@
     <symbol id="interface-menu" viewBox="0 0 512 512">
         <path d="m0 26l512 0 0 51-512 0z m0 204l512 0 0 52-512 0z m0 205l512 0 0 51-512 0z"/>
     </symbol>
-    <symbol id="interface-next" viewBox="0 0 53 107">
-        <path d="M37,39L19.7,21.8c-0.3-0.3-0.7-0.3-0.9,0l-1.4,1.4c-0.3,0.3-0.3,0.7,0,0.9L33,39.6L17.5,55.1 c-0.3,0.3-0.3,0.7,0,0.9l1.4,1.4c0.3,0.3,0.7,0.3,0.9,0L37,40.1c0.1-0.1,0.2-0.3,0.2-0.5C37.2,39.4,37.1,39.2,37,39z M30,86.5h2 v-15h-2V86.5z M26.8,78C26.7,78,26.7,78,26.8,78l-6.3-6.3c-0.3-0.3-0.7-0.3-0.9,0L19,72.2c-0.3,0.3-0.3,0.7,0,0.9l5.8,5.8L19,84.8 c-0.3,0.3-0.3,0.7,0,0.9l0.5,0.5c0.3,0.3,0.7,0.3,0.9,0l6.2-6.2c0,0,0.1,0,0.1-0.1l0.5-0.5c0.1-0.1,0.2-0.3,0.2-0.5 c0-0.2-0.1-0.3-0.2-0.5L26.8,78z"/>
-    </symbol>
-    <symbol id="interface-previous" viewBox="0 0 53 107">
-        <path d="M36.5,55.1L21,39.6l15.5-15.5c0.3-0.3,0.3-0.7,0-0.9l-1.4-1.4c-0.3-0.3-0.7-0.3-0.9,0L17,39 c-0.2,0.2-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.2,0.5l17.2,17.2c0.3,0.3,0.7,0.3,0.9,0l1.4-1.4C36.8,55.7,36.8,55.3,36.5,55.1z M22,86.5 h2v-15h-2V86.5z M29.1,79l5.8-5.8c0.3-0.3,0.3-0.7,0-0.9l-0.5-0.5c-0.3-0.3-0.7-0.3-0.9,0L27.3,78c0,0,0,0-0.1,0l-0.5,0.5 c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5l0.5,0.5c0,0,0.1,0,0.1,0.1l6.2,6.2c0.3,0.3,0.7,0.3,0.9,0l0.5-0.5 c0.3-0.3,0.3-0.7,0-0.9L29.1,79z"/>
+    <symbol id="interface-next" viewBox="0 0 20 36.1">
+        <path d="M19.8,17.4L2.5,0.2c-0.3-0.3-0.7-0.3-0.9,0L0.2,1.6c-0.3,0.3-0.3,0.7,0,0.9L15.8,18L0.3,33.5c-0.3,0.3-0.3,0.7,0,0.9
+	l1.4,1.4c0.3,0.3,0.7,0.3,0.9,0l17.2-17.3c0.1-0.1,0.2-0.3,0.2-0.5C20,17.8,19.9,17.6,19.8,17.4z"/>
+    </symbol>
+    <symbol id="interface-prev" viewBox="0 0 20 36.1">
+        <path d="M0,18c0,0.2,0.1,0.4,0.2,0.5l17.2,17.3c0.2,0.3,0.6,0.3,0.9,0l1.4-1.4c0.3-0.2,0.3-0.6,0-0.9L4.2,18L19.8,2.5
+	c0.3-0.2,0.3-0.6,0-0.9l-1.4-1.4c-0.2-0.3-0.6-0.3-0.9,0L0.2,17.4C0.1,17.6,0,17.8,0,18z"/>
+    </symbol>
+    <symbol id="interface-last" viewBox="0 0 13.2 15">
+        <path d="M11.2,15h2V0h-2V15z M8,6.5C7.9,6.5,7.9,6.5,8,6.5L1.7,0.2C1.4-0.1,1-0.1,0.8,0.2L0.2,0.7c-0.3,0.3-0.3,0.7,0,0.9L6,7.4
+	l-5.8,5.9c-0.3,0.3-0.3,0.7,0,0.9l0.5,0.5C1,15,1.4,15,1.6,14.7l6.2-6.2c0,0,0.1,0,0.1-0.1l0.5-0.5c0.1-0.1,0.2-0.3,0.2-0.5
+	S8.5,7.1,8.4,6.9L8,6.5z"/>
+    </symbol>
+    <symbol id="interface-first" viewBox="0 0 13.2 15">
+        <rect y="0" width="2" height="15"/>
+        <path d="M4.8,6.9C4.7,7.1,4.6,7.2,4.6,7.4s0.1,0.4,0.2,0.5l0.5,0.5c0,0.1,0.1,0.1,0.1,0.1l6.2,6.2c0.2,0.3,0.6,0.3,0.9,0l0.5-0.5
+	c0.3-0.2,0.3-0.6,0-0.9L7.2,7.4L13,1.6c0.3-0.2,0.3-0.6,0-0.9l-0.6-0.5c-0.2-0.3-0.6-0.3-0.9,0L5.2,6.5c0.1,0,0.1,0,0,0L4.8,6.9z"/>
     </symbol>
     <symbol id="interface-minus" viewBox="0 0 50 50">
         <rect x="16.5" y="23.5" width="17" height="2.9"/>
diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index 478335ee..f2f334d4 100644
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -135,18 +135,19 @@ FluidbookHelp.prototype = {
                 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');
+                next = this.fluidbook.l10n.__('next page');
+                previous = this.fluidbook.l10n.__('previous page');
             }
         }
 
         help += '<div class="interface">';
         if (this.fluidbook.interface.arrowsEnabled()) {
+            var labels = this.fluidbook.interface.getLabels();
             help += '<div class="help-arrows">';
-            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="next">' + labels.next + '</div>';
+            help += '<div class="last">' + labels.last + '</div>';
+            help += '<div class="previous">' + labels.previous + '</div>';
+            help += '<div class="first">' + labels.first + '</div>';
             help += '</div>';
         }
         if ($("#slider").length > 0) {
@@ -221,7 +222,7 @@ FluidbookHelp.prototype = {
 
         setTimeout(function () {
             $this.resize();
-            $("body,#previous,#next").addClass('help');
+            $("body,#prev-arrows,#next-arrows").addClass('help');
             this.fluidbook.showAllButtons();
             $this.view.css('opacity', 1);
         }, 50);
@@ -239,7 +240,7 @@ FluidbookHelp.prototype = {
         if (this.isVisible()) {
             this.overlay.hide();
             this.view.hide();
-            $("body,#previous,#next").removeClass('help');
+            $("body,#prev-arrows,#next-arrows").removeClass('help');
             this.fluidbook.hideUnnecessaryButtons();
             if (this.fluidbook.support.isMobile) {
                 $("*").unbind('click', function () {
@@ -277,7 +278,7 @@ FluidbookHelp.prototype = {
         var firstTop;
 
         if (this.fluidbook.interface.arrowsEnabled()) {
-            var arrow = $('#interface #next').get(0).getBoundingClientRect(); // Used for calculating offsets for both #next & #previous
+            var arrow = $('#interface #next-arrows').get(0).getBoundingClientRect(); // Used for calculating offsets for both #next & #previous
             // The arrow element contains both arrows in a single image
             // so we calculate the top position of the labels by percentage
             nextTop = Math.round(arrow.top + arrow.height * 0.35);
diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js
index e07128aa..50cb13ef 100644
--- a/js/libs/fluidbook/fluidbook.interface.js
+++ b/js/libs/fluidbook/fluidbook.interface.js
@@ -12,22 +12,76 @@ function FluidbookInterface(fluidbook) {
 }
 
 FluidbookInterface.prototype = {
+
+
+
     init: function () {
         var $this = this;
 
         if (this.arrowsEnabled()) {
+            var labels=this.getLabels();
             var res = '';
             if ($('html').hasClass('ltr')) {
-                res += this.fluidbook.nav.getLink('interface-previous', '#', 'previous', '', '', '', true);
-                res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', '', '', true);
+                res += '<div id="next-arrows">';
+                res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', labels.next, 'arrow-top', true);
+                res += this.fluidbook.nav.getLink('interface-last', '#', 'last', '', labels.last, 'arrow-bottom', true);
+                res += '</div>';
+                res += '<div id="prev-arrows">';
+                res += this.fluidbook.nav.getLink('interface-prev', '#', 'previous', '', labels.previous, 'arrow-top', true);
+                res += this.fluidbook.nav.getLink('interface-first', '#', 'first', '', labels.first, 'arrow-bottom', true);
+                res += '</div>';
             } else {
-                res += this.fluidbook.nav.getLink('interface-previous', '#', 'next', '', '', '', true);
-                res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', '', '', true);
+                res += '<div id="next-arrows">';
+                res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', labels.previous, 'arrow-top', true);
+                res += this.fluidbook.nav.getLink('interface-last', '#', 'first', '', labels.first, 'arrow-bottom', true);
+                res += '</div>';
+                res += '<div id="prev-arrows">';
+                res += this.fluidbook.nav.getLink('interface-prev', '#', 'next', '', labels.next, 'arrow-top', true);
+                res += this.fluidbook.nav.getLink('interface-first', '#', 'last', '', labels.last, 'arrow-bottom', true);
+                res += '</div>';
             }
 
             $('#interface').append(res);
-            $(document).on('click', '#next', goNextPage);
-            $(document).on('click', '#previous', goPreviousPage);
+            $(document).on('click', '#next', function () {
+                if ($this.fluidbook.help.isVisible()) {
+                    return false;
+                }
+                $this.fluidbook.interface.resetTimeout();
+                if ($this.fluidbook.pad.enabled) {
+                    $this.fluidbook.goNextChapter();
+                } else {
+                    $this.fluidbook.goNextPage();
+                }
+                return false;
+            });
+            $(document).on('click', '#previous', function () {
+                if ($this.fluidbook.help.isVisible()) {
+                    return;
+                }
+                $this.fluidbook.interface.resetTimeout();
+                if ($this.fluidbook.pad.enabled) {
+                    $this.fluidbook.goPreviousChapter();
+                } else {
+                    $this.fluidbook.goPreviousPage();
+                }
+                return false;
+            });
+            $(document).on('click', '#first', function () {
+                if ($this.fluidbook.help.isVisible()) {
+                    return false;
+                }
+                $this.fluidbook.interface.resetTimeout();
+                $this.fluidbook.goFirstPage();
+                return false;
+            });
+            $(document).on('click', '#last', function () {
+                if ($this.fluidbook.help.isVisible()) {
+                    return false;
+                }
+                $this.fluidbook.interface.resetTimeout();
+                $this.fluidbook.goLastPage();
+                return false;
+            });
 
             this.initArrowsVisibilityManagement();
         }
@@ -37,6 +91,25 @@ FluidbookInterface.prototype = {
         });
     },
 
+    getLabels: function () {
+        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) {
+            next = this.fluidbook.l10n.__('next page');
+            previous = this.fluidbook.l10n.__('previous page');
+        }
+        return {
+            next: next,
+            previous: previous,
+            first: this.fluidbook.l10n.__('frontpage'),
+            last: this.fluidbook.l10n.__('last page')
+        }
+    },
+
     arrowsEnabled: function () {
         switch (this.fluidbook.settings.arrowsEnabled) {
             case '0':
@@ -156,7 +229,7 @@ FluidbookInterface.prototype = {
     getInterfaceSelector: function () {
         var selector = '';
         if (this.arrowsEnabled()) {
-            selector = '#next,#previous'
+            selector = '#next-arrows,#prev-arrows'
         }
         if (this.fluidbook.pad.enabled) {
             selector = 'header,#interface';
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index e83c2b30..50313f60 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -535,15 +535,15 @@ Fluidbook.prototype = {
         var visibility = this.getButtonsVisibility(page);
 
         if (visibility.next) {
-            $("#next").removeClass('hidden');
+            $("#next-arrows").removeClass('hidden');
         } else {
-            $("#next").addClass('hidden');
+            $("#next-arrows").addClass('hidden');
         }
 
         if (visibility.previous) {
-            $("#previous").removeClass('hidden');
+            $("#prev-arrows").removeClass('hidden');
         } else {
-            $("#previous").addClass('hidden');
+            $("#prev-arrows").addClass('hidden');
         }
     },
     updateShadows: function (page, animationDuration) {
@@ -595,7 +595,7 @@ Fluidbook.prototype = {
     }
     ,
     showAllButtons: function () {
-        $("#next,#previous").addClass('help').show();
+        $("#next-arrows,#prev-arrows").addClass('help').show();
     },
 
     setPageNumbers: function () {
diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index b2cdf4c2..e19c0c3e 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -180,13 +180,12 @@ FluidbookNav.prototype = {
         }
 
         // Only the horizontal icon menu should have the tooltips
-        if (navType === 'horizontalNav') {
-            if (help !== undefined && help !== '') {
+        if (help !== undefined && help !== '') {
+            if (navType === 'horizontalNav') {
                 res += ' data-tooltip="' + this.fluidbook.l10n.__(help) + '"';
-                res += ' aria-label="' + this.fluidbook.l10n.__(help) + '"';
             }
+            res += ' aria-label="' + this.fluidbook.l10n.__(help) + '"';
         }
-
         res += '>';
 
         if (showIcon) {
@@ -887,7 +886,7 @@ FluidbookNav.prototype = {
             loopIndex = 0,
             html = '<ul id="chapterList">';
 
-        var $this=this;
+        var $this = this;
 
         // Loop through all chapters and build new ULs based on level/depth
         chapters.forEach(function (chapter) {
diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index f942885c..373ae3b9 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -58,11 +58,11 @@ FluidbookResize.prototype = {
         });
 
         if (this.fluidbook.interface.arrowsEnabled()) {
-            $("#next").transform({
+            $("#next-arrows").transform({
                 origin: [right, '50%']
             });
 
-            $("#previous").transform({
+            $("#prev-arrows").transform({
                 origin: [left, '50%']
             });
         }
@@ -232,10 +232,10 @@ FluidbookResize.prototype = {
         }
 
         if (this.fluidbook.interface.arrowsEnabled()) {
-            $("#next").transform({
+            $("#next-arrows").transform({
                 scale: cssInterfaceScale,
             });
-            $("#previous").transform({
+            $("#prev-arrows").transform({
                 scale: cssInterfaceScale,
             });
         }
@@ -280,7 +280,6 @@ FluidbookResize.prototype = {
         }
 
         if (timeout > 0) {
-            //$("#next,#previous").hide();
             clearTimeout(this.navresizeTimeout);
             this.navresizeTimeout = setTimeout(function () {
                 $this.resizeNav(interfaceScale)
@@ -325,8 +324,8 @@ FluidbookResize.prototype = {
 
         if (this.fluidbook.interface.arrowsEnabled()) {
             try {
-                data.arrowLeftRect = $("#previous").get(0).getBoundingClientRect();
-                data.arrowRightRect = $("#next").get(0).getBoundingClientRect();
+                data.arrowLeftRect = $("#prev-arrows").get(0).getBoundingClientRect();
+                data.arrowRightRect = $("#next-arrows").get(0).getBoundingClientRect();
             } catch (e) {
 
             }
@@ -338,7 +337,7 @@ FluidbookResize.prototype = {
         var $this = this;
         if (this.fluidbook.interface.arrowsEnabled()) {
             var topNext = (this.hh - (100 * interfaceScale)) / 2;
-            $("#next,#previous").css({
+            $("#next-arrows,#prev-arrows").css({
                 top: topNext
             }).show();
         }
diff --git a/style/interface.less b/style/interface.less
index 127a739d..35f44250 100644
--- a/style/interface.less
+++ b/style/interface.less
@@ -5,7 +5,7 @@
   position: static;
 }
 
-#next, #previous {
+#next-arrows, #prev-arrows {
   width: 53px;
   height: 107px;
   background-size: 53px 107px;
@@ -16,9 +16,72 @@
   z-index: 21;
   color: @arrows-color;
   background-color: @arrows-background;
+
+  a {
+    position: absolute;
+    left: 0;
+    width: 100%;
+
+    &:hover {
+      svg {
+        transform: translateX(5px);
+      }
+    }
+
+    svg {
+      transition: transform 250ms;
+      position: absolute;
+    }
+
+    &.arrow-top {
+      top: 0;
+      height: 65px;
+
+      svg {
+        width: 20px;
+        height: 36.1px;
+        left: 18px;
+        top: 22px;
+      }
+    }
+
+    &.arrow-bottom {
+      top: 65px;
+      height: 42px;
+
+      svg {
+        width: 13.2px;
+        height: 15px;
+        left: 19px;
+        top: 7px;
+      }
+    }
+  }
+}
+
+#prev-arrows {
+  a {
+    &:hover {
+      svg {
+        transform: translateX(-5px);
+      }
+    }
+
+    &.arrow-top{
+      svg{
+        left: 17px;
+      }
+    }
+
+    &.arrow-bottom{
+      svg{
+        left:22px;
+      }
+    }
+  }
 }
 
-#next, #previous, #down, #splash {
+#next-arrows, #prev-arrows, #down, #splash {
   transition: opacity 400ms ease-in-out;
 
   .ios & {
@@ -26,25 +89,25 @@
   }
 }
 
-#next.hidden.help, #previous.hidden.help {
+#next-arrows.hidden.help, #prev-arrows.hidden.help {
   transition: none;
   opacity: 1;
 }
 
-#next.hidden, #previous.hidden {
+#next-arrows.hidden, #prev-arrows.hidden {
   opacity: 0;
   cursor: default;
   pointer-events: none;
 }
 
-.rtl #previous, .ltr #next {
+.rtl #prev-arrows, .ltr #next-arrows {
   border-top-left-radius: 1px;
   border-bottom-left-radius: 1px;
   right: 0px;
   transform-origin: 100% 0;
 }
 
-.rtl #next, .ltr #previous {
+.rtl #next-arrows, .ltr #prev-arrows {
   border-top-right-radius: 1px;
   border-bottom-right-radius: 1px;
   left: 0px;
-- 
2.39.5