From 8ff9fc39a07c36f8e59a46174d9522b9da7e0a16 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 17 Mar 2022 10:52:24 +0100
Subject: [PATCH] wait #5162 @0.75

---
 js/libs/fluidbook/fluidbook.js                |  7 ++--
 js/libs/fluidbook/fluidbook.links.js          |  1 -
 js/libs/fluidbook/fluidbook.slider.js         | 42 ++++++++++++++++++-
 .../perfect-scrollbar/perfect-scrollbar.js    |  1 -
 style/fluidbook.less                          | 16 +++----
 style/slider.less                             | 23 ++++++++++
 6 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index d63d7171..be34a2f8 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -68,15 +68,16 @@ Fluidbook.prototype = {
         this.support = new FluidbookSupport(this);
         this.search = new FluidbookSearch(this);
         this.mobilefirst = new FluidbookMobileFirst(this);
-        if (!this.mobilefirst.enabled) {
-            this.slider = new FluidbookSlider(this);
-        }
+
         this.displayOnePage = this.alwaysDisplayOnePage = this.settings.mobileNavigationType === 'portrait' || (this.pad && this.pad.enabled) || this.mobilefirst.enabled;
         this.zoom = new FluidbookZoom(this);
         this.zoom.resetZoom();
         this.cache = new FluidbookCache(this.settings);
         this.service = new FluidbookService(this, this.settings.id);
         this.loader = new FluidbookLoader(this);
+        if (!this.mobilefirst.enabled) {
+            this.slider = new FluidbookSlider(this);
+        }
         this.pad = new FluidbookPad(this);
         this.scorm = new FluidbookScorm(this);
         this.links = new FluidbookLinks(this);
diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index bb9ef634..91f2a6f6 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -828,7 +828,6 @@ FluidbookLinks.prototype = {
         }
         if (usegsap) {
             to.duration = duration;
-            console.log(to);
             gsap.fromTo(linkElement, from, to);
         }
         this.fluidbook.networkControl.pause((to.delay + duration + 0.5) * 1000);
diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js
index d88a2e98..31b68143 100644
--- a/js/libs/fluidbook/fluidbook.slider.js
+++ b/js/libs/fluidbook/fluidbook.slider.js
@@ -1,14 +1,33 @@
 function FluidbookSlider(fluidbook) {
+    var $this = this;
     this.fluidbook = fluidbook;
     this.sliderWidth = 0;
     this.cursorWidth = 0;
     this.snapsWidth = 0;
     this.snapsCount = 0;
-    this.init();
+    this.hasSliderLink = false;
+    this.hasSlider = false;
+    if (this.fluidbook.settings.pagesBar) {
+        this.init();
+    }
+    $this.initSliderLink();
 }
 
 FluidbookSlider.prototype = {
+
+    initSliderLink: function () {
+        if (this.hasSliderLink) {
+            return;
+        }
+        if (this.fluidbook.settings.links.slider.length === 0) {
+            return;
+        }
+        this.hasSliderLink = true;
+        $("#interface").append('<div id="sliderlinks" style="width:' + this.fluidbook.settings.sliderImageDimensions[0] + 'px;height:' + this.fluidbook.settings.sliderImageDimensions[1] + 'px;" aria-hidden="true"><img src="data/interface/' + this.fluidbook.settings.sliderImage + '" class="back"><div class="links">' + this.fluidbook.loader.handleExtension(this.fluidbook.settings.links.slider) + '</div></div>');
+    },
+
     init: function () {
+        this.hasSlider = true;
         var $this = this;
         $(document).on(this.fluidbook.input.clickEvent, function () {
             $("#slider").removeClass('drag');
@@ -128,6 +147,27 @@ FluidbookSlider.prototype = {
     },
 
     resize: function (ww, hh, single) {
+        if (this.hasSlider) {
+            this.resizeSlider(ww, hh, single);
+        }
+        if (this.hasSliderLink) {
+            this.resizeSliderLink(ww, hh, single);
+        }
+    },
+
+    resizeSliderLink: function (ww, hh, single) {
+        var r = document.getElementById("fluidbook").getBoundingClientRect();
+        var scale = r.width / this.fluidbook.settings.sliderImageDimensions[0];
+        var h = this.fluidbook.settings.sliderImageDimensions[1] * scale;
+        css = {
+            left: r.left,
+            top: (r.top + r.height) + ((hh - r.top - r.height - h) / 2),
+            transform: "scale(" + scale + ")"
+        };
+        $("#sliderlinks").css(css);
+    },
+
+    resizeSlider: function (ww, hh, singler) {
         if (single) {
             this.sliderWidth = ww / 2;
         } else {
diff --git a/js/libs/perfect-scrollbar/perfect-scrollbar.js b/js/libs/perfect-scrollbar/perfect-scrollbar.js
index 7921c6b8..194202af 100644
--- a/js/libs/perfect-scrollbar/perfect-scrollbar.js
+++ b/js/libs/perfect-scrollbar/perfect-scrollbar.js
@@ -2201,7 +2201,6 @@
         }
 
         function mousewheelHandler(e) {
-            console.log(e);
             var ref = getDeltaFromEvent(e);
             var deltaX = ref[0];
             var deltaY = ref[1];
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 12633c40..4474036c 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -208,14 +208,16 @@ body, html {
   }
 }
 
-#background .links {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
+#background, #sliderlinks {
+  .links {
+    position: absolute;
+    width: 100%;
+    height: 100%;
 
-#background .links .link {
-  position: absolute;
+    .link {
+      position: absolute;
+    }
+  }
 }
 
 /* Orientation */
diff --git a/style/slider.less b/style/slider.less
index ed9b8732..ffb2bc66 100644
--- a/style/slider.less
+++ b/style/slider.less
@@ -1,6 +1,29 @@
 //@slider-background: rgba(0, 0, 0, 0.1);
 //@slider-handle:#fff;
 
+#sliderlinks {
+  position: absolute;
+  transform-origin: 0 0 0;
+
+  img.back {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+  }
+
+  .links {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    z-index: 1;
+  }
+}
+
 #slider {
   position: absolute;
   height: 6px;
-- 
2.39.5