Skip to content

Commit

Permalink
JS-354: Zoom buttons appear on video image in fullscreen
Browse files Browse the repository at this point in the history
  • Loading branch information
@uharbachou1
uharbachou1 committed Dec 1, 2015
1 parent 0f1e753 commit 879f1bc
Showing 1 changed file with 55 additions and 45 deletions.
100 changes: 55 additions & 45 deletions lib/web/magnifier/magnify.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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(),
Expand Down Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -231,7 +242,7 @@ define([
ratio,
dimentions = {};

if (zoomShown && allowZoomIn) {
if (allowZoomIn) {

$image = $(fullscreenImageSelector);
imgOriginalSize = getImageSize($image[0].src);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -303,7 +314,7 @@ define([
ratio,
fitIntoParent;

if (zoomShown && allowZoomOut) {
if (allowZoomOut) {
allowZoomIn = true;
$image = $(fullscreenImageSelector);
parentWidth = $image.parent().width();
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -642,39 +653,39 @@ 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);
} else {
$(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);
Expand All @@ -684,15 +695,15 @@ define([
}

if (e.keyCode === 40) {

if (isFullScreen) {
e.preventDefault();
initVars();
shiftImage(0, -step, e);
}
}
}

if (e.keyCode === 27 && isFullScreen) {
$(gallerySelector).data('fotorama').cancelFullScreen();
}
Expand All @@ -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);
Expand All @@ -739,19 +746,22 @@ 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.
*/
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) {
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
Expand All @@ -873,10 +883,10 @@ define([
.on('fotorama:fullscreenexit', function (e, fotorama) {
resetVars($(fullscreenImageSelector));
hideMagnifier();
disableZoom(true);
hideZoomControls(true);
});
});

return config;
}
};
});

0 comments on commit 879f1bc

Please sign in to comment.