Skip to content

Commit

Permalink
mousescroll-feature
Browse files Browse the repository at this point in the history
  • Loading branch information
Arinas committed Sep 30, 2021
1 parent 10c6424 commit 162fbbc
Show file tree
Hide file tree
Showing 9 changed files with 238 additions and 278 deletions.
70 changes: 36 additions & 34 deletions dist/simple-lightbox.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -702,71 +702,73 @@ class SimpleLightbox {
});

if (this.options.scrollZoom) {
let pos = {x:0,y:0}
let zoom_target = {x:0,y:0}
let zoom_point = {x:0,y:0}
let scale = 1

this.addEventListener(this.domNodes.image, ['mousewheel','DOMMouseScroll'], (event) => {
if (this.controlCoordinates.mousedown || this.isAnimating || this.isClosing || !this.isOpen) {
return true;
}
if(this.controlCoordinates.containerHeight == 0) {
this.controlCoordinates.containerHeight = this.getDimensions(this.domNodes.image).height;
this.controlCoordinates.containerWidth = this.getDimensions(this.domNodes.image).width;
this.controlCoordinates.imgHeight = this.getDimensions(this.currentImage).height;
this.controlCoordinates.imgWidth = this.getDimensions(this.currentImage).width;
this.controlCoordinates.containerOffsetX = this.domNodes.image.offsetLeft;
this.controlCoordinates.containerOffsetY = this.domNodes.image.offsetTop;

this.controlCoordinates.initialOffsetX = parseFloat(this.currentImage.dataset.translateX);
this.controlCoordinates.initialOffsetY = parseFloat(this.currentImage.dataset.translateY);
}
event.preventDefault();

zoom_point.x = event.pageX - this.domNodes.image.offsetLeft;
zoom_point.y = event.pageY - this.domNodes.image.offsetTop;
let delta = event.delta || event.wheelDelta;
if (delta === undefined) {
//we are on firefox
delta = event.detail;
}
delta = Math.max(-1,Math.min(1,delta)); // cap the delta to [-1,1] for cross browser consistency

// determine the point on where the slide is zoomed in
zoom_target.x = (zoom_point.x - pos.x)/scale;
zoom_target.y = (zoom_point.y - pos.y)/scale;

// apply zoom
scale += delta * this.options.scrollZoomFactor * scale;
scale = Math.max(1, Math.min( this.options.maxZoom, scale));

// calculate x and y based on zoom
pos.x = -zoom_target.x * scale + zoom_point.x;
pos.y = -zoom_target.y * scale + zoom_point.y;

this.controlCoordinates.targetOffsetX = pos.x;
this.controlCoordinates.targetOffsetY = pos.y;
this.controlCoordinates.targetScale = scale;

// handle captions
if (this.controlCoordinates.targetScale > 1) {
this.controlCoordinates.initialScale = this.controlCoordinates.targetScale;
this.currentImage.style[this.transitionPrefix + 'transform-origin'] = '0 0';
this.controlCoordinates.pinchOffsetX = event.pageX;
this.controlCoordinates.pinchOffsetY = event.pageY;

this.controlCoordinates.limitOffsetX = ((this.controlCoordinates.imgWidth * this.controlCoordinates.targetScale) - this.controlCoordinates.containerWidth) / 2;
this.controlCoordinates.limitOffsetY = ((this.controlCoordinates.imgHeight * this.controlCoordinates.targetScale) - this.controlCoordinates.containerHeight) / 2;
this.controlCoordinates.scaleDifference = this.controlCoordinates.targetScale - this.controlCoordinates.initialScale;
this.controlCoordinates.targetOffsetX = (this.controlCoordinates.imgWidth * this.controlCoordinates.targetScale) <= this.controlCoordinates.containerWidth ? 0 : this.minMax(this.controlCoordinates.initialOffsetX - ((((((this.controlCoordinates.pinchOffsetX - this.controlCoordinates.containerOffsetX) - (this.controlCoordinates.containerWidth / 2)) - this.controlCoordinates.initialOffsetX) / (this.controlCoordinates.targetScale - this.controlCoordinates.scaleDifference))) * this.controlCoordinates.scaleDifference), this.controlCoordinates.limitOffsetX * (-1), this.controlCoordinates.limitOffsetX);
this.controlCoordinates.targetOffsetY = (this.controlCoordinates.imgHeight * this.controlCoordinates.targetScale) <= this.controlCoordinates.containerHeight ? 0 : this.minMax(this.controlCoordinates.initialOffsetY - ((((((this.controlCoordinates.pinchOffsetY - this.controlCoordinates.containerOffsetY) - (this.controlCoordinates.containerHeight / 2)) - this.controlCoordinates.initialOffsetY) / (this.controlCoordinates.targetScale - this.controlCoordinates.scaleDifference))) * this.controlCoordinates.scaleDifference), this.controlCoordinates.limitOffsetY * (-1), this.controlCoordinates.limitOffsetY);

this.zoomPanElement(this.controlCoordinates.targetOffsetX + "px", this.controlCoordinates.targetOffsetY + "px", this.controlCoordinates.targetScale);

if (this.controlCoordinates.targetScale > 1) {
this.controlCoordinates.zoomed = true;
if (!this.domNodes.caption.style.opacity && this.domNodes.caption.style.display !== 'none') {
this.fadeOut(this.domNodes.caption, this.options.fadeSpeed);
}
} else {
this.controlCoordinates.initialScale = 1;
this.controlCoordinates.targetOffsetX = 0;
this.controlCoordinates.targetOffsetY = 0;
this.controlCoordinates.zoomed = false;
pos = {x:0,y:0}
zoom_target = {x:0,y:0}
zoom_point = {x:0,y:0}
scale = 1

if (this.domNodes.caption.style.display === 'none') {
this.fadeIn(this.domNodes.caption, this.options.fadeSpeed);
if (this.controlCoordinates.initialScale === 1) {
this.controlCoordinates.zoomed = false;
if (this.domNodes.caption.style.display === 'none') {
this.fadeIn(this.domNodes.caption, this.options.fadeSpeed);
}
}
this.controlCoordinates.initialPinchDistance = null;
this.controlCoordinates.capture = false;
}

this.controlCoordinates.initialPinchDistance = this.controlCoordinates.targetPinchDistance;
this.controlCoordinates.initialScale = this.controlCoordinates.targetScale;
this.controlCoordinates.initialOffsetX = this.controlCoordinates.targetOffsetX;
this.controlCoordinates.initialOffsetY = this.controlCoordinates.targetOffsetY;

this.setZoomData(this.controlCoordinates.targetScale, this.controlCoordinates.targetOffsetX, this.controlCoordinates.targetOffsetY);
this.zoomPanElement(this.controlCoordinates.targetOffsetX + "px", this.controlCoordinates.targetOffsetY + "px", this.controlCoordinates.targetScale);

// remove transform origin
if (this.controlCoordinates.targetScale == 1) {
this.currentImage.style[this.transitionPrefix + 'transform-origin'] = null;
}
});
}

Expand Down
93 changes: 41 additions & 52 deletions dist/simple-lightbox.jquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -778,23 +778,24 @@ var SimpleLightbox = /*#__PURE__*/function () {
});

if (this.options.scrollZoom) {
var pos = {
x: 0,
y: 0
};
var zoom_target = {
x: 0,
y: 0
};
var zoom_point = {
x: 0,
y: 0
};
var scale = 1;
this.addEventListener(this.domNodes.image, ['mousewheel', 'DOMMouseScroll'], function (event) {
if (_this6.controlCoordinates.mousedown || _this6.isAnimating || _this6.isClosing || !_this6.isOpen) {
return true;
}

if (_this6.controlCoordinates.containerHeight == 0) {
_this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height;
_this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width;
_this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height;
_this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width;
_this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft;
_this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop;
_this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX);
_this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY);
}

event.preventDefault();
zoom_point.x = event.pageX - _this6.domNodes.image.offsetLeft;
zoom_point.y = event.pageY - _this6.domNodes.image.offsetTop;
var delta = event.delta || event.wheelDelta;

if (delta === undefined) {
Expand All @@ -803,60 +804,48 @@ var SimpleLightbox = /*#__PURE__*/function () {
}

delta = Math.max(-1, Math.min(1, delta)); // cap the delta to [-1,1] for cross browser consistency
// determine the point on where the slide is zoomed in

zoom_target.x = (zoom_point.x - pos.x) / scale;
zoom_target.y = (zoom_point.y - pos.y) / scale; // apply zoom
// apply zoom

scale += delta * _this6.options.scrollZoomFactor * scale;
scale = Math.max(1, Math.min(_this6.options.maxZoom, scale)); // calculate x and y based on zoom
scale = Math.max(1, Math.min(_this6.options.maxZoom, scale));
_this6.controlCoordinates.targetScale = scale;
_this6.controlCoordinates.pinchOffsetX = event.pageX;
_this6.controlCoordinates.pinchOffsetY = event.pageY;
_this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
_this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
_this6.controlCoordinates.scaleDifference = _this6.controlCoordinates.targetScale - _this6.controlCoordinates.initialScale;
_this6.controlCoordinates.targetOffsetX = _this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale <= _this6.controlCoordinates.containerWidth ? 0 : _this6.minMax(_this6.controlCoordinates.initialOffsetX - (_this6.controlCoordinates.pinchOffsetX - _this6.controlCoordinates.containerOffsetX - _this6.controlCoordinates.containerWidth / 2 - _this6.controlCoordinates.initialOffsetX) / (_this6.controlCoordinates.targetScale - _this6.controlCoordinates.scaleDifference) * _this6.controlCoordinates.scaleDifference, _this6.controlCoordinates.limitOffsetX * -1, _this6.controlCoordinates.limitOffsetX);
_this6.controlCoordinates.targetOffsetY = _this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale <= _this6.controlCoordinates.containerHeight ? 0 : _this6.minMax(_this6.controlCoordinates.initialOffsetY - (_this6.controlCoordinates.pinchOffsetY - _this6.controlCoordinates.containerOffsetY - _this6.controlCoordinates.containerHeight / 2 - _this6.controlCoordinates.initialOffsetY) / (_this6.controlCoordinates.targetScale - _this6.controlCoordinates.scaleDifference) * _this6.controlCoordinates.scaleDifference, _this6.controlCoordinates.limitOffsetY * -1, _this6.controlCoordinates.limitOffsetY);

pos.x = -zoom_target.x * scale + zoom_point.x;
pos.y = -zoom_target.y * scale + zoom_point.y;
_this6.controlCoordinates.targetOffsetX = pos.x;
_this6.controlCoordinates.targetOffsetY = pos.y;
_this6.controlCoordinates.targetScale = scale; // handle captions
_this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale);

if (_this6.controlCoordinates.targetScale > 1) {
_this6.controlCoordinates.initialScale = _this6.controlCoordinates.targetScale;
_this6.currentImage.style[_this6.transitionPrefix + 'transform-origin'] = '0 0';
_this6.controlCoordinates.zoomed = true;

if (!_this6.domNodes.caption.style.opacity && _this6.domNodes.caption.style.display !== 'none') {
_this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed);
}
} else {
_this6.controlCoordinates.initialScale = 1;
_this6.controlCoordinates.targetOffsetX = 0;
_this6.controlCoordinates.targetOffsetY = 0;
_this6.controlCoordinates.zoomed = false;
pos = {
x: 0,
y: 0
};
zoom_target = {
x: 0,
y: 0
};
zoom_point = {
x: 0,
y: 0
};
scale = 1;

if (_this6.domNodes.caption.style.display === 'none') {
_this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed);
if (_this6.controlCoordinates.initialScale === 1) {
_this6.controlCoordinates.zoomed = false;

if (_this6.domNodes.caption.style.display === 'none') {
_this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed);
}
}
}

_this6.setZoomData(_this6.controlCoordinates.targetScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY);
_this6.controlCoordinates.initialPinchDistance = null;
_this6.controlCoordinates.capture = false;
}

_this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale); // remove transform origin
_this6.controlCoordinates.initialPinchDistance = _this6.controlCoordinates.targetPinchDistance;
_this6.controlCoordinates.initialScale = _this6.controlCoordinates.targetScale;
_this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX;
_this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY;

_this6.setZoomData(_this6.controlCoordinates.targetScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY);

if (_this6.controlCoordinates.targetScale == 1) {
_this6.currentImage.style[_this6.transitionPrefix + 'transform-origin'] = null;
}
_this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale);
});
}

Expand Down
2 changes: 1 addition & 1 deletion dist/simple-lightbox.jquery.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 162fbbc

Please sign in to comment.