From 1a1b19206c4d92265e897e505eec03ea335e1700 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Mon, 24 Jul 2017 17:53:24 +0200 Subject: [PATCH] wip #1487 @7 --- js/libs/fluidbook/fluidbook.desktop.js | 17 +++++++---------- js/libs/fluidbook/fluidbook.slider.js | 23 ++++++++++------------- js/libs/fluidbook/fluidbook.touch.js | 25 ++++++++----------------- js/libs/fluidbook/fluidbook.zoom.js | 6 ++++-- 4 files changed, 29 insertions(+), 42 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.desktop.js b/js/libs/fluidbook/fluidbook.desktop.js index 7b083ee0..6f14ef07 100644 --- a/js/libs/fluidbook/fluidbook.desktop.js +++ b/js/libs/fluidbook/fluidbook.desktop.js @@ -29,19 +29,15 @@ FluidbookDesktop.prototype = { $this.moveZoom(e); }); }, - moveZoom: function (e) { - if (this.fluidbook.zoom.zoom > 1) { - console.log(e.pageX + ' | ' + e.pageY); - } - - var x = 100 * e.pageX / this.fluidbook.resize.ww; - var y = 100 * e.pageY / this.fluidbook.resize.hh; + moveZoom: function (e, force) { + var x = e.pageX / this.fluidbook.resize.ww; + var y = e.pageY / this.fluidbook.resize.hh; - this.fluidbook.zoom.setOrigin(x + '%', y + '%') + this.fluidbook.zoom.setOrigin(x, y, force) }, clickZoom: function (e, way) { if (way == undefined) { - if (this.fluidbook.zoom.zoom == 1) { + if (this.zoom == 1) { way = 1; } else { way = -1; @@ -53,7 +49,8 @@ FluidbookDesktop.prototype = { } else if (way == -1) { newScale = 1; } - this.fluidbook.zoom.setZoom(newScale); + this.moveZoom(e, true) + this.setZoom(newScale); return false; }, wheelZoom: function (delta) { diff --git a/js/libs/fluidbook/fluidbook.slider.js b/js/libs/fluidbook/fluidbook.slider.js index abfde35d..18decfc1 100644 --- a/js/libs/fluidbook/fluidbook.slider.js +++ b/js/libs/fluidbook/fluidbook.slider.js @@ -27,19 +27,16 @@ FluidbookSlider.prototype = { return true; }); - interact(document.getElementById("slidercursor")).draggable({ - inertia: false, - onstart: function (event) { - return $this.dragCursor(event, false, true); - }, - onmove: function (event) { - return $this.dragCursor(event, false, true); - }, - onend: function (event) { - return $this.dragCursor(event, true, true); - } + var hmf = new Hammer.Manager(document.getElementById('slidercursor'), {domEvents: false}); + hmf.add(new Hammer.Pan({threshold: 0})); + hmf.on('panmove', function (event) { + $this.dragCursor(event, false, true); + event.preventDefault(); + }); + hmf.on('panend', function (event) { + $this.dragCursor(event, true, true); + event.preventDefault(); }); - if (!Modernizr.ftouch) { $("#slider").on('mouseenter mousemove', function (e) { @@ -68,7 +65,7 @@ FluidbookSlider.prototype = { $("#slider").removeClass("drag"); } if (move) { - this.updatePageByCursorPosition(this.pageToSlider(e.pageX), end, true); + this.updatePageByCursorPosition(this.pageToSlider(e.center.x), end, true); } }, diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js index e03da99b..32ddd580 100644 --- a/js/libs/fluidbook/fluidbook.touch.js +++ b/js/libs/fluidbook/fluidbook.touch.js @@ -151,22 +151,16 @@ FluidbookTouch.prototype = { var diffx = this.fluidbook.resize.ww * (this.fluidbook.zoom.zoom - 1); var diffy = this.fluidbook.resize.hh * (this.fluidbook.zoom.zoom - 1); - var currentX = (parseFloat(this.fluidbook.zoom.origin[0]) / 100) * diffx; - var currentY = (parseFloat(this.fluidbook.zoom.origin[1]) / 100) * diffy; + var currentX = this.fluidbook.zoom.origin[0] * diffx; + var currentY = this.fluidbook.zoom.origin[1] * diffy; var x = currentX - e.dx; var y = currentY - e.dy; - x *= 100 / diffx; - y *= 100 / diffy; + x /= diffx; + y /= diffy; - x = Math.max(0, Math.min(100, x)); - y = Math.max(0, Math.min(100, y)); - - this.fluidbook.zoom.setOrigin( - x + '%', - y + '%', - true, inertia); + this.fluidbook.zoom.setOrigin(x, y, true, inertia); return false; }, @@ -245,8 +239,8 @@ FluidbookTouch.prototype = { var zrect = $("#z").get(0).getBoundingClientRect(); // focus point in non zoomed coordinates - var ox = cx - zrect.left / z; - var oy = cy - zrect.top / z; + var ox = (cx - zrect.left) / z; + var oy = (cy - zrect.top) / z; ox = ox / this.fluidbook.resize.ww; oy = oy / this.fluidbook.resize.hh; @@ -255,10 +249,7 @@ FluidbookTouch.prototype = { var tx = cx / this.fluidbook.resize.ww; var ty = cy / this.fluidbook.resize.hh; - this.fluidbook.zoom.setOrigin( - (ox * 100) + '%', - (oy * 100) + '%', - true); + this.fluidbook.zoom.setOrigin(ox, oy, true); }, }; diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js index 31e065bc..e5866d33 100644 --- a/js/libs/fluidbook/fluidbook.zoom.js +++ b/js/libs/fluidbook/fluidbook.zoom.js @@ -98,6 +98,8 @@ FluidbookZoom.prototype = { if (inertia == undefined) { inertia = false; } + x = Math.min(1, Math.max(0, x)); + y = Math.min(1, Math.max(0, y)); this.origin = [x, y]; if (!force && this.fluidbook.zoom.zoom == 1) { return; @@ -108,7 +110,7 @@ FluidbookZoom.prototype = { $("#z").removeClass('transition-inertia'); } $("#z").transform({ - origin: this.origin + origin: [this.origin[0] * 100 + '%', this.origin[1] * 100 + '%'] }, { preserve: true }); @@ -129,7 +131,7 @@ FluidbookZoom.prototype = { if (this.desktopScale == 1) { animation.origin = ['50%', '50%']; } else { - animation.origin = this.origin; + animation.origin = [this.origin[0] * 100 + '%', this.origin[1] * 100 + '%']; } var hiddenElements = $("header,footer,#interface"); -- 2.39.5