From 29427b4fe70dee10ad2dda00d4bb1e749818fe98 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 4 Sep 2025 17:32:20 +0200 Subject: [PATCH] wip #7489 @16 --- images/symbols/interface.svg | 10 ++ js/libs/fluidbook/fluidbook.elasticslide.js | 98 +++++++++++-- js/libs/fluidbook/fluidbook.js | 7 +- js/libs/fluidbook/fluidbook.links.js | 8 +- js/libs/fluidbook/fluidbook.loader.js | 4 + js/libs/fluidbook/fluidbook.resize.js | 2 +- js/libs/fluidbook/fluidbook.splash.js | 7 +- .../fluidbook/links/fluidbook.links.zoom.js | 44 +++--- style/elasticslide.less | 134 +++++++++++++++++- style/fluidbook.less | 2 +- 10 files changed, 265 insertions(+), 51 deletions(-) diff --git a/images/symbols/interface.svg b/images/symbols/interface.svg index bde37479..f8540bef 100644 --- a/images/symbols/interface.svg +++ b/images/symbols/interface.svg @@ -223,6 +223,16 @@ + + + + + + + + + + '); + p.css('background-image', 'url(data/thumbnails/p' + page + '.jpg)'); + p.find('.background').append(''); if ($(p).find('.links').length === 0) { p.append('
'); } @@ -35,11 +45,15 @@ FluidbookElasticSlide.prototype = { let $this = this; let h = $('
'); for (let i = 1; i <= this.fluidbook.settings.pages; i++) { - h.append(this.resetPage(i)); + let ph = $('
 
 
 
 
'); + ph.append(this.resetPage(i)); + h.append(ph); } + 0 $("#elasticpages").append(h); this.scrollHolder = $("#elasticpages .scrollholder"); this.scrollHolder.get(0).addEventListener('scroll', function (e) { + $this.discardHelp(); $this.scrolling(); }); }, @@ -50,7 +64,7 @@ FluidbookElasticSlide.prototype = { return; } let scrollPos = $this.scrollHolder.scrollTop(); - let p = Math.round(100 * scrollPos / $this.pageHeight) / 100; + let p = Math.round(100 * scrollPos / $this.fluidbook.resize.hh) / 100; if (p % 1 !== 0) { return; } @@ -65,24 +79,37 @@ FluidbookElasticSlide.prototype = { $this.skipChangePage = false; }, 50) $this.afterTransition($this.scrollingPage); + clearTimeout(this.helpTimeout); } } }, checkActive: function () { if (this.isActive()) { - this.switchToElastic(); + if (!this.currentlyActive) { + this.switchToElastic(); + } } else { - this.switchToNormal(); + if (this.currentlyActive) { + this.switchToNormal(); + } } }, switchToElastic: function () { + this.currentlyActive = true; + if (this.helpNeeded) { + this.startHelpTimeout(); + } $("body").addClass('elastic'); + $("#currentDoublePage .page").remove(); + this.setCurrentPage(this.fluidbook.currentPage, 0); }, switchToNormal: function () { + this.currentlyActive = false; $("body").removeClass('elastic'); + this.fluidbook.reloadCurrentPage(); }, isEnabled: function () { @@ -93,14 +120,17 @@ FluidbookElasticSlide.prototype = { return (this.isEnabled() && this.fluidbook.displayOnePage); }, - setCurrentPage: function (page) { - if (!this.isActive() || this.skipChangePage ) { + setCurrentPage: function (page, duration) { + if (!this.isActive() || this.skipChangePage) { return; } + if (duration === undefined) { + duration = 0.5; + } let $this = this; this.ignoreScroll = true; gsap.to(this.scrollHolder, { - duration: 0.5, scrollTo: this.pageHeight * (page - 1), onComplete: function () { + duration: duration, scrollTo: this.fluidbook.resize.hh * (page - 1), onComplete: function () { $this.afterTransition(page); $this.ignoreScroll = false; } @@ -125,11 +155,53 @@ FluidbookElasticSlide.prototype = { this.fluidbook.links.initLinks(page); }, - resize: function (data) { - let w = parseFloat($("#fluidbook").css('width')); - this.pageHeight = w / this.fluidbook.pageRatio; - $("#elasticpages .page,#elasticpages .scrollholder").css({height: this.pageHeight}); + startHelpTimeout: function () { + console.log('start help timeout'); + let $this = this; + this.helpTimeout = setTimeout(function () { + if ($this.isActive()) { + $this.showHelp(); + } + }, 6000); + }, + + showHelp: function () { + let $this = this; + this.helpNeeded = false; + clearTimeout(this.helpTimeout); + $("body").append('
' + getSpriteIcon('interface-close') + '
' + getSpriteIcon('help-swipe') + '' + this.fluidbook.l10n.__('Swipe to change page') + '
'); + setTimeout(function () { + $("#helpSwipe").addClass('show'); + }); + $("#helpSwipe").on(this.fluidbook.input.clickEvent, function () { + $this.discardHelp(); + }); + $(document).on('mousewheel', function (e) { + $this.discardHelp(); + }); + }, + + discardHelp: function () { + if ($("#helpSwipe").length === 0) { + return; + } + $("#helpSwipe").removeClass('show'); + setTimeout(function () { + $("#helpSwipe").remove() + }, 1000); + }, + resize: function (data) { + let pw = this.fluidbook.settings.width; + let ph = this.fluidbook.settings.height; + let s = Math.min(data.ww / pw, data.hh / ph); + this.pageHeight = ph * s; + this.pageWidth = pw * s; + $("#elasticpages .page").css({height: this.pageHeight}); + let paddingV = (data.hh - this.pageHeight) / 2; + let paddingH = (data.ww - this.pageWidth) / 2; + $("#elasticpages .epage_holder").css({height: data.hh, padding: paddingV + "px " + paddingH + "px"}); + $("#elasticpages .epage_holder .bg").css('height', paddingV); }, }; \ No newline at end of file diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 271ab250..1d259686 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -318,6 +318,7 @@ Fluidbook.prototype = { setTimeout(function () { $this.help.displayAtStartup(); }, 1500); + this.elasticslide.ready(); }, loadPlugins: function () { @@ -640,7 +641,7 @@ Fluidbook.prototype = { }, reloadCurrentPage: function () { - this.pageTransition(this.currentPage); + this.pagetransitions.pageTransition(this.currentPage); }, readingPage: function (side) { @@ -818,7 +819,9 @@ Fluidbook.prototype = { return ''; } return this.physicalToVirtual(physical); - }, clickLogo: function () { + }, + + clickLogo: function () { if (this.settings.url_link.indexOf('#') === 0) { window.location.hash = this.settings.url_link; } else { diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 8e3482c3..5e403746 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -778,7 +778,13 @@ FluidbookLinks.prototype = { } side = (side ? side : 'elasticSlide'); - links.html('
'); + let chtml = '
'; + if (side === 'elasticSlide') { + links.html(chtml); + } else { + links.append(chtml); + } + var container = links.find('.' + side + 'Container'); var llinks = this.fluidbook.loader.handleExtension(this.fluidbook.settings.links[page]); if (llinks !== '') { diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 957bcb0c..7865a966 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -412,6 +412,10 @@ FluidbookLoader.prototype = { if ($(container).length === 0) { container = false; } + if ((container !== false && this.fluidbook.elasticslide.isActive()) || + (container === false && !this.fluidbook.elasticslide.isActive())) { + return; + } if (position !== 'left' && position !== 'right') { position = false; } diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 0974d4e8..115d1406 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -179,7 +179,7 @@ FluidbookResize.prototype = { var marginTop, marginBottom, marginLeft, marginRight; - if (this.fluidbook.pad.enabled) { + if (this.fluidbook.pad.enabled || this.fluidbook.elasticslide.isActive()) { extraX = 0; this.marginTop = 0; this.marginBottom = 0; diff --git a/js/libs/fluidbook/fluidbook.splash.js b/js/libs/fluidbook/fluidbook.splash.js index 9004a806..97c22369 100644 --- a/js/libs/fluidbook/fluidbook.splash.js +++ b/js/libs/fluidbook/fluidbook.splash.js @@ -43,7 +43,7 @@ FluidbookSplash.prototype = { if ($("#splash").length == 0) { return; } - console.log('Hide', (Date.now() - this.initDate) / 1000); + //console.log('Hide', (Date.now() - this.initDate) / 1000); this.waitForReady = false; try { navigator.splashscreen.hide(); @@ -76,7 +76,7 @@ FluidbookSplash.prototype = { hideIfPossible: function () { if (!this.waitForReady && !this.waitForTimer) { - console.log('Hide if possible', (Date.now() - this.initDate) / 1000); + //console.log('Hide if possible', (Date.now() - this.initDate) / 1000); this._hide(); } }, @@ -118,9 +118,10 @@ FluidbookSplash.prototype = { }, 1500); this.fluidbook.allowChangePage(); + this.fluidbook.elasticslide.checkActive(); $(this.fluidbook).trigger('fluidbook.splash.hide'); this.isHidding = false; - console.log('Hide splash', (Date.now() - this.initDate) / 1000); + //console.log('Hide splash', (Date.now() - this.initDate) / 1000); }, } \ No newline at end of file diff --git a/js/libs/fluidbook/links/fluidbook.links.zoom.js b/js/libs/fluidbook/links/fluidbook.links.zoom.js index e4cf54ec..bc31daf5 100644 --- a/js/libs/fluidbook/links/fluidbook.links.zoom.js +++ b/js/libs/fluidbook/links/fluidbook.links.zoom.js @@ -5,7 +5,6 @@ function FluidbookLinksZoom(fluidbook) { } FluidbookLinksZoom.prototype = { - init: function () { var $this = this; // ToDo: consider re-using existing popinOverlay div? @@ -43,15 +42,15 @@ FluidbookLinksZoom.prototype = { zoomLink: function (link) { - var $this = this, - $link = $(link), - links = [], - zoomMargin = 50, - zoomZonesGap = 30, // Space between grouped zoom links - gapsTotal, - availableWidth = this.fluidbook.resize.ww - (2 * zoomMargin), - availableHeight = this.fluidbook.resize.hh - (2 * zoomMargin), - maxZoom = parseFloat($(link).data('maxzoom')) || 2; + var $this = this; + var $link = $(link); + var links = []; + var zoomMargin = this.fluidbook.elasticslide.isActive() ? 0 : 50; + var zoomZonesGap = 30; // Space between grouped zoom links + var gapsTotal; + var availableWidth = this.fluidbook.resize.ww - (2 * zoomMargin); + var availableHeight = this.fluidbook.resize.hh - (2 * zoomMargin); + var maxZoom = parseFloat($(link).data('maxzoom')) || 2; // If the interface is zoomed in, we must zoom out first if (this.fluidbook.zoom.zoom > 1) { @@ -139,8 +138,7 @@ FluidbookLinksZoom.prototype = { links.forEach(function (zoomLink, index) { // console.log(index, 'Found link with ID: ' + zoomLink.attr('id')); - var zoomID = zoomLink.attr('id'), - $groupWrapper = $('#zoomPopupGroupWrapper'); + var zoomID = zoomLink.attr('id'), $groupWrapper = $('#zoomPopupGroupWrapper'); // Add holder for each zoom zone $groupWrapper.append('
'); @@ -252,17 +250,11 @@ FluidbookLinksZoom.prototype = { $groupWrapper.append('' + getSpriteIcon('interface-close') + ''); } - var z = $('#zoomPopup_' + zoomID), - box = zoomLink[0].getBoundingClientRect(), // Should return full values without rounding - parent = zoomLink.closest('.link'), - baseWidth = parseInt(zoomLink.data('width')), // Width of the original link from the editor + var z = $('#zoomPopup_' + zoomID), box = zoomLink[0].getBoundingClientRect(), // Should return full values without rounding + parent = zoomLink.closest('.link'), baseWidth = parseInt(zoomLink.data('width')), // Width of the original link from the editor baseHeight = parseInt(zoomLink.data('height')), // Height of the original link from the editor maxZoom = parseFloat(zoomLink.data('maxzoom')) || 2, // The default value for this should match that of the compiler in zoomLink::generateImage() - zoomX, - zoomY, - zoomWidth, - zoomHeight, - zoomScale; + zoomX, zoomY, zoomWidth, zoomHeight, zoomScale; if ($(parent).length === 0) { return; @@ -360,6 +352,7 @@ FluidbookLinksZoom.prototype = { $this.fluidbook.hideLoader(); z.show(); $this.showOverlay(); + z.parent().find('.zoomPopupClose').css('opacity', 1); // Trigger zoom up animation just after showing zoom element setTimeout(function () { @@ -379,7 +372,6 @@ FluidbookLinksZoom.prototype = { }); }); - this.fluidbook.stats.track(2, this.fluidbook.currentPage); }, @@ -460,7 +452,6 @@ FluidbookLinksZoom.prototype = { }, zoomLinkReset: function (immediate) { - var $this = this; if ($('.zoomPopupWrapper:visible').length === 0) { @@ -476,7 +467,8 @@ FluidbookLinksZoom.prototype = { // Close each popup that is open $wrapper.find('.zoomPopupWrapper').each(function () { var z = $(this); - z.find('.zoomPopupClose').css('opacity', '0'); + z.parent().find('.zoomPopupClose').css('opacity', '0'); + if (immediate) { $('.zoomPopupWrapper').hide(); @@ -484,8 +476,7 @@ FluidbookLinksZoom.prototype = { } z.css({ - transform: 'translate(0,0) scale(' + z.data('starting-scale') + ')', - boxShadow: '0 0 0 rgba(0,0,0,0.3)', + transform: 'translate(0,0) scale(' + z.data('starting-scale') + ')', boxShadow: '0 0 0 rgba(0,0,0,0.3)', }); }); @@ -513,6 +504,7 @@ FluidbookLinksZoom.prototype = { $("#zoomPopupOverlay").hide(); }, delay); }, + showOverlay: function () { $("#zoomPopupOverlay").css('opacity', 0).show(); setTimeout(function () { diff --git a/style/elasticslide.less b/style/elasticslide.less index ce35170a..43d489f4 100644 --- a/style/elasticslide.less +++ b/style/elasticslide.less @@ -1,5 +1,54 @@ -.elastic #pages { - display: none; +.elastic { + #pages { + display: none; + } + + #center-shadow { + display: none; + } + + #fluidbook { + left: 0 !important; + top: 0 !important; + width: 100vw !important; + height: 100vh !important; + } + + #menuOpener { + background-color: @arrows-background; + border-radius: 2px 2px; + width: 40px; + height: 40px; + top: 10px; + left: 10px; + box-shadow: 0 3px 3px rgba(0, 0, 0, .1); + transform: none !important; + + span { + display: none; + } + + .svg-icon { + color: @arrows-color; + width: 25px; + margin: 0 12px; + + } + } + + #zoomPopupBackground .bg { + background-color: transparent; + } + + .zoomPopupClose { + top: 10px; + right: 10px; + border-radius: 2px 2px; + width: 40px; + height: 40px; + box-shadow: 0 3px 3px rgba(0, 0, 0, .1); + padding: 12px; + } } #elasticpages { @@ -30,11 +79,88 @@ display: none; } + .epage_holder { + scroll-snap-align: start; + scroll-snap-stop: always; + position: relative; + + .page { + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: 0 0; + + .background { + background-color: transparent; + + img[src=""] { + opacity: 0; + } + + &.loaded { + background-color: @pages-background; + } + } + } + + &:last-child { + padding-bottom: 300px; + } + + .padding { + position: absolute; + bottom: 0; + left: 0; + height: 100%; + + img { + display: block; + width: 100%; + height: 100%; + } + } + } + .page { display: block; position: relative; - scroll-snap-align: center; - scroll-snap-stop: always; } } +} + +#helpSwipe { + background-color: rgba(0, 0, 0, 0.8); + color: #fff; + opacity: 0; + transition: opacity 400ms; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 30; + text-align: center; + padding: 0 25%; + display: flex; + align-items: center; + justify-content: center; + + + .interface-close { + position: absolute; + right: 10px; + top: 10px; + width: 30px; + height: 30px; + } + + span { + display: block; + margin-top: 50px; + font-size: 25px; + line-height: 30px; + } + + &.show { + opacity: 1; + } } \ No newline at end of file diff --git a/style/fluidbook.less b/style/fluidbook.less index 92db8ed2..233e9aa2 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -2307,7 +2307,7 @@ ul.chapters.shareList a.level0 .svg-icon { z-index: 33; .button-hover(); color: @menu-text; - opacity: 1; + opacity: 0; transition: opacity 500ms; .svg-icon { -- 2.39.5