From 66708677e411a8ee1e4781b92fbd02b15f40b148 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 9 May 2019 14:00:54 +0200 Subject: [PATCH] wip #2691 @6 --- js/libs/fluidbook/fluidbook.loader.js | 126 ++++++++++++++++------ js/libs/fluidbook/fluidbook.menu.js | 25 +---- js/libs/fluidbook/fluidbook.print.js | 10 +- js/libs/fluidbook/fluidbook.slider.js | 7 +- js/libs/fluidbook/menu/fluidbook.index.js | 52 +++++++-- style/fluidbook.less | 59 +++++++--- 6 files changed, 189 insertions(+), 90 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 60efd428..2ad20689 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -10,6 +10,8 @@ function FluidbookLoader(fluidbook) { this.shadeLeft = null; this.shadeRight = null; this.transitionPages = []; + this.thumbnails = []; + this.loadedThumbnails = []; this.cleanTimeout = null; this.init(); @@ -530,47 +532,105 @@ FluidbookLoader.prototype = { var img = this.loadImage(src, width, height, type, null, callback); return $(img).get(0).outerHTML; }, - getThumbImage: function (page, div, shade, width) { - var returnHTML = false; - if (div === null || div == undefined) { - div = $('
'); - } - if (width == undefined) { - width = 100; - } - left = ((page % 2 === 0) && this.fluidbook.l10n.ltr) || ((page % 2 == 1) && this.fluidbook.l10n.rtl); - - var h = width * (this.fluidbook.datas.thumbHeight / 100); + checkLoadedThumbs: function () { + var res = this.loadedThumbnails.length === this.fluidbook.datas.pages; + console.log(this.loadedThumbnails, this.fluidbook.datas.pages, res); + return res; + }, - var shadeImage = ''; - var shadePosition = ''; - var shadeSize = ''; + preloadThumbs: function (callback) { + if (this.checkLoadedThumbs()) { + callback(); + return; + } + $(this).one('thumbnails.loaded', function () { + callback(); + }); + var cb = function () { - if (shade) { - var p = '0%'; - var i = 'right'; - if (left) { - p = '100%'; - i = 'left'; - } - shadeImage = 'url("images/shadows/thumbnails/' + i + '.png"),'; + }; + for (var i = 1; i <= this.fluidbook.datas.pages; i++) { + this.loadThumb(i, cb); + } + }, - shadePosition = p + " 0%,"; - shadeSize = (width / 2) + 'px ' + h + 'px,'; + loadThumb: function (pageNr, callback) { + if (this.thumbnails[pageNr] === undefined || this.thumbnails[pageNr] === null) { + return this._loadThumb(pageNr, callback); } + callback(); + return this.thumbnails[pageNr]; + }, - var thumbImage = 'url("data/thumbnails/p' + page + '.jpg")'; - var thumbPosition = '0px 0px'; - var thumbSize = '100% 100%'; + _loadThumb: function (pageNr, callback) { + if (pageNr <= 0 || pageNr > this.fluidbook.datas.pages) { + callback(); + return; + } + var $this = this; + var cb = function () { + $this.loadedThumbnails.push(pageNr); + if ($this.checkLoadedThumbs()) { + $($this).trigger('thumbnails.loaded'); + } + callback(); + }; + var img = this.loadImage('data/thumbnails/p' + pageNr + '.jpg', null, null, 'image/jpeg', pageNr, cb); + this.thumbnails[pageNr] = img; + return img; + }, - $(div).css({ - backgroundImage: shadeImage + thumbImage, - backgroundPosition: shadePosition + thumbPosition, - backgroundSize: shadeSize + thumbSize - }).addClass('img'); - return $(div).get(0).outerHTML; + getThumbImage: function (page, shade) { + var s = ''; + if (shade) { + s = '
'; + } + return this.loadThumb(page, function () { + }).get(0).outerHTML + s; }, + + // getThumbImage: function (page, div, shade, width) { + // var returnHTML = false; + // if (div === null || div == undefined) { + // div = $('
'); + // } + // if (width == undefined) { + // width = 100; + // } + // + // left = ((page % 2 === 0) && this.fluidbook.l10n.ltr) || ((page % 2 == 1) && this.fluidbook.l10n.rtl); + // + // var h = width * (this.fluidbook.datas.thumbHeight / 100); + // + // var shadeImage = ''; + // var shadePosition = ''; + // var shadeSize = ''; + // + // if (shade) { + // var p = '0%'; + // var i = 'right'; + // if (left) { + // p = '100%'; + // i = 'left'; + // } + // shadeImage = 'url("images/shadows/thumbnails/' + i + '.png"),'; + // + // shadePosition = p + " 0%,"; + // shadeSize = (width / 2) + 'px ' + h + 'px,'; + // } + // + // var thumbImage = 'url("data/thumbnails/p' + page + '.jpg")'; + // var thumbPosition = '0px 0px'; + // var thumbSize = '100% 100%'; + // + // $(div).css({ + // backgroundImage: shadeImage + thumbImage, + // backgroundPosition: shadePosition + thumbPosition, + // backgroundSize: shadeSize + thumbSize + // }).addClass('img'); + // return $(div).get(0).outerHTML; + // }, loadImage: function (src, width, height, type, page, cb) { var $this = this; var callback = function () { diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index acff9cb7..276afd90 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -362,15 +362,13 @@ FluidbookMenu.prototype = { view += '
'; view += '

