fix #2969 @2.5

diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index d59582dbda5efbecf8ff56a2762ebdfae653ce00..049f2eae6d4f5750c9a634e444bb46ff280db001 100644 (file)
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -1,5 +1,6 @@
 function FluidbookMobileFirst(fluidbook) {
     this.fluidbook = fluidbook;
+    this.isScrolling = false;
     this.enabled = this.fluidbook.datas.mobileNavigationType === 'mobilefirst';
     if (this.enabled) {
         this.fluidbook.displayOnePage = true;
@@ -17,8 +18,14 @@ FluidbookMobileFirst.prototype = {
         $("html").addClass('mobilefirst');
         $("#scroll").append($('#shadow'));
         $("#shadow .side").remove();
-        $("#scroll").on('scroll', function () {
+
+        document.getElementById('scroll').addEventListener('scroll', function () {
+            $this.isScrolling = true;
             $this.checkScroll($(this).scrollTop());
+        }, {passive: true});
+
+        document.getElementById('scroll').addEventListener('touchend', function () {
+            $this.isScrolling = false;
         });
 
         $(this.fluidbook).on('fluidbook.zoom.in.start', function () {
@@ -102,7 +109,7 @@ FluidbookMobileFirst.prototype = {
             $("#scroll").addClass('animate').css('transform', 'translateY(0px)');
             setTimeout(function () {
                 $("#scroll").removeClass('gototop').removeClass('animate').css('transform', '');
-            }, $this.fluidbook.pagetransitions.getTransitionDuration(page)*1000);
+            }, $this.fluidbook.pagetransitions.getTransitionDuration(page) * 1000);
         }, 10);
     },
 

diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
index d1e3be0ed3f8e4e9299492dd0744ec8b9d004608..068450d8b1c52839317a658e3c215ff2b543b9ac 100644 (file)
--- a/js/libs/fluidbook/fluidbook.tooltip.js
+++ b/js/libs/fluidbook/fluidbook.tooltip.js
@@ -36,7 +36,6 @@ FluidbookTooltip.prototype = {
     },
 
     updateTooltipPosition: function () {
-
         var y = 's';
         if (this.mouseY < (this.fluidbook.resize.hh / 2)) {
             y = 'n';

diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js
index c95417509996de1e34e1be15b56c07357f6d119a..370d877f5f35d6b175f08715ba02d1f178524902 100644 (file)
--- a/js/libs/fluidbook/fluidbook.touch.js
+++ b/js/libs/fluidbook/fluidbook.touch.js
@@ -10,7 +10,7 @@ function FluidbookTouch(fluidbook) {
 
     this.zoomAtPinchStart = 0;
 
-    this.triggerOffset = 0.05;
+    this.triggerOffset = this.fluidbook.mobilefirst.enabled ? 0.1 : 0.05;
 
     this.init();
 }
@@ -43,9 +43,13 @@ FluidbookTouch.prototype = {
         var doubletapEnabled = true;
         var panEnabled = true;
         var touchAction = 'compute';
+        var elementId = 'main';
+        var panElementId = 'fluidbook';
 
         if (this.fluidbook.mobilefirst.enabled) {
             touchAction = 'auto';
+            elementId = 'scroll';
+            panElementId = 'scroll';
         }
 
         var $this = this;
@@ -61,7 +65,7 @@ FluidbookTouch.prototype = {
         Hammer.defaults.domEvents = options.domEvents;
         Hammer.defaults.touchAction = options.touchAction;
 
-        var hm = new Hammer.Manager(document.getElementById('main'), options);
+        var hm = new Hammer.Manager(document.getElementById(elementId), options);
         this.hm = hm;
 
         if (doubletapEnabled) {
@@ -99,6 +103,7 @@ FluidbookTouch.prototype = {
 
             // Pinch
             hm.on('pinchstart', function (event) {
+                console.log('pinchstart');
                 if ($this.fluidbook.zoom.enabled) {
                     if ($this.fluidbook.zoom.zoom === 1) {
                         $this.setZoomOriginFromEvent({'pageX': event.center.x, 'pageY': event.center.y});
@@ -129,16 +134,23 @@ FluidbookTouch.prototype = {
         }
 
         if (panEnabled) {
-            var hmf = new Hammer.Manager(document.getElementById('fluidbook'), options);
+            var hmf = new Hammer.Manager(document.getElementById(panElementId), options);
             hmf.add(new Hammer.Pan({threshold: 0}));
+            hmf.on('pan', function (event) {
+                console.log(event);
+            });
+            hmf.on('panstart', function (event) {
+                if ($this.drag(event, 'start')) {
+                    event.preventDefault();
+                }
+            });
             hmf.on('panmove', function (event) {
-                if ($this.drag(event)) {
-                    console.log('prevent scroll')
+                if ($this.drag(event, 'move')) {
                     event.preventDefault();
                 }
             });
             hmf.on('panend', function (event) {
-                var prevent = $this.drag(event, true);
+                var prevent = $this.drag(event, 'end');
                 $this.startX = $this.startY = -1;
                 $this.panX = $this.panY = 0;
                 if (prevent) {
@@ -169,30 +181,24 @@ FluidbookTouch.prototype = {
     },
 
 
-    drag: function (e, end) {
-        if (end === undefined) {
-            end = false;
-        }
+    drag: function (e, type) {
         if ($(".mview:visible").length > 0) {
             return false;
         }
         if (this.fluidbook.zoom.zoom === 1) {
-            if (this.fluidbook.mobilefirst.enabled) {
-                return false;
-            }
-            if (this.startX === -1) {
+            if (this.startX === -1 || this.startY === -1 || type === 'start') {
                 this.startX = e.center.x;
-            }
-            if (this.startY === -1) {
                 this.startY = e.center.y;
             }
+
             this.offsetX = (e.center.x - this.startX) / this.fluidbook.resize.ww;
             this.offsetY = (e.center.y - this.startY) / this.fluidbook.resize.hh;
+            console.log(type, (e.center.x - this.startX), this.offsetX);
 
-            return this.testSlideOffset();
+            return this.testSlideOffset(e);
         } else {
             this.resetSlide();
-            if (end) {
+            if (type === 'end') {
                 e.deltaX += e.velocityX * 200;
                 e.deltaY += e.velocityY * 200;
                 this.dragZoom(e, end);
@@ -225,34 +231,44 @@ FluidbookTouch.prototype = {
         return false;
     },
 
-    testSlideOffset: function () {
-        if (this.fluidbook.mobilefirst.enabled) {
-            return false;
-        }
+    testSlideOffset: function (e) {
         if (!this.fluidbook.pad.enabled) {
-            if (Math.abs(this.offsetX) < Math.abs(this.offsetY)) {
-                return false;
+            try {
+                if (e.additionalEvent === 'panup' || e.additionalEvent === 'pandown') {
+                    return false;
+                }
+            } catch (e) {
+
             }
-            var ltr = this.fluidbook.l10n.dir === 'ltr';
-            if (this.offsetX < -this.triggerOffset) {
-                if (ltr) {
-                    this.fluidbook.goNextPage();
-                    this.resetSlide();
-                } else {
-                    this.fluidbook.goPreviousPage();
-                    this.resetSlide();
+
+            try {
+                var angle = Math.abs(e.angle);
+                if (angle >= 90 && angle < 150) {
+                    return false;
                 }
-                return true;
-            } else if (this.offsetX > this.triggerOffset) {
-                if (ltr) {
-                    this.fluidbook.goPreviousPage();
-                    this.resetSlide();
-                } else {
-                    this.fluidbook.goNextPage();
-                    this.resetSlide();
+                if (angle > 30 && angle < 90) {
+                    return false;
                 }
-                return true;
+            } catch (e) {
+
+            }
+
+            if (this.fluidbook.mobilefirst.enabled && this.fluidbook.mobilefirst.isScrolling) {
+                return false;
             }
+
+            if (Math.abs(this.offsetX) < this.triggerOffset) {
+                return false;
+            }
+
+            var ltr = this.fluidbook.l10n.dir === 'ltr';
+            if ((this.offsetX < 0 && ltr) || (this.offsetX > 0 && !ltr)) {
+                this.fluidbook.goNextPage();
+            } else {
+                this.fluidbook.goPreviousPage();
+            }
+            console.log('change page triggered :)');
+            return true;
         } else {
             // Mode mag pad
 

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 0046258f43f625283170c95cd90535583daf266e..bfe762d735c2ad35a6504e1ae3cd4989c5d762a8 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -741,14 +741,17 @@ body, html {
   z-index: 11;
   overflow-x: hidden;
   overflow-y: auto;
+  touch-action: pan-y;
   .hidescrollbar();
 
   &.gototop {
     overflow-x: visible;
     overflow-y: visible;
+    -webkit-overflow-scrolling: auto;
   }
 
   &.animate {
+    -webkit-overflow-scrolling: auto;
     transition: transform unit(@page-transition-duration, s) ease-in-out;
   }
 }

diff --git a/style/mobilefirst.less b/style/mobilefirst.less
index 76627bf6e994d20627f3ef5eafaf3f0b5f1ff496..d201c5fb134b31b38953afd3f1bb619439302361 100644 (file)
--- a/style/mobilefirst.less
+++ b/style/mobilefirst.less
@@ -12,8 +12,8 @@
     }
   }
 
-  #fluidbook, #main {
-    touch-action: auto !important;
+  #main,#fluidbook {
+    touch-action: pan-y !important;
   }
 
   .zoomed {