From 3ebd1de3b60961543bae0d92d5ff2a4a242518a3 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Mon, 17 Jul 2017 19:07:13 +0200 Subject: [PATCH] wip #1487 @7 --- js/libs/fluidbook/fluidbook.touch.js | 160 ++++++++++++++------------- js/libs/fluidbook/fluidbook.zoom.js | 46 +++++--- style/fluidbook.less | 22 +++- 3 files changed, 131 insertions(+), 97 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js index be7bf333..6607e62e 100644 --- a/js/libs/fluidbook/fluidbook.touch.js +++ b/js/libs/fluidbook/fluidbook.touch.js @@ -5,6 +5,8 @@ function FluidbookTouch(fluidbook) { this.startY = 0; this.offsetX = 0; this.offsetY = 0; + this.panX = 0; + this.panY = 0; this.zoomAtPinchStart = 0; @@ -39,7 +41,10 @@ FluidbookTouch.prototype = { var $this = this; // Double tap - var hm = new Hammer(document); + var hm = new Hammer.Manager(document.getElementById('fluidbook'), {domEvents: false}); + hm.add(new Hammer.Tap({event: 'doubletap', taps: 2, interval: 500})); + hm.add(new Hammer.Pinch({threshold: 0})); + hm.add(new Hammer.Pan({threshold: 0})); hm.get('pinch').set({enable: true}); hm.on('doubletap', function (event) { console.log(event); @@ -53,100 +58,103 @@ FluidbookTouch.prototype = { } event.preventDefault(); }); + // Pinch hm.on('pinchstart', function (event) { - console.log('start'); + $this.setZoomOriginFromEvent({'pageX': event.center.x, 'pageY': event.center.y}); $this.zoomAtPinchStart = $this.fluidbook.zoom.zoom; - $this.pinchZoom(event.scale, true); + $this.pinchZoom(event.scale, false); event.preventDefault(); }); hm.on('pinch', function (event) { - console.log('pinch'); if ($this.zoomAtPinchStart != 0) { $this.pinchZoom(event.scale, false); event.preventDefault(); } - }) + }); hm.on('pinchend pinchcancel', function (event) { - console.log('end'); $this.pinchZoom(event.scale, true); - $this.zoomAtPinchStart = 0; + $this.zoomAtPinchStart = $this.fluidbook.zoom.zoom; + event.preventDefault(); + }); + hm.on('panmove', function (event) { + $this.drag(event); + event.preventDefault(); + }); + hm.on('panend', function (event) { + $this.drag(event, true); + $this.startX = $this.startY = -1; + $this.panX = $this.panY = 0; event.preventDefault(); }); - }, - /*initInteractGestures: function () { - var $this = this; - - // Pinch to zoom - interact(document.getElementById("z")).gesturable({ - onstart: function (event) { - if ($this.fluidbook.zoom.zoom == 1) { - $this.setZoomOriginFromEvent(event); - } - return false; - }, - onmove: function (event) { - var ds = event.ds; - - if (ds > 0) { - ds *= 0.25; - } else { - ds *= 0.75; - } - var s = $this.fluidbook.zoom.zoom * (1 + ds); - $this.pinchZoom(s); - return false; - }, - onend: function (event) { - return false; - }, - styleCursor: false, - enabled: true, - }); - - interact(document.getElementById("z")).ignoreFrom('.link a').draggable({ - inertia: true, - onmove: function (event) { - return $this.dragzoom(event); - }, - onend: function (event) { - $this.resetSlide(); - }, styleCursor: false, enabled: true, - }); - },*/ - pinchZoom: function (s, end) { + this.fluidbook.zoom.setTransition(false); - var amplitudeRegulation = 0.25; + var amplitudeRegulation = 0.2 * this.zoomAtPinchStart; var dir; if (s > 1) { s = 1 + ((s - 1) * amplitudeRegulation); dir = 1; } else if (s < 1) { - var amplitude = (1 - s) * amplitudeRegulation; - s = 1 - amplitude; + s /= 1; + s = 1 + ((s - 1) * amplitudeRegulation); + s /= 1; dir = -1; } + this.fluidbook.zoom.setZoom(this.zoomAtPinchStart * s, dir, end); + }, - this.fluidbook.zoom.setZoom(this.zoomAtPinchStart * s, dir, end); + drag: function (e, end) { + if (end == undefined) { + end = false; + } + if (this.fluidbook.zoom.zoom == 1) { + if (this.startX == -1) { + 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; + + this.testSlideOffset(); + } else { + this.resetSlide(); + if (end) { + e.deltaX += e.velocityX * 200; + e.deltaY += e.velocityY * 200; + this.dragZoom(e, end); + } else { + this.dragZoom(e, end); + } + } }, - dragzoom: function (e) { + dragZoom: function (e, inertia) { + e.dx = e.deltaX - this.panX; + e.dy = e.deltaY - this.panY; + + this.panX = e.deltaX; + this.panY = e.deltaY; + if (e.dx == 0 && e.dy == 0) { return; } - var currentX = (parseFloat(this.fluidbook.zoom.origin[0]) / 100) * this.fluidbook.resize.ww * this.fluidbook.zoom.zoom; - var currentY = (parseFloat(this.fluidbook.zoom.origin[1]) / 100) * this.fluidbook.resize.hh * this.fluidbook.zoom.zoom; - var m = 2; + var diffx = this.fluidbook.resize.ww * (this.fluidbook.zoom.zoom - 1); + var diffy = this.fluidbook.resize.hh * (this.fluidbook.zoom.zoom - 1); - var x = currentX - e.dx * m; - var y = currentY - e.dy * m; + var currentX = (parseFloat(this.fluidbook.zoom.origin[0]) / 100) * diffx; + var currentY = (parseFloat(this.fluidbook.zoom.origin[1]) / 100) * diffy; - x *= 100 / this.fluidbook.resize.ww / this.fluidbook.zoom.zoom; - y *= 100 / this.fluidbook.resize.hh / this.fluidbook.zoom.zoom; + var x = currentX - e.dx; + var y = currentY - e.dy; + + x *= 100 / diffx; + y *= 100 / diffy; x = Math.max(0, Math.min(100, x)); y = Math.max(0, Math.min(100, y)); @@ -154,22 +162,8 @@ FluidbookTouch.prototype = { this.fluidbook.zoom.setOrigin( x + '%', y + '%', - true); - - if (this.fluidbook.zoom.zoom == 1) { - if (this.startX == -1) { - this.startX = e.clientX; - } - if (this.startY == -1) { - this.startY = e.clientY; - } - this.offsetX = (e.clientX - this.startX) / this.fluidbook.resize.ww; - this.offsetY = (e.clientY - this.startY) / this.fluidbook.resize.hh; + true, inertia); - this.testSlideOffset(); - } else { - this.resetSlide(); - } return false; }, @@ -243,9 +237,19 @@ FluidbookTouch.prototype = { setZoomOriginFromEvent: function (event) { var cx = event.clientX || event.pageX; var cy = event.clientY || event.pageY; + + var z = this.fluidbook.zoom.zoom; + var zrect = $("#z").get(0).getBoundingClientRect(); + + var ox = cx - zrect.left; + var oy = cy - zrect.top; + + ox = (ox / (this.fluidbook.resize.ww * z)); + oy = (oy / (this.fluidbook.resize.hh * z)); + this.fluidbook.zoom.setOrigin( - ((cx / this.fluidbook.resize.ww) * 100) + '%', - ((cy / this.fluidbook.resize.hh) * 100) + '%', + (ox * 100) + '%', + (oy * 100) + '%', true); }, }; diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js index c54dd513..7d2c914e 100644 --- a/js/libs/fluidbook/fluidbook.zoom.js +++ b/js/libs/fluidbook/fluidbook.zoom.js @@ -4,6 +4,7 @@ function FluidbookZoom(fluidbook) { this.origin = ['0%', '0%']; this.max = this.fluidbook.datas.zoomw / 100; this.transition = true; + this.hideInterfaceTimeout; this.init(); } @@ -51,29 +52,32 @@ FluidbookZoom.prototype = { if (this.fluidbook.menu.viewMode()) { zoom = 1; } - if (this.zoom == zoom) { - return; - } - if (!this.transition && end == true) { + + console.log(end); + if (end) { + console.log(direction + ' || ' + zoom); if (direction == 1) { - if (zoom < 1.25) { - zoom = 2; + if (zoom < 1.5) { + zoom = 1.5; this.setTransition(true); } } else if (direction == -1) { - if (zoom < 1.25) { + if (zoom < 1.5) { zoom = 1; this.setTransition(true); } } + console.log(' === ' + zoom + ' (' + this.zoom + ')'); + } if (this.zoom == zoom) { + return; } this.zoom = zoom; - this.updateZoom(direction); + this.updateZoom(); }, setTransition: function (transition) { @@ -93,23 +97,31 @@ FluidbookZoom.prototype = { this.setZoom(1, -1); }, - setOrigin: function (x, y, force) { + setOrigin: function (x, y, force, inertia) { if (force == undefined) { force = false; } + if (inertia == undefined) { + inertia = false; + } this.origin = [x, y]; if (!force && this.fluidbook.zoom.zoom == 1) { return; } else { + if (inertia) { + $("#z").addClass('transition-inertia'); + } else { + $("#z").removeClass('transition-inertia'); + } $("#z").transform({ origin: this.origin }, { preserve: true - }) + }); } }, - updateZoom: function (direction) { + updateZoom: function () { var $this = this; if (this.zoom > 1) { @@ -126,10 +138,18 @@ FluidbookZoom.prototype = { animation.origin = this.origin; } + var hiddenElements = $("header,footer,#interface"); + if (this.zoom != 1) { - $("header,footer,#interface").addClass('hidden'); + if (!$('header').hasClass('hidden')) { + $(hiddenElements).addClass('hidden'); + this.hideInterfaceTimeout = setTimeout(function () { + $(hiddenElements).hide(); + }, 500); + } } else { - $("header,footer,#interface").removeClass('hidden'); + clearTimeout(this.hideInterfaceTimeout); + $(hiddenElements).show().removeClass('hidden'); } $("#z").transform(animation); $this.triggerEvent(((this.zoom == 1) ? 'out' : 'in') + '.start'); diff --git a/style/fluidbook.less b/style/fluidbook.less index 158f6f48..0f63dc05 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -342,6 +342,7 @@ body, html { } @zoomtransition: 350ms; +@zoomtransitioninertia:400ms; #z { position: absolute; @@ -351,7 +352,7 @@ body, html { left: 0; -moz-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out; - -webkit-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out; + -webkit-transition: -webkit-transform @zoomtransition ease-out, transform @zoomtransition ease-out; -o-transition: -o-transform @zoomtransition ease-out, transform @zoomtransition ease-out; -ms-transition: -ms-transform @zoomtransition ease-out, transform @zoomtransition ease-out; transition: transform @zoomtransition ease-out; @@ -364,6 +365,14 @@ body, html { transition: none; } + &.transition-inertia{ + -moz-transition: -moz-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out; + -webkit-transition: -webkit-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out; + -o-transition: -o-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out; + -ms-transition: -ms-transform-origin @zoomtransitioninertia ease-out, transform-origin @zoomtransitioninertia ease-out; + transition: transform-origin @zoomtransitioninertia ease-out; + } + &.nozoom { height: 0 !important; } @@ -697,12 +706,13 @@ footer a { /* Fluidbook zooming */ footer, header, #interface { - -moz-transition: opacity 400ms ease-in; - -webkit-transition: opacity 400ms ease-in; - -o-transition: opacity 400ms ease-in; - -ms-transition: opacity 400ms ease-in; - transition: opacity 400ms ease-in; + -moz-transition: opacity 400ms ease-in, visibility 400ms ease-in; + -webkit-transition: opacity 400ms ease-in, visibility 400ms ease-in; + -o-transition: opacity 400ms ease-in, visibility 400ms ease-in; + -ms-transition: opacity 400ms ease-in, visibility 400ms ease-in; + transition: opacity 400ms ease-in, visibility 400ms ease-in; &.hidden { + visibility: hidden; opacity: 0; z-index: 0; } -- 2.39.5