From 6c9d1970dcabbe9942e8c00b07c30d0feb20e574 Mon Sep 17 00:00:00 2001 From: Luca Perico Date: Tue, 4 Apr 2017 10:29:54 +0200 Subject: [PATCH] Fixed zoom and drag functionalities --- demo/demo.html | 24 ++++++------- wheelzoom.js | 96 ++++++++++++++++++++++++++------------------------ 2 files changed, 61 insertions(+), 59 deletions(-) diff --git a/demo/demo.html b/demo/demo.html index ff8ee11..b9fd934 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -80,43 +80,43 @@

Event handling

}); images[1].addEventListener('wheelzoom.in', function(e) { - images[2].doZoom(zoomIn, e.detail.bgCursorX, e.detail.bgCursorY, false); + images[2].doZoomIn(); }); images[1].addEventListener('wheelzoom.out', function(e) { - images[2].doZoom(zoomOut, e.detail.bgCursorX, e.detail.bgCursorY, false); + images[2].doZoomOut(); }); images[1].addEventListener('wheelzoom.drag', function(e) { - images[2].doDrag(e.detail.xShift, e.detail.yShift); + images[2].doDrag(e.detail.bgPosX, e.detail.bgPosY); }); images[2].addEventListener('wheelzoom.in', function(e) { - images[1].doZoom(zoomIn, e.detail.bgCursorX, e.detail.bgCursorY, false); + images[1].doZoomIn(); }); images[2].addEventListener('wheelzoom.out', function(e) { - images[1].doZoom(zoomOut, e.detail.bgCursorX, e.detail.bgCursorY, false); + images[1].doZoomOut(); }); images[2].addEventListener('wheelzoom.drag', function(e) { - images[1].doDrag(e.detail.xShift, e.detail.yShift); + images[1].doDrag(e.detail.bgPosX, e.detail.bgPosY); }); images[3].addEventListener('wheelzoom.in', function(e) { - images[4].doZoom(zoomIn, e.detail.bgCursorX, e.detail.bgCursorY, false); + images[4].doZoomIn(); }); images[3].addEventListener('wheelzoom.out', function(e) { - images[4].doZoom(zoomOut, e.detail.bgCursorX, e.detail.bgCursorY, false); + images[4].doZoomOut(); }); images[3].addEventListener('wheelzoom.dragend', function(e) { - images[4].doDrag(e.detail.xShift, e.detail.yShift); + images[4].doDrag(e.detail.x, e.detail.y); }); images[4].addEventListener('wheelzoom.in', function(e) { - images[3].doZoom(zoomIn, e.detail.bgCursorX, e.detail.bgCursorY, false); + images[3].doZoomIn(); }); images[4].addEventListener('wheelzoom.out', function(e) { - images[3].doZoom(zoomOut, e.detail.bgCursorX, e.detail.bgCursorY, false); + images[3].doZoomOut(); }); images[4].addEventListener('wheelzoom.dragend', function(e) { - images[3].doDrag(e.detail.xShift, e.detail.yShift); + images[3].doDrag(e.detail.x, e.detail.y); }); } diff --git a/wheelzoom.js b/wheelzoom.js index 1ccd4d0..8aa6fb8 100644 --- a/wheelzoom.js +++ b/wheelzoom.js @@ -1,5 +1,5 @@ /*! - Wheelzoom 1.0.0 + Wheelzoom 1.1.0 license: MIT https://github.com/Luperi/wheelzoom */ @@ -54,8 +54,8 @@ window.wheelzoom = (function(){ var bgPosY; var previousEvent; var cachedDataUrl; - var xDragShift; - var yDragShift; + var initBgPosX; + var initBgPosY; function setSrcToBackground(img) { img.style.backgroundImage = 'url("'+img.src+'")'; @@ -90,17 +90,37 @@ window.wheelzoom = (function(){ updateBgStyle(); } - img.doZoom = function (deltaY, offsetX, offsetY, propagate) { + img.doZoomIn = function(propagate) { if (typeof propagate === 'undefined') { - propagate = true; + propagate = false; } - // Record the offset between the bg edge and cursor: - var bgCursorX = offsetX - bgPosX; - var bgCursorY = offsetY - bgPosY; - // Use the previous offset to get the percent offset between the bg edge and cursor: - var bgRatioX = bgCursorX/bgWidth; - var bgRatioY = bgCursorY/bgHeight; + doZoom(-100, propagate); + } + + img.doZoomOut = function(propagate) { + if (typeof propagate === 'undefined') { + propagate = false; + } + + doZoom(100, propagate); + } + + function doZoom (deltaY, propagate) { + if (typeof propagate === 'undefined') { + propagate = false; + } + + // zoom always at the center of the image + var offsetX = img.width/2; + var offsetY = img.height/2; + + // Record the offset between the bg edge and the center of the image: + var bgCenterX = offsetX - bgPosX; + var bgCenterY = offsetY - bgPosY; + // Use the previous offset to get the percent offset between the bg edge and the center of the image: + var bgRatioX = bgCenterX/bgWidth; + var bgRatioY = bgCenterY/bgHeight; // Update the bg size: if (deltaY < 0) { @@ -122,28 +142,18 @@ window.wheelzoom = (function(){ // setTimeout to handle lot of events fired setTimeout(function() { triggerEvent(img, 'wheelzoom.in', { - bgWidth: bgWidth, - bgHeight: bgHeight, + zoom: bgWidth/width, bgPosX: bgPosX, - bgPosY: bgPosY, - width: width, - height: height, - bgCursorX: bgCursorX, - bgCursorY: bgCursorY + bgPosY: bgPosY }); }, 10); } else { // setTimeout to handle lot of events fired setTimeout(function() { triggerEvent(img, 'wheelzoom.out', { - bgWidth: bgWidth, - bgHeight: bgHeight, + zoom: bgWidth/width, bgPosX: bgPosX, - bgPosY: bgPosY, - width: width, - height: height, - bgCursorX: bgCursorX, - bgCursorY: bgCursorY + bgPosY: bgPosY }); }, 10); } @@ -168,19 +178,16 @@ window.wheelzoom = (function(){ deltaY = -e.wheelDelta; } - // As far as I know, there is no good cross-browser way to get the cursor position relative to the event target. - // We have to calculate the target element's position relative to the document, and subtrack that from the - // cursor's position relative to the document. - var rect = img.getBoundingClientRect(); - var offsetX = e.pageX - rect.left - window.pageXOffset; - var offsetY = e.pageY - rect.top - window.pageYOffset; - - img.doZoom(deltaY, offsetX, offsetY); + if (deltaY < 0) { + img.doZoomIn(true); + } else { + img.doZoomOut(true); + } } - img.doDrag = function (xShift, yShift) { - bgPosX += xShift; - bgPosY += yShift; + img.doDrag = function (x, y) { + bgPosX = x; + bgPosY = y; updateBgStyle(); } @@ -189,8 +196,10 @@ window.wheelzoom = (function(){ e.preventDefault(); var xShift = e.pageX - previousEvent.pageX; var yShift = e.pageY - previousEvent.pageY; + var x = bgPosX + xShift; + var y = bgPosY + yShift; - img.doDrag(xShift, yShift); + img.doDrag(x, y); triggerEvent(img, 'wheelzoom.drag', { bgPosX: bgPosX, @@ -199,17 +208,14 @@ window.wheelzoom = (function(){ yShift: yShift }); - xDragShift += xShift; - yDragShift += yShift; - previousEvent = e; updateBgStyle(); } function removeDrag() { triggerEvent(img, 'wheelzoom.dragend', { - xShift: xDragShift, - yShift: yDragShift + x: bgPosX - initBgPosX, + y: bgPosY - initBgPosY }); document.removeEventListener('mouseup', removeDrag); @@ -218,9 +224,6 @@ window.wheelzoom = (function(){ // Make the background draggable function draggable(e) { - xDragShift = 0; - yDragShift = 0; - triggerEvent(img, 'wheelzoom.dragstart'); e.preventDefault(); @@ -238,8 +241,7 @@ window.wheelzoom = (function(){ height = parseInt(computedStyle.height, 10); bgWidth = width; bgHeight = height; - bgPosX = 0; - bgPosY = 0; + bgPosX = bgPosY = initBgPosX = initBgPosY = 0; setSrcToBackground(img);