From f5f9a749b244f66dad691c60158acf774b6dc64f Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 21 Nov 2019 16:37:59 +0100 Subject: [PATCH] wait #3120 @4 --- js/libs/fluidbook/fluidbook.resize.js | 2 + js/libs/fluidbook/fluidbook.tabs.js | 94 +++++++++++++++++++-------- style/fluidbook.less | 22 ------- style/tabs.less | 36 +++++++++- 4 files changed, 104 insertions(+), 50 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 7ef0cc68..4459ad4b 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -179,6 +179,8 @@ FluidbookResize.prototype = { this.bookScale = this.fluidbook.mobilefirst.getBookScale(aw); origin[1] = '0%'; } + + this.bookScale *= this.fluidbook.tabs.guessBookScale(this.bookScale, aw, fww); var fw = this.bookScale * fww; var fh = this.bookScale * fhh; diff --git a/js/libs/fluidbook/fluidbook.tabs.js b/js/libs/fluidbook/fluidbook.tabs.js index eb88da6b..98301532 100644 --- a/js/libs/fluidbook/fluidbook.tabs.js +++ b/js/libs/fluidbook/fluidbook.tabs.js @@ -1,6 +1,12 @@ function FluidbookTabs(fluidbook) { this.fluidbook = fluidbook; + this.hasSVGTabs = false; if (this.fluidbook.datas.svgTabs) { + this.hasSVGTabs = true; + this.svgLoaded = false; + this.cont; + this.visibility = {}; + this.naturalDimensions = {width: 0, height: 0}; this.init(); } else if (this.hasTabs()) { this.initZip(); @@ -8,7 +14,6 @@ function FluidbookTabs(fluidbook) { } FluidbookTabs.prototype = { - hasTabs: function () { return this.fluidbook.datas.tabsHTML5 !== ''; }, @@ -17,18 +22,60 @@ FluidbookTabs.prototype = { }, + checkVisibility: function (types) { + var res = true; + var $this = this; + $.each(types, function (k, type) { + if ($this.visibility[type] === false) { + res = false; + return false; + } + }); + return res; + }, + + guessTabsWidth: function (bookScale) { + var fh = this.fluidbook.datas.height * bookScale; + var tabsScale = fh / this.naturalDimensions.height; + return this.linkWidth * tabsScale; + }, + + guessBookScale: function (bookScale, aw, fww) { + if (!this.hasSVGTabs || !this.svgLoaded) { + this.changeVisibility('priority', true); + return 1; + } + + if (this.checkVisibility(['portrait'/*, 'firstpage', 'lastpage'*/]) === false) { + this.changeVisibility('priority', true); + return 1; + } + + var tabsWidth = this.guessTabsWidth(bookScale); + console.log(tabsWidth); + var awt = aw - (tabsWidth * 2); + var scale = awt / fww; + var ratio = (scale / bookScale); + var reductionRatio = 1 - ratio; + + if (reductionRatio > this.priority) { + this.changeVisibility('priority', false); + return 1; + } + this.changeVisibility('priority', true); + + return Math.min(1, ratio); + }, + init: function () { if ($("#background .links").length === 0) { $("#background").append('
'); } - $("#background .links").append(''); + this.setOptions(); + $("#background .links").append(''); this.element = $("#l_tabs"); - this.cont; - this.visibility = {}; - this.naturalDimensions = {width: 0, height: 0}; - this.image = 'tabs.svg'; - this.setOptions(); + this.addLinks(this.fluidbook.datas.tabsPages); this.initTabs(); }, @@ -39,15 +86,16 @@ FluidbookTabs.prototype = { this.hideOnZoom = this.fluidbook.datas.tabsHideOnZoom; this.hideWhenOverlapingArrows = this.fluidbook.datas.tabsHideWhenOverlapingArrows; this.mode = 'side'; - this.align = this.fluidbook.datas.tabsSide; + this.side = this.align = this.fluidbook.datas.tabsSide; this.margin = parseFloat(this.fluidbook.datas.tabsMargin); this.hideEdge = this.fluidbook.datas.tabsHideEdges; this.linkWidth = parseFloat(this.fluidbook.datas.tabsLinkWidth); + this.priority = parseFloat(this.fluidbook.datas.tabsPriority) / 100; this.sections = this.fluidbook.datas.tabsSections.map(function (x) { return parseInt(x); }); - this.addLinks(this.fluidbook.datas.tabsPages); + }, addLinks: function (pages) { @@ -82,7 +130,7 @@ FluidbookTabs.prototype = { value--; } $this.links.push({ - css: {height: (100 / nbPages) + '%', top: (100 / nbPages * i) + '%', width: $this.linkWidth}, + css: {height: (100 / nbPages) + '%', top: (100 / nbPages * i) + '%'}, page: parseInt(value), index: index, id: 'o' + index @@ -105,6 +153,7 @@ FluidbookTabs.prototype = { $this.naturalDimensions.height = Math.floor(parseFloat($(data).attr('height'))); $this.svg = $this.cont.find('svg'); $this.svg.addClass('tabsimg').css({height: '100%', width: 'auto'}); + $this.svgLoaded = true; $this.createLinks(); $this.initStandardEvents(); }, 'text'); @@ -176,7 +225,7 @@ FluidbookTabs.prototype = { hideEdges: function (hide) { if (!hide) { - $("#edges .edge").css('visibility', 'visible'); + $("#edges .edge, #shadow .shadow.side").css('visibility', 'visible'); return; } if (this.hideEdge === undefined || this.hideEdge === 'none') { @@ -193,9 +242,15 @@ FluidbookTabs.prototype = { createLinks: function () { var $this = this; + + var commoncss = {}; + var widthPct = (100 * (this.linkWidth / this.naturalDimensions.width)) + "%"; + commoncss.width = widthPct; + $(this.links).each(function (k, v) { var l = $(''); $this.cont.append(l); + l.css(commoncss); l.css(v.css); if (v.page) { l.attr('href', '#/page/' + v.page); @@ -230,7 +285,7 @@ FluidbookTabs.prototype = { if (this.hideOnPortrait) { this.visibility.portrait = true; $(this.fluidbook).on('fluidbook.resize.orientation', function (e, data) { - if (data.orientation == 'portrait') { + if (data.orientation === 'portrait') { $this.changeVisibility('portrait', false); } else { $this.changeVisibility('portrait', true); @@ -339,20 +394,5 @@ FluidbookTabs.prototype = { } this.cont.css(css); - - if (this.hideWhenOverlapingArrows) { - try { - var bbox = this.svg.find('#o1').get(0).getBoundingClientRect(); - if (this.align === 'left') { - if (bbox.left < data.arrowLeftRect.right) { - this.changeVisibility('arrows', false); - } else { - this.changeVisibility('arrows', true); - } - } - } catch (e) { - - } - } }, }; diff --git a/style/fluidbook.less b/style/fluidbook.less index cef30969..176dc015 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -2921,28 +2921,6 @@ body > input { } } -.links .link.multimedia { - .tabs { - transition: opacity 400ms; - position: relative; - - &.hide { - opacity: 0; - pointer-events: none; - } - - .tablink { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - display: block; - background: none !important; - } - } -} - .inlineslideshow { width: 100%; height: 100%; diff --git a/style/tabs.less b/style/tabs.less index dd049ca8..5f490570 100644 --- a/style/tabs.less +++ b/style/tabs.less @@ -1,7 +1,41 @@ -#l_tabs { +.links .link.multimedia#l_tabs { top: 0; left: 0; width: 100px; height: 100px; z-index: 5000; + + .tablink { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: block; + background: none !important; + } + + &.left { + .tablink { + right: 0; + left: auto; + } + } + + &.right { + .tablink { + left: 0; + right: auto; + } + } + + .tabs { + transition: opacity 400ms; + position: relative; + + &.hide { + opacity: 0; + pointer-events: none; + } + } } \ No newline at end of file -- 2.39.5