From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 16 May 2019 15:41:10 +0000 (+0200)
Subject: wait #2729 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ca61acacfd8aa0a7db9b9b105c3aaa3470c6a202;p=fluidbook-html5.git

wait #2729 @3
---

diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js
index 9774662c..7d6757c1 100644
--- a/js/libs/fluidbook/fluidbook.bookmarks.js
+++ b/js/libs/fluidbook/fluidbook.bookmarks.js
@@ -438,10 +438,10 @@ FluidbookBookmarks.prototype = {
 
         var contentClass = 'content';
         if (this.fluidbook.mobilefirst.enabled) {
-            contentClass += ' noscroll';
+            contentClass += ' noscroll mobilefirst';
         }
 
-        var index = '<div class="' + contentClass + '"><div id="indexView" class="bookmarkView"><div id="indexViewHolder">';
+        var index = '<div class="' + contentClass + '"><div class="indexView" class="bookmarkView"><div class="indexViewHolder">';
 
         if (onlyGroup === undefined || !onlyGroup) {
             for (var g = 0; g < groups.length; g++) {
diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index dbfd75e5..94911d5b 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -593,12 +593,15 @@ FluidbookLoader.prototype = {
         return img;
     },
 
-    getThumbImage: function (page, shade) {
+    getThumbImage: function (page, shade, pageHolderStyle) {
         var s = '';
+        if (pageHolderStyle === undefined) {
+            pageHolderStyle = '';
+        }
         if (shade) {
             s = '<div class="shade"></div>';
         }
-        return '<div class="pageholder">' + this.loadThumb(page, function () {
+        return '<div class="pageholder"' + pageHolderStyle + '>' + this.loadThumb(page, function () {
         }).get(0).outerHTML + s + '</div>';
     },
 
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 8e30e27c..7256c8a9 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -581,7 +581,7 @@ FluidbookMenu.prototype = {
         var w = ww * 0.6;
         var h = hh * 0.8;
         var forceHeight = false;
-        var fullscreen = m.data('fullscreen') == '1';
+        var fullscreen = m.data('fullscreen') === '1';
         var nw, nh;
         var hasCaption = true;
 
@@ -602,7 +602,7 @@ FluidbookMenu.prototype = {
                 break;
             case 'index':
                 var indexWidth = Math.floor(ww / 230) * 230;
-                $("#indexViewHolder").css('width', indexWidth);
+                $(".indexViewHolder").css('width', indexWidth);
                 if (this.fluidbook.mobilefirst.enabled) {
                     var cw = 10 + 130 * this.fluidbook.datas.pages;
                     fullscreen = (cw >= ww * 0.9);
@@ -661,9 +661,9 @@ FluidbookMenu.prototype = {
             case 'bookmarks':
                 if (this.fluidbook.mobilefirst.enabled) {
                     var indexWidth = Math.floor(ww / 230) * 230;
-                    $("#indexViewHolder").css('width', indexWidth);
+                    $(".indexViewHolder:visible").css('width', indexWidth);
                     if (this.fluidbook.mobilefirst.enabled) {
-                        var cw = 10 + 130 * this.fluidbook.datas.pages;
+                        var cw = 10 + 130 * this.fluidbook.bookmarks.getBookmarkedGroups(true).length;
                         fullscreen = (cw >= ww * 0.9);
                         if (!fullscreen) {
                             w = cw + 30;
diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index 932107fc..d2d82c1c 100644
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -116,19 +116,21 @@ FluidbookMobileFirst.prototype = {
             return;
         }
 
+        if (!$(".indexView:visible").closest('.content').hasClass('mobilefirst')) {
+            return;
+        }
 
         if (repeat === undefined) {
             repeat = true;
         }
 
         // Disable view scroll
-        $("#indexView").closest('.content').removeClass('ps').css('overflow', 'hidden');
-        $("#indexViewHolder").css('width', $("#indexViewHolder .doubleThumb").length * 130);
-
+        $(".indexView").closest('.content').removeClass('ps').css('overflow', 'hidden');
+        $(".indexViewHolder").css('width', $(".indexViewHolder .doubleThumb").length * 130);
 
         // Cut tall pages
         var tallerHeight = 0;
-        $("#indexViewHolder .pageholder img").each(function () {
+        $(".indexViewHolder .pageholder img").each(function () {
             tallerHeight = Math.max(tallerHeight, $(this).outerHeight())
         });
         var indexHeight = tallerHeight + 120;
@@ -139,7 +141,7 @@ FluidbookMobileFirst.prototype = {
         if (!isNaN(scrollAmount) && scrollAmount > 0) {
 
             var cutHeight = tallerHeight - scrollAmount;
-            $("#indexViewHolder .pageholder img").each(function () {
+            $(".indexViewHolder .pageholder img").each(function () {
                 var holder = $(this).closest('.pageholder');
                 var thumb = holder.closest('.thumb');
                 var number = thumb.find('.number');
@@ -157,26 +159,26 @@ FluidbookMobileFirst.prototype = {
                 }
             })
         } else {
-            $("#indexViewHolder .pageholder").css('max-height', null).removeClass('cut');
-            $("#indexViewHolder .number").each(function () {
+            $(".indexViewHolder .pageholder").css('max-height', null).removeClass('cut');
+            $(".indexViewHolder .number").each(function () {
                 $(this).css('top', $(this).data('top'));
             });
-            $("#indexViewHolder .doubleThumb").each(function () {
+            $(".indexViewHolder .doubleThumb").each(function () {
                 $(this).css('height', $(this).data('height'));
             });
-            $("#indexViewHolder .thumb").removeClass('cut');
+            $(".indexViewHolder .thumb").removeClass('cut');
         }
 
         // Perfect scrollbar
         setTimeout(function () {
-            $("#indexViewHolder").perfectScrollbar('update');
-            $("#indexViewHolder").find('.ps__rail-x').addClass('ps--clicking');
+            $(".indexViewHolder").perfectScrollbar('update');
+            $(".indexViewHolder").find('.ps__rail-x').addClass('ps--clicking');
         }, 500)
-        $("#indexViewHolder").perfectScrollbar({
+        $(".indexViewHolder").perfectScrollbar({
             suppressScrollY: true,
             useBothWheelAxes: true
         });
-        $("#indexViewHolder").find('.ps__rail-x').addClass('ps--clicking');
+        $(".indexViewHolder").find('.ps__rail-x').addClass('ps--clicking');
 
         if (repeat) {
             var $this = this;
@@ -185,6 +187,6 @@ FluidbookMobileFirst.prototype = {
             }, 200);
         }
 
-        $("#indexView").css('opacity', 1);
+        $(".indexView").css('opacity', 1);
     },
 }
\ No newline at end of file
diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index e5bc1c6b..f6efe6a4 100644
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -582,7 +582,7 @@ FluidbookSearch.prototype = {
         // Display results
 
         // Use the index of all pages as a starting point to filter results thumbnails
-        this.menuSearchResults.html(this.fluidbook.menu.index.getView()).hide();
+        this.menuSearchResults.html(this.fluidbook.menu.index._getNormalView(true, 141)).hide();
 
         var spreadEnabled = 0;
         // Process each spread of pages to collect the ones with results
diff --git a/js/libs/fluidbook/menu/fluidbook.index.js b/js/libs/fluidbook/menu/fluidbook.index.js
index f9caea2a..d798c960 100644
--- a/js/libs/fluidbook/menu/fluidbook.index.js
+++ b/js/libs/fluidbook/menu/fluidbook.index.js
@@ -54,105 +54,131 @@ FluidbookIndex.prototype = {
         }
     },
 
-    getNormalView: function () {
+    getNormalView: function (forceNormal) {
         if (this.normalHTML === '') {
-            var contentClass = 'content';
-            if (this.fluidbook.mobilefirst.enabled) {
-                contentClass += ' noscroll';
-            }
+            this.normalHTML = this._getNormalView();
+        }
 
-            this.normalHTML += '<div class="' + contentClass + '"><div id="indexView">';
+        return this.normalHTML;
+    },
 
-            if (this.fluidbook.datas.indexMessage !== '') {
-                this.normalHTML += '<div id="indexViewMessage">' + this.fluidbook.datas.indexMessage + '</div>';
-            }
+    _getNormalView: function (forceNormal, height) {
+        var contentClass = 'content';
+        if (forceNormal === undefined) {
+            forceNormal = false;
+        }
+        if (height === undefined) {
+            height = 'auto';
+        }
 
-            this.normalHTML += '<div id="indexViewHolder">';
-            var j = 0;
-            var ix1 = '', ix2 = '', ix = '';
-            var c = '';
-            var s1, s2;
+        var mobileFirst = this.fluidbook.mobilefirst.enabled && !forceNormal;
 
+        if (mobileFirst) {
+            contentClass += ' mobilefirst noscroll';
+        }
 
-            var increment = this.singleMode ? 1 : 2;
-            var start = this.singleMode ? 1 : 0;
+        var res = '';
+        res += '<div class="' + contentClass + '"><div class="indexView">';
 
-            for (var i = start; i <= this.fluidbook.contentlock.getMaxPage(); i += increment) {
-                var pages = [];
-                j = i + 1;
-                ix1 = '';
-                ix2 = '';
+        if (this.fluidbook.datas.indexMessage !== '') {
+            res += '<div class="indexViewMessage">' + this.fluidbook.datas.indexMessage + '</div>';
+        }
 
-                if (this.singleMode) {
-                    c = ' singlemode simple left ';
-                    s2 = s1 = 'left';
-                } else {
-                    c = '';
-
-                    if (this.fluidbook.l10n.dir === 'ltr') {
-                        s1 = 'left';
-                        s2 = 'right'
-                    } else {
-                        s1 = 'right';
-                        s2 = 'left'
-                    }
-                }
+        res += '<div class="indexViewHolder">';
+        var j = 0;
+        var ix1 = '', ix2 = '', ix = '';
+        var c = '';
+        var s1, s2;
 
-                if (i > 0) {
-                    var dim = this.getThumbDimensions(i);
-                    ix1 += '<div class="thumb ' + s1 + '"' + dim.thumb + '><a href="#/page/' + i + '">' + this.fluidbook.loader.getThumbImage(i, true) + '</a><span class="number"' + dim.pagenumber + '>' + this.fluidbook.physicalToVirtual(i) + '</span>';
-                    if (this.fluidbook.bookmarks.enabled) {
-                        ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true);
-                    }
-                    pages.push(i);
-                    ix1 += '</div>';
-                } else {
-                    c = ' simple ' + s2;
-                }
 
-                if (this.fluidbook.l10n.dir === 'rtl') {
+        var increment = this.singleMode ? 1 : 2;
+        var start = this.singleMode ? 1 : 0;
+
+        for (var i = start; i <= this.fluidbook.contentlock.getMaxPage(); i += increment) {
+            var pages = [];
+            j = i + 1;
+            ix1 = '';
+            ix2 = '';
+
+            var dim = this.getThumbDimensions(i, height);
+
+            if (this.singleMode) {
+                c = ' singlemode simple left ';
+                s2 = s1 = 'left';
+            } else {
+                c = '';
+
+                if (this.fluidbook.l10n.dir === 'ltr') {
                     s1 = 'left';
                     s2 = 'right'
                 } else {
                     s1 = 'right';
                     s2 = 'left'
                 }
-                if (!this.singleMode) {
-                    if (j <= this.fluidbook.contentlock.getMaxPage()) {
-                        ix2 += '<div class="thumb ' + s1 + '"><a href="#/page/' + j + '">' + this.fluidbook.loader.getThumbImage(j, true) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(j) + '</span>';
-                        if (this.fluidbook.bookmarks.enabled) {
-                            ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true);
-                        }
-                        ix2 += '</div>';
-                        pages.push(j);
-                    } else {
-                        c = ' simple ' + s2;
-                    }
+            }
 
-                    if (j === 1) {
-                        pages.unshift(0);
-                    }
+            if (i > 0) {
+                ix1 += '<div class="thumb ' + s1 + '"' + dim.thumb + '><a href="#/page/' + i + '">' + this.fluidbook.loader.getThumbImage(i, true, dim.thumb) + '</a><span class="number"' + dim.pagenumber + '>' + this.fluidbook.physicalToVirtual(i) + '</span>';
+                if (this.fluidbook.bookmarks.enabled) {
+                    ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true);
+                }
+                pages.push(i);
+                ix1 += '</div>';
+            } else {
+                c = ' simple ' + s2;
+            }
 
-                    ix = ix1 + ix2;
+            if (this.fluidbook.l10n.dir === 'rtl') {
+                s1 = 'left';
+                s2 = 'right'
+            } else {
+                s1 = 'right';
+                s2 = 'left'
+            }
+            if (!this.singleMode) {
+                if (j <= this.fluidbook.contentlock.getMaxPage()) {
+                    ix2 += '<div class="thumb ' + s1 + '"><a href="#/page/' + j + '">' + this.fluidbook.loader.getThumbImage(j, true, dim.thumb) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(j) + '</span>';
+                    if (this.fluidbook.bookmarks.enabled) {
+                        ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true);
+                    }
+                    ix2 += '</div>';
+                    pages.push(j);
                 } else {
-                    ix = ix1;
+                    c = ' simple ' + s2;
                 }
 
-                this.normalHTML += '<div class="doubleThumb' + c + '" page="' + i + '" data-pages="' + pages.join(',') + '"' + dim.doublethumb + '>' + ix;
-                this.normalHTML += '</div>';
+                if (j === 1) {
+                    pages.unshift(0);
+                }
+
+                ix = ix1 + ix2;
+            } else {
+                ix = ix1;
             }
-            this.normalHTML += '</div></div></div>';
-        }
 
-        return this.normalHTML;
+            res += '<div class="doubleThumb' + c + '" page="' + i + '" data-pages="' + pages.join(',') + '"' + dim.doublethumb + '>' + ix;
+            res += '</div>';
+        }
+        res += '</div></div></div>';
+        return res;
     },
 
-    getThumbDimensions: function (page) {
+    getThumbDimensions: function (page, height) {
         var h = '';
         var pnt = '';
         var dth = '';
+        if (height === undefined) {
+            height = 'auto';
+        }
         if (this.fluidbook.mobilefirst.enabled) {
-            var ph = this.fluidbook.loader.getPageDimensions(page, 100).height;
+
+            var ph;
+            if (height === 'auto') {
+                ph = this.fluidbook.loader.getPageDimensions(page, 100).height;
+            } else {
+                ph = height;
+            }
+
             h = ' style="height:' + ph + 'px;"'
             pnt = ' style="top:' + (ph - 5) + 'px;" data-top="' + (ph - 5) + '"';
             dth = ' style="height:' + ph + 'px;" data-height="' + ph + '" ';
diff --git a/style/fluidbook.less b/style/fluidbook.less
index c78edca7..a40b3eba 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1790,8 +1790,8 @@ form input[type="text"], form input[type="email"] {
   color: @menu-field-text;
 }
 
-#indexView {
-  #indexViewHolder {
+.indexView {
+  .indexViewHolder {
     margin: auto;
     text-align: left;
   }
@@ -1826,7 +1826,7 @@ form input[type="text"], form input[type="email"] {
 
 }
 
-#indexViewMessage {
+.indexViewMessage {
   padding: 2em 0;
   text-align: center;
 }
@@ -1839,6 +1839,7 @@ form input[type="text"], form input[type="email"] {
   }
 
   &.simple {
+    width: 100px;
     .overlay {
       width: 100px;
     }
@@ -1876,16 +1877,14 @@ form input[type="text"], form input[type="email"] {
     z-index: 4;
   }
 
-  @hits-top: (@thumb-height - 26) / 2;
-
   .hits {
     position: relative;
-    display: inline;
-
+    display: block;
     z-index: 5;
     font-size: 12px;
-    height: 26px;
-    top: @hits-top;
+    height: 30px;
+    margin-top: -15px;
+    top: 50%;
 
     &.yes {
       padding: 5px;
@@ -1912,37 +1911,46 @@ form input[type="text"], form input[type="email"] {
     z-index: 3;
   }
 
-  img {
-    width: 100%;
-    height: auto;
-    background-color: #fff;
-    position: relative;
-    z-index: 1;
-    top: 0;
-    left: 0;
-  }
+  .pageholder {
+    overflow: hidden;
 
-  .shade {
-    position: absolute;
-    z-index: 2;
-    width: 33%;
-    height: 100%;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: 0 0;
-    top: 0;
+    img {
+      width: 100%;
+      height: auto;
+      background-color: #fff;
+      position: relative;
+      z-index: 1;
+      top: 0;
+      left: 0;
+    }
+
+    .shade {
+      position: absolute;
+      z-index: 2;
+      width: 33%;
+      height: 100%;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: 0 0;
+      top: 0;
+    }
   }
 
+
   &.left {
-    .shade {
-      left: 67%;
-      background-image: url("../images/shadows/thumbnails/left.png");
+    .pageholder {
+      .shade {
+        left: 67%;
+        background-image: url("../images/shadows/thumbnails/left.png");
+      }
     }
   }
 
   &.right {
-    .shade {
-      background-image: url("../images/shadows/thumbnails/right.png");
+    .pageholder {
+      .shade {
+        background-image: url("../images/shadows/thumbnails/right.png");
+      }
     }
   }
 
diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index e3d85aa7..3ee9f4e0 100644
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -72,7 +72,42 @@
     }
   }
 
-  #indexView {
+  .mview.fs .fonctions {
+    padding: 0 25px 25px 25px;
+  }
+
+  .thumb {
+    &:before {
+      display: none;
+    }
+
+    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+  }
+
+  .print-dialogue {
+    margin-bottom: 20px;
+
+    .print-option {
+      flex-basis: 100%;
+    }
+  }
+
+  .mview[data-menu="bookmarks-help"] .content .doubleThumb {
+    width: 147px;
+
+    .thumb.right {
+      left: 0;
+
+      img {
+        height: auto;
+      }
+    }
+  }
+
+}
+
+.mview .content.mobilefirst {
+  .indexView {
     min-width: 100%;
     height: 100%;
     opacity: 0;
@@ -107,7 +142,7 @@
       height: auto;
     }
 
-    #indexViewHolder {
+    .indexViewHolder {
       min-width: 100%;
       max-width: 100%;
       overflow-x: auto;
@@ -120,8 +155,6 @@
 
       .pageholder {
         height: 100%;
-
-
         &.cut {
           overflow: hidden;
           position: relative;
@@ -135,42 +168,8 @@
       }
     }
   }
-
-  .mview.fs .fonctions {
-    padding: 0 25px 25px 25px;
-  }
-
-  .thumb {
-    &:before {
-      display: none;
-    }
-
-    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
-  }
-
-  .print-dialogue {
-    margin-bottom: 20px;
-
-    .print-option {
-      flex-basis: 100%;
-    }
-  }
-
-  .mview[data-menu="bookmarks-help"] .content .doubleThumb {
-    width: 147px;
-
-    .thumb.right {
-      left: 0;
-
-      img {
-        height: auto;
-      }
-    }
-  }
-
 }
 
-
 .mf-nav {
   @mfscale: 0.75;