wip #4710 @2

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 8f33421c376329b7c5fece4c56c16409b7fc7b06..43307fa5a6ef2f62a2029aaac11d30fd1e2e0f85 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -451,6 +451,8 @@ FluidbookLinks.prototype = {
         }
 
         links.prepend('<div class="nonlinkarea"></div>');
+
+        this.fluidbook.resize.resizeLinks();
         var $this = this;
 
         this.initLottieAnimations();

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 03ed841649fc4d6804de5861cf8aa1a795e80945..6aab0a324ab8ad0212f8f829c65cf895675851ee 100644 (file)
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -341,7 +341,8 @@ FluidbookLoader.prototype = {
         var $this = this;
         this.loadDatas(pageNr, function () {
             $(page).addClass(position);
-            $this.addCLinks(pageNr)
+            $this.addCLinks(pageNr);
+            $this.fluidbook.resize.resizeLinks();
             callback();
         });
     },
@@ -703,9 +704,9 @@ FluidbookLoader.prototype = {
             }
 
             var page = $(this).data('page');
-            var dim=$this.getPageDimensions(page);
+            var dim = $this.getPageDimensions(page);
 
-            var w =  dim.width* z;
+            var w = dim.width * z;
             var h = dim.height * z;
             var wz = dim.width * mz;
             var hz = dim.height * mz;

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 256622a92cd55697528bebcb65575fbda7bbe5f2..f16301fe1fb3c7f438d60efc3939ac42649942e5 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -15,6 +15,18 @@ function FluidbookResize(fluidbook) {
     this.navScale = 1;
     this.ww = $(window).width();
     this.hh = $(window).height();
+
+    this.aw = 0;
+    this.ah = 0;
+    this.fw = 0;
+    this.fh = 0;
+    this.fww = 0;
+    this.fhh = 0;
+    this.marginTop = 0;
+    this.marginBottom = 0;
+    this.marginLeft = 0;
+    this.marginRight = 0;
+
     this.init();
     this.navresizeTimeout = 0;
 }
@@ -149,76 +161,83 @@ FluidbookResize.prototype = {
 
         if (this.fluidbook.pad.enabled) {
             extraX = 0;
-            marginTop = 0;
-            marginBottom = 0;
-            marginLeft = 0;
-            marginRight = 0;
+            this.marginTop = 0;
+            this.marginBottom = 0;
+            this.marginLeft = 0;
+            this.marginRight = 0;
         } else {
             var extraX = parseInt(this.fluidbook.settings.mobileExtraXSpace);
             if (isNaN(extraX)) {
                 extraX = 0;
             }
 
-            marginTop = (parseInt(this.fluidbook.settings.menuHeight) * headerScale) + (this.margintop * interfaceScale);
-            marginBottom = (10 + this.marginbottom) * interfaceScale;
-            marginLeft = (this.marginleft + parseInt(extraX)) * interfaceScale;
-            marginRight = (this.marginright + parseInt(extraX)) * interfaceScale;
+            this.marginTop = (parseInt(this.fluidbook.settings.menuHeight) * headerScale) + (this.margintop * interfaceScale);
+            this.marginBottom = (10 + this.marginbottom) * interfaceScale;
+            this.marginLeft = (this.marginleft + parseInt(extraX)) * interfaceScale;
+            this.marginRight = (this.marginright + parseInt(extraX)) * interfaceScale;
         }
 
-        var aw = this.ww - marginLeft - marginRight;
-        var ah = this.hh - marginTop - marginBottom;
-        var fhh = this.fluidbook.settings.height;
-        var fww = this.fluidbook.settings.width;
+        this.aw = this.ww - this.marginLeft - this.marginRight;
+        this.ah = this.hh - this.marginTop - this.marginBottom;
+        this.fhh = this.fluidbook.settings.height;
+        this.fww = this.fluidbook.settings.width;
         if (this.orientation === 'landscape') {
-            fww *= 2;
+            this.fww *= 2;
         }
 
-        this.bookScale = Math.min(aw / fww, ah / fhh);
-        var origin = ['50%', '50%'];
+        this.bookScale = Math.min(this.aw / this.fww, this.ah / this.fhh);
+        this.origin = ['50%', '50%'];
         if (this.fluidbook.mobilefirst.enabled) {
-            this.bookScale = this.fluidbook.mobilefirst.getBookScale(aw);
-            origin[1] = '0%';
+            this.bookScale = this.fluidbook.mobilefirst.getBookScale(this.aw);
+            this.origin[1] = '0%';
         }
 
         try {
             this.fluidbook.loader.renderTextsCanvas();
-        }catch (e){
+        } catch (e) {
 
         }
 
-        var tabsScale = this.fluidbook.tabs.guessBookScale(this.bookScale, aw, fww);
+        var tabsScale = this.fluidbook.tabs.guessBookScale(this.bookScale, this.aw, this.fww);
         this.bookScale *= tabsScale;
 
-        var fw = this.bookScale * fww;
-        var fh = this.bookScale * fhh;
-        $("#fluidbook,#shadow").transform({
-            scale: [this.bookScale, this.bookScale],
-            origin: origin
-        });
+
+        this.resizeBook();
+
+        this.fw = this.bookScale * this.fww;
+        this.fh = this.bookScale * this.fhh;
+
+        console.log(this.fw, this.fh);
+
+        // $("#fluidbook,#shadow").transform({
+        //     scale: [this.bookScale, this.bookScale],
+        //     origin: origin
+        // });
 
         // Hack to fix #2552
         if (this.fluidbook.support.iOS && this.fluidbook.pagetransitions.getTransitionType() === 'flip3d') {
-            $('#fluidbook').css('transform', 'translate3d(0,0,-1px) scale(' + this.bookScale + ',' + this.bookScale + ')');
+            // $('#fluidbook').css('transform', 'translate3d(0,0,-1px) scale(' + this.bookScale + ',' + this.bookScale + ')');
         }
 
-        var top = marginTop + (ah - fhh) / 2;
+        // var top = marginTop + (ah - fhh) / 2;
+        //
+        // var left = marginLeft + (aw - fww) / 2;
+        // if (this.fluidbook.mobilefirst.enabled) {
+        //     top = marginTop;
+        // }
+        // $("#fluidbook,#shadow").css({
+        //     top: top,
+        //     left: left,
+        //     width: fww,
+        //     height: fhh
+        // });
 
-        var left = marginLeft + (aw - fww) / 2;
-        if (this.fluidbook.mobilefirst.enabled) {
-            top = marginTop;
-        }
-        $("#fluidbook,#shadow").css({
-            top: top,
-            left: left,
-            width: fww,
-            height: fhh
-        });
 
         if (this.fluidbook.mobilefirst.enabled) {
             this.fluidbook.mobilefirst.resize();
         }
 
-        this.centerOffset = fw / 4;
+        this.centerOffset = this.fw / 4;
         this.fluidbook.pagetransitions.centerBook();
 
         if ($("#pagesnumbers").data('size') == null) {
@@ -268,8 +287,8 @@ FluidbookResize.prototype = {
             backgroundSize: '100% ' + headerHeight + 'px'
         });
 
-        this.refw = fw;
-        this.refh = fh;
+        this.refw = this.fw;
+        this.refh = this.fh;
         this.updateFluidbookRect();
 
         if (this.fluidbook.help) {
@@ -329,7 +348,6 @@ FluidbookResize.prototype = {
 
         };
 
-
         if (this.fluidbook.interface.arrowsEnabled()) {
             try {
                 data.arrowLeftRect = $("#prev-arrows").get(0).getBoundingClientRect();
@@ -342,6 +360,60 @@ FluidbookResize.prototype = {
 
     },
 
+    resizeBook: function () {
+        var f = $('#fluidbook');
+        $(f).css({width: this.fw, height: this.fh, top: this._top(this.fh), left: this._left(this.fw)});
+
+        this.resizePages();
+        this.resizeShadow();
+        this.resizeEdges();
+    },
+
+    resizePages: function () {
+        var p = $("#pages");
+        var css = {width: '100%', height: '100%'};
+
+        $(p).css(css);
+        $(p).find('.doublePage').css(css);
+
+        this.resizeLinks();
+    },
+
+    resizeLinks: function () {
+        $('#links,.clinks,.ctlinks,#searchHighlights').css({
+            transform: 'scale(' + this.bookScale + ')',
+            transformOrigin: '0 0'
+        });
+    },
+
+    resizeEdges: function () {
+        $("#edges").css({
+            transform: 'scale(' + this.bookScale + ')',
+            transformOrigin: '0 0'
+        });
+    },
+
+    _left: function (w) {
+        return this.marginLeft + (this.aw - w) / 2;
+    },
+
+    _top: function (h) {
+        if (this.fluidbook.mobilefirst.enabled) {
+            return this.marginTop;
+        }
+        return this.marginTop + (this.ah - h) / 2;
+    },
+
+    resizeShadow: function () {
+        $("#shadow").transform({
+            scale: [this.bookScale, this.bookScale],
+            origin: this.origin,
+        }).css({
+            left: this._left(this.fww + (24 * this.bookScale)),
+            top: this._top(this.fhh),
+        });
+    },
+
     updateFluidbookRect: function () {
         this.fluidbookrect = $("#fluidbook").get(0).getBoundingClientRect();
     },
@@ -365,7 +437,7 @@ FluidbookResize.prototype = {
 
     resizeAfterSearch: function () {
         var rect = $("#horizontalNav").get(0).getBoundingClientRect();
-        var inverted=this.fluidbook._boolean(this.fluidbook.settings.invertMenuPosition)
+        var inverted = this.fluidbook._boolean(this.fluidbook.settings.invertMenuPosition)
         if ((this.fluidbook.l10n.ltr && !inverted) || (this.fluidbook.l10n.rtl && inverted)) {
             $("#afterSearch").css({left: rect.left + rect.width, right: 'auto'});
         } else {
@@ -379,7 +451,7 @@ FluidbookResize.prototype = {
         }
         var logo = document.getElementById("logo").getBoundingClientRect();
         var fluidbook = document.getElementById("fluidbook").getBoundingClientRect();
-        var inverted=this.fluidbook._boolean(this.fluidbook.settings.invertMenuPosition);
+        var inverted = this.fluidbook._boolean(this.fluidbook.settings.invertMenuPosition);
 
         var overlapY = logo.bottom > fluidbook.top;
         var overlapX;

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 782343fc44e60209dac4c9a0a8e291ef77b008c1..381a8d522d606714bcdfeac18d8ba01d769796cf 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -370,12 +370,8 @@ body, html {
   background-color: @pages-background;
 
   img {
-    width: unit(@book-page-correct-width, px);
-    height: unit(@book-page-correct-height, px);
-
-    .mobilefirst & {
-      height: 100%;
-    }
+    width: 100%;
+    height: 100%;
   }
 }
 
@@ -384,9 +380,8 @@ body, html {
 }
 
 .texts {
-  .mobilefirst & {
-    height: 100%;
-  }
+  width: 100%;
+  height: 100%;
 
   img, object, canvas {
     position: absolute;
@@ -419,23 +414,35 @@ body, html {
 /* Espaces forcés */
 
 .portrait #pages, .portrait .doublePage.page, .page, .doublePage._3d {
-  width: @book-page-width;
-  max-width: @book-page-width;
-  height: @book-page-height;
-  max-height: @book-page-height
+  width: 50%;
+  max-width: 50%;
+  height: 100%;
+  max-height: 100%;
 }
 
 @book-page-width-double: @book-page-width*2;
 
-.doublePage, #pages, #links, #searchHighlights {
+#links, #searchHighlights {
   width: @book-page-width-double;
   max-width: @book-page-width-double;
   height: @book-page-height;
   max-height: @book-page-height;
 
   .mobilefirst & {
-    width: @book-page-width;
-    max-width: @book-page-width;
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+.doublePage, #pages {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+
+  .mobilefirst & {
+    width: 100%;
+    max-width: 100%;
   }
 }
 
@@ -492,7 +499,7 @@ body, html {
 }
 
 .landscape .page.right {
-  left: @book-page-width
+  left: 50%
 }
 
 .page {