From b0a30c604a568f24ec7b63fd9b1e9f4fe96d14f4 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 20 Aug 2025 18:27:40 +0200 Subject: [PATCH] wip #7489 @21 --- js/libs/fluidbook/fluidbook.elasticslide.js | 67 ++++++++++++++++++--- js/libs/fluidbook/fluidbook.js | 19 +++++- js/libs/fluidbook/fluidbook.links.js | 21 +++++-- js/libs/fluidbook/fluidbook.loader.js | 24 ++++++-- style/elasticslide.less | 6 +- 5 files changed, 118 insertions(+), 19 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.elasticslide.js b/js/libs/fluidbook/fluidbook.elasticslide.js index be8228be..db452539 100644 --- a/js/libs/fluidbook/fluidbook.elasticslide.js +++ b/js/libs/fluidbook/fluidbook.elasticslide.js @@ -1,5 +1,9 @@ function FluidbookElasticSlide(fluidbook) { this.fluidbook = fluidbook; + this.skipChangePage = false; + this.scrollHolder = null; + this.ignoreScroll = false; + this.scrollingPage = null; this.init(); } @@ -18,14 +22,46 @@ FluidbookElasticSlide.prototype = { } }, + resetPage: function (page) { + let p = $(this.fluidbook.createPage(page, 'epage_')); + p.find('.background').append(''); + if ($(p).find('.links').length === 0) { + p.append('
'); + } + return p; + }, + initPages: function () { + let $this = this; let h = $('
'); for (let i = 1; i <= this.fluidbook.settings.pages; i++) { - let p = $(this.fluidbook.createPage(i, 'epage_')); - p.find('.background').append(''); - h.append(p); + h.append(this.resetPage(i)); } $("#elasticpages").append(h); + this.scrollHolder = $("#elasticpages .scrollholder"); + this.scrollHolder.get(0).addEventListener('scroll', function (e) { + if (this.ignoreScroll) { + return; + } + let scrollPos = $this.scrollHolder.scrollTop(); + let p = Math.round(100 * scrollPos / $this.pageHeight) / 100; + if (p % 1 !== 0) { + return; + } + + let page = 1 + p; + if ($this.scrollingPage !== page) { + $this.scrollingPage = page; + if ($this.fluidbook.currentPage !== $this.scrollingPage) { + $this.skipChangePage = true; + $this.fluidbook.setCurrentPage($this.scrollingPage); + setTimeout(function () { + $this.skipChangePage = false; + }, 50) + $this.afterTransition(); + } + } + }); }, checkActive: function () { @@ -49,17 +85,34 @@ FluidbookElasticSlide.prototype = { isEnabled: function () { return this.fluidbook.settings.slideTransitionsElastic == '1'; }, + isActive: function () { return true || (this.isEnabled() && this.fluidbook.displayOnePage); }, - preloadPage: function (page) { + setCurrentPage: function (page) { + if (this.skipChangePage) { + return; + } + let $this = this; + this.ignoreScroll = true; + gsap.to(this.scrollHolder, { + duration: 0.5, scrollTo: this.pageHeight * (page - 1), onComplete: function () { + $this.afterTransition(); + $this.ignoreScroll = false; + } + }); + }, + + afterTransition: function () { + this.fluidbook.links.initLinks(); }, - resize: function (data) { + resize: function (data) { let w = parseFloat($("#fluidbook").css('width')); - let h = w / this.fluidbook.pageRatio; - $("#elasticpages .page,#elasticpages .scrollholder").css({height: h}); + this.pageHeight = w / this.fluidbook.pageRatio; + $("#elasticpages .page,#elasticpages .scrollholder").css({height: this.pageHeight}); + }, }; \ No newline at end of file diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index b1170333..909678a0 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -341,14 +341,26 @@ Fluidbook.prototype = { return; } $(doublePage).find('.' + position).remove(); - $(doublePage).append(this.createPage(pageNr, '#page_', position)); + $(doublePage).append(this.createPage(pageNr, 'page_', position)); }, createPage: function (pageNr, idprexif, position) { if (position === undefined) { position = ''; } - return '
'; + + let id = idprexif + pageNr; + let c = $('#' + id); + if (c.length === 0) { + c = $('
'); + } + + return $(c).html('
' + + '
' + + '
' + + '
' + + '
'+ + '
'); }, hidePage: function (position) { @@ -554,6 +566,9 @@ Fluidbook.prototype = { $this.splash.hide(); $this.menu.closeViewCallbackEvent(true); }, true); + + this.elasticslide.setCurrentPage(page); + } else if (args[1] === 'landing') { $this.splash.hide(); if (this.landingpage !== undefined) { diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 08ce1f21..518fdddf 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -648,6 +648,21 @@ FluidbookLinks.prototype = { }, timeout); }, + linksContainer: function (pageNr) { + let links; + if(this.fluidbook.elasticslide.isActive()){ + links=$("#epage_"+pageNr +" .links"); + }else { + links = $("#links").removeClass('right'); + } + $(links).html('').show(); + if (this.fluidbook.displayOnePage && pageNr % 2 === 1 && this.fluidbook.l10n.dir === 'ltr') { + $(links).addClass('right') + } + return links; + }, + + initLinks: function (pageNr) { if (pageNr === undefined) { @@ -663,11 +678,7 @@ FluidbookLinks.prototype = { leftPage = pageNr - 1; } - var links = $("#links").removeClass('right'); - $(links).html('').show(); - if (this.fluidbook.displayOnePage && pageNr % 2 === 1 && this.fluidbook.l10n.dir === 'ltr') { - $(links).addClass('right') - } + var links = this.linksContainer(pageNr); var leftLinks, rightLinks; leftLinks = rightLinks = true; diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 642d2280..00fcdcab 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -40,8 +40,7 @@ FluidbookLoader.prototype = { $this.loadbalancing = []; $.each(data, function (i, server) { $.ajax('https://' + server.h + '/status.txt', { - dataType: 'text', - timeout: 5000 + dataType: 'text', timeout: 5000 }).done(function (data) { if (data == '1') { for (let i = 0; i < server.w; i++) { @@ -230,6 +229,17 @@ FluidbookLoader.prototype = { _cb(); }, + _pageContainer: function (page, child) { + if (child === undefined) { + child = ''; + } + if (this.fluidbook.elasticslide.isActive()) { + return $("#epage_" + page + ' ' + child); + } else { + return $("page_" + page + ' ' + child); + } + }, + _preloadPageAfterSecurityChecks: function (page, callback) { if (page == undefined || page == 'undefined' || page > this.fluidbook.contentlock.getMaxPage() || page < 1) { callback(); @@ -319,6 +329,10 @@ FluidbookLoader.prototype = { }, deletePage: function (page) { + if (this.fluidbook.elasticslide.isEnabled()) { + this.fluidbook.elasticslide.resetPage(page); + } + if (this.backgrounds[page] !== undefined) { delete this.backgrounds[page]; } @@ -491,8 +505,9 @@ FluidbookLoader.prototype = { setBackground: function (page, callback) { var $this = this; - var back = $("#page_" + page + ' .background'); + var back = this._pageContainer(page, '.background'); this._loadBackground(page, function () { + $(back).html(''); $(back).addClass('r' + $this.fluidbook.support.resolution); $(back).append($this.backgrounds[page]); callback(); @@ -969,7 +984,7 @@ FluidbookLoader.prototype = { }, addTextContents: function (pageNr, callback) { - var t = $("#page_" + pageNr + ' .texts'); + var t = this._pageContainer(pageNr, '.texts'); if (this.fluidbook.support.svgtocanvas || this.fluidbook.support.pdftocanvas) { } else { $(t).append(this.texts[pageNr]); @@ -977,6 +992,7 @@ FluidbookLoader.prototype = { callback(); }, + loadPDFForTexts: function (callback) { if (!this.fluidbook.support.pdftocanvas) { callback(); diff --git a/style/elasticslide.less b/style/elasticslide.less index bc76a3f5..d9c2fead 100644 --- a/style/elasticslide.less +++ b/style/elasticslide.less @@ -10,10 +10,13 @@ overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; - scroll-snap-stop: always; -ms-overflow-style: none; scrollbar-width: none; + .zoomed &{ + overflow-y: hidden; + } + &::-webkit-scrollbar { display: none; } @@ -22,6 +25,7 @@ display: block; position: relative; scroll-snap-align: center; + scroll-snap-stop: always; } } } \ No newline at end of file -- 2.39.5