diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index 4ad719cd5d0d7..8a3de9a42530f 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -26,11 +26,9 @@ define([ zoomOutDisabled = 'fotorama__zoom-out--disabled', videoContainerClass = 'fotorama-video-container', hideMagnifier, - checkForVideo, behaveOnHover, dragFlag, endX, - zoomShown = true, allowZoomOut = false, allowZoomIn = true; @@ -64,9 +62,9 @@ define([ * Sets min-height and min-width for image to avoid transition bug * @param $image - fullscreen image */ - var calculateMinSize = function ($image) { + function calculateMinSize($image) { - var minHeight, + var minHeight, minWidth, height = $image.height(), width = $image.width(), @@ -118,29 +116,42 @@ define([ toggleZoomable($image, false); } - function disableZoom(flag) { - if (flag) { + /** + * Set state for zoom controls. + * If state is true, zoom controls will be visible. + * IF state is false, zoom controls will be hidden. + * @param isHide + */ + function hideZoomControls(isHide) { + if (isHide) { $(zoomInButtonSelector).addClass(zoomInDisabled); $(zoomOutButtonSelector).addClass(zoomOutDisabled); - zoomShown = false; } else { $(zoomInButtonSelector).removeClass(zoomInDisabled); $(zoomOutButtonSelector).removeClass(zoomOutDisabled); - zoomShown = true; } } - function toggleZoomButtons($image) { + /** + * Control visibility of zoom buttons. + * If image bigger than her wrapper. Zoom controls must visible. + * Zoom controls must be invisible for video content and touch devices. + * On touch devices active pinchIn/pinchOut. + * @param $image + * @param isTouchScreen - true for touch devices + * @param isVideoActiveFrame - true for active video frame + */ + function toggleZoomButtons($image, isTouchScreen, isVideoActiveFrame) { var path = $image.attr('src'), imgSize; - if (path) { + if (path && !isTouchScreen && !isVideoActiveFrame) { imgSize = getImageSize(path); imgSize.rh > $image.parent().height() || imgSize.rw > $image.parent().width() ? - disableZoom(false) : disableZoom(true); + hideZoomControls(false) : hideZoomControls(true); } else { - disableZoom(true); + hideZoomControls(true); } } @@ -231,7 +242,7 @@ define([ ratio, dimentions = {}; - if (zoomShown && allowZoomIn) { + if (allowZoomIn) { $image = $(fullscreenImageSelector); imgOriginalSize = getImageSize($image[0].src); @@ -263,7 +274,7 @@ define([ if (heightResult >= imgOriginalSize.rh) { heightResult = imgOriginalSize.rh; - zoomHeightStep = yStep || heightResult - imageHeight; + zoomHeightStep = yStep || heightResult - imageHeight; allowZoomIn = false; } widthResult = heightResult * ratio; @@ -303,7 +314,7 @@ define([ ratio, fitIntoParent; - if (zoomShown && allowZoomOut) { + if (allowZoomOut) { allowZoomIn = true; $image = $(fullscreenImageSelector); parentWidth = $image.parent().width(); @@ -443,7 +454,7 @@ define([ /** * Method which makes draggable picture. Also work on touch devices. */ - function magnifierFullscreen() { + function magnifierFullscreen( fotorama ) { var isDragActive = false, startX, startY, @@ -549,13 +560,13 @@ define([ $image.dblclick(dblClickHandler); if (gallery.fullScreen) { - toggleZoomButtons($image); + toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame)); } - function getDimention(event){ + function getDimention(event) { return Math.sqrt( - (event.touches[0].clientX-event.touches[1].clientX) * (event.touches[0].clientX-event.touches[1].clientX) + - (event.touches[0].clientY-event.touches[1].clientY) * (event.touches[0].clientY-event.touches[1].clientY)); + (event.touches[0].clientX - event.touches[1].clientX) * (event.touches[0].clientX - event.touches[1].clientX) + + (event.touches[0].clientY - event.touches[1].clientY) * (event.touches[0].clientY - event.touches[1].clientY)); } $image.off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown'); @@ -611,7 +622,7 @@ define([ if (gallery.fullScreen && isDragActive) { - if (zoomShown && allowZoomOut && !$image.hasClass(imageDraggableClass)) { + if (allowZoomOut && !$image.hasClass(imageDraggableClass)) { $image.addClass(imageDraggableClass); } clientX = e.clientX || e.originalEvent.clientX; @@ -642,21 +653,21 @@ define([ imagePosX = $(fullscreenImageSelector, $gallery).offset().left; imagePosY = $(fullscreenImageSelector, $gallery).offset().top; }; - + if (isFullScreen && !$focus.attr('data-gallery-role') && e.keyCode === 9) { $('[data-gallery-role="fotorama__fullscreen-icon"]').focus(); e.preventDefault(); } if ($focus.attr('data-gallery-role') || !$focus.length) { - + if (isFullScreen) { imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left; imagePosY = $(fullscreenImageSelector, $(gallerySelector)).offset().top; } - + if (e.keyCode === 39) { - + if (isFullScreen) { initVars(); shiftImage(-step, 0, e); @@ -664,17 +675,17 @@ define([ $(gallerySelector).data('fotorama').show('>'); } } - + if (e.keyCode === 38) { - + if (isFullScreen) { initVars(); shiftImage(0, step, e); } } - + if (e.keyCode === 37) { - + if (isFullScreen) { initVars(); shiftImage(step, 0, e); @@ -684,7 +695,7 @@ define([ } if (e.keyCode === 40) { - + if (isFullScreen) { e.preventDefault(); initVars(); @@ -692,7 +703,7 @@ define([ } } } - + if (e.keyCode === 27 && isFullScreen) { $(gallerySelector).data('fotorama').cancelFullScreen(); } @@ -717,12 +728,8 @@ define([ } }); - if (zoomShown) { - toggleZoomable($image, true); - } - $(window).resize(function () { - toggleZoomButtons($image); + toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame)); calculateMinSize($image); if ($image.hasClass(imageZoommable) && !allowZoomOut) { resetVars($image); @@ -739,11 +746,14 @@ define([ }; /** - * Check for video container. + * Check is active frame in gallery include video content. + * If true activeFrame contain video. + * @param $stageFrame - active frame in gallery + * @returns {*|Boolean} */ - checkForVideo = function ($stageFrame) { + function checkForVideo ($stageFrame) { return $stageFrame.hasClass(videoContainerClass); - }; + } /** * Hides magnifier on drag and while arrow click. @@ -751,7 +761,7 @@ define([ behaveOnHover = function (e, initPos) { var pos = [e.pageX, e.pageY], isArrow = $(e.target).data('gallery-role') === 'arrow', - isClick = initPos[0] === pos[0] && initPos[1] === pos[1], + isClick = initPos[0] === pos[0] && initPos[1] === pos[1], isImg = $(e.target).parent().data('active'); if ((isImg && !isClick) || isArrow) { @@ -852,7 +862,7 @@ define([ .on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) { hideMagnifier(); resetVars($(fullscreenImageSelector)); - magnifierFullscreen(e, fotorama); + magnifierFullscreen(fotorama); mousewheel(e, fotorama, element); if ($prevImage) { @@ -862,9 +872,9 @@ define([ }) .on('fotorama:load', function (e, fotorama) { if ($(gallerySelector).data('fotorama').fullScreen) { - toggleZoomButtons($(fullscreenImageSelector)); + toggleZoomButtons($(fullscreenImageSelector), isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame)); } - magnifierFullscreen(); + magnifierFullscreen(fotorama); }) .on('fotorama:show', function (e, fotorama) { $prevImage = $(fullscreenImageSelector); @@ -873,10 +883,10 @@ define([ .on('fotorama:fullscreenexit', function (e, fotorama) { resetVars($(fullscreenImageSelector)); hideMagnifier(); - disableZoom(true); + hideZoomControls(true); }); }); return config; - } + }; });