From f8259428bd4012ee32aa40f5bac1d8d2f2d14cac Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 6 May 2019 10:58:40 +0200
Subject: [PATCH] wip #2657 @6

---
 js/libs/fluidbook/fluidbook.mobilefirst.js | 26 +++++++++++---
 style/mobilefirst.less                     | 40 +++++++++++++++++-----
 2 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index 1d035550..e7be4238 100644
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -10,12 +10,29 @@ function FluidbookMobileFirst(fluidbook) {
 
 FluidbookMobileFirst.prototype = {
     init: function () {
+        var $this = this;
         $("html").addClass('mobilefirst');
         $("#scroll").append($('#shadow'));
         $("#shadow .side").remove();
+        $("#scroll").on('scroll', function () {
+            $this.checkScroll($(this).scrollTop());
+        });
         this.fluidbook.datas.soundTheme = '';
     },
 
+    checkScroll: function (top) {
+        if (!this.fluidbook.pagetransitions.canChangePage()) {
+            return;
+        }
+        var nav = $("#pages .mf-nav");
+        var reveal=$(nav).find('.reveal');
+        var navrect = nav.get(0).getBoundingClientRect();
+        if (navrect.top < this.fluidbook.resize.hh && reveal.hasClass('toreveal')) {
+            console.log('reveal');
+            reveal.removeClass('toreveal');
+        }
+    },
+
     triggerTransition: function (page) {
         this.fluidbook.pagetransitions.getTurningPages(page);
 
@@ -47,7 +64,8 @@ FluidbookMobileFirst.prototype = {
         $("#pages").append(this.getFooterNavigation(page));
 
         setTimeout(function () {
-            $('#pages .mf-nav').css('opacity', 1);
+            $("#pages .mf-nav").css('opacity', 1);
+            $('#pages .mf-nav .reveal').addClass('toreveal');
         }, 10);
 
         this.fluidbook.resize.resize();
@@ -60,7 +78,7 @@ FluidbookMobileFirst.prototype = {
     resize: function () {
         var bh = $("#currentDoublePage").outerHeight();
         $('#pages .mf-nav').css('top', bh);
-        $("#links,#searchHighlights,#shadow").css({height: bh});
+        $("#links,#searchHighlights,#shadow").css({height: bh, maxHeight: bh});
 
         var h = bh + $("#pages .mf-nav").outerHeight();
         $("#pages,#fluidbook").css({height: h});
@@ -69,7 +87,7 @@ FluidbookMobileFirst.prototype = {
 
     getFooterNavigation: function (page) {
         var visibility = this.fluidbook.getButtonsVisibility(page);
-        var footer = '<div class="mf-nav">';
+        var footer = '<div class="mf-nav"><div class="reveal">';
         if (visibility.previous) {
             footer += '<a class="previous" href="#/page/' + (page - 1) + '">' + getSpriteIcon('interface-previous-simple') + __('Previous') + '</a>';
         }
@@ -77,7 +95,7 @@ FluidbookMobileFirst.prototype = {
         if (visibility.next) {
             footer += '<a class="next" href="#/page/' + (page + 1) + '">' + __('Next') + getSpriteIcon('interface-next-simple') + '</a>';
         }
-        footer += '</div>';
+        footer += '</div></div>';
 
         return footer;
     },
diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index bf159e3f..da5c12f4 100644
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -34,6 +34,12 @@
     overflow: visible;
   }
 
+  #links {
+    &.right {
+      left: 0;
+    }
+  }
+
   .portrait {
     .doublePage {
       &._2d.axis_x {
@@ -55,22 +61,23 @@
 
 
 .mf-nav {
+  @mfscale: 0.75;
+
   position: absolute;
   left: 0;
   width: 100%;
-  height: unit(110*@css-scale, px);
-  padding: unit(30*@css-scale, px) 0;
+  height: unit(110*@css-scale*@mfscale, px);
+  overflow: hidden;
   color: @page-number-color;
-  font-size: unit(20*@css-scale, px);
+  font-size: unit(20*@css-scale*@mfscale, px);
   font-weight: 600;
-  transition: opacity 0.1s;
-  opacity: 0;
+  transition: opacity .15s;
 
   @media @small {
     @s: 1.25;
-    font-size: unit(20*@s*@css-scale, px);
-    padding: unit(30*@s*@css-scale, px) 0;
-    height: unit(110*@s*@css-scale, px);
+    font-size: unit(20*@s*@css-scale*@mfscale, px);
+    padding: unit(30*@s*@css-scale*@mfscale, px) 0;
+    height: unit(110*@s*@css-scale*@mfscale, px);
   }
 
   span {
@@ -92,7 +99,7 @@
     position: absolute;
     top: 1.5em;
     height: 2.5em;
-    width: 30%;
+    width: 25%;
     text-align: center;
     padding-top: 0.7em;
     @media @small {
@@ -122,4 +129,19 @@
       width: auto;
     }
   }
+
+  .reveal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: all .6s;
+    padding: unit(30*@css-scale*@mfscale, px) 0;
+
+    &.toreveal {
+      opacity: 0;
+      top: 30px;
+    }
+  }
 }
\ No newline at end of file
-- 
2.39.5