From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 25 Aug 2025 17:14:10 +0000 (+0200)
Subject: wip #7489 @21
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=125075f6bab555ec1a021996f7cae6aa5f76d7d9;p=fluidbook-html5.git

wip #7489 @21
---

diff --git a/_index.html b/_index.html
index e9fa4c86..46240f49 100644
--- a/_index.html
+++ b/_index.html
@@ -90,7 +90,7 @@
                 <div id="pages" class="double">
                     <div id="currentDoublePage" class="doublePage" aria-hidden="true"></div>
                     <div id="searchHighlights" aria-hidden="true"></div>
-                    <div id="links"></div>
+                    <div id="links" class="links"></div>
                     <div id="shade" aria-hidden="true">
                         <div class="left"></div>
                         <div class="right"></div>
diff --git a/js/libs/fluidbook/fluidbook.elasticslide.js b/js/libs/fluidbook/fluidbook.elasticslide.js
index db452539..2cea1d0c 100644
--- a/js/libs/fluidbook/fluidbook.elasticslide.js
+++ b/js/libs/fluidbook/fluidbook.elasticslide.js
@@ -40,28 +40,33 @@ FluidbookElasticSlide.prototype = {
         $("#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;
-            }
+            $this.scrolling();
+        });
+    },
+
+    scrolling: function () {
+        let $this = this;
+        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();
-                }
+        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($this.scrollingPage);
             }
