From: Vincent Vanwaelscappel Date: Thu, 27 Feb 2025 11:13:46 +0000 (+0100) Subject: wait #7356 @1.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c07bb04ce3f04edd171d9e5d15fd7266c4aff833;p=fluidbook-html5.git wait #7356 @1.5 --- diff --git a/js/libs/fluidbook/fluidbook.background.js b/js/libs/fluidbook/fluidbook.background.js index 0d90b7c0..959230b8 100644 --- a/js/libs/fluidbook/fluidbook.background.js +++ b/js/libs/fluidbook/fluidbook.background.js @@ -23,20 +23,29 @@ FluidbookBackground.prototype = { var s = $this.fluidbook.settings.dynamicBackgroundColor[page]; var back = s[0]; var arrows = ''; + var image = ''; if (s.length > 1) { arrows = s[1]; + if (s.length > 2) { + image = s[2]; + } } } catch (e) { - + image = ''; back = null; arrows = ''; } - var style; - if (back === undefined || back === null || back === '' || back === '-') { - style = ''; - } else { - style = "background-image:none !important;background-color:" + back + " !important;"; + var noback = (back === undefined || back === null || back === '' || back === '-'); + + let bgi = image === '' ? 'none' : 'url(\'data/links/' + image + '\')'; + let style = ""; + if (!noback) { + style += "background-color:" + back + " !important;"; } + if (image) { + style += "background-image:" + bgi + " !important;background-size:cover !important;background-position:50% 50% !important;"; + } + $('#background').attr('style', style); $("#prev-arrows,#next-arrows,#menuOpener,.audio-description-button,#horizontalNav #iconList a .svg-icon, #horizontalNav #iconList a span").css('color', arrows); }); diff --git a/js/libs/fluidbook/fluidbook.pagetransitions.js b/js/libs/fluidbook/fluidbook.pagetransitions.js index d322341f..7de4b709 100644 --- a/js/libs/fluidbook/fluidbook.pagetransitions.js +++ b/js/libs/fluidbook/fluidbook.pagetransitions.js @@ -42,8 +42,7 @@ FluidbookPageTransition.prototype = { if (pageNr !== undefined) { pageNr = this.normalizeTransitionPageNr(pageNr); - if (pageNr === this.fluidbook.normalizePage(this.fluidbook.currentPage) || - this.fluidbook.currentPage === -1) { + if (pageNr === this.fluidbook.normalizePage(this.fluidbook.currentPage) || this.fluidbook.currentPage === -1) { return "immediate"; } } @@ -54,8 +53,10 @@ FluidbookPageTransition.prototype = { return 'fade'; } } - if (!this.fluidbook.support.transitions2d || - this.fluidbook.settings.mobileTransitions === 'none') { + if (this.fluidbook.settings.mobileTransitions === 'fadeoutin' || this.fluidbook.settings.mobileTransitions === 'fadeoutthenin') { + return this.fluidbook.settings.mobileTransitions; + } + if (!this.fluidbook.support.transitions2d || this.fluidbook.settings.mobileTransitions === 'none') { return 'immediate'; } if (this.fluidbook.displayOnePage) { @@ -108,6 +109,16 @@ FluidbookPageTransition.prototype = { return this.pageTransitionFade(pageNr); } + if (transitionType === 'fadeoutin') { + this.fluidbook.zoom.resetZoom(); + return this.pageTransitionFadeOutIn(pageNr); + } + + if (transitionType === 'fadeoutthenin') { + this.fluidbook.zoom.resetZoom(); + return this.pageTransitionFadeOutThenIn(pageNr); + } + if (transitionType === 'fadeone') { this.fluidbook.zoom.resetZoom(); return this.pageTransitionFadeOne(pageNr); @@ -300,8 +311,7 @@ FluidbookPageTransition.prototype = { }, centerBookEnabled: function () { - return !!this.fluidbook.settings.centerBook && - !this.fluidbook.displayOnePage; + return !!this.fluidbook.settings.centerBook && !this.fluidbook.displayOnePage; }, centerBook: function (center, animationDuration) { @@ -408,6 +418,78 @@ FluidbookPageTransition.prototype = { }); }, + pageTransitionFadeOutThenIn: function (pageNr) { + this.transitionning = true; + var $this = this; + var turning = this.getTurningPages(pageNr); + $("#pages").append(''); + var currentDoublePage = $("#currentDoublePage"); + $(currentDoublePage).addClass('_fade').addClass('_quick'); + var doublePage = $("#nextDoublePage"); + if (this.fluidbook.displayOnePage) { + this.fluidbook.hidePage('right'); + } + + if (!this.fluidbook.loader.arePreloadedPages(turning.end)) { + this.fluidbook.displayLoader(); + } + this.pauseNetworkDuringPagesPreload(); + + this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () { + $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () { + $(currentDoublePage).css('opacity', 0); + $(currentDoublePage).one($this.fluidbook.support.getTransitionEndEvent(), function () { + $("#shade").addClass('fadetransition'); + $this.pauseNetworkDuringTransition(pageNr); + $this.beforeTransition(pageNr, 1, turning); + $(doublePage).removeClass(turning.nextFromClass).one($this.fluidbook.support.getTransitionEndEvent(), function () { + if ($this.transitionning === false) { + return; + } + $(currentDoublePage).remove(); + $("#nextDoublePage").attr('id', 'currentDoublePage'); + $this.afterTransition(pageNr); + }); + }); + }); + }); + }, + + pageTransitionFadeOutIn: function (pageNr) { + this.transitionning = true; + var $this = this; + var turning = this.getTurningPages(pageNr); + $("#pages").append(''); + var currentDoublePage = $("#currentDoublePage"); + $(currentDoublePage).addClass('_fade'); + var doublePage = $("#nextDoublePage"); + if (this.fluidbook.displayOnePage) { + this.fluidbook.hidePage('right'); + } + + if (!this.fluidbook.loader.arePreloadedPages(turning.end)) { + this.fluidbook.displayLoader(); + } + this.pauseNetworkDuringPagesPreload(); + + this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () { + $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () { + $(currentDoublePage).css('opacity', 0); + $("#shade").addClass('fadetransition'); + $this.pauseNetworkDuringTransition(pageNr); + $this.beforeTransition(pageNr, 1, turning); + $(doublePage).removeClass(turning.nextFromClass).one($this.fluidbook.support.getTransitionEndEvent(), function () { + if ($this.transitionning === false) { + return; + } + $(currentDoublePage).remove(); + $("#nextDoublePage").attr('id', 'currentDoublePage'); + $this.afterTransition(pageNr); + }); + }); + }); + }, + pageTransition2DPortrait: function (pageNr) { this.transitionning = true; var $this = this; @@ -437,8 +519,7 @@ FluidbookPageTransition.prototype = { }); }); }); - }, - pageTransition1D: function (pageNr) { + }, pageTransition1D: function (pageNr) { var page = pageNr; var doublePage = $("#currentDoublePage"); @@ -453,15 +534,12 @@ FluidbookPageTransition.prototype = { $this.afterTransition(page); }); }); - }, - beforeTransition: function (page, transition, turning) { + }, beforeTransition: function (page, transition, turning) { if (transition == undefined) { transition = 1; } $(this.fluidbook).trigger('fluidbook.page.change.start', [page, { - transition: transition, - page: page, - turningPages: turning.flip + transition: transition, page: page, turningPages: turning.flip }]); var $this = this; this.fluidbook.tooltip.hideTooltip('beforeTransition'); @@ -497,8 +575,7 @@ FluidbookPageTransition.prototype = { } catch (err) { } - }, - afterTransition: function (page, timeout) { + }, afterTransition: function (page, timeout) { if (timeout === undefined) { timeout = false; } diff --git a/style/fluidbook.less b/style/fluidbook.less index 7bddfe12..7507c85e 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -204,7 +204,7 @@ body, html { width: 100%; height: 100%; z-index: 0; - transition: opacity 500ms ease-in-out, background-color unit(@page-transition-duration, s) ease-in-out; + transition: opacity 500ms ease-in-out, background-color unit(@page-transition-duration, s) ease-in-out, background-image unit(@page-transition-duration, s) ease-in-out; &.visible { opacity: 1; @@ -2512,6 +2512,9 @@ ul.chapters.shareList a.level0 .svg-icon { .doublePage { &._2d, &._fade { .page-transition-slide(1); + &._quick{ + .page-transition-slide(0.5); + } } &._3d { diff --git a/style/mixins.less b/style/mixins.less index 127faf94..3be76a07 100644 --- a/style/mixins.less +++ b/style/mixins.less @@ -24,7 +24,7 @@ .prop-transition-slide(all, @factor); } -.prop-transition(@property,@factor) { +.prop-transition(@property, @factor) { -moz-transition: @property unit(@page-transition-duration*@factor, s) ease-in-out; -webkit-transition: @property unit(@page-transition-duration*@factor, s) ease-in-out; -ms-transition: @property unit(@page-transition-duration*@factor, s) ease-in-out; @@ -32,7 +32,7 @@ transition: @property unit(@page-transition-duration*@factor, s) ease-in-out; } -.prop-transition-slide(@property,@factor) { +.prop-transition-slide(@property, @factor) { -moz-transition: @property unit(@page-transition-slide-duration*@factor, s) ease-in-out; -webkit-transition: @property unit(@page-transition-slide-duration*@factor, s) ease-in-out; -ms-transition: @property unit(@page-transition-slide-duration*@factor, s) ease-in-out;