Skip to content

Commit 033a228

Browse files
slopokslopok
committed
MAGETWO-45302: Pinch zoom is absent on Storefront Gallery
1 parent 4988ed6 commit 033a228

File tree

2 files changed

+60
-38
lines changed

2 files changed

+60
-38
lines changed

‎lib/web/fotorama/fotorama.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3729,7 +3729,7 @@ fotoramaVersion = '4.6.4';
37293729
if (!this.inProgress) {
37303730
this.count++;
37313731
this.inProgress = this.count > this.threshold;
3732-
}
3732+
}
37333733
},
37343734
end: function(){
37353735
if(this.inProgress) {
@@ -3892,13 +3892,15 @@ fotoramaVersion = '4.6.4';
38923892
},
38933893
onTouchEnd: onTouchEnd,
38943894
onEnd: function (result) {
3895-
setShadow($stage);
3895+
var toggleControlsFLAG;
38963896

3897+
setShadow($stage);
3898+
toggleControlsFLAG = (MS_POINTER && !hoverFLAG || result.touch) &&
3899+
opts.arrows && opts.arrows !== 'always';
38973900

3898-
var toggleControlsFLAG = (MS_POINTER && !hoverFLAG || result.touch) && opts.arrows && opts.arrows !== 'always';
3899-
3900-
if (result.moved || (toggleControlsFLAG && result.pos !== result.newPos && !result.control)) {
3901+
if ((result.moved || (toggleControlsFLAG && result.pos !== result.newPos && !result.control)) && result.$target[0] !== $fullscreenIcon[0]) {
39013902
var index = getIndexByPos(result.newPos, measures.w, opts.margin, repositionIndex);
3903+
39023904
that.show({
39033905
index: index,
39043906
time: o_fade ? o_transitionDuration : result.time,

‎lib/web/magnifier/magnifier.js

Lines changed: 53 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
var onWheelCallback,
88
zoomWidthStep = 0,
99
zoomHeightStep = 0,
10-
isDraggable = false;
10+
isDraggable = false,
11+
isZoomActive = false;
1112

1213
$.fn.magnify = function (options) {
1314
'use strict';
@@ -643,7 +644,6 @@
643644
}
644645
});
645646
}
646-
647647
$image
648648
.off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown')
649649
.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) {
@@ -653,13 +653,13 @@
653653
imagePosY = $image.offset().top;
654654
imagePosX = $image.offset().left;
655655

656+
startX = e.clientX || e.originalEvent.clientX;
657+
startY = e.clientY || e.originalEvent.clientY;
656658
if (isTouchEnabled) {
657659
touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
658-
e.clientX = touch.pageX;
659-
e.clientY = touch.pageY;
660+
startX = touch.pageX;
661+
startY = touch.pageY;
660662
}
661-
startX = e.clientX || e.originalEvent.clientX;
662-
startY = e.clientY || e.originalEvent.clientY;
663663
isDragActive = true;
664664
}
665665
});
@@ -670,7 +670,6 @@
670670
.off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove')
671671
.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) {
672672
if (gallery.data('fotorama').fullScreen && isDragActive && isDraggable) {
673-
674673
var top,
675674
left,
676675
startOffset = $image.offset(),
@@ -680,10 +679,10 @@
680679

681680
e.preventDefault();
682681

683-
if (isTouchEnabled) {
682+
if (isTouchEnabled && !isZoomActive) {
684683
touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
685-
e.clientX = touch.pageX;
686-
e.clientY = touch.pageY;
684+
clientX = touch.pageX;
685+
clientY = touch.pageY;
687686
}
688687
top = +imagePosY + (clientY - startY);
689688
left = +imagePosX + (clientX - startX);
@@ -711,6 +710,7 @@
711710
'left': left
712711
});
713712
}
713+
return false;
714714
}
715715
});
716716

@@ -803,14 +803,24 @@
803803
$image = $('[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full');
804804
$imageContainer = $preview.parent();
805805
gallery = $('[data-gallery-role="gallery"]');
806-
top = $image.offset().top;
807-
left = $image.offset().left;
806+
top = $image.position().top;
807+
left = $image.position().left;
808+
809+
if ($imageContainer.width() < $image.width() - widthStep && $imageContainer.width() > $image.width()) {
810+
left = ($imageContainer.width() - $image.width()) / 2;
811+
}
808812

