From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 19 Jun 2017 13:34:52 +0000 (+0200)
Subject: wip #1445 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f67573bc0c009bf6f0045a97d5643e407819c491;p=fluidbook-html5.git

wip #1445 @1.5
---

diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js
index 64610104..042226c2 100644
--- a/js/libs/fluidbook/fluidbook.slider.js
+++ b/js/libs/fluidbook/fluidbook.slider.js
@@ -22,6 +22,10 @@ FluidbookSlider.prototype = {
             $this.updatePageByCursorPosition($this.pageToSlider(e.pageX), true, true);
         });
 
+        $("#slidercursor").on('mousedown', function (e) {
+            $this.dragCursor(e, false, false);
+        });
+
         interact(document.getElementById("slidercursor")).draggable({
             inertia: false,
             onstart: function (event) {
@@ -34,15 +38,37 @@ FluidbookSlider.prototype = {
                 return $this.dragCursor(event, true);
             }
         });
+
+
+        if (!Modernizr.ftouch) {
+            $("#slider").on('mouseenter mousemove', function (e) {
+                return $this.hover(e.pageX);
+            });
+
+            $("#slider").on('mouseleave', function () {
+                $("#slider").removeClass('hover');
+            });
+        }
+    },
+
+    hover: function (pageX) {
+        $("#slider").addClass('hover');
+        var page = this.getPageByX(this.pageToSlider(pageX));
+        this.updateThumb(page);
     },
 
-    dragCursor: function (e, end) {
+    dragCursor: function (e, end, move) {
+        if (move == undefined) {
+            move = true;
+        }
         if (!end) {
             $("#slider").addClass("drag");
         } else {
             $("#slider").removeClass("drag");
         }
-        this.updatePageByCursorPosition(this.pageToSlider(e.pageX), end, true);
+        if (move) {
+            this.updatePageByCursorPosition(this.pageToSlider(e.pageX), end, true);
+        }
     },
 
     pageToSlider: function (pageX) {
@@ -56,6 +82,18 @@ FluidbookSlider.prototype = {
         if (gotoPage == undefined) {
             gotoPage = true;
         }
+        var page = this.getPageByX(pos)
+
+        if (gotoPage) {
+            this.fluidbook.setCurrentPage(page);
+        }
+        if (updateCursor) {
+            this.updateCursorPosition(page);
+        }
+        return false;
+    },
+
+    getPageByX: function (pos) {
         var page;
         if (this.fluidbook.resize.orientation == 'portrait') {
             page = Math.floor(pos / (this.sliderWidth / this.snapsCount)) + 1;
@@ -65,15 +103,7 @@ FluidbookSlider.prototype = {
             pageMin = 0;
         }
 
-        page = Math.min(this.fluidbook.datas.pages, Math.max(pageMin, page));
-
-        if (gotoPage) {
-            this.fluidbook.setCurrentPage(page);
-        }
-        if (updateCursor) {
-            this.updateCursorPosition(page);
-        }
-        return false;
+        return Math.min(this.fluidbook.datas.pages, Math.max(pageMin, page));
     },
 
     resize: function (ww, hh, single) {
@@ -114,6 +144,15 @@ FluidbookSlider.prototype = {
         if (page == undefined) {
             page = this.fluidbook.currentPage;
         }
+
+        $("#slidercursor").css('left', this.getCursorXByPage(page));
+
+        if ($("#sliderthumb").is(':visible') && !$("#slider").hasClass('hover')) {
+            this.updateThumb(page);
+        }
+    },
+
+    getCursorXByPage: function (page) {
         var left;
         if (this.fluidbook.resize.orientation == 'portrait') {
             left = this.snapsWidth * (page - 1);
@@ -121,13 +160,7 @@ FluidbookSlider.prototype = {
             var current = Math.floor(page / 2);
             left = this.snapsWidth * current;
         }
-        var x = Math.max(0, Math.min(left, this.sliderWidth - this.cursorWidth));
-        $("#slidercursor").css('left', x);
-
-        if ($("#sliderthumb").is(':visible')) {
-            this.updateThumb(page);
-            $("#sliderthumb").css('left', x + (this.cursorWidth / 2) - ($("#sliderthumb").outerWidth() / 2));
-        }
+        return Math.max(0, Math.min(left, this.sliderWidth - this.cursorWidth));
     },
 
     updateThumb: function (page) {
@@ -173,6 +206,7 @@ FluidbookSlider.prototype = {
         this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.left'), left, !single);
         this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.right'), right, !single);
         this.fluidbook.bookmarks.updateBookmarks();
+        $("#sliderthumb").css('left', this.getCursorXByPage(page) + (this.cursorWidth / 2) - ($("#sliderthumb").outerWidth() / 2));
     },
 
     setThumb: function (thumb, page, shade) {
diff --git a/style/slider.less b/style/slider.less
index d4fd99f0..409cb8e2 100644
--- a/style/slider.less
+++ b/style/slider.less
@@ -22,7 +22,7 @@
 		}
 	}
 
-	&.drag {
+	&.drag, &.hover {
 		z-index: 12;
 	}
 
@@ -101,7 +101,7 @@
 
 		}
 	}
-	&.drag {
+	&.drag, &.hover {
 		#sliderthumb {
 			display: block;
 		}