wip #1445 @0.75

diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js
index 90f0a58c2cfed54431416cec27686de2c0fd809c..458c99b4c8dd1331f8f1c12582fa1dc1bdb470cd 100644 (file)
--- 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 d0593074df613231a750c1cc67dcad6e0425a404..e0b1dcde3bb1ae28cb4104707fac49c0dbe909e5 100644 (file)
--- 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