From: Vincent Vanwaelscappel Date: Mon, 12 Jun 2017 15:16:09 +0000 (+0200) Subject: wip #1445 @5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=62e5be489946444f25c14bc5a508f79d3a011391;p=fluidbook-html5.git wip #1445 @5 --- diff --git a/images/cur-zoom-in.cur b/images/cur-zoom-in.cur new file mode 100644 index 00000000..a8359dcb Binary files /dev/null and b/images/cur-zoom-in.cur differ diff --git a/images/cur-zoom-out.cur b/images/cur-zoom-out.cur new file mode 100644 index 00000000..a3cf1f8b Binary files /dev/null and b/images/cur-zoom-out.cur differ diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index a0f9c081..1c9847c4 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -311,7 +311,6 @@ Fluidbook.prototype = { } this.menu.closeView(function () { if (page != $this.currentPage) { - console.log() $this.pageTransition(page); $this.stats.track(0, page); } diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index db986a51..33f6cea7 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -86,7 +86,6 @@ FluidbookLinks.prototype = { // If the interface is zoomed in, we must zoom out first if (this.fluidbook.zoom.zoom > 1) { - console.log('zooming out before opening zoom box'); //currentScale = this.fluidbook.desktop.desktopScale; // Get current scale so the size of the popup can be calculated correctly // Wait for clickZoom out to finish before trying again to open zoom link diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 8162f435..69751d33 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -257,8 +257,9 @@ FluidbookLoader.prototype = { return $(img).get(0).outerHTML; }, getThumbImage: function (page, div) { + var returnHTML = false; if (div == undefined) { - var div = $('
'); + div = $('
'); } var h = this.fluidbook.datas.thumbHeight; var s = Math.floor(page / 100); @@ -273,8 +274,8 @@ FluidbookLoader.prototype = { backgroundImage: 'url("data/thumbnails/s' + s + '.jpg")', backgroundPositionX: -left, backgroundPositionY: -top - }); - return div; + }).addClass('img'); + return $(div).get(0).outerHTML; }, loadImage: function (src, width, height, type, callback) { var img = new Image(); diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index 88f1134f..f9ba875c 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -524,7 +524,6 @@ FluidbookMenu.prototype = { } var s = Math.min(w / nw, h / nh); - console.log('scale : ' + s); if (iframe.is('img')) { s = Math.min(1, s); } diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js index 51cc21b1..861b78a3 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(); @@ -56,12 +56,16 @@ FluidbookSlider.prototype = { if (gotoPage == undefined) { gotoPage = true; } - - var page = Math.floor(pos / this.snapsWidth); - if (this.fluidbook.resize.orientation != 'portrait') { - page *= 2; + var page; + if (this.fluidbook.resize.orientation == 'portrait') { + page = Math.floor(pos / (this.sliderWidth / this.snapsCount)) + 1; + pageMin = 1; + } else { + page = Math.floor(pos / (this.sliderWidth / this.snapsCount)) * 2; + pageMin = 0; } - page = Math.min(this.fluidbook.datas.pages, Math.max(0, page)); + + page = Math.min(this.fluidbook.datas.pages, Math.max(pageMin, page)); if (gotoPage) { this.fluidbook.setCurrentPage(page); @@ -89,25 +93,21 @@ FluidbookSlider.prototype = { $("#slider") .css({width: this.sliderWidth, left: (ww - this.sliderWidth) / 2, top: hh - bottom}) .transform({scaleY: this.fluidbook.resize.interfaceScale}); + $("#sliderthumb").transform({scaleX: this.fluidbook.resize.interfaceScale}); 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.snapsCount = Math.floor(this.fluidbook.datas.pages / 2) + 1; } - this.snapsWidth = this.sliderWidth / this.snapsCount; + this.cursorWidth = Math.max(30, this.sliderWidth / this.snapsCount); + this.snapsWidth = (this.sliderWidth - this.cursorWidth) / (this.snapsCount - 1); }, updateCursorPosition: function (page) { @@ -116,19 +116,17 @@ FluidbookSlider.prototype = { } var left; if (this.fluidbook.resize.orientation == 'portrait') { - left = this.snapsWidth * (Math.max(1, page) - 1); + left = this.snapsWidth * (page - 1); } else { - var current = page; - if (current % 2 == 1 && page != this.fluidbook.datas.pages) { - current--; - } - left = this.snapsWidth * (current / 2); + var current = Math.floor(page / 2); + left = this.snapsWidth * current; } - $("#slidercursor").css('left', left); + var x = Math.max(0, Math.min(left, this.sliderWidth - this.cursorWidth)); + $("#slidercursor").css('left', x); if ($("#sliderthumb").is(':visible')) { this.updateThumb(page); - $("#sliderthumb").css('left', left + (this.cursorWidth / 2) - (230 / 2)); + $("#sliderthumb").css('left', x + (this.cursorWidth / 2) - ($("#sliderthumb").outerWidth() / 2)); } }, @@ -152,9 +150,9 @@ FluidbookSlider.prototype = { } if (single) { - $("#sliderthumb .doubleThumb").addClass('single'); + $("#sliderthumb").addClass('single'); } else { - $("#sliderthumb .doubleThumb").removeClass('single'); + $("#sliderthumb").removeClass('single'); if (left == 0 || right == 0) { $("#sliderthumb .doubleThumb").addClass('simple'); if (left == 0) { @@ -172,14 +170,17 @@ FluidbookSlider.prototype = { } - if (left != 0) { - var t=$("#sliderthumb .doubleThumb").find('.thumb.left'); - } - - if (right == 0) { + this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.left'), left); + this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.right'), right); + }, + setThumb: function (thumb, page) { + if (page > 0 && page <= this.fluidbook.datas.pages) { + thumb.css('visibility', 'visible'); + this.fluidbook.loader.getThumbImage(page, thumb.find('.img')); + thumb.find('.number').text(this.fluidbook.physicalToVirtual(page)); } else { - + thumb.css('visibility', 'hidden'); } - }, -}; \ No newline at end of file + } +}; diff --git a/js/libs/fluidbook/menu/fluidbook.index.js b/js/libs/fluidbook/menu/fluidbook.index.js index d66c02bd..88d20423 100644 --- a/js/libs/fluidbook/menu/fluidbook.index.js +++ b/js/libs/fluidbook/menu/fluidbook.index.js @@ -1,87 +1,87 @@ function FluidbookIndex(fluidbook) { - this.fluidbook = fluidbook; - this.init(); + this.fluidbook = fluidbook; + this.init(); } FluidbookIndex.prototype = { - init: function() { - this.normalHTML = ''; - this.padHTML = ''; - }, - getView: function(group) { - if (this.fluidbook.pad.enabled) { - return this.getPadView(group); - } else { - return this.getNormalView(); - } - }, - getPadView: function(group) { - return this.fluidbook.bookmarks.getIndex(true, group); - }, - getNormalView: function() { + init: function () { + this.normalHTML = ''; + this.padHTML = ''; + }, + getView: function (group) { + if (this.fluidbook.pad.enabled) { + return this.getPadView(group); + } else { + return this.getNormalView(); + } + }, + getPadView: function (group) { + return this.fluidbook.bookmarks.getIndex(true, group); + }, + getNormalView: function () { - if (this.normalHTML == '') { - this.normalHTML += '
'; - var j = 0; - var ix1 = '', ix2 = '', ix = ''; - var c = ''; - var s1, s2; + if (this.normalHTML == '') { + this.normalHTML += '
'; + var j = 0; + var ix1 = '', ix2 = '', ix = ''; + var c = ''; + var s1, s2; - for (var i = 0; i <= this.fluidbook.datas.pages; i += 2) { - var pages = []; - j = i + 1; - ix1 = ''; - ix2 = ''; - c = ''; + for (var i = 0; i <= this.fluidbook.datas.pages; i += 2) { + var pages = []; + j = i + 1; + ix1 = ''; + ix2 = ''; + c = ''; - if (this.fluidbook.l10n.dir == 'ltr') { - s1 = 'left'; - s2 = 'right' - } else { - s1 = 'right'; - s2 = 'left' - } + if (this.fluidbook.l10n.dir == 'ltr') { + s1 = 'left'; + s2 = 'right' + } else { + s1 = 'right'; + s2 = 'left' + } - if (i > 0) { - ix1 += '
' + this.fluidbook.loader.getImage('data/thumbnails/p' + i + '.jpg') + '' + this.fluidbook.physicalToVirtual(i) + ''; - if (this.fluidbook.bookmarks.enabled) { - ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true); - } - pages.push(i); - ix1 += '
'; + if (i > 0) { + ix1 += '
' + this.fluidbook.loader.getThumbImage(i) + '' + this.fluidbook.physicalToVirtual(i) + ''; + if (this.fluidbook.bookmarks.enabled) { + ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true); + } + pages.push(i); + ix1 += '
'; - } else { - c = ' simple ' + s2; - } + } else { + c = ' simple ' + s2; + } - if (this.fluidbook.l10n.dir == 'rtl') { - s1 = 'left'; - s2 = 'right' - } else { - s1 = 'right'; - s2 = 'left' - } + if (this.fluidbook.l10n.dir == 'rtl') { + s1 = 'left'; + s2 = 'right' + } else { + s1 = 'right'; + s2 = 'left' + } - if (j < this.fluidbook.datas.pages) { - ix2 += '
' + this.fluidbook.loader.getImage('data/thumbnails/p' + j + '.jpg') + '' + this.fluidbook.physicalToVirtual(j) + ''; - if (this.fluidbook.bookmarks.enabled) { - ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true); - } - ix2 += '
'; - pages.push(j); - } else { - c = ' simple ' + s2; - } - ix = ix1 + ix2; - this.normalHTML += '
' + ix; - this.normalHTML += '
'; - } - for (i = 0; i < 5; i++) { - this.normalHTML += '
'; - } - this.normalHTML += '
'; - } + if (j < this.fluidbook.datas.pages) { + ix2 += '
' + this.fluidbook.loader.getThumbImage(j) + '' + this.fluidbook.physicalToVirtual(j) + ''; + if (this.fluidbook.bookmarks.enabled) { + ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true); + } + ix2 += '
'; + pages.push(j); + } else { + c = ' simple ' + s2; + } + ix = ix1 + ix2; + this.normalHTML += '
' + ix; + this.normalHTML += '
'; + } + for (i = 0; i < 5; i++) { + this.normalHTML += '
'; + } + this.normalHTML += '
'; + } - return this.normalHTML; - } + return this.normalHTML; + } } diff --git a/style/fluidbook.less b/style/fluidbook.less index 32a1f36e..1d0c8e49 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -175,13 +175,11 @@ body, html { /* Desktop devices */ .desktop #links { - cursor: url("../images/cur-zoom-in.png"); - cursor: zoom-in; + cursor: url("images/cur-zoom-in.cur"), url("../images/cur-zoom-in.cur"), zoom-in; } .desktop.zoomed #links { - cursor: url("../images/cur-zoom-out.png"); - cursor: zoom-out; + cursor: url("images/cur-zoom-out.cur"), url("../images/cur-zoom-out.cur"), zoom-out; } #links .link { @@ -1019,8 +1017,8 @@ form input[type="text"], form input[type="email"] { left: 50px; } } - } + .overlay { background-color: rgba(0, 0, 0, 0.5); position: absolute; @@ -1059,7 +1057,7 @@ form input[type="text"], form input[type="email"] { left: 0px; font-size: 12px; - img { + .img { width: 100px; height: @thumb-height; background: #fff; diff --git a/style/slider.less b/style/slider.less index 78d56c43..720621be 100644 --- a/style/slider.less +++ b/style/slider.less @@ -1,3 +1,6 @@ +@slider-background: rgba(0, 0, 0, 0.1); +@slider-thumb-background: rgba(0, 0, 0, 0.2); + #slider { position: absolute; height: 6px; @@ -20,8 +23,9 @@ } &.drag { - z-index: 12; + } + z-index: 12; #sliderback { position: absolute; @@ -31,7 +35,7 @@ z-index: 0; height: 46px; .visible { - background-color: rgba(0, 0, 0, 0.1); + background-color: @slider-background; } } @@ -57,17 +61,45 @@ } @sliderthumb-height: unit(@thumb-height+40, px); - @sliderthumb-top: unit(-1*(@sliderthumb-height+30), px); + @sliderthumb-top: unit(-1*(@sliderthumb-height+24), px); #sliderthumb { position: absolute; top: @sliderthumb-top; left: 0; - background-color: @menu-background; - padding: 10px; + background-color: @slider-thumb-background; + padding: 15px; //display: none; width: 230px; height: @sliderthumb-height; + + &.single { + width: 130px; + &:after { + left: 53px; + } + } + + &:after { + content: ""; + position: absolute; + bottom: -16px; + left: 103px; + width: 0; + height: 0; + border-left: 12px solid transparent; + border-right: 12px solid transparent; + border-top: 16px solid @slider-thumb-background; + display: block; + } + + .doubleThumb { + position: relative; + } + + .number { + color: #fff; + } } &.drag { #sliderthumb {