Skip to content

Commit 1648394

Browse files
uharbachouuharbachou
committed
Merge pull request #57 from ulaharbmg/JS-354
JS-354: Zoom buttons appear on video image in fullscreen
2 parents 90f78b6 + 879f1bc commit 1648394

File tree

1 file changed

+55
-45
lines changed

1 file changed

+55
-45
lines changed

‎lib/web/magnifier/magnify.js

Lines changed: 55 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,9 @@ define([
2626
zoomOutDisabled = 'fotorama__zoom-out--disabled',
2727
videoContainerClass = 'fotorama-video-container',
2828
hideMagnifier,
29-
checkForVideo,
3029
behaveOnHover,
3130
dragFlag,
3231
endX,
33-
zoomShown = true,
3432
allowZoomOut = false,
3533
allowZoomIn = true;
3634

@@ -64,9 +62,9 @@ define([
6462
* Sets min-height and min-width for image to avoid transition bug
6563
* @param $image - fullscreen image
6664
*/
67-
var calculateMinSize = function ($image) {
65+
function calculateMinSize($image) {
6866

69-
var minHeight,
67+
var minHeight,
7068
minWidth,
7169
height = $image.height(),
7270
width = $image.width(),
@@ -118,29 +116,42 @@ define([
118116
toggleZoomable($image, false);
119117
}
120118

121-
function disableZoom(flag) {
122-
if (flag) {
119+
/**
120+
* Set state for zoom controls.
121+
* If state is true, zoom controls will be visible.
122+
* IF state is false, zoom controls will be hidden.
123+
* @param isHide
124+
*/
125+
function hideZoomControls(isHide) {
126+
if (isHide) {
123127
$(zoomInButtonSelector).addClass(zoomInDisabled);
124128
$(zoomOutButtonSelector).addClass(zoomOutDisabled);
125-
zoomShown = false;
126129
} else {
127130
$(zoomInButtonSelector).removeClass(zoomInDisabled);
128131
$(zoomOutButtonSelector).removeClass(zoomOutDisabled);
129-
zoomShown = true;
130132
}
131133
}
132134

133-
function toggleZoomButtons($image) {
135+
/**
136+
* Control visibility of zoom buttons.
137+
* If image bigger than her wrapper. Zoom controls must visible.
138+
* Zoom controls must be invisible for video content and touch devices.
139+
* On touch devices active pinchIn/pinchOut.
140+
* @param $image
141+
* @param isTouchScreen - true for touch devices
142+
* @param isVideoActiveFrame - true for active video frame
143+
*/
144+
function toggleZoomButtons($image, isTouchScreen, isVideoActiveFrame) {
134145
var path = $image.attr('src'),
135146
imgSize;
136147

137-
if (path) {
148+
if (path && !isTouchScreen && !isVideoActiveFrame) {
138149
imgSize = getImageSize(path);
139150

140151
imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width() ?
141-
disableZoom(false) : disableZoom(true);
152+
hideZoomControls(false) : hideZoomControls(true);
142153
} else {
143-
disableZoom(true);
154+
hideZoomControls(true);
144155
}
145156
}
146157

@@ -231,7 +242,7 @@ define([
231242
ratio,
232243
dimentions = {};
233244

234-
if (zoomShown && allowZoomIn) {
245+
if (allowZoomIn) {
235246

236247
$image = $(fullscreenImageSelector);
237248
imgOriginalSize = getImageSize($image[0].src);
@@ -263,7 +274,7 @@ define([
263274

264275
if (heightResult >= imgOriginalSize.rh) {
265276
heightResult = imgOriginalSize.rh;
266-
zoomHeightStep = yStep || heightResult - imageHeight;
277+
zoomHeightStep = yStep || heightResult - imageHeight;
267278
allowZoomIn = false;
268279
}
269280
widthResult = heightResult * ratio;
@@ -303,7 +314,7 @@ define([
303314
ratio,
304315
fitIntoParent;
305316

306-
if (zoomShown && allowZoomOut) {
317+
if (allowZoomOut) {
307318
allowZoomIn = true;
308319
$image = $(fullscreenImageSelector);
309320
parentWidth = $image.parent().width();
@@ -443,7 +454,7 @@ define([
443454
/**
444455
* Method which makes draggable picture. Also work on touch devices.
445456
*/
446-
function magnifierFullscreen() {
457+
function magnifierFullscreen( fotorama ) {
447458
var isDragActive = false,
448459
startX,
449460
startY,
@@ -549,13 +560,13 @@ define([
549560
$image.dblclick(dblClickHandler);
550561

551562
if (gallery.fullScreen) {
552-
toggleZoomButtons($image);
563+
toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame));
553564
}
554565

555-
function getDimention(event){
566+
function getDimention(event) {
556567
return Math.sqrt(
557-
(event.touches[0].clientX-event.touches[1].clientX) * (event.touches[0].clientX-event.touches[1].clientX) +
558-
(event.touches[0].clientY-event.touches[1].clientY) * (event.touches[0].clientY-event.touches[1].clientY));
568+
(event.touches[0].clientX - event.touches[1].clientX) * (event.touches[0].clientX - event.touches[1].clientX) +
569+
(event.touches[0].clientY - event.touches[1].clientY) * (event.touches[0].clientY - event.touches[1].clientY));
559570
}
560571

561572
$image.off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown');
@@ -611,7 +622,7 @@ define([
611622

612623
if (gallery.fullScreen && isDragActive) {
613624

614-
if (zoomShown && allowZoomOut && !$image.hasClass(imageDraggableClass)) {
625+
if (allowZoomOut && !$image.hasClass(imageDraggableClass)) {
615626
$image.addClass(imageDraggableClass);
616627
}
617628
clientX = e.clientX || e.originalEvent.clientX;
@@ -642,39 +653,39 @@ define([
642653
imagePosX = $(fullscreenImageSelector, $gallery).offset().left;
643654
imagePosY = $(fullscreenImageSelector, $gallery).offset().top;
644655
};
645-
656+
646657
if (isFullScreen && !$focus.attr('data-gallery-role') && e.keyCode === 9) {
647658
$('[data-gallery-role="fotorama__fullscreen-icon"]').focus();
648659
e.preventDefault();
649660
}
650661

651662
if ($focus.attr('data-gallery-role') || !$focus.length) {
652-
663+
653664
if (isFullScreen) {
654665
imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left;
655666
imagePosY = $(fullscreenImageSelector, $(gallerySelector)).offset().top;
656667
}
657-
668+
658669
if (e.keyCode === 39) {
659-
670+
660671
if (isFullScreen) {
661672
initVars();
662673
shiftImage(-step, 0, e);
663674
} else {
664675
$(gallerySelector).data('fotorama').show('>');
665676
}
666677
}
667-
678+
668679
if (e.keyCode === 38) {
669-
680+
670681
if (isFullScreen) {
671682
initVars();
672683
shiftImage(0, step, e);
673684
}
674685
}
675-
686+
676687
if (e.keyCode === 37) {
677-
688+
678689
if (isFullScreen) {
679690
initVars();
680691
shiftImage(step, 0, e);
@@ -684,15 +695,15 @@ define([
684695
}
685696

686697
if (e.keyCode === 40) {
687-
698+
688699
if (isFullScreen) {
689700
e.preventDefault();
690701
initVars();
691702
shiftImage(0, -step, e);
692703
}
693704
}
694705
}
695-
706+
696707
if (e.keyCode === 27 && isFullScreen) {
697708
$(gallerySelector).data('fotorama').cancelFullScreen();
698709
}
@@ -717,12 +728,8 @@ define([
717728
}
718729
});
719730

720-
if (zoomShown) {
721-
toggleZoomable($image, true);
722-
}
723-
724731
$(window).resize(function () {
725-
toggleZoomButtons($image);
732+
toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame));
726733
calculateMinSize($image);
727734
if ($image.hasClass(imageZoommable) && !allowZoomOut) {
728735
resetVars($image);
@@ -739,19 +746,22 @@ define([
739746
};
740747

741748
/**
742-
* Check for video container.
749+
* Check is active frame in gallery include video content.
750+
* If true activeFrame contain video.
751+
* @param $stageFrame - active frame in gallery
752+
* @returns {*|Boolean}
743753
*/
744-
checkForVideo = function ($stageFrame) {
754+
function checkForVideo ($stageFrame) {
745755
return $stageFrame.hasClass(videoContainerClass);
746-
};
756+
}
747757

748758
/**
749759
* Hides magnifier on drag and while arrow click.
750760
*/
751761
behaveOnHover = function (e, initPos) {
752762
var pos = [e.pageX, e.pageY],
753763
isArrow = $(e.target).data('gallery-role') === 'arrow',
754-
isClick = initPos[0] === pos[0] && initPos[1] === pos[1],
764+
isClick = initPos[0] === pos[0] && initPos[1] === pos[1],
755765
isImg = $(e.target).parent().data('active');
756766

757767
if ((isImg && !isClick) || isArrow) {
@@ -852,7 +862,7 @@ define([
852862
.on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) {
853863
hideMagnifier();
854864
resetVars($(fullscreenImageSelector));
855-
magnifierFullscreen(e, fotorama);
865+
magnifierFullscreen(fotorama);
856866
mousewheel(e, fotorama, element);
857867

858868
if ($prevImage) {
@@ -862,9 +872,9 @@ define([
862872
})
863873
.on('fotorama:load', function (e, fotorama) {
864874
if ($(gallerySelector).data('fotorama').fullScreen) {
865-
toggleZoomButtons($(fullscreenImageSelector));
875+
toggleZoomButtons($(fullscreenImageSelector), isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame));
866876
}
867-
magnifierFullscreen();
877+
magnifierFullscreen(fotorama);
868878
})
869879
.on('fotorama:show', function (e, fotorama) {
870880
$prevImage = $(fullscreenImageSelector);
@@ -873,10 +883,10 @@ define([
873883
.on('fotorama:fullscreenexit', function (e, fotorama) {
874884
resetVars($(fullscreenImageSelector));
875885
hideMagnifier();
876-
disableZoom(true);
886+
hideZoomControls(true);
877887
});
878888
});
879889

880890
return config;
881-
}
891+
};
882892
});

0 commit comments

Comments
 (0)