' + message + '

'; view += '
'; - view += '
' + getSpriteIcon('bookmark-corner') + '
' + getSpriteIcon('bookmark-corner') + '
'; + view += '
' + this.fluidbook.loader.getThumbImage(2, true) + '' + getSpriteIcon('bookmark-corner') + '
' + this.fluidbook.loader.getThumbImage(3, true) + '' + getSpriteIcon('bookmark-corner') + '
'; view += '
'; view += ''; view += '
'; view += '
'; $("#view").append('
' + view + '
'); - this.fluidbook.loader.getThumbImage(2, $("#view .thumb.left .img"), true, 147); - this.fluidbook.loader.getThumbImage(3, $("#view .thumb.right .img"), true, 147); if (callback != undefined) { callback(); @@ -454,25 +452,8 @@ FluidbookMenu.prototype = { this.fluidbook.stats.track(14); }, openIndex: function (title, group, closeAll, callback) { - var c = !closeAll ? ' one' : ''; - var index = '
' + this.closeButton(c) + '

' + title + '

'; - index += this.index.getView(group); - $("#view").append('
' + index + '
'); - // Mark current page - var cp = this.fluidbook.currentPage; - - if (!this.fluidbook.singleMode) { - if (cp % 2 == 1) { - cp--; - } - } - $("#view").find('.doubleThumb[page="' + cp + '"]').addClass('here'); - this.fluidbook.bookmarks.updateBookmarks(); - if (callback != undefined) { - callback(); - } - } - , + this.index.openIndex(title,group,closeAll,callback); + }, openArchives: function (title, callback) { var archives = '
' + this.closeButton() + '

' + title + '

'; archives += '
' + this.fluidbook.datas.links.archives + '
'; diff --git a/js/libs/fluidbook/fluidbook.print.js b/js/libs/fluidbook/fluidbook.print.js index 9491362e..0a994bf7 100644 --- a/js/libs/fluidbook/fluidbook.print.js +++ b/js/libs/fluidbook/fluidbook.print.js @@ -102,7 +102,7 @@ FluidbookPrint.prototype = { view += ''; @@ -138,10 +138,10 @@ FluidbookPrint.prototype = { view += ''; @@ -156,7 +156,7 @@ FluidbookPrint.prototype = { view += ''; diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js index 8153cb54..1ef8e9b5 100644 --- a/js/libs/fluidbook/fluidbook.slider.js +++ b/js/libs/fluidbook/fluidbook.slider.js @@ -195,11 +195,11 @@ FluidbookSlider.prototype = { var left = 0; var right = 0; var single = false; - if (this.fluidbook.resize.orientation == 'portrait') { + if (this.fluidbook.resize.orientation === 'portrait') { single = true; left = page; } else { - if (page % 2 == 1) { + if (page % 2 === 1) { page--; } if (page > 0) { @@ -247,8 +247,7 @@ FluidbookSlider.prototype = { thumb.find('.bookmark').attr('data-page', page); if (page > 0 && page <= this.fluidbook.contentlock.getMaxPage()) { thumb.css('visibility', 'visible'); - this.fluidbook.loader.getThumbImage(page, thumb.find('.img'), shade); - thumb.find('a').attr('href', '#').attr('data-page', page); + thumb.find('a:not(.bookmark)').attr('href', '#').attr('data-page', page).html(this.fluidbook.loader.getThumbImage(page, 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 2768cbe1..0b454eeb 100644 --- a/js/libs/fluidbook/menu/fluidbook.index.js +++ b/js/libs/fluidbook/menu/fluidbook.index.js @@ -22,6 +22,38 @@ FluidbookIndex.prototype = { return this.fluidbook.bookmarks.getIndex(true, group); }, + preloadThumbs: function (callback) { + this.fluidbook.loader.preloadThumbs(callback); + }, + + openIndex: function (title, group, closeAll, callback) { + var $this = this; + this.fluidbook.displayLoader(); + this.preloadThumbs(function () { + $this._openIndex(title, group, closeAll, callback); + }); + }, + + _openIndex: function (title, group, closeAll, callback) { + var c = !closeAll ? ' one' : ''; + var index = '
' + this.fluidbook.menu.closeButton(c) + '

' + title + '

'; + index += this.getView(group); + $("#view").append('
' + index + '
'); + // Mark current page + var cp = this.fluidbook.currentPage; + + if (!this.fluidbook.singleMode) { + if (cp % 2 === 1) { + cp--; + } + } + $("#view").find('.doubleThumb[page="' + cp + '"]').addClass('here'); + this.fluidbook.bookmarks.updateBookmarks(); + if (callback != undefined) { + callback(); + } + }, + getNormalView: function () { if (this.normalHTML == '') { this.normalHTML += '
'; @@ -62,7 +94,7 @@ FluidbookIndex.prototype = { } if (i > 0) { - ix1 += '
' + this.fluidbook.loader.getThumbImage(i, null, true) + '' + this.fluidbook.physicalToVirtual(i) + ''; + ix1 += '
' + this.fluidbook.loader.getThumbImage(i, true) + '' + this.fluidbook.physicalToVirtual(i) + ''; if (this.fluidbook.bookmarks.enabled) { ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true); } @@ -81,16 +113,16 @@ FluidbookIndex.prototype = { } if (!this.singleMode) { - if (j <= this.fluidbook.contentlock.getMaxPage()) { - ix2 += '
' + this.fluidbook.loader.getThumbImage(j, null, true) + '' + this.fluidbook.physicalToVirtual(j) + ''; - if (this.fluidbook.bookmarks.enabled) { - ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true); + if (j <= this.fluidbook.contentlock.getMaxPage()) { + ix2 += '
' + this.fluidbook.loader.getThumbImage(j, true) + '' + this.fluidbook.physicalToVirtual(j) + ''; + if (this.fluidbook.bookmarks.enabled) { + ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true); + } + ix2 += '
'; + pages.push(j); + } else { + c = ' simple ' + s2; } - ix2 += '
'; - pages.push(j); - } else { - c = ' simple ' + s2; - } if (j == 1) { pages.unshift(0); diff --git a/style/fluidbook.less b/style/fluidbook.less index 8a6444e4..b7f410d8 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -1452,14 +1452,17 @@ html.ios body.portrait #interface { } @w: 147px; + @h: unit(@w/@book-page-ratio, px); .doubleThumb { position: relative; width: @w*2; - height: @w/@book-page-ratio; + height: @h; margin: 0 auto; .thumb { + width: @w; + height: @h; &:before { display: none; @@ -1796,27 +1799,49 @@ form input[type="text"], form input[type="email"] { } .thumb { + @thumb-width: 100px; position: absolute; + width: @thumb-width; + height: @thumb-height; .bookmark { - width: 35px; - height: 35px; - z-index: 2; + width: unit(@thumb-width*0.35, px); + height: unit(@thumb-width*0.35, px); + z-index: 3; } - .img { - width: 100px; - height: @thumb-height; + img { + width: 100%; + height: 100%; background-color: #fff; - position: relative; + position: absolute; z-index: 1; - //background-blend-mode: normal, overlay; - // Fix #2631 - //.android.chrome & { - // background-blend-mode: normal, normal; - //} + top: 0; + left: 0; + } + .shade { + position: absolute; + z-index: 2; + width: 33%; + height: 100%; + background-size: 100% 100%; background-repeat: no-repeat; + background-position: 0 0; + top: 0; + } + + &.left { + .shade { + left: 67%; + background-image: url("../images/shadows/thumbnails/left.png"); + } + } + + &.right { + .shade { + background-image: url("../images/shadows/thumbnails/right.png"); + } } .number { @@ -1824,11 +1849,13 @@ form input[type="text"], form input[type="email"] { display: block; margin: 0; padding: 5px 0 0 0; - max-width: 100px; - position: relative; + width: @thumb-width; + position: absolute; z-index: 1; font-size: 14px; - line-height: 1; + line-height: 2; + left: 0; + top: unit(@thumb-height - 7, px); } &.right { -- 2.39.5