From: Vincent Vanwaelscappel Date: Mon, 12 Jun 2017 16:57:13 +0000 (+0200) Subject: wip #1445 @1 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=3bbe9f27df960d2711b0490460555ee37a739616;p=fluidbook-html5.git wip #1445 @1 --- diff --git a/images/shade-thumb-left.png b/images/shade-thumb-left.png new file mode 100644 index 00000000..c9be4930 Binary files /dev/null and b/images/shade-thumb-left.png differ diff --git a/images/shade-thumb-right.png b/images/shade-thumb-right.png new file mode 100644 index 00000000..c66414f6 Binary files /dev/null and b/images/shade-thumb-right.png differ diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 69751d33..1b68da6f 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -256,11 +256,14 @@ FluidbookLoader.prototype = { var img = this.loadImage(src, width, height, type, callback); return $(img).get(0).outerHTML; }, - getThumbImage: function (page, div) { + getThumbImage: function (page, div, shade) { var returnHTML = false; - if (div == undefined) { + if (div === null || div == undefined) { div = $('
'); } + + left = (page % 2 == 0); + var h = this.fluidbook.datas.thumbHeight; var s = Math.floor(page / 100); var row = Math.floor((page - 1) / 10); @@ -268,12 +271,30 @@ FluidbookLoader.prototype = { if (col < 0) { col += 10; } - var left = col * 100; - var top = row * h; + var spriteleft = col * 100; + var spritetop = row * h; + + var shadeImage = ''; + var shadePosition = ''; + var shadeSize = ''; + + if (shade) { + var p = '0%'; + var i = 'right'; + if (left) { + p = '100%'; + i = 'left'; + } + shadeImage = 'url("images/shade-thumb-' + i + '.png"),'; + + shadePosition = p + " 0%,"; + shadeSize = '20px ' + h + 'px,'; + } + $(div).css({ - backgroundImage: 'url("data/thumbnails/s' + s + '.jpg")', - backgroundPositionX: -left, - backgroundPositionY: -top + backgroundImage: shadeImage + 'url("data/thumbnails/s' + s + '.jpg")', + backgroundPosition: shadePosition + '' + (-spriteleft) + 'px ' + (-spritetop) + 'px', + backgroundSize: shadeSize + 'auto auto' }).addClass('img'); return $(div).get(0).outerHTML; }, diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js index 8bf2d050..64610104 100644 --- a/js/libs/fluidbook/fluidbook.slider.js +++ b/js/libs/fluidbook/fluidbook.slider.js @@ -170,16 +170,16 @@ FluidbookSlider.prototype = { } - this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.left'), left); - this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.right'), right); + this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.left'), left, !single); + this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.right'), right, !single); this.fluidbook.bookmarks.updateBookmarks(); }, - setThumb: function (thumb, page) { + setThumb: function (thumb, page, shade) { thumb.find('.bookmark').attr('data-page', page); if (page > 0 && page <= this.fluidbook.datas.pages) { thumb.css('visibility', 'visible'); - this.fluidbook.loader.getThumbImage(page, thumb.find('.img')); + this.fluidbook.loader.getThumbImage(page, thumb.find('.img'), shade); thumb.find('.number').text(this.fluidbook.physicalToVirtual(page)); } else { thumb.css('visibility', 'hidden'); diff --git a/js/libs/fluidbook/menu/fluidbook.index.js b/js/libs/fluidbook/menu/fluidbook.index.js index 88d20423..70ba03a6 100644 --- a/js/libs/fluidbook/menu/fluidbook.index.js +++ b/js/libs/fluidbook/menu/fluidbook.index.js @@ -43,7 +43,7 @@ FluidbookIndex.prototype = { } if (i > 0) { - ix1 += '
' + this.fluidbook.loader.getThumbImage(i) + '' + this.fluidbook.physicalToVirtual(i) + ''; + ix1 += '
' + this.fluidbook.loader.getThumbImage(i, null, true) + '' + this.fluidbook.physicalToVirtual(i) + ''; if (this.fluidbook.bookmarks.enabled) { ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true); } @@ -63,7 +63,7 @@ FluidbookIndex.prototype = { } if (j < this.fluidbook.datas.pages) { - ix2 += '
' + this.fluidbook.loader.getThumbImage(j) + '' + this.fluidbook.physicalToVirtual(j) + ''; + ix2 += '
' + this.fluidbook.loader.getThumbImage(j, null, true) + '' + this.fluidbook.physicalToVirtual(j) + ''; if (this.fluidbook.bookmarks.enabled) { ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true); } diff --git a/style/fluidbook.less b/style/fluidbook.less index 43bd2092..e9d5fb29 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -1063,12 +1063,14 @@ form input[type="text"], form input[type="email"] { background: #fff; position: relative; z-index: 1; + background-blend-mode: multiply; + background-repeat: no-repeat; } .number { text-align: center; display: block; font-family: Arial, Helvetica, sans-serif; - margin: 1px 0 0 0; + margin: 5px 0 0 0; max-width: 100px; position: relative; z-index: 1; diff --git a/style/slider.less b/style/slider.less index 720621be..f053b445 100644 --- a/style/slider.less +++ b/style/slider.less @@ -1,5 +1,5 @@ @slider-background: rgba(0, 0, 0, 0.1); -@slider-thumb-background: rgba(0, 0, 0, 0.2); +@slider-thumb-background: @menu-background; #slider { position: absolute; @@ -23,9 +23,8 @@ } &.drag { - + z-index: 12; } - z-index: 12; #sliderback { position: absolute; @@ -60,7 +59,7 @@ } } - @sliderthumb-height: unit(@thumb-height+40, px); + @sliderthumb-height: unit(@thumb-height+60, px); @sliderthumb-top: unit(-1*(@sliderthumb-height+24), px); #sliderthumb { @@ -68,15 +67,15 @@ top: @sliderthumb-top; left: 0; background-color: @slider-thumb-background; - padding: 15px; - //display: none; - width: 230px; + padding: 25px; + display: none; + width: 250px; height: @sliderthumb-height; &.single { - width: 130px; + width: 150px; &:after { - left: 53px; + left: 59px; } } @@ -84,11 +83,11 @@ content: ""; position: absolute; bottom: -16px; - left: 103px; + left: 109px; width: 0; height: 0; - border-left: 12px solid transparent; - border-right: 12px solid transparent; + border-left: 16px solid transparent; + border-right: 16px solid transparent; border-top: 16px solid @slider-thumb-background; display: block; } @@ -98,7 +97,8 @@ } .number { - color: #fff; + color: @menu-text; + } } &.drag {