wip #1445 @1

diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js
index 624fc61ae221861f5a14f43e18c03d013bc6d9eb..51cc21b1105b187874f1f6138ed527e4d57d45e0 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 class="visible"></div></div><div id="slidercursor"><div class="visible"></div></div></div>');
+        $("#interface").append('<div id="slider"><div id="sliderthumb"><div class="doubleThumb"><div class="thumb left"><a href="#"><img src=""></a><span class="number"></span><a href="#" class="bookmark left"></a></div><div class="thumb right"><a href="#"><img src="data/thumbnails/p3.jpg"></a><span class="number"></span><a href="#" class="bookmark right"></a></div></div></div><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();
@@ -24,6 +24,9 @@ FluidbookSlider.prototype = {
 
         interact(document.getElementById("slidercursor")).draggable({
             inertia: false,
+            onstart: function (event) {
+                return $this.dragCursor(event, false);
+            },
             onmove: function (event) {
                 return $this.dragCursor(event, false);
             },
@@ -34,10 +37,10 @@ FluidbookSlider.prototype = {
     },
 
     dragCursor: function (e, end) {
-        if(!end) {
-            $("#slider").addClass(".drag");
-        }else{
-            $("#slider").removeClass(".drag");
+        if (!end) {
+            $("#slider").addClass("drag");
+        } else {
+            $("#slider").removeClass("drag");
         }
         this.updatePageByCursorPosition(this.pageToSlider(e.pageX), end, true);
     },
@@ -122,5 +125,61 @@ FluidbookSlider.prototype = {
             left = this.snapsWidth * (current / 2);
         }
         $("#slidercursor").css('left', left);
-    }
+
+        if ($("#sliderthumb").is(':visible')) {
+            this.updateThumb(page);
+            $("#sliderthumb").css('left', left + (this.cursorWidth / 2) - (230 / 2));
+        }
+    },
+
+    updateThumb: function (page) {
+        var left = 0;
+        var right = 0;
+        var single = false;
+        if (this.fluidbook.resize.orientation == 'portrait') {
+            single = true;
+            left = page;
+        } else {
+            if (page % 2 == 1) {
+                page--;
+            }
+            if (page > 0) {
+                left = page;
+            }
+            if (page <= this.fluidbook.datas.pages) {
+                right = page + 1;
+            }
+        }
+
+        if (single) {
+            $("#sliderthumb .doubleThumb").addClass('single');
+        } else {
+            $("#sliderthumb .doubleThumb").removeClass('single');
+            if (left == 0 || right == 0) {
+                $("#sliderthumb .doubleThumb").addClass('simple');
+                if (left == 0) {
+                    $("#sliderthumb .doubleThumb").addClass('right');
+                } else {
+                    $("#sliderthumb .doubleThumb").removeClass('right');
+                }
+
+                if (right == 0) {
+                    $("#sliderthumb .doubleThumb").addClass('left');
+                } else {
+                    $("#sliderthumb .doubleThumb").removeClass('left');
+                }
+            }
+        }
+
+
+        if (left != 0) {
+            var t=$("#sliderthumb .doubleThumb").find('.thumb.left');
+        }
+
+        if (right == 0) {
+
+        } else {
+
+        }
+    },
 };
\ No newline at end of file

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 8a523af49578920ee3a2db06b167d6a7dcc09a79..32a1f36e79622c9403e1da48bc2debdc987a08a2 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -998,110 +998,111 @@ form input[type="text"], form input[type="email"] {
                }
        }
 
-       .doubleThumb {
-               height: @thumb-height;
-               &.left {
-                       margin-right: 10px;
-               }
-               &.simple {
-                       .overlay {
-                               width: 100px;
-                       }
-                       &.left {
-                               .hits {
-                                       left: -50px;
-                               }
-                       }
-                       &.right {
-                               .hits {
-                                       left: 50px;
-                               }
-                       }
+}
 
-               }
+.doubleThumb {
+       height: @thumb-height;
+       &.left {
+               margin-right: 10px;
+       }
+       &.simple {
                .overlay {
-                       background-color: rgba(0, 0, 0, 0.5);
-                       position: absolute;
-                       top: 0px;
-                       left: 0px;
-                       width: 200px;
-                       z-index: 4;
+                       width: 100px;
                }
-
-               @hits-top: (@thumb-height - 26) / 2;
-
-               .hits {
-                       position: relative;
-                       display: inline;
-
-                       z-index: 5;
-                       font-size: 12px;
-                       height: 26px;
-                       top: @hits-top;
-                       &.yes {
-                               padding: 5px;
-                               border-radius: 1px;
-                               color: @menu-text;
-                               background-color: @menu-background;
+               &.left {
+                       .hits {
+                               left: -50px;
+                       }
+               }
+               &.right {
+                       .hits {
+                               left: 50px;
                        }
                }
-       }
 
-       .padding {
-               height: 1px;
        }
-
-       .thumb {
+       .overlay {
+               background-color: rgba(0, 0, 0, 0.5);
                position: absolute;
                top: 0px;
                left: 0px;
-               font-size: 12px;
+               width: 200px;
+               z-index: 4;
+       }
 
-               img {
-                       width: 100px;
-                       height: @thumb-height;
-                       background: #fff;
-                       position: relative;
-                       z-index: 1;
-               }
-               .number {
-                       text-align: center;
-                       display: block;
-                       font-family: Arial, Helvetica, sans-serif;
-                       margin: 1px 0 0 0;
-                       max-width: 100px;
-                       position: relative;
-                       z-index: 1;
-               }
-               &.right {
-                       left: 100px;
-               }
-               &.simple {
-                       width: 100px;
-                       &.right {
-                               margin-left: 110px;
-                       }
-               }
-               &.left {
-                       margin-right: 110px;
+       @hits-top: (@thumb-height - 26) / 2;
+
+       .hits {
+               position: relative;
+               display: inline;
+
+               z-index: 5;
+               font-size: 12px;
+               height: 26px;
+               top: @hits-top;
+               &.yes {
+                       padding: 5px;
+                       border-radius: 1px;
+                       color: @menu-text;
+                       background-color: @menu-background;
                }
+       }
+}
 
-               @shade-height: unit(@thumb-height+22, px);
-               &:before {
-                       position: absolute;
-                       content: "";
-                       background-image: url("../images/icon-shad.png");
-                       background-size: 100% 100%;
-                       background-repeat: no-repeat;
-                       opacity: 0.65;
-                       top: -5px;
-                       left: -5px;
-                       width: 111px;
-                       height: @shade-height;
-                       z-index: 0;
+.padding {
+       height: 1px;
+}
+
+.thumb {
+       position: absolute;
+       top: 0px;
+       left: 0px;
+       font-size: 12px;
+
+       img {
+               width: 100px;
+               height: @thumb-height;
+               background: #fff;
+               position: relative;
+               z-index: 1;
+       }
+       .number {
+               text-align: center;
+               display: block;
+               font-family: Arial, Helvetica, sans-serif;
+               margin: 1px 0 0 0;
+               max-width: 100px;
+               position: relative;
+               z-index: 1;
+       }
+       &.right {
+               left: 100px;
+       }
+       &.simple {
+               width: 100px;
+               &.right {
+                       margin-left: 110px;
                }
+       }
+       &.left {
+               margin-right: 110px;
+       }
 
+       @shade-height: unit(@thumb-height+22, px);
+       &:before {
+               position: absolute;
+               content: "";
+               background-image: url("../images/icon-shad.png");
+               background-size: 100% 100%;
+               background-repeat: no-repeat;
+               opacity: 0.65;
+               top: -5px;
+               left: -5px;
+               width: 111px;
+               height: @shade-height;
+               z-index: 0;
        }
+
 }
 
 /* Search */

diff --git a/style/slider.less b/style/slider.less
index eb0d3cec71f04c12c8e49c2d2f767b81fb01c7c5..78d56c43594d93786ca794116a9bb3c1219d2b27 100644 (file)
--- a/style/slider.less
+++ b/style/slider.less
@@ -19,12 +19,15 @@
                }
        }
 
+       &.drag {
+               z-index: 12;
+       }
+
        #sliderback {
                position: absolute;
                top: -20px;
                left: 0;
                width: 100%;
-               height: 100%;
                z-index: 0;
                height: 46px;
                .visible {
@@ -52,4 +55,23 @@
                        }
                }
        }
+
+       @sliderthumb-height: unit(@thumb-height+40, px);
+       @sliderthumb-top: unit(-1*(@sliderthumb-height+30), px);
+
+       #sliderthumb {
+               position: absolute;
+               top: @sliderthumb-top;
+               left: 0;
+               background-color: @menu-background;
+               padding: 10px;
+               //display: none;
+               width: 230px;
+               height: @sliderthumb-height;
+       }
+       &.drag {
+               #sliderthumb {
+                       display: block;
+               }
+       }
 }
\ No newline at end of file