From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 9 Jun 2017 14:35:52 +0000 (+0200)
Subject: wip #1445 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ea1fde5236e18d2f5a9a37e1faf1d44c764d95a3;p=fluidbook-html5.git

wip #1445 @1
---

diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js
index 67e61ff0..6f12fb25 100644
--- a/js/libs/fluidbook/fluidbook.slider.js
+++ b/js/libs/fluidbook/fluidbook.slider.js
@@ -9,7 +9,7 @@ function FluidbookSlider(fluidbook) {
 
 FluidbookSlider.prototype = {
     init: function () {
-        $("#interface").append('<div id="slider"><div id="sliderback"></div><div id="slidercursor"></div></div>');
+        $("#interface").append('<div id="slider"><div id="sliderback"><div class="visible"></div></div><div id="slidercursor"><div class="visible"></div></div></div>');
         var $this = this;
         $(this.fluidbook).on('fluidbook.page.change.end', function (e, page) {
             $this.updateCursorPosition();
@@ -19,21 +19,46 @@ FluidbookSlider.prototype = {
             if ($this.fluidbook.transitionning) {
                 return;
             }
-            var left = e.pageX - $(this).offset().left;
-            $this.updatePageByCursorPosition(left, true);
+            $this.updatePageByCursorPosition($this.pageToSlider(e.pageX), true, true);
         });
+
+        interact(document.getElementById("slidercursor")).draggable({
+            inertia: false,
+            onmove: function (event) {
+                return $this.dragCursor(event, false);
+            },
+            onend: function (event) {
+                return $this.dragCursor(event, true);
+            }
+        });
+    },
+
+    dragCursor: function (e, end) {
+        console.log(this.pageToSlider(e.pageX));
+        this.updatePageByCursorPosition(this.pageToSlider(e.pageX), end, true);
     },
 
-    updatePageByCursorPosition: function (pos, updateCursor) {
+    pageToSlider: function (pageX) {
+        return pageX - $("#slider").offset().left;
+    },
+
+    updatePageByCursorPosition: function (pos, gotoPage, updateCursor) {
         if (updateCursor == undefined) {
             updateCursor = false;
         }
+        if (gotoPage == undefined) {
+            gotoPage = true;
+        }
 
         var page = Math.floor(pos / this.snapsWidth);
-        if (this.fluidbook.orientation != 'portrait') {
+        if (this.fluidbook.resize.orientation != 'portrait') {
             page *= 2;
         }
-        this.fluidbook.setCurrentPage(page);
+        page = Math.min(this.fluidbook.datas.pages, Math.max(0, page));
+
+        if (gotoPage) {
+            this.fluidbook.setCurrentPage(page);
+        }
         if (updateCursor) {
             this.updateCursorPosition(page);
         }
diff --git a/style/slider.less b/style/slider.less
index e0b1dcde..58910d31 100644
--- a/style/slider.less
+++ b/style/slider.less
@@ -4,22 +4,36 @@
 	bottom: 20px;
 	cursor: pointer;
 
+	.visible {
+		height: 6px;
+		width: 100%;
+		position: relative;
+		top: 20px;
+	}
+
 	#sliderback {
 		position: absolute;
-		top: 0;
+		top: -20px;
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background-color: rgba(0, 0, 0, 0.1);
 		z-index: 0;
+		height: 46px;
+		.visible {
+			background-color: rgba(0, 0, 0, 0.1);
+		}
 	}
 
 	#slidercursor {
-		background-color: #fff;
-		height: 6px;
+
+		height: 46px;
 		position: absolute;
 		left: 0;
-		top: 0;
+		top: -20px;
 		z-index: 1;
+
+		.visible {
+			background-color: #fff;
+		}
 	}
 }
\ No newline at end of file