From 99eb665c2cee0409c40bc8a9b74fc28a303ed709 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 14 May 2019 18:04:45 +0200 Subject: [PATCH] wait #2721 @5 --- js/libs/fluidbook/fluidbook.bookmarks.js | 7 +- js/libs/fluidbook/fluidbook.menu.js | 10 +-- js/libs/fluidbook/fluidbook.mobilefirst.js | 81 ++++++++++++++++------ js/libs/fluidbook/menu/fluidbook.index.js | 11 ++- style/mobilefirst.less | 30 +++++++- 5 files changed, 109 insertions(+), 30 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js index 25759c32..9774662c 100644 --- 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 = '
'; + var contentClass = 'content'; + if (this.fluidbook.mobilefirst.enabled) { + contentClass += ' noscroll'; + } + + var index = '
'; 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 6756d7d6..5ca039b3 100644 --- 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 be087d0f..932107fc 100644 --- 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 49fc54a0..f9caea2a 100644 --- 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 += '
'; + var contentClass = 'content'; + if (this.fluidbook.mobilefirst.enabled) { + contentClass += ' noscroll'; + } + + this.normalHTML += '
'; if (this.fluidbook.datas.indexMessage !== '') { this.normalHTML += '
' + this.fluidbook.datas.indexMessage + '
'; @@ -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 d34a5bee..e3d85aa7 100644 --- 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; } } -- 2.39.5