From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 8 Jun 2017 17:10:48 +0000 (+0200)
Subject: wip #1445 @0.75
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ad5a694da22f9258c8e29c42d5951d2f925945fe;p=fluidbook-html5.git

wip #1445 @0.75
---

diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js
index 90f0a58c..458c99b4 100644
--- a/js/libs/fluidbook/fluidbook.slider.js
+++ b/js/libs/fluidbook/fluidbook.slider.js
@@ -2,17 +2,35 @@ function FluidbookSlider(fluidbook) {
     this.fluidbook = fluidbook;
     this.sliderWidth = 0;
     this.cursorWidth = 0;
+    this.snapsWidth = 0;
+    this.snapsCount = 0;
     this.init();
 }
 
 FluidbookSlider.prototype = {
     init: function () {
-        $("#interface").append('<div id="slider"><div id="slidercursor"></div></div>');
+        $("#interface").append('<div id="slider"><div id="sliderback"></div><div id="slidercursor"></div></div>');
         var $this = this;
         $(this.fluidbook).on('fluidbook.page.change.end', function (e, page) {
             $this.updateCursorPosition();
         });
+
+        $("#sliderback").on('click', function (e) {
+            var left = e.pageX - $(this).offset().left;
+            $this.updatePageByCursorPosition(left);
+        });
+    },
+
+    updatePageByCursorPosition: function (pos) {
+        var snap = Math.floor(pos / this.snapsWidth);
+        if (this.fluidbook.orientation == 'portrait') {
+            this.fluidbook.setCurrentPage(snap);
+        } else {
+            this.fluidbook.setCurrentPage(snap * 2);
+        }
+        return false;
     },
+
     resize: function (ww, hh, single) {
 
         if (single) {
@@ -22,34 +40,38 @@ FluidbookSlider.prototype = {
         }
         this.sliderWidth = Math.round(this.sliderWidth);
         $("#slider").css({width: this.sliderWidth, left: (ww - this.sliderWidth) / 2, top: hh - 32});
-
-        var nb = this.fluidbook.datas.pages;
-        if (!single) {
-            nb /= 2;
-        }
-        this.cursorWidth = Math.max(30, this.sliderWidth / (nb - 1));
+        this.updateSnaps(single);
+        this.cursorWidth = Math.max(30, this.snapsWidth);
         $("#slidercursor").css('width', this.cursorWidth);
         this.updateCursorPosition();
     },
 
+    updateSnaps: function (single) {
+
+        if (single) {
+            this.snapsCount = this.fluidbook.datas.pages;
+        } else {
+            var total = this.fluidbook.datas.pages;
+            if (total % 2 == 0) {
+                this.snapsCount = this.fluidbook.datas.pages / 2 + 1;
+            } else {
+                this.snapsCount = Math.ceil(this.fluidbook.datas.pages / 2);
+            }
+        }
+        this.snapsWidth = this.sliderWidth / this.snapsCount;
+    },
+
     updateCursorPosition: function () {
-        var diff = this.sliderWidth - this.cursorWidth;
+
         var left;
         if (this.fluidbook.resize.orientation == 'portrait') {
-            left = diff * ((this.fluidbook.currentPage - 1) / (this.fluidbook.datas.pages - 1));
+            left = this.snapsWidth * (Math.max(1, this.fluidbook.currentPage) - 1);
         } else {
-            var total = this.fluidbook.datas.pages;
             var current = this.fluidbook.currentPage;
-            if (total % 2 == 1) {
-                total++;
-            }
             if (current % 2 == 1 && this.fluidbook.currentPage != this.fluidbook.datas.pages) {
                 current--;
             }
-
-            console.log(current + '::' + total);
-
-            left = diff * (current / total);
+            left = this.snapsWidth * (current / 2);
         }
 
         $("#slidercursor").css('left', left);
diff --git a/style/slider.less b/style/slider.less
index d0593074..e0b1dcde 100644
--- a/style/slider.less
+++ b/style/slider.less
@@ -2,14 +2,24 @@
 	position: absolute;
 	height: 6px;
 	bottom: 20px;
-	background-color: rgba(0, 0, 0, 0.1);
 	cursor: pointer;
 
+	#sliderback {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.1);
+		z-index: 0;
+	}
+
 	#slidercursor {
 		background-color: #fff;
 		height: 6px;
 		position: absolute;
 		left: 0;
 		top: 0;
+		z-index: 1;
 	}
 }
\ No newline at end of file