Skip to content

Commit

Permalink
[FEATURE] Add pinch zoom gesture (WIP)
Browse files Browse the repository at this point in the history 
Related: #42
  • Loading branch information
@deoostfrees
deoostfrees committed Dec 23, 2024
1 parent 03f57b7 commit 4a591e7
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 45 deletions.
67 changes: 52 additions & 15 deletions dist/js/parvus.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,13 @@ var en = {
slideLabel: 'Image'
};

/**
* Parvus Lightbox
*
* @param {Object} userOptions - User configuration options
* @returns {Object} Parvus instance
*/
function Parvus(userOptions) {
/**
* Global variables
*
*/
const BROWSER_WINDOW = window;
const GROUP_ATTRIBUTES = {
triggerElements: [],
Expand All @@ -82,6 +84,7 @@ function Parvus(userOptions) {
contentElements: []
};
const GROUPS = {};
const activePointers = new Map();
let groupIdCounter = 0;
let newGroup = null;
let activeGroup = null;
Expand All @@ -102,6 +105,11 @@ function Parvus(userOptions) {
let isDraggingX = false;
let isDraggingY = false;
let pointerDown = false;
let pinchStartDistance = 0;
let currentScale = 1;
let isPinching = false;
let lastScale = 1;
let baseScale = 1;
let offset = null;
let offsetTmp = null;
let resizeTicking = false;
Expand Down Expand Up @@ -1059,16 +1067,14 @@ function Parvus(userOptions) {
const pointerdownHandler = event => {
event.preventDefault();
event.stopPropagation();
if (event.pointerType === 'mouse' && !config.simulateTouch) {
return;
}
isDraggingX = false;
isDraggingY = false;
pointerDown = true;
const {
pageX,
pageY
} = event;
activePointers.set(event.pointerId, event);
drag.startX = pageX;
drag.startY = pageY;
const {
Expand All @@ -1089,15 +1095,39 @@ function Parvus(userOptions) {
*/
const pointermoveHandler = event => {
event.preventDefault();
if (pointerDown) {
const {
pageX,
pageY
} = event;
drag.endX = pageX;
drag.endY = pageY;
doSwipe();
if (!pointerDown) {
return;
}
const currentImg = GROUPS[activeGroup].sliderElements[currentIndex];

// Update pointer position
activePointers.set(event.pointerId, event);

// Zoom
if (activePointers.size === 2) {
const points = Array.from(activePointers.values());
const distance = Math.hypot(points[1].clientX - points[0].clientX, points[1].clientY - points[0].clientY);
if (!isPinching) {
pinchStartDistance = distance;
isPinching = true;
baseScale = lastScale;
}
currentScale = baseScale * (distance / pinchStartDistance);
currentScale = Math.min(Math.max(1, currentScale), 3);
currentImg.style.transform = `scale(${currentScale})`;
lastScale = currentScale;
return;
}
if (currentScale > 1) {
return;
}
const {
pageX,
pageY
} = event;
drag.endX = pageX;
drag.endY = pageY;
doSwipe();
};

/**
Expand All @@ -1111,6 +1141,7 @@ function Parvus(userOptions) {
const pointerupHandler = event => {
event.stopPropagation();
pointerDown = false;
isPinching = false;
const {
slider
} = GROUPS[activeGroup];
Expand All @@ -1120,6 +1151,12 @@ function Parvus(userOptions) {
updateAfterDrag();
}
clearDrag();
activePointers.delete(event.pointerId);
if (currentScale > 1) {
baseScale = lastScale;
} else {
pinchStartDistance = 0;
}
};

/**
Expand Down
2 changes: 1 addition & 1 deletion dist/js/parvus.esm.min.js
View file

Large diffs are not rendered by default.

67 changes: 52 additions & 15 deletions dist/js/parvus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,11 +75,13 @@
slideLabel: 'Image'
};

/**
* Parvus Lightbox
*
* @param {Object} userOptions - User configuration options
* @returns {Object} Parvus instance
*/
function Parvus(userOptions) {
/**
* Global variables
*
*/
const BROWSER_WINDOW = window;
const GROUP_ATTRIBUTES = {
triggerElements: [],
Expand All @@ -88,6 +90,7 @@
contentElements: []
};
const GROUPS = {};
const activePointers = new Map();
let groupIdCounter = 0;
let newGroup = null;
let activeGroup = null;
Expand All @@ -108,6 +111,11 @@
let isDraggingX = false;
let isDraggingY = false;
let pointerDown = false;
let pinchStartDistance = 0;
let currentScale = 1;
let isPinching = false;
let lastScale = 1;
let baseScale = 1;
let offset = null;
let offsetTmp = null;
let resizeTicking = false;
Expand Down Expand Up @@ -1065,16 +1073,14 @@
const pointerdownHandler = event => {
event.preventDefault();
event.stopPropagation();
if (event.pointerType === 'mouse' && !config.simulateTouch) {
return;
}
isDraggingX = false;
isDraggingY = false;
pointerDown = true;
const {
pageX,
pageY
} = event;
activePointers.set(event.pointerId, event);
drag.startX = pageX;
drag.startY = pageY;
const {
Expand All @@ -1095,15 +1101,39 @@
*/
const pointermoveHandler = event => {
event.preventDefault();
if (pointerDown) {
const {
pageX,
pageY
} = event;
drag.endX = pageX;
drag.endY = pageY;
doSwipe();
if (!pointerDown) {
return;
}
const currentImg = GROUPS[activeGroup].sliderElements[currentIndex];

// Update pointer position
activePointers.set(event.pointerId, event);

// Zoom
if (activePointers.size === 2) {
const points = Array.from(activePointers.values());
const distance = Math.hypot(points[1].clientX - points[0].clientX, points[1].clientY - points[0].clientY);
if (!isPinching) {
pinchStartDistance = distance;
isPinching = true;
baseScale = lastScale;
}
currentScale = baseScale * (distance / pinchStartDistance);
currentScale = Math.min(Math.max(1, currentScale), 3);
currentImg.style.transform = `scale(${currentScale})`;
lastScale = currentScale;
return;
}
if (currentScale > 1) {
return;
}
const {
pageX,
pageY
} = event;
drag.endX = pageX;
drag.endY = pageY;
doSwipe();
};

/**
Expand All @@ -1117,6 +1147,7 @@
const pointerupHandler = event => {
event.stopPropagation();
pointerDown = false;
isPinching = false;
const {
slider
} = GROUPS[activeGroup];
Expand All @@ -1126,6 +1157,12 @@
updateAfterDrag();
}
clearDrag();
activePointers.delete(event.pointerId);
if (currentScale > 1) {
baseScale = lastScale;
} else {
pinchStartDistance = 0;
}
};

/**
Expand Down
Loading

0 comments on commit 4a591e7

Please sign in to comment.