From 6f82ea29b98e8dc2fd5ceaf37e7fb7b2f6b0dc29 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 8 Aug 2025 18:26:37 +0200
Subject: [PATCH] wip #7489 @5

---
 _index.html                                 |  1 +
 js/libs/fluidbook/fluidbook.elasticslide.js | 66 +++++++++++++++++++++
 js/libs/fluidbook/fluidbook.js              | 13 +++-
 js/libs/fluidbook/fluidbook.touch.js        |  3 -
 style/elasticslide.less                     | 15 +++++
 style/fluidbook.less                        |  1 +
 6 files changed, 94 insertions(+), 5 deletions(-)
 create mode 100644 js/libs/fluidbook/fluidbook.elasticslide.js
 create mode 100644 style/elasticslide.less

diff --git a/_index.html b/_index.html
index 509fc7b0..e9fa4c86 100644
--- a/_index.html
+++ b/_index.html
@@ -96,6 +96,7 @@
                         <div class="right"></div>
                     </div>
                 </div>
+                <div id="elasticpages"></div>
             </div>
         </div>
     </div>
diff --git a/js/libs/fluidbook/fluidbook.elasticslide.js b/js/libs/fluidbook/fluidbook.elasticslide.js
new file mode 100644
index 00000000..18b6c46f
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.elasticslide.js
@@ -0,0 +1,66 @@
+function FluidbookElasticSlide(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.init();
+}
+
+FluidbookElasticSlide.prototype = {
+    init: function () {
+        let $this = this;
+        if (this.isEnabled()) {
+            this.initPages();
+            $(this.fluidbook).on('fluidbook.orientationchange', function () {
+                $this.checkActive();
+            });
+            this.checkActive();
+            $(this.fluidbook).on('fluidbook.resize', function (e, data) {
+                $this.resize(data);
+            });
+        }
+    },
+
+    initPages: function () {
+        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);
+        }
+        $("#elasticpages").append(h);
+    },
+
+    checkActive: function () {
+        if (this.isActive()) {
+            this.switchToElastic();
+        } else {
+            this.switchToNormal();
+        }
+    },
+
+    switchToElastic: function () {
+        $('#elasticpages').show();
+        $("#pages").hide();
+    },
+
+    switchToNormal: function () {
+        $('#elasticpages').hide();
+        $("#pages").show();
+    },
+
+    isEnabled: function () {
+        return this.fluidbook.settings.slideTransitionsElastic == '1';
+    },
+    isActive: function () {
+        return true || (this.isEnabled() && this.fluidbook.displayOnePage);
+    },
+    preloadPage: function (page) {
+
+    },
+    resize: function (data) {
+
+        let w = parseFloat($("#fluidbook").css('width'));
+        let h = w / this.fluidbook.pageRatio;
+        $("#elasticpages .scrollholder").css('height', h * this.fluidbook.settings.pages);
+        $("#elasticpages .page").css({height: h});
+    },
+
+};
\ No newline at end of file
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 8e6429fc..b1170333 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -38,6 +38,7 @@ Fluidbook.prototype = {
         }
 
         this.initSettings(settings);
+        this.pageRatio = this.settings.width / this.settings.height;
         this.secure = new FluidbookSecure(this);
 
         var $this = this;
@@ -87,6 +88,7 @@ Fluidbook.prototype = {
         this.cache = new FluidbookCache(this);
         this.service = new FluidbookService(this, this.settings.id);
         this.loader = new FluidbookLoader(this);
+
         if (!this.mobilefirst.enabled) {
             this.slider = new FluidbookSlider(this);
         }
@@ -169,6 +171,7 @@ Fluidbook.prototype = {
         this.interface = new FluidbookInterface(this);
         this.resize = new FluidbookResize(this);
         this.pagetransitions = new FluidbookPageTransition(this);
+        this.elasticslide = new FluidbookElasticSlide(this);
 
         this.stats = window.stats;
         this.stats.setup(this);
@@ -338,8 +341,14 @@ Fluidbook.prototype = {
             return;
         }
         $(doublePage).find('.' + position).remove();
-        var page = '<div class="page ' + position + '" id="page_' + 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>';
-        $(doublePage).append(page);
+        $(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>';
     },
 
     hidePage: function (position) {
diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js
index 5938a3cb..1b272d6f 100644
--- a/js/libs/fluidbook/fluidbook.touch.js
+++ b/js/libs/fluidbook/fluidbook.touch.js
@@ -366,7 +366,4 @@ FluidbookTouch.prototype = {
         this.fluidbook.zoom.setOrigin(ox, oy, true);
     },
 
-    elasticSlide: function () {
-        return this.fluidbook.settings.slideTransitionsElastic == '1' && ['slide', 'portrait', 'slidefullwidth'].indexOf(this.fluidbook.pagetransitions.transitionType()) >= 0;
-    }
 };
\ No newline at end of file
diff --git a/style/elasticslide.less b/style/elasticslide.less
new file mode 100644
index 00000000..088cb096
--- /dev/null
+++ b/style/elasticslide.less
@@ -0,0 +1,15 @@
+#elasticpages {
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
+
+  .scrollholder {
+    position: relative;
+    width: 100%;
+
+    .page {
+      display: block;
+      position: relative;
+    }
+  }
+}
\ No newline at end of file
diff --git a/style/fluidbook.less b/style/fluidbook.less
index b5e48567..b7047d23 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2555,3 +2555,4 @@ body > input {
 @import "notes.less";
 @import "cart.less";
 @import "audioplayer.less";
+@import "elasticslide.less";
\ No newline at end of file
-- 
2.39.5