809-
if ($image.height() > $imageContainer.height()) {
810-
if ($imageContainer.offset().top + $imageContainer.height() > top + $image.height() + heightStep/2) {
811-
top = $imageContainer.offset().top + $imageContainer.height() - $image.height() + heightStep/2;
813+
if ($imageContainer.height() < $image.height() - heightStep && $imageContainer.height() > $image.height()) {
814+
top = ($imageContainer.height() - $image.height()) / 2;
815+
}
816+
817+
if ($image.height() - heightStep > $imageContainer.height()) {
818+
if (Math.abs(top + heightStep / 2) > $image.height() - $imageContainer.height() - heightStep) {
819+
top = $imageContainer.height() - $image.height() + heightStep;
820+
} else if (top + heightStep / 2 >= 0) {
821+
top = 0;
812822
} else {
813-
top = ($imageContainer.offset().top <= top + heightStep/2 && heightStep > 0) ? 0 : top + heightStep/2;
823+
top += heightStep / 2;
814824
}
815825
$image.css({
816826
top: top,
@@ -823,11 +833,13 @@
823833
});
824834
}
825835

826-
if ($image.width() > $imageContainer.width()) {
827-
if (($imageContainer.offset().left + $imageContainer.width()) > (left + $image.width() + widthStep/2)) {
828-
left = $imageContainer.offset().left + $imageContainer.width() - $image.width() + widthStep/2;
836+
if ($image.width() - widthStep > $imageContainer.width()) {
837+
if (Math.abs(left + widthStep / 2) > $image.width() - $imageContainer.width() - widthStep) {
838+
left = $imageContainer.width() - $image.width() + widthStep;
839+
} else if (left + widthStep / 2 >= 0) {
840+
left = 0;
829841
} else {
830-
left = ($imageContainer.offset().left <= left + widthStep/2 && widthStep > 0) ? 0 : left - $imageContainer.offset().left + widthStep/2;
842+
left += widthStep / 2;
831843
}
832844
$image.css({
833845
left: left,
@@ -868,17 +880,17 @@
868880
}
869881

870882
if ($image.width() >= $image.height() && $image.width() !== imgOriginalSize.rw) {
883+
checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep);
871884
$image.css({
872885
width: widthResult,
873886
height: 'auto'
874887
});
875-
checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep);
876888
} else if ($image.width() < $image.height() && $image.height() !== imgOriginalSize.rh) {
889+
checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep);
877890
$image.css({
878891
width: 'auto',
879892
height: heightResult
880893
});
881-
checkFullscreenImagePosition(-zoomWidthStep, -zoomHeightStep);
882894
}
883895
}
884896

@@ -905,9 +917,8 @@
905917
return false;
906918
}
907919
}
908-
909-
$image.css({'width': setedResult, height: 'auto'});
910920
checkFullscreenImagePosition(zoomWidthStep, zoomHeightStep);
921+
$image.css({'width': setedResult, height: 'auto'});
911922
}
912923

913924
return false;
@@ -939,11 +950,11 @@
939950
.off('mouseup')
940951
.on('mouseup', zoomOut);
941952
$('.fotorama__zoom-in')
942-
.off('touchstart')
943-
.on('touchstart', zoomIn);
953+
.off('touchend')
954+
.on('touchend', zoomIn);
944955
$('.fotorama__zoom-out')
945-
.off('touchstart')
946-
.on('touchstart', zoomOut);
956+
.off('touchend')
957+
.on('touchend', zoomOut);
947958
}
948959

949960
$(document).on('mousemove', onMousemove);
@@ -953,15 +964,15 @@
953964

954965
if (!onWheelCallback) {
955966
onWheelCallback = function onWheel(e) {
967+
var delta;
968+
956969
if ($('[data-gallery-role="gallery"]').data('fotorama').fullScreen) {
957970
e = e || window.event;
971+
delta = e.deltaY || e.detail || e.wheelDelta;
958972

959-
960-
var delta = e.deltaY || e.detail || e.wheelDelta;
961-
962-
if (delta > 0) {
973+
if (delta > 0 || (e.scale && e.scale < 1.0)) {
963974
zoomOut(e);
964-
} else {
975+
} else if (delta < 0 || (e.scale && e.scale > 1.0)) {
965976
zoomIn(e);
966977
}
967978

@@ -970,6 +981,15 @@
970981
};
971982
}
972983
$('.fotorama-item').on('fotorama:load', function () {
984+
document.querySelector('.fotorama__stage').removeEventListener("gesturechange", onWheelCallback);
985+
document.querySelector('.fotorama__stage').addEventListener("gesturechange", onWheelCallback);
986+
document.querySelector('.fotorama__stage').addEventListener("gesturestart", function () {
987+
isZoomActive = true;
988+
});
989+
document.querySelector('.fotorama__stage').addEventListener("gestureend", function () {
990+
isZoomActive = false;
991+
});
992+
973993
if (document.querySelector('.fotorama__stage').addEventListener) {
974994
if ('onwheel' in document) {
975995
// IE9+, FF17+, Ch31+

0 commit comments

Comments
 (0)