From: Vincent Vanwaelscappel Date: Mon, 27 Sep 2021 15:52:25 +0000 (+0200) Subject: wip #4710 @2 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=822306da449d1b04b3588eaad3479182a2a07fb5;p=fluidbook-html5.git wip #4710 @2 --- diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 8f33421c..43307fa5 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -451,6 +451,8 @@ FluidbookLinks.prototype = { } links.prepend('
'); + + this.fluidbook.resize.resizeLinks(); var $this = this; this.initLottieAnimations(); diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 03ed8416..6aab0a32 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -341,7 +341,8 @@ FluidbookLoader.prototype = { var $this = this; this.loadDatas(pageNr, function () { $(page).addClass(position); - $this.addCLinks(pageNr) + $this.addCLinks(pageNr); + $this.fluidbook.resize.resizeLinks(); callback(); }); }, @@ -703,9 +704,9 @@ FluidbookLoader.prototype = { } var page = $(this).data('page'); - var dim=$this.getPageDimensions(page); + var dim = $this.getPageDimensions(page); - var w = dim.width* z; + var w = dim.width * z; var h = dim.height * z; var wz = dim.width * mz; var hz = dim.height * mz; diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 256622a9..f16301fe 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -15,6 +15,18 @@ function FluidbookResize(fluidbook) { this.navScale = 1; this.ww = $(window).width(); this.hh = $(window).height(); + + this.aw = 0; + this.ah = 0; + this.fw = 0; + this.fh = 0; + this.fww = 0; + this.fhh = 0; + this.marginTop = 0; + this.marginBottom = 0; + this.marginLeft = 0; + this.marginRight = 0; + this.init(); this.navresizeTimeout = 0; } @@ -149,76 +161,83 @@ FluidbookResize.prototype = { if (this.fluidbook.pad.enabled) { extraX = 0; - marginTop = 0; - marginBottom = 0; - marginLeft = 0; - marginRight = 0; + this.marginTop = 0; + this.marginBottom = 0; + this.marginLeft = 0; + this.marginRight = 0; } else { var extraX = parseInt(this.fluidbook.settings.mobileExtraXSpace); if (isNaN(extraX)) { extraX = 0; } - marginTop = (parseInt(this.fluidbook.settings.menuHeight) * headerScale) + (this.margintop * interfaceScale); - marginBottom = (10 + this.marginbottom) * interfaceScale; - marginLeft = (this.marginleft + parseInt(extraX)) * interfaceScale; - marginRight = (this.marginright + parseInt(extraX)) * interfaceScale; + this.marginTop = (parseInt(this.fluidbook.settings.menuHeight) * headerScale) + (this.margintop * interfaceScale); + this.marginBottom = (10 + this.marginbottom) * interfaceScale; + this.marginLeft = (this.marginleft + parseInt(extraX)) * interfaceScale; + this.marginRight = (this.marginright + parseInt(extraX)) * interfaceScale; } - var aw = this.ww - marginLeft - marginRight; - var ah = this.hh - marginTop - marginBottom; - var fhh = this.fluidbook.settings.height; - var fww = this.fluidbook.settings.width; + this.aw = this.ww - this.marginLeft - this.marginRight; + this.ah = this.hh - this.marginTop - this.marginBottom; + this.fhh = this.fluidbook.settings.height; + this.fww = this.fluidbook.settings.width; if (this.orientation === 'landscape') { - fww *= 2; + this.fww *= 2; } - this.bookScale = Math.min(aw / fww, ah / fhh); - var origin = ['50%', '50%']; + this.bookScale = Math.min(this.aw / this.fww, this.ah / this.fhh); + this.origin = ['50%', '50%']; if (this.fluidbook.mobilefirst.enabled) { - this.bookScale = this.fluidbook.mobilefirst.getBookScale(aw); - origin[1] = '0%'; + this.bookScale = this.fluidbook.mobilefirst.getBookScale(this.aw); + this.origin[1] = '0%'; } try { this.fluidbook.loader.renderTextsCanvas(); - }catch (e){ + } catch (e) { } - var tabsScale = this.fluidbook.tabs.guessBookScale(this.bookScale, aw, fww); + var tabsScale = this.fluidbook.tabs.guessBookScale(this.bookScale, this.aw, this.fww); this.bookScale *= tabsScale; - var fw = this.bookScale * fww; - var fh = this.bookScale * fhh; - $("#fluidbook,#shadow").transform({ - scale: [this.bookScale, this.bookScale], - origin: origin - }); + + this.resizeBook(); + + this.fw = this.bookScale * this.fww; + this.fh = this.bookScale * this.fhh; + + console.log(this.fw, this.fh); + + // $("#fluidbook,#shadow").transform({ + // scale: [this.bookScale, this.bookScale], + // origin: origin + // }); // Hack to fix #2552 if (this.fluidbook.support.iOS && this.fluidbook.pagetransitions.getTransitionType() === 'flip3d') { - $('#fluidbook').css('transform', 'translate3d(0,0,-1px) scale(' + this.bookScale + ',' + this.bookScale + ')'); + // $('#fluidbook').css('transform', 'translate3d(0,0,-1px) scale(' + this.bookScale + ',' + this.bookScale + ')'); } - var top = marginTop + (ah - fhh) / 2; + // var top = marginTop + (ah - fhh) / 2; + // + // var left = marginLeft + (aw - fww) / 2; + // if (this.fluidbook.mobilefirst.enabled) { + // top = marginTop; + // } + // $("#fluidbook,#shadow").css({ + // top: top, + // left: left, + // width: fww, + // height: fhh + // }); - var left = marginLeft + (aw - fww) / 2; - if (this.fluidbook.mobilefirst.enabled) { - top = marginTop; - } - $("#fluidbook,#shadow").css({ - top: top, - left: left, - width: fww, - height: fhh - }); if (this.fluidbook.mobilefirst.enabled) { this.fluidbook.mobilefirst.resize(); } - this.centerOffset = fw / 4; + this.centerOffset = this.fw / 4; this.fluidbook.pagetransitions.centerBook(); if ($("#pagesnumbers").data('size') == null) { @@ -268,8 +287,8 @@ FluidbookResize.prototype = { backgroundSize: '100% ' + headerHeight + 'px' }); - this.refw = fw; - this.refh = fh; + this.refw = this.fw; + this.refh = this.fh; this.updateFluidbookRect(); if (this.fluidbook.help) { @@ -329,7 +348,6 @@ FluidbookResize.prototype = { }; - if (this.fluidbook.interface.arrowsEnabled()) { try { data.arrowLeftRect = $("#prev-arrows").get(0).getBoundingClientRect(); @@ -342,6 +360,60 @@ FluidbookResize.prototype = { }, + resizeBook: function () { + var f = $('#fluidbook'); + $(f).css({width: this.fw, height: this.fh, top: this._top(this.fh), left: this._left(this.fw)}); + + this.resizePages(); + this.resizeShadow(); + this.resizeEdges(); + }, + + resizePages: function () { + var p = $("#pages"); + var css = {width: '100%', height: '100%'}; + + $(p).css(css); + $(p).find('.doublePage').css(css); + + this.resizeLinks(); + }, + + resizeLinks: function () { + $('#links,.clinks,.ctlinks,#searchHighlights').css({ + transform: 'scale(' + this.bookScale + ')', + transformOrigin: '0 0' + }); + }, + + resizeEdges: function () { + $("#edges").css({ + transform: 'scale(' + this.bookScale + ')', + transformOrigin: '0 0' + }); + }, + + _left: function (w) { + return this.marginLeft + (this.aw - w) / 2; + }, + + _top: function (h) { + if (this.fluidbook.mobilefirst.enabled) { + return this.marginTop; + } + return this.marginTop + (this.ah - h) / 2; + }, + + resizeShadow: function () { + $("#shadow").transform({ + scale: [this.bookScale, this.bookScale], + origin: this.origin, + }).css({ + left: this._left(this.fww + (24 * this.bookScale)), + top: this._top(this.fhh), + }); + }, + updateFluidbookRect: function () { this.fluidbookrect = $("#fluidbook").get(0).getBoundingClientRect(); }, @@ -365,7 +437,7 @@ FluidbookResize.prototype = { resizeAfterSearch: function () { var rect = $("#horizontalNav").get(0).getBoundingClientRect(); - var inverted=this.fluidbook._boolean(this.fluidbook.settings.invertMenuPosition) + var inverted = this.fluidbook._boolean(this.fluidbook.settings.invertMenuPosition) if ((this.fluidbook.l10n.ltr && !inverted) || (this.fluidbook.l10n.rtl && inverted)) { $("#afterSearch").css({left: rect.left + rect.width, right: 'auto'}); } else { @@ -379,7 +451,7 @@ FluidbookResize.prototype = { } var logo = document.getElementById("logo").getBoundingClientRect(); var fluidbook = document.getElementById("fluidbook").getBoundingClientRect(); - var inverted=this.fluidbook._boolean(this.fluidbook.settings.invertMenuPosition); + var inverted = this.fluidbook._boolean(this.fluidbook.settings.invertMenuPosition); var overlapY = logo.bottom > fluidbook.top; var overlapX; diff --git a/style/fluidbook.less b/style/fluidbook.less index 782343fc..381a8d52 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -370,12 +370,8 @@ body, html { background-color: @pages-background; img { - width: unit(@book-page-correct-width, px); - height: unit(@book-page-correct-height, px); - - .mobilefirst & { - height: 100%; - } + width: 100%; + height: 100%; } } @@ -384,9 +380,8 @@ body, html { } .texts { - .mobilefirst & { - height: 100%; - } + width: 100%; + height: 100%; img, object, canvas { position: absolute; @@ -419,23 +414,35 @@ body, html { /* Espaces forcés */ .portrait #pages, .portrait .doublePage.page, .page, .doublePage._3d { - width: @book-page-width; - max-width: @book-page-width; - height: @book-page-height; - max-height: @book-page-height + width: 50%; + max-width: 50%; + height: 100%; + max-height: 100%; } @book-page-width-double: @book-page-width*2; -.doublePage, #pages, #links, #searchHighlights { +#links, #searchHighlights { width: @book-page-width-double; max-width: @book-page-width-double; height: @book-page-height; max-height: @book-page-height; .mobilefirst & { - width: @book-page-width; - max-width: @book-page-width; + width: 100%; + max-width: 100%; + } +} + +.doublePage, #pages { + width: 100%; + max-width: 100%; + height: 100%; + max-height: 100%; + + .mobilefirst & { + width: 100%; + max-width: 100%; } } @@ -492,7 +499,7 @@ body, html { } .landscape .page.right { - left: @book-page-width + left: 50% } .page {