wait #3120 @4

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 7ef0cc682799975bee43ad8cb350bc14c04c99a5..4459ad4b78486f2bd6953cf0d4251059be63bfc8 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -179,6 +179,8 @@ FluidbookResize.prototype = {
             this.bookScale = this.fluidbook.mobilefirst.getBookScale(aw);
             origin[1] = '0%';
         }
+        
+        this.bookScale *= this.fluidbook.tabs.guessBookScale(this.bookScale, aw, fww);
 
         var fw = this.bookScale * fww;
         var fh = this.bookScale * fhh;

diff --git a/js/libs/fluidbook/fluidbook.tabs.js b/js/libs/fluidbook/fluidbook.tabs.js
index eb88da6b21124f413e05c8be09f5bae5fefec9df..98301532f6c81a2b0b2b444a3d54eae2f854e5e7 100644 (file)
--- a/js/libs/fluidbook/fluidbook.tabs.js
+++ b/js/libs/fluidbook/fluidbook.tabs.js
@@ -1,6 +1,12 @@
 function FluidbookTabs(fluidbook) {
     this.fluidbook = fluidbook;
+    this.hasSVGTabs = false;
     if (this.fluidbook.datas.svgTabs) {
+        this.hasSVGTabs = true;
+        this.svgLoaded = false;
+        this.cont;
+        this.visibility = {};
+        this.naturalDimensions = {width: 0, height: 0};
         this.init();
     } else if (this.hasTabs()) {
         this.initZip();
@@ -8,7 +14,6 @@ function FluidbookTabs(fluidbook) {
 }
 
 FluidbookTabs.prototype = {
-
     hasTabs: function () {
         return this.fluidbook.datas.tabsHTML5 !== '';
     },
@@ -17,18 +22,60 @@ FluidbookTabs.prototype = {
 
     },
 
+    checkVisibility: function (types) {
+        var res = true;
+        var $this = this;
+        $.each(types, function (k, type) {
+            if ($this.visibility[type] === false) {
+                res = false;
+                return false;
+            }
+        });
+        return res;
+    },
+
+    guessTabsWidth: function (bookScale) {
+        var fh = this.fluidbook.datas.height * bookScale;
+        var tabsScale = fh / this.naturalDimensions.height;
+        return this.linkWidth * tabsScale;
+    },
+
+    guessBookScale: function (bookScale, aw, fww) {
+        if (!this.hasSVGTabs || !this.svgLoaded) {
+            this.changeVisibility('priority', true);
+            return 1;
+        }
+
+        if (this.checkVisibility(['portrait'/*, 'firstpage', 'lastpage'*/]) === false) {
+            this.changeVisibility('priority', true);
+            return 1;
+        }
+
+        var tabsWidth = this.guessTabsWidth(bookScale);
+        console.log(tabsWidth);
+        var awt = aw - (tabsWidth * 2);
+        var scale = awt / fww;
+        var ratio = (scale / bookScale);
+        var reductionRatio = 1 - ratio;
+
+        if (reductionRatio > this.priority) {
+            this.changeVisibility('priority', false);
+            return 1;
+        }
+        this.changeVisibility('priority', true);
+
+        return Math.min(1, ratio);
+    },
+
     init: function () {
         if ($("#background .links").length === 0) {
             $("#background").append('<div class="links"></div>');
         }
-        $("#background .links").append('<div id="l_tabs" class="link tabslink multimedia" data-id="tabs"></div>');
+        this.setOptions();
+        $("#background .links").append('<div id="l_tabs" class="link tabslink multimedia ' + this.align + '" data-id="tabs"></div>');
         this.element = $("#l_tabs");
-        this.cont;
-        this.visibility = {};
-        this.naturalDimensions = {width: 0, height: 0};
-        this.image = 'tabs.svg';
 
-        this.setOptions();
+        this.addLinks(this.fluidbook.datas.tabsPages);
         this.initTabs();
     },
 
@@ -39,15 +86,16 @@ FluidbookTabs.prototype = {
         this.hideOnZoom = this.fluidbook.datas.tabsHideOnZoom;
         this.hideWhenOverlapingArrows = this.fluidbook.datas.tabsHideWhenOverlapingArrows;
         this.mode = 'side';
-        this.align = this.fluidbook.datas.tabsSide;
+        this.side = this.align = this.fluidbook.datas.tabsSide;
         this.margin = parseFloat(this.fluidbook.datas.tabsMargin);
         this.hideEdge = this.fluidbook.datas.tabsHideEdges;
         this.linkWidth = parseFloat(this.fluidbook.datas.tabsLinkWidth);
+        this.priority = parseFloat(this.fluidbook.datas.tabsPriority) / 100;
 
         this.sections = this.fluidbook.datas.tabsSections.map(function (x) {
             return parseInt(x);
         });
-        this.addLinks(this.fluidbook.datas.tabsPages);
+
     },
 
     addLinks: function (pages) {
@@ -82,7 +130,7 @@ FluidbookTabs.prototype = {
                     value--;
                 }
                 $this.links.push({
-                    css: {height: (100 / nbPages) + '%', top: (100 / nbPages * i) + '%', width: $this.linkWidth},
+                    css: {height: (100 / nbPages) + '%', top: (100 / nbPages * i) + '%'},
                     page: parseInt(value),
                     index: index,
                     id: 'o' + index
@@ -105,6 +153,7 @@ FluidbookTabs.prototype = {
             $this.naturalDimensions.height = Math.floor(parseFloat($(data).attr('height')));
             $this.svg = $this.cont.find('svg');
             $this.svg.addClass('tabsimg').css({height: '100%', width: 'auto'});
+            $this.svgLoaded = true;
             $this.createLinks();
             $this.initStandardEvents();
         }, 'text');
@@ -176,7 +225,7 @@ FluidbookTabs.prototype = {
 
     hideEdges: function (hide) {
         if (!hide) {
-            $("#edges .edge").css('visibility', 'visible');
+            $("#edges .edge, #shadow .shadow.side").css('visibility', 'visible');
             return;
         }
         if (this.hideEdge === undefined || this.hideEdge === 'none') {
@@ -193,9 +242,15 @@ FluidbookTabs.prototype = {
 
     createLinks: function () {
         var $this = this;
+
+        var commoncss = {};
+        var widthPct = (100 * (this.linkWidth / this.naturalDimensions.width)) + "%";
+        commoncss.width = widthPct;
+
         $(this.links).each(function (k, v) {
             var l = $('<a class="tablink" />');
             $this.cont.append(l);
+            l.css(commoncss);
             l.css(v.css);
             if (v.page) {
                 l.attr('href', '#/page/' + v.page);
@@ -230,7 +285,7 @@ FluidbookTabs.prototype = {
         if (this.hideOnPortrait) {
             this.visibility.portrait = true;
             $(this.fluidbook).on('fluidbook.resize.orientation', function (e, data) {
-                if (data.orientation == 'portrait') {
+                if (data.orientation === 'portrait') {
                     $this.changeVisibility('portrait', false);
                 } else {
                     $this.changeVisibility('portrait', true);
@@ -339,20 +394,5 @@ FluidbookTabs.prototype = {
 
         }
         this.cont.css(css);
-
-        if (this.hideWhenOverlapingArrows) {
-            try {
-                var bbox = this.svg.find('#o1').get(0).getBoundingClientRect();
-                if (this.align === 'left') {
-                    if (bbox.left < data.arrowLeftRect.right) {
-                        this.changeVisibility('arrows', false);
-                    } else {
-                        this.changeVisibility('arrows', true);
-                    }
-                }
-            } catch (e) {
-
-            }
-        }
     },
 };

diff --git a/style/fluidbook.less b/style/fluidbook.less
index cef30969e96afd12b336729743ce978992703b43..176dc01599e8bf38d967dedb19771d56eb6b0414 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2921,28 +2921,6 @@ body > input {
   }
 }
 
-.links .link.multimedia {
-  .tabs {
-    transition: opacity 400ms;
-    position: relative;
-
-    &.hide {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    .tablink {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      display: block;
-      background: none !important;
-    }
-  }
-}
-
 .inlineslideshow {
   width: 100%;
   height: 100%;

diff --git a/style/tabs.less b/style/tabs.less
index dd049ca8c4ca8919c1a78eff5039427185381525..5f490570282ad1564910ff2cd5aceebb38ba27ca 100644 (file)
--- a/style/tabs.less
+++ b/style/tabs.less
@@ -1,7 +1,41 @@
-#l_tabs {
+.links .link.multimedia#l_tabs {
   top: 0;
   left: 0;
   width: 100px;
   height: 100px;
   z-index: 5000;
+
+  .tablink {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: block;
+    background: none !important;
+  }
+
+  &.left {
+    .tablink {
+      right: 0;
+      left: auto;
+    }
+  }
+
+  &.right {
+    .tablink {
+      left: 0;
+      right: auto;
+    }
+  }
+
+  .tabs {
+    transition: opacity 400ms;
+    position: relative;
+
+    &.hide {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
 }
\ No newline at end of file