From 64f0251266bffa961cc3f2f963eee2d90801169e Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 1 Apr 2022 18:24:26 +0200 Subject: [PATCH] wip #5158 @0.5 --- js/libs/fluidbook/fluidbook.interface.js | 8 +- js/libs/fluidbook/fluidbook.js | 6 +- js/libs/fluidbook/fluidbook.touch.js | 116 +++++++++++++++-------- js/libs/fluidbook/fluidbook.zoom.js | 10 ++ 4 files changed, 98 insertions(+), 42 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js index a9062011..e7afff07 100644 --- a/js/libs/fluidbook/fluidbook.interface.js +++ b/js/libs/fluidbook/fluidbook.interface.js @@ -81,7 +81,13 @@ FluidbookInterface.prototype = { return false; }); - this.initArrowsVisibilityManagement(); + $(this.fluidbook).on('fluidbook.lib.ready', function () { + setTimeout(function(){ + $this.initArrowsVisibilityManagement(); + },1000) + + }); + } $(this.fluidbook).on('fluidbook.resize, fluidbook.resize.orientation', function () { diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 9f13a245..b44d4e54 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -102,9 +102,7 @@ Fluidbook.prototype = { this.desktop = new FluidbookDesktop(this); this.share = new FluidbookShare(this); this.firstTransition = true; - if (this.input.hasTouch) { - this.touch = new FluidbookTouch(this); - } + this.touch = new FluidbookTouch(this); this.background = new FluidbookBackground(this); this.video = new FluidbookVideo(this); this.audioplayer = new FluidbookAudioPlayer(this); @@ -169,6 +167,8 @@ Fluidbook.prototype = { this.help = new FluidbookHelp(this); this.articles = new FluidbookArticles(this); + $(this).trigger('fluidbook.lib.ready'); + this.initTheme(); this.initLoading(); diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js index 243f2a4c..ca12c435 100644 --- a/js/libs/fluidbook/fluidbook.touch.js +++ b/js/libs/fluidbook/fluidbook.touch.js @@ -7,14 +7,26 @@ function FluidbookTouch(fluidbook) { this.offsetY = 0; this.panX = 0; this.panY = 0; + this.panInited = false; + + this.touchAction = 'compute'; + this.elementId = 'main'; + this.panElementId = 'fluidbook'; this.zoomAtPinchStart = 0; + this.options = { + domEvents: false, + touchAction: 'compute' + }; + this.triggerOffset = this.fluidbook.mobilefirst.enabled ? 0.1 : 0.05; this.draggingFromOutside = false; - this.init(); + if (this.fluidbook.input.hasTouch) { + this.init(); + } } FluidbookTouch.prototype = { @@ -48,14 +60,12 @@ FluidbookTouch.prototype = { var pinchEnabled = true; 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'; + this.touchAction = 'auto'; + this.elementId = 'scroll'; + this.panElementId = 'scroll'; } var $this = this; @@ -64,15 +74,12 @@ FluidbookTouch.prototype = { return; } - var options = { + this.options = { domEvents: this.fluidbook.mobilefirst.enabled, touchAction: touchAction }; - Hammer.defaults.domEvents = options.domEvents; - Hammer.defaults.touchAction = options.touchAction; - var hm = new Hammer.Manager(document.getElementById(elementId), options); - this.hm = hm; + this.initHammerManager(); if (doubletapEnabled) { hm.add(new Hammer.Tap({event: 'doubletap', taps: 2, interval: 500})); @@ -136,31 +143,57 @@ FluidbookTouch.prototype = { } if (panEnabled) { - var hmf = new Hammer.Manager(document.getElementById(panElementId), options); - hmf.add(new Hammer.Pan({threshold: 0})); - hmf.on('pan', function (event) { + this.initPan(panElementId); + } + }, - }); - hmf.on('panstart', function (event) { - console.log(event); - if ($this.drag(event, 'start')) { - event.preventDefault(); - } - }); - hmf.on('panmove', function (event) { - if ($this.drag(event, 'move')) { - event.preventDefault(); - } - }); - hmf.on('panend', function (event) { - var prevent = $this.drag(event, 'end'); - $this.startX = $this.startY = -1; - $this.panX = $this.panY = 0; - if (prevent) { - event.preventDefault(); - } - }); + initHammerManager: function () { + if (this.hm !== undefined && this.hm !== null) { + return; + } + + Hammer.defaults.domEvents = this.options.domEvents; + Hammer.defaults.touchAction = this.options.touchAction; + + this.hm = new Hammer.Manager(document.getElementById(this.elementId), this.options); + }, + + initPan(panElementId) { + if (this.panInited) { + return; + } + var $this=this; + + this.panInited = true; + if (panElementId === undefined) { + panElementId = 'fluidbook'; } + + this.initHammerManager(); + + var hmf = new Hammer.Manager(document.getElementById(panElementId), this.options); + hmf.add(new Hammer.Pan({threshold: 0})); + hmf.on('pan', function (event) { + + }); + hmf.on('panstart', function (event) { + if ($this.drag(event, 'start')) { + event.preventDefault(); + } + }); + hmf.on('panmove', function (event) { + if ($this.drag(event, 'move')) { + event.preventDefault(); + } + }); + hmf.on('panend', function (event) { + var prevent = $this.drag(event, 'end'); + $this.startX = $this.startY = -1; + $this.panX = $this.panY = 0; + if (prevent) { + event.preventDefault(); + } + }); }, pinchZoom: function (s, end) { @@ -203,15 +236,16 @@ FluidbookTouch.prototype = { if (type === 'end') { e.deltaX += e.velocityX * 200; e.deltaY += e.velocityY * 200; - this.dragZoom(e, true); + this.dragZoom(e, this.fluidbook.input.usingTouch); } else { - this.dragZoom(e, true); + this.dragZoom(e, this.fluidbook.input.usingTouch); } return true; } }, dragZoom: function (e, inertia) { + e.dx = e.deltaX - this.panX; e.dy = e.deltaY - this.panY; @@ -255,6 +289,10 @@ FluidbookTouch.prototype = { } + if(this.fluidbook.input.usingMouse){ + return false; + } + if (this.fluidbook.mobilefirst.enabled && this.fluidbook.mobilefirst.isScrolling) { return false; } @@ -312,7 +350,9 @@ FluidbookTouch.prototype = { this.startY = -1; this.offsetX = 0; this.offsetY = 0; - }, setZoomOriginFromEvent: function (event) { + }, + + setZoomOriginFromEvent: function (event) { var cx = event.pageX; var cy = event.pageY; diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js index 2eaad2b4..66bc77d5 100644 --- a/js/libs/fluidbook/fluidbook.zoom.js +++ b/js/libs/fluidbook/fluidbook.zoom.js @@ -28,6 +28,12 @@ FluidbookZoom.prototype = { this.initMouseWheel(); + $(this.fluidbook).on('fluidbook.lib.ready', function () { + if ($this.fluidbook.settings.zoomMouseMoveMode) { + $this.fluidbook.touch.initPan('fluidbook'); + } + }); + // Zoom icon $(document).on(this.fluidbook.input.clickEvent, '.icon-zoomin', function (e) { if ($this.fluidbook.settings.zoomMouseMoveMode !== 'dragndrop') { @@ -39,6 +45,7 @@ FluidbookZoom.prototype = { return false; }); + $(document).on(this.fluidbook.input.clickEvent, '.icon-zoomout', function (e) { $this.fluidbook.zoom.zoomOutFromMenu(); return false; @@ -260,6 +267,9 @@ FluidbookZoom.prototype = { x = Math.min(1, Math.max(0, x)); y = Math.min(1, Math.max(0, y)); this.originpct = [x, y]; + if (this.fluidbook.resize !== undefined) { + this.originpx = [x * this.fluidbook.resize.ww, y * this.fluidbook.resize.hh]; + } if (!force && this.fluidbook.zoom.zoom == 1) { return; } else { -- 2.39.5