wait #2721 @5

diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js
index 25759c32861336407d74a730748a4d9da980716c..9774662c810692f1495f0e25027a296b8aabcc0d 100644 (file)
--- a/js/libs/fluidbook/fluidbook.bookmarks.js
+++ b/js/libs/fluidbook/fluidbook.bookmarks.js
@@ -436,7 +436,12 @@ FluidbookBookmarks.prototype = {
             downloadLabel = this.fluidbook.l10n.__('download');
         }
 
-        var index = '<div class="content"><div id="indexView" class="bookmarkView"><div id="indexViewHolder">';
+        var contentClass = 'content';
+        if (this.fluidbook.mobilefirst.enabled) {
+            contentClass += ' noscroll';
+        }
+
+        var index = '<div class="' + contentClass + '"><div id="indexView" class="bookmarkView"><div id="indexViewHolder">';
 
         if (onlyGroup === undefined || !onlyGroup) {
             for (var g = 0; g < groups.length; g++) {

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 6756d7d6b80b52036357baa7a3cb5719da6008f7..5ca039b3b7996c409144e5f03f0d1ca1b891f245 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -124,9 +124,9 @@ FluidbookMenu.prototype = {
         var mview = $('#view .mview:last');
 
         if (!Modernizr.ftouch) {
-            $(mview).find('.content').perfectScrollbar();
+            $(mview).find('.content:not(.noscroll)').perfectScrollbar();
         } else {
-            $(mview).find('.content').css({overflowY: 'auto'});
+            $(mview).find('.content:not(.noscroll)').css({overflowY: 'auto'});
         }
 
         var from = {y: "-200px", opacity: 0};
@@ -612,7 +612,6 @@ FluidbookMenu.prototype = {
                 } else {
                     fullscreen = true;
                 }
-                this.fluidbook.mobilefirst.resizeIndex();
                 break;
             case 'share':
                 w = 200;
@@ -672,7 +671,6 @@ FluidbookMenu.prototype = {
                     } else {
                         fullscreen = true;
                     }
-                    this.fluidbook.mobilefirst.resizeIndex();
                 } else {
                     var max = Math.floor((ww * 0.8) / 120) * 120 + 40;
                     w = Math.min(max, Math.max(m.find('.doubleThumb').length, 4) * 120 + 40);
@@ -951,6 +949,10 @@ FluidbookMenu.prototype = {
             var ratio = $("#archivesview img").width() / w;
             $("#archivesview .links").transform({scale: [ratio]});
         }
+
+        if (m.data('menu') === 'index' || m.data('menu') === 'bookmarks') {
+            this.fluidbook.mobilefirst.resizeIndex();
+        }
     },
 
     resizePopupAudios: function () {

diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index be087d0f935177c52902a94225f84459608b93dd..932107fc85b1790a40da86907f2a6265d5e32798 100644 (file)
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -110,11 +110,64 @@ FluidbookMobileFirst.prototype = {
         return footer;
     },
 
-    resizeIndex: function () {
+    resizeIndex: function (repeat) {
+
         if (!this.enabled) {
             return;
         }
+
+
+        if (repeat === undefined) {
+            repeat = true;
+        }
+
+        // Disable view scroll
+        $("#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 () {
+            tallerHeight = Math.max(tallerHeight, $(this).outerHeight())
+        });
+        var indexHeight = tallerHeight + 120;
+        var maxHeight = parseFloat($(".mview .content").css('max-height'));
+        var funcHeight = $(".mview .fonctions").outerHeight() || 0;
+        var scrollAmount = Math.max(0, (indexHeight + funcHeight) - maxHeight);
+
+        if (!isNaN(scrollAmount) && scrollAmount > 0) {
+
+            var cutHeight = tallerHeight - scrollAmount;
+            $("#indexViewHolder .pageholder img").each(function () {
+                var holder = $(this).closest('.pageholder');
+                var thumb = holder.closest('.thumb');
+                var number = thumb.find('.number');
+                var doubleThumb = holder.closest('.doubleThumb');
+                if ($(this).outerHeight() > cutHeight) {
+                    holder.addClass('cut').css('max-height', cutHeight);
+                    thumb.css('height', cutHeight).addClass('cut');
+                    doubleThumb.css('height', cutHeight);
+                    number.css('top', cutHeight - 5);
+                } else {
+                    holder.css('max-height', null).removeClass('cut');
+                    doubleThumb.css('height', doubleThumb.data('height'));
+                    number.css('top', number.data('top'));
+                    thumb.removeClass('cut');
+                }
+            })
+        } else {
+            $("#indexViewHolder .pageholder").css('max-height', null).removeClass('cut');
+            $("#indexViewHolder .number").each(function () {
+                $(this).css('top', $(this).data('top'));
+            });
+            $("#indexViewHolder .doubleThumb").each(function () {
+                $(this).css('height', $(this).data('height'));
+            });
+            $("#indexViewHolder .thumb").removeClass('cut');
+        }
+
+        // Perfect scrollbar
         setTimeout(function () {
             $("#indexViewHolder").perfectScrollbar('update');
             $("#indexViewHolder").find('.ps__rail-x').addClass('ps--clicking');
@@ -125,27 +178,13 @@ FluidbookMobileFirst.prototype = {
         });
         $("#indexViewHolder").find('.ps__rail-x').addClass('ps--clicking');
 
-        // Cut tall pages
-        $("#indexViewHolder .pageholder.cut").css('max-height', null).removeClass('cut');
-        var scrollAmount = Math.max(0, $("#indexView").outerHeight() - parseFloat($(".mview .content").css('max-height')));
-        console.log('scrollamount', scrollAmount);
-        if (scrollAmount > 0) {
-            var tallerHeight = 0;
-            $("#indexViewHolder .pageholder img").each(function () {
-                tallerHeight = Math.max(tallerHeight, $(this).outerHeight())
-            });
-            console.log(tallerHeight);
-            var cutHeight = tallerHeight - scrollAmount;
-            console.log(tallerHeight, cutHeight);
-            $("#indexViewHolder .pageholder img").each(function () {
-                if ($(this).outerHeight() > cutHeight) {
-                    var holder = $(this).closest('.pageholder');
-                    holder.addClass('cut').css('max-height', cutHeight);
-                    holder.closest('.thumb').css('height', cutHeight);
-                    holder.closest('.doubleThumb').css('height', cutHeight);
-                }
-            })
+        if (repeat) {
+            var $this = this;
+            setTimeout(function () {
+                $this.resizeIndex(false);
+            }, 200);
         }
 
+        $("#indexView").css('opacity', 1);
     },
 }
\ No newline at end of file

diff --git a/js/libs/fluidbook/menu/fluidbook.index.js b/js/libs/fluidbook/menu/fluidbook.index.js
index 49fc54a0b3221192ea947f1cdb51b3833b6259b3..f9caea2a416bd674141bd8d7d03ac3f74f1dac79 100644 (file)
--- a/js/libs/fluidbook/menu/fluidbook.index.js
+++ b/js/libs/fluidbook/menu/fluidbook.index.js
@@ -56,7 +56,12 @@ FluidbookIndex.prototype = {
 
     getNormalView: function () {
         if (this.normalHTML === '') {
-            this.normalHTML += '<div class="content"><div id="indexView">';
+            var contentClass = 'content';
+            if (this.fluidbook.mobilefirst.enabled) {
+                contentClass += ' noscroll';
+            }
+
+            this.normalHTML += '<div class="' + contentClass + '"><div id="indexView">';
 
             if (this.fluidbook.datas.indexMessage !== '') {
                 this.normalHTML += '<div id="indexViewMessage">' + this.fluidbook.datas.indexMessage + '</div>';
@@ -149,8 +154,8 @@ FluidbookIndex.prototype = {
         if (this.fluidbook.mobilefirst.enabled) {
             var ph = this.fluidbook.loader.getPageDimensions(page, 100).height;
             h = ' style="height:' + ph + 'px;"'
-            pnt = ' style="top:' + (ph - 5) + 'px;"';
-            dth = ' style="height:' + ph + 'px;"';
+            pnt = ' style="top:' + (ph - 5) + 'px;" data-top="' + (ph - 5) + '"';
+            dth = ' style="height:' + ph + 'px;" data-height="' + ph + '" ';
         }
         return {thumb: h, pagenumber: pnt, pageheight: ph, doublethumb: dth};
     },

diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index d34a5bee04c04922fd19a736bf04ac815e07e74f..e3d85aa7030eb2e4a96b1acc604fd7a3ad751ac3 100644 (file)
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -75,7 +75,32 @@
   #indexView {
     min-width: 100%;
     height: 100%;
-    overflow: hidden !important;
+    opacity: 0;
+    transition: opacity 250ms;
+
+    .here {
+      .thumb.cut {
+        &:after {
+          background-image: linear-gradient(transparent 0%, @menu-select-background 70%);
+        }
+      }
+    }
+
+    .thumb.cut {
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 120px;
+        height: 30px;
+        left: -10px;
+        bottom: -8px;
+        background-image: linear-gradient(transparent 0%, @menu-background 70%);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        z-index: 2;
+      }
+    }
 
     &.bookmarkView {
       padding: 0;
@@ -95,8 +120,11 @@
 
       .pageholder {
         height: 100%;
+
+
         &.cut {
           overflow: hidden;
+          position: relative;
         }
       }