]> _ Git - fluidbook-html5.git/commitdiff
wait #5162 @0.75
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 17 Mar 2022 09:52:24 +0000 (10:52 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 17 Mar 2022 09:52:24 +0000 (10:52 +0100)
js/libs/fluidbook/fluidbook.js
js/libs/fluidbook/fluidbook.links.js
js/libs/fluidbook/fluidbook.slider.js
js/libs/perfect-scrollbar/perfect-scrollbar.js
style/fluidbook.less
style/slider.less

index d63d7171f5760ee29d48f99c94819f21802c9d24..be34a2f80450735be3de58bfc6b0b10ac4732b79 100644 (file)
@@ -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);
index bb9ef634baccf750c886c0e43b761d99ca7af8f0..91f2a6f61fb462f139f3094174101cf556659725 100644 (file)
@@ -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);
index d88a2e980cf0d6fd62048ae845b367cac83263a6..31b68143347a80376bbd5f3c0f825a841d2e1f07 100644 (file)
@@ -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 {
index 7921c6b8198b0f0ccd93da524c675de7bdaf6c4b..194202af130d5a5a26830e8bf0ab2c06e0bc7388 100644 (file)
         }
 
         function mousewheelHandler(e) {
-            console.log(e);
             var ref = getDeltaFromEvent(e);
             var deltaX = ref[0];
             var deltaY = ref[1];
index 12633c402c79a11fd19bf49186efd4df973f7467..4474036c3ad56c7060aa180553a8e22566903f1e 100644 (file)
@@ -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 */
index ed9b87325a556e66cb417a0f2162c49537a6f0d0..ffb2bc6683b738e97d99c4803efb3f8bc14272db 100644 (file)
@@ -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;