From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 20 Aug 2025 16:27:40 +0000 (+0200)
Subject: wip #7489 @21
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b0a30c604a568f24ec7b63fd9b1e9f4fe96d14f4;p=fluidbook-html5.git

wip #7489 @21
---

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('<img src="data/thumbnails/p' + page + '.jpg" alt=""/>');
+        if ($(p).find('.links').length === 0) {
+            p.append('<div class="links" />');
+        }
+        return p;
+    },
+
     initPages: function () {
+        let $this = this;
         let h = $('<div class="scrollholder"></div>');
         for (let i = 1; i <= this.fluidbook.settings.pages; i++) {
-            let p = $(this.fluidbook.createPage(i, 'epage_'));
-            p.find('.background').append('<img src="data/thumbnails/p' + i + '.jpg" alt=""/>');
-            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 '<div class="page ' + position + '" id="' + idprexif + pageNr + '" data-page="' + pageNr + '"><div class="background" page="' + pageNr + '"></div><div class="ctlinks" data-blendmode="normal"></div><div class="texts" highlight=""></div><div class="clinks" data-blendmode="normal"></div><div class="shade"></div></div>';
+
+        let id = idprexif + pageNr;
+        let c = $('#' + id);
+        if (c.length === 0) {
+            c = $('<div class="page ' + position + '" id="' + id + '" data-page="' + pageNr + '"></div>');
+        }
+
+        return $(c).html('<div class="background" page="' + pageNr + '"></div>' +
+            '<div class="ctlinks" data-blendmode="normal"></div>' +
+            '<div class="texts" highlight=""></div>' +
+            '<div class="clinks" data-blendmode="normal"></div>' +
+            '<div class="links"></div>'+
+            '<div class="shade"></div>');
     },
 
     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