-        });
+        }
     },
 
     checkActive: function () {
@@ -73,13 +78,11 @@ FluidbookElasticSlide.prototype = {
     },
 
     switchToElastic: function () {
-        $('#elasticpages').show();
-        $("#pages").hide();
+        $("body").addClass('elastic');
     },
 
     switchToNormal: function () {
-        $('#elasticpages').hide();
-        $("#pages").show();
+        $("body").removeClass('elastic');
     },
 
     isEnabled: function () {
@@ -87,7 +90,7 @@ FluidbookElasticSlide.prototype = {
     },
 
     isActive: function () {
-        return true || (this.isEnabled() && this.fluidbook.displayOnePage);
+        return (this.isEnabled() && this.fluidbook.displayOnePage);
     },
 
     setCurrentPage: function (page) {
@@ -98,14 +101,28 @@ FluidbookElasticSlide.prototype = {
         this.ignoreScroll = true;
         gsap.to(this.scrollHolder, {
             duration: 0.5, scrollTo: this.pageHeight * (page - 1), onComplete: function () {
-                $this.afterTransition();
+                $this.afterTransition(page);
                 $this.ignoreScroll = false;
             }
         });
     },
 
-    afterTransition: function () {
-        this.fluidbook.links.initLinks();
+    afterTransition: function (page) {
+        if (page === undefined) {
+            page = this.fluidbook.currentPage;
+        } else {
+            this.fluidbook.currentPage = page;
+        }
+        let $this = this;
+        $("#elasticpages .scrollholder .page.current:not(#epage_" + page + ")").removeClass('current');
+        $("#epage_" + page).addClass('current');
+        this.fluidbook.loader.loadPage(page, false, false, function () {
+            $this.fluidbook.loader.loadPage(page + 1, false, false, function () {
+                $this.fluidbook.loader.loadPage(page - 1, false, false, function () {
+                });
+            })
+        });
+        this.fluidbook.links.initLinks(page);
     },
 
     resize: function (data) {
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 909678a0..b711dc6f 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -355,12 +355,7 @@ Fluidbook.prototype = {
             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>');
+        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) {
@@ -546,6 +541,7 @@ Fluidbook.prototype = {
                 $($this).trigger('fluidbook.page.navigation', [page]);
                 $($this).trigger('changePage', [page]);
             }
+
             if (this.landingpage !== undefined) {
                 this.landingpage.hide();
             }
@@ -841,11 +837,17 @@ Fluidbook.prototype = {
         var rand = Math.round(Math.random() * 100000);
         this.waiters.push(rand);
         return rand;
-    }, waiterActive: function (id) {
+    },
+
+    waiterActive: function (id) {
         return this.waiters.indexOf(id) > -1;
-    }, resetWaiters: function () {
+    },
+
+    resetWaiters: function () {
         this.waiters = [];
-    }, physicalToVirtual: function (page) {
+    },
+
+    physicalToVirtual: function (page) {
         return this.settings.numerotation[page - 1];
     },
 
diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 518fdddf..8e3482c3 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -163,13 +163,13 @@ FluidbookLinks.prototype = {
             return true;
         });
 
-        $(document).on('mouseenter', '#links a.image_rollover', function () {
+        $(document).on('mouseenter', '.links a.image_rollover', function () {
             var id = $(this).closest('[data-id]').data('id');
             var iid = 'i_' + id;
             $this.rolloverEnter(iid);
         });
 
-        $(document).on('mouseleave', '#links a.image_rollover', function () {
+        $(document).on('mouseleave', '.links a.image_rollover', function () {
             var id = $(this).closest('[data-id]').data('id');
             var iid = 'i_' + id;
             $this.rolloverLeave(iid);
@@ -650,9 +650,9 @@ FluidbookLinks.prototype = {
 
     linksContainer: function (pageNr) {
         let links;
-        if(this.fluidbook.elasticslide.isActive()){
-            links=$("#epage_"+pageNr +" .links");
-        }else {
+        if (this.fluidbook.elasticslide.isActive()) {
+            links = $("#epage_" + pageNr + " .links");
+        } else {
             links = $("#links").removeClass('right');
         }
         $(links).html('').show();
@@ -693,11 +693,15 @@ FluidbookLinks.prototype = {
 
         $("#background .links .bookmark").remove();
 
-        if (leftLinks) {
-            this.setLinksInContainer(leftPage, 'left');
-        }
-        if (rightLinks) {
-            this.setLinksInContainer(rightPage, 'right');
+        if (this.fluidbook.elasticslide.isActive()) {
+            this.setLinksInContainer(pageNr, false);
+        } else {
+            if (leftLinks) {
+                this.setLinksInContainer(leftPage, 'left');
+            }
+            if (rightLinks) {
+                this.setLinksInContainer(rightPage, 'right');
+            }
         }
 
         if (links.find('.link.multimedia iframe').length > 0) {
@@ -722,7 +726,7 @@ FluidbookLinks.prototype = {
             }, $(this).data('delay') * 1000);
         });
 
-        this.animateLinks();
+        this.animateLinks(this.fluidbook.elasticslide.isActive() ? $('#elasticpages .page.current .links') : $(document));
         $this.initAnimatedContentsLinks();
 
         setTimeout(function () {
@@ -766,8 +770,15 @@ FluidbookLinks.prototype = {
     },
 
     setLinksInContainer: function (page, side) {
-        var links = $("#links");
-        links.append('<div class="' + side + 'Container container"><div class="linksHolder"></div></div>');
+        let links;
+        if (this.fluidbook.elasticslide.isActive()) {
+            links = this.fluidbook.loader._pageContainer(page, '.links');
+        } else {
+            links = $("#links");
+        }
+        side = (side ? side : 'elasticSlide');
+
+        links.html('<div class="' + side + 'Container container"><div class="linksHolder"></div></div>');
         var container = links.find('.' + side + 'Container');
         var llinks = this.fluidbook.loader.handleExtension(this.fluidbook.settings.links[page]);
         if (llinks !== '') {
@@ -786,13 +797,13 @@ FluidbookLinks.prototype = {
         }
     },
 
-    animateLinks: function () {
+    animateLinks: function (container) {
         if (this.fluidbook.settings.linkBlinkTime == 0 || this.fluidbook.settings.linkBlinkRepetition == 0 || !this.fluidbook.settings.mobileLinksRevealAnim || this.fluidbook.menu.viewMode()) {
             return;
         }
         var $this = this;
         setTimeout(function () {
-            $this.doAnimateLinks();
+            $this.doAnimateLinks(container);
         }, 650);
     },
 
@@ -802,10 +813,11 @@ FluidbookLinks.prototype = {
         }
         var $this = this;
         if (container === undefined) {
-            container = $("#currentDoublePage,#links");
+            container = $("#currentDoublePage,.page.current");
         }
-
-        $(container).find('[data-animations]').each(function () {
+        let linksToAnimate = $(container).find('[data-animations]');
+        console.log(linksToAnimate);
+        linksToAnimate.each(function () {
             $this.animateContentLink($(this), true);
         });
     },
@@ -851,20 +863,20 @@ FluidbookLinks.prototype = {
             return;
         }
 
+        console.log(container);
+
         var animateBookmarks = (this.fluidbook.settings.bookmarkBlinkOnPageChange == true);
 
         var $this = this;
         var links = $(container).find(".link a[data-animation]");
-
         if (!this.fluidbook.mobilefirst.enabled) {
             $(links).each(function () {
                 $this.animateLink(this, additionalDelay);
             });
         }
 
-
         if (animateBookmarks) {
-            this._blink($("#links .bookmark:not([data-enabled])"));
+            this._blink($(".links").find("bookmark:not([data-enabled])"));
         }
         this.updateAttachedLinks();
     },
@@ -986,7 +998,7 @@ FluidbookLinks.prototype = {
         var $this = this;
 
         if (this.fluidbook.slideshow !== undefined) {
-            $("#links .fb-slideshow, #currentDoublePage .fb-slideshow").each(function () {
+            $("#links .fb-slideshow, .page .fb-slideshow, #currentDoublePage .fb-slideshow").each(function () {
                 if (!$this.isDelayed(this)) {
                     $this.fluidbook.slideshow.initInlineSlideshow(this);
                 }
@@ -995,9 +1007,10 @@ FluidbookLinks.prototype = {
         }
     },
 
+
     resize: function () {
         var $this = this;
-        $("#links .link.iframe").each(function () {
+        $('.links .link.iframe').each(function () {
             var iframe = $(this).find("iframe");
             var scale = $(iframe).data('scale');
             var w = $(this).outerWidth();
diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 00fcdcab..8b1db3c5 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -374,61 +374,74 @@ FluidbookLoader.prototype = {
         }
     },
 
-    loadPage: function (pageNr, doublePage, position, callback) {
-
-        if (pageNr <= 0 || pageNr > this.fluidbook.settings.pages) {
-            callback();
-            return;
+    loadPage: function (pageNr, container, position, callback) {
+        if (!$(container).length == 0) {
+            container = false;
         }
-
-        // The page is already here.
-        if ($(doublePage).find('.' + position + '#page_' + pageNr).length > 0) {
+        if (position !== 'left' && position !== 'right') {
+            position = false;
+        }
+        pageNr = parseInt(pageNr);
+        if (pageNr <= 0 || pageNr > this.fluidbook.settings.pages) {
             callback();
             return;
         }
 
-        // Si une page de gauche existe déjà dans la double page, on la retire
-        $(doublePage).find('.' + position).each(function () {
-            if ($(this).attr('id') != 'page_' + pageNr || pageNr == 0) {
-                $(this).remove();
+        if (container) {
+            // The page is already here.
+            if ($(container).find('.' + position + '#page_' + pageNr).length > 0) {
+                callback();
+                return;
             }
-        })
 
-        var page;
+            // Si une page de gauche existe déjà dans la double page, on la retire
+            $(container).find('.' + position).each(function () {
+                if ($(this).attr('id') != 'page_' + pageNr || pageNr == 0) {
+                    $(this).remove();
+                }
+            })
+        }
+        var page = this._pageContainer(pageNr);
         // Si la page existe déjà, on la place à la bonne position et on l'affiche
-        if ($("#page_" + pageNr).length > 0) {
-            page = $("#page_" + pageNr);
-            if ($(doublePage).find("#page_" + pageNr).length === 0) {
-                $(doublePage).append(page);
-            }
-            if (!$(page).hasClass(position)) {
-                if (position === 'left') {
-                    $(page).removeClass('right');
-                } else {
-                    $(page).removeClass('left');
+        if (container) {
+            if ($(page).length > 0) {
+
+                if ($(container).find("#page_" + pageNr).length === 0) {
+                    $(container).append(page);
                 }
-                $(page).addClass(position);
-            }
-            if (!$(page).is(':visible')) {
-                $(page).show();
+                if (!$(page).hasClass(position)) {
+                    if (position === 'left') {
+                        $(page).removeClass('right');
+                    } else {
+                        $(page).removeClass('left');
+                    }
+                    $(page).addClass(position);
+                }
+
+                if (!$(page).is(':visible')) {
+                    $(page).show();
+                }
+
+                this.addCLinks(pageNr);
+                callback();
+                return;
             }
 
-            this.addCLinks(pageNr);
-            callback();
-            return;
+
+            this.fluidbook.initPage(pageNr, container, position);
+            $(container).append(page);
+            $(page).addClass(position);
         }
 
-        this.fluidbook.initPage(pageNr, doublePage, position);
-        var version = this.getVersionToLoad(parseInt(pageNr));
-        page = $("#page_" + pageNr);
-        $(doublePage).append(page);
+
         this.renderPDFTextsCanvas();
         this.renderTextsCanvas();
         $(page).show();
-        $(page).addClass(position);
         var $this = this;
         this.loadDatas(pageNr, function () {
-            $(page).addClass(position);
+            if (container) {
+                $(page).addClass(position);
+            }
             $this.addCLinks(pageNr);
             $this.fluidbook.resize.resizeLinks();
             callback();
@@ -437,7 +450,7 @@ FluidbookLoader.prototype = {
 
     addCLinks: function (pageNr) {
         var $this = this;
-        var page = $("#page_" + pageNr);
+        var page = this._pageContainer(pageNr);
         $.each(['clinks', 'ctlinks'], function (k, cont) {
             var normal = $(page).children('.' + cont + '[data-blendmode="normal"]');
             $.each($this.fluidbook.settings[cont][pageNr], function (blendmode, links) {
@@ -507,9 +520,8 @@ FluidbookLoader.prototype = {
         var $this = this;
         var back = this._pageContainer(page, '.background');
         this._loadBackground(page, function () {
-            $(back).html('');
             $(back).addClass('r' + $this.fluidbook.support.resolution);
-            $(back).append($this.backgrounds[page]);
+            $(back).html($this.backgrounds[page]);
             callback();
         });
     },
diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 6ed1a9a8..0974d4e8 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -378,7 +378,7 @@ FluidbookResize.prototype = {
     },
 
     resizeLinks: function () {
-        $('#links .container,.clinks,.ctlinks,#searchHighlights').css({
+        $('#links .container, .page .links,.clinks,.ctlinks,#searchHighlights').css({
             transform: 'scale(' + this.bookScale + ')',
         });
     },
diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js
index 1b272d6f..5d9cdf5c 100644
--- a/js/libs/fluidbook/fluidbook.touch.js
+++ b/js/libs/fluidbook/fluidbook.touch.js
@@ -221,7 +221,7 @@ FluidbookTouch.prototype = {
         if ($(".mview:visible").length > 0) {
             return false;
         }
-        if (this.fluidbook.zoom.zoom === 1) {
+        if (!this.fluidbook.elasticslide.isActive() && this.fluidbook.zoom.zoom === 1) {
             if (this.startX === -1 || this.startY === -1 || type === 'start') {
                 this.startX = e.center.x;
                 this.startY = e.center.y;
diff --git a/style/elasticslide.less b/style/elasticslide.less
index d9c2fead..ce35170a 100644
--- a/style/elasticslide.less
+++ b/style/elasticslide.less
@@ -1,6 +1,15 @@
+.elastic #pages {
+  display: none;
+}
+
 #elasticpages {
   height: 100%;
   width: 100%;
+  display: none;
+
+  .elastic & {
+    display: block;
+  }
 
 
   .scrollholder {
@@ -13,7 +22,7 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
 
-    .zoomed &{
+    .zoomed & {
       overflow-y: hidden;
     }
 
diff --git a/style/interface.less b/style/interface.less
index 74d58813..7823f89a 100644
--- a/style/interface.less
+++ b/style/interface.less
@@ -17,19 +17,23 @@
   color: @arrows-color;
   background-color: @arrows-background;
 
+  .elastic & {
+    display: none !important;
+  }
+
   a {
     position: absolute;
     left: 0;
     width: 100%;
 
-    &:hover{
+    &:hover {
       svg {
         transform: translateX(5px);
       }
     }
 
-    &:focus{
-      .keyboard-navigating &{
+    &:focus {
+      .keyboard-navigating & {
         svg {
           transform: translateX(5px);
         }
@@ -75,7 +79,7 @@
       }
     }
 
-    &:focus{
+    &:focus {
       .keyboard-navigating & {
         svg {
           transform: translateX(-5px);
@@ -132,7 +136,6 @@
 }
 
 
-
 .interfacecomponent {
   transition: opacity 100ms, top 100ms;
   opacity: 1;
@@ -199,7 +202,7 @@
     color: inherit;
     font-size: 1em;
     cursor: pointer;
-    border:0;
+    border: 0;
     background-color: transparent;
   }
 
diff --git a/style/links.less b/style/links.less
index 3a8976c5..0c6ca150 100644
--- a/style/links.less
+++ b/style/links.less
@@ -1,11 +1,30 @@
 /* Links */
 
-#links {
+#links, .page .links {
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   z-index: 4;
   background-color: rgba(0, 0, 0, 0.001);
+
+  .link {
+    position: absolute;
+    cursor: auto;
+  }
+
+  .nonlinkarea {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: block;
+
+    .zoom-disabled & {
+      cursor: auto !important;
+      pointer-events: none;
+    }
+  }
 }
 
 #links .leftContainer {
@@ -16,7 +35,7 @@
   z-index: 0;
 }
 
-#links, #links .container, .clinks, .ctlinks, #searchHighlights {
+#links, #links .container, .page.links, .page .links .container, .clinks, .ctlinks, #searchHighlights {
   transform-origin: 0 0 0;
 }
 
@@ -36,11 +55,6 @@
   }
 }
 
-#links .link {
-  position: absolute;
-  cursor: auto;
-}
-
 .linkshowclose {
   position: absolute;
   display: block;
@@ -297,19 +311,6 @@
   }
 }
 
-#links .nonlinkarea {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  display: block;
-
-  .zoom-disabled & {
-    cursor: auto !important;
-    pointer-events: none;
-  }
-}
 
 html.mobile [data-visibility-os="desktop"], html.desktop [data-visibility-os="mobile"] {
   display: none !important;
diff --git a/style/slider.less b/style/slider.less
index f635a0ad..d7126d32 100644
--- a/style/slider.less
+++ b/style/slider.less
@@ -30,6 +30,11 @@
     touch-action: none;
   }
 
+  .elastic & {
+    display: none;
+  }
+
+
   position: absolute;
   height: 6px;
   bottom: 20px;