From: Vincent Vanwaelscappel Date: Fri, 9 Jun 2017 17:02:32 +0000 (+0200) Subject: wip #1445 @1 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7742a87d7b673202ec4b191e59312b41056e11a7;p=fluidbook-html5.git wip #1445 @1 --- diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js index 624fc61a..51cc21b1 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('
'); + $("#interface").append('
'); 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 8a523af4..32a1f36e 100644 --- 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 eb0d3cec..78d56c43 100644 --- 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