wip #1445 @1

diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js
index 67e61ff0db7d539090a6c8a3b9eee090a1a5537f..6f12fb25b6fcd2eb6f42df4e269466b033b46978 100644 (file)
--- 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 e0b1dcde3bb1ae28cb4104707fac49c0dbe909e5..58910d31287552b033d8118424d6801f6e0ae784 100644 (file)
--- 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