From 82eb16a2a6d9400b3fb7e47bcdc2c0fdd4163917 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Mon, 26 Aug 2019 20:03:31 +0200 Subject: [PATCH] fix #2969 @2.5 --- js/libs/fluidbook/fluidbook.mobilefirst.js | 11 ++- js/libs/fluidbook/fluidbook.tooltip.js | 1 - js/libs/fluidbook/fluidbook.touch.js | 98 +++++++++++++--------- style/fluidbook.less | 3 + style/mobilefirst.less | 4 +- 5 files changed, 71 insertions(+), 46 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js index d59582db..049f2eae 100644 --- 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 d1e3be0e..068450d8 100644 --- 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 c9541750..370d877f 100644 --- 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 0046258f..bfe762d7 100644 --- 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 76627bf6..d201c5fb 100644 --- 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 { -- 2.39.5