]> _ Git - fluidbook-html5.git/commitdiff
wip #1445 @1.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 19 Jun 2017 13:34:52 +0000 (15:34 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 19 Jun 2017 13:34:52 +0000 (15:34 +0200)
js/libs/fluidbook/fluidbook.slider.js
style/slider.less

index 646101045cfc7aa9efb32517eb6e74185144b4c2..042226c26ce43e85789051466ac47ff6de059e1e 100644 (file)
@@ -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) {
index d4fd99f0fb7c593db6f04cdc86c701962a529322..409cb8e2a15ccaa06bf3bd314542cf912cf3c482 100644 (file)
@@ -22,7 +22,7 @@
                }
        }
 
-       &.drag {
+       &.drag, &.hover {
                z-index: 12;
        }
 
 
                }
        }
-       &.drag {
+       &.drag, &.hover {
                #sliderthumb {
                        display: block;
                }