Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/cartforge.co/pub/static/frontend/Magento/blank/en_US/magnifier/ |
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'underscore',
'magnifier/magnifier'
], function ($, _) {
'use strict';
return function (config, element) {
var isTouchEnabled = 'ontouchstart' in document.documentElement,
gallerySelector = '[data-gallery-role="gallery"]',
magnifierSelector = '[data-gallery-role="magnifier"]',
magnifierZoomSelector = '[data-gallery-role="magnifier-zoom"]',
zoomInButtonSelector = '[data-gallery-role="fotorama__zoom-in"]',
zoomOutButtonSelector = '[data-gallery-role="fotorama__zoom-out"]',
fullscreenImageSelector = '[data-gallery-role="stage-shaft"] [data-active="true"] .fotorama__img--full',
imageDraggableClass = 'fotorama__img--draggable',
imageZoommable = 'fotorama__img--zoommable',
zoomInLoaded = 'zoom-in-loaded',
zoomOutLoaded = 'zoom-out-loaded',
zoomInDisabled = 'fotorama__zoom-in--disabled',
zoomOutDisabled = 'fotorama__zoom-out--disabled',
keyboardNavigation,
videoContainerClass = 'fotorama-video-container',
hideMagnifier,
dragFlag,
endX,
transitionEnabled,
transitionActive = false,
tapFlag = 0,
allowZoomOut = false,
allowZoomIn = true;
transitionEnabled = document.documentElement.style.transition !== undefined ||
document.documentElement.style.WebkitTransition !== undefined ||
document.documentElement.style.MozTransition !== undefined ||
document.documentElement.style.MsTransition !== undefined ||
document.documentElement.style.OTransition !== undefined;
/**
* Return width and height of original image
* @param img original image node
* @returns {{rw: number, rh: number}}
*/
function getImageSize(img) {
return {
rw: img.naturalWidth,
rh: img.naturalHeight
};
}
/**
* Sets min-height and min-width for image to avoid transition bug
* @param $image - fullscreen image
*/
function calculateMinSize($image) {
var minHeight,
minWidth,
height = $image.height(),
width = $image.width(),
parentHeight = $image.parent().height(),
parentWidth = $image.parent().width();
if (width > parentWidth || height > parentHeight) {
if (width / height < parentWidth / parentHeight) {
minHeight = parentHeight;
minWidth = width * (parentHeight / height);
} else {
minWidth = parentWidth;
minHeight = height * parentWidth / width;
}
$image.css({
'min-width': minWidth,
'min-height': minHeight
});
}
}
function toggleZoomable($image, flag) {
if (flag) {
$image.css({
'min-width': $image.width(),
'min-height': $image.height(),
'width': $image.width(),
'height': $image.height()
}).addClass(imageZoommable);
} else {
$image.css({
width: '',
height: '',
top: '',
left: '',
right: '',
bottom: ''
}).removeClass(imageZoommable);
calculateMinSize($image);
}
}
function resetVars($image) {
allowZoomIn = true;
allowZoomOut = dragFlag = transitionActive = false;
$image.hasClass(imageDraggableClass) && $image.removeClass(imageDraggableClass);
toggleZoomable($image, false);
}
/**
* 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);
} else {
$(zoomInButtonSelector).removeClass(zoomInDisabled);
$(zoomOutButtonSelector).removeClass(zoomOutDisabled);
}
}
/**
* Asynchronus control visibility of zoom buttons.
* If image bigger than her wrapper. Zoom controls must visible.
* @param path - image source path
* @param $image
*/
function asyncToggleZoomButtons(path, $image) {
var img = new Image();
img.onload = function () {
this.height > $image.parent().height() || this.width > $image.parent().width() ?
hideZoomControls(false) : hideZoomControls(true);
};
img.src = path;
}
/**
* Control visibility of zoom buttons.
* 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');
if (path && !isTouchScreen && !isVideoActiveFrame) {
asyncToggleZoomButtons(path, $image);
} else {
hideZoomControls(true);
}
}
/**
* Handle resize event in fullscreen.
* @param $image - Fullscreen image.
* @param e - Event.
*/
function resizeHandler(e, $image) {
var imageSize,
parentWidth,
parentHeight,
isImageSmall,
isImageFit;
if (!e.data.$image || !e.data.$image.length)
return;
imageSize = getImageSize($(fullscreenImageSelector)[0]);
parentWidth = e.data.$image.parent().width();
parentHeight = e.data.$image.parent().height();
isImageSmall = parentWidth >= imageSize.rw && parentHeight >= imageSize.rh;
isImageFit = parentWidth > e.data.$image.width() && parentHeight > e.data.$image.height();
toggleZoomButtons(e.data.$image, isTouchEnabled, checkForVideo(e.data.fotorama.activeFrame.$stageFrame));
calculateMinSize(e.data.$image);
if (e.data.$image.hasClass(imageZoommable) && !allowZoomOut || isImageSmall || isImageFit) {
resetVars(e.data.$image);
}
if (!isImageSmall) {
toggleStandartNavigation();
}
}
function getTopValue($image, topProp, step, height, containerHeight) {
var top;
if (parseInt($image.css('marginTop')) || parseInt($image.css('marginLeft'))) {
top = dragFlag ? topProp - step / 4 : 0;
top = top < containerHeight - height ? containerHeight - height : top;
top = top > height - containerHeight ? height - containerHeight : top;
} else {
top = topProp + step / 2;
top = top < containerHeight - height ? containerHeight - height : top;
top = top > 0 ? 0 : top;
if (!dragFlag && step < 0) {
top = top < (containerHeight - height) / 2 ? (containerHeight - height) / 2 : top;
}
}
return top;
}
function getLeftValue(leftProp, step, width, containerWidth) {
var left;
left = leftProp + step / 2;
left = left < containerWidth - width ? containerWidth - width : left;
left = left > 0 ? 0 : left;
if (!dragFlag && step < 0) {
left = left < (containerWidth - width) / 2 ? (containerWidth - width) / 2 : left;
}
return left;
}
function checkFullscreenImagePosition($image, dimentions, widthStep, heightStep) {
var $imageContainer,
containerWidth,
containerHeight,
settings,
top,
left,
right,
bottom,
ratio;
if ($(gallerySelector).data('fotorama').fullScreen) {
transitionActive = true;
$imageContainer = $image.parent();
containerWidth = $imageContainer.width();
containerHeight = $imageContainer.height();
top = $image.position().top;
left = $image.position().left;
ratio = $image.width() / $image.height();
dimentions.height = isNaN(dimentions.height) ? dimentions.width / ratio : dimentions.height;
dimentions.width = isNaN(dimentions.width) ? dimentions.height * ratio : dimentions.width;
top = dimentions.height >= containerHeight ?
getTopValue($image, top, heightStep, dimentions.height, containerHeight) : 0;
left = dimentions.width >= containerWidth ?
getLeftValue(left, widthStep, dimentions.width, containerWidth) : 0;
right = dragFlag && left < (containerWidth - dimentions.width) / 2 ? 0 : left;
bottom = dragFlag ? 0 : top;
settings = $.extend(dimentions, {
top: top,
left: left,
right: right
});
$image.css(settings);
}
}
/**
* Toggles fotorama's keyboard and mouse/touch navigation.
*/
function toggleStandartNavigation() {
var $selectable =
$('a[href], area[href], input, select, textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]')
.not('[tabindex=-1], [disabled], :hidden'),
fotorama = $(gallerySelector).data('fotorama'),
$focus = $(':focus'),
index;
if (fotorama.fullScreen) {
$selectable.each(function (number) {
if ($(this).is($focus)) {
index = number;
}
});
fotorama.setOptions({
swipe: !allowZoomOut,
keyboard: !allowZoomOut
});
if (_.isNumber(index)) {
$selectable.eq(index).trigger('focus');
}
}
}
function zoomIn(e, xStep, yStep) {
var $image,
imgOriginalSize,
imageWidth,
imageHeight,
zoomWidthStep,
zoomHeightStep,
widthResult,
heightResult,
ratio,
dimentions = {};
if (allowZoomIn && (!transitionEnabled || !transitionActive) && (isTouchEnabled ||
!$(zoomInButtonSelector).hasClass(zoomInDisabled))) {
$image = $(fullscreenImageSelector);
imgOriginalSize = getImageSize($image[0]);
imageWidth = $image.width();
imageHeight = $image.height();
ratio = imageWidth / imageHeight;
allowZoomOut = true;
toggleStandartNavigation();
if (!$image.hasClass(imageZoommable)) {
toggleZoomable($image, true);
}
e.preventDefault();
if (imageWidth >= imageHeight) {
zoomWidthStep = xStep || Math.ceil(imageWidth * parseFloat(config.magnifierOpts.fullscreenzoom) / 100);
widthResult = imageWidth + zoomWidthStep;
if (widthResult >= imgOriginalSize.rw) {
widthResult = imgOriginalSize.rw;
zoomWidthStep = xStep || widthResult - imageWidth;
allowZoomIn = false;
}
heightResult = widthResult / ratio;
zoomHeightStep = yStep || heightResult - imageHeight;
} else {
zoomHeightStep = yStep || Math.ceil(imageHeight * parseFloat(config.magnifierOpts.fullscreenzoom) / 100);
heightResult = imageHeight + zoomHeightStep;
if (heightResult >= imgOriginalSize.rh) {
heightResult = imgOriginalSize.rh;
zoomHeightStep = yStep || heightResult - imageHeight;
allowZoomIn = false;
}
widthResult = heightResult * ratio;
zoomWidthStep = xStep || widthResult - imageWidth;
}
if (imageWidth >= imageHeight && imageWidth !== imgOriginalSize.rw) {
dimentions = $.extend(dimentions, {
width: widthResult,
height: 'auto'
});
checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep);
} else if (imageWidth < imageHeight && imageHeight !== imgOriginalSize.rh) {
dimentions = $.extend(dimentions, {
width: 'auto',
height: heightResult
});
checkFullscreenImagePosition($image, dimentions, -zoomWidthStep, -zoomHeightStep);
}
}
return false;
}
function zoomOut(e, xStep, yStep) {
var $image,
widthResult,
heightResult,
dimentions,
parentWidth,
parentHeight,
imageWidth,
imageHeight,
zoomWidthStep,
zoomHeightStep,
ratio,
fitIntoParent;
if (allowZoomOut && (!transitionEnabled || !transitionActive) && (isTouchEnabled ||
!$(zoomOutButtonSelector).hasClass(zoomOutDisabled))) {
allowZoomIn = true;
$image = $(fullscreenImageSelector);
parentWidth = $image.parent().width();
parentHeight = $image.parent().height();
imageWidth = $image.width();
imageHeight = $image.height();
ratio = imageWidth / imageHeight;
e.preventDefault();
if (imageWidth >= imageHeight) {
zoomWidthStep = xStep || Math.ceil(imageWidth * parseFloat(config.magnifierOpts.fullscreenzoom) / 100);
widthResult = imageWidth - zoomWidthStep;
heightResult = widthResult / ratio;
zoomHeightStep = yStep || imageHeight - heightResult;
} else {
zoomHeightStep = yStep || Math.ceil(imageHeight * parseFloat(config.magnifierOpts.fullscreenzoom) / 100);
heightResult = imageHeight - zoomHeightStep;
widthResult = heightResult * ratio;
zoomWidthStep = xStep || imageWidth - widthResult;
}
fitIntoParent = function () {
if (ratio > parentWidth / parentHeight) {
widthResult = parentWidth;
zoomWidthStep = imageWidth - widthResult;
heightResult = widthResult / ratio;
zoomHeightStep = imageHeight - heightResult;
dimentions = {
width: widthResult,
height: 'auto'
};
} else {
heightResult = parentHeight;
zoomHeightStep = imageHeight - heightResult;
widthResult = heightResult * ratio;
zoomWidthStep = imageWidth - widthResult;
dimentions = {
width: 'auto',
height: heightResult
};
}
checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
};
if (imageWidth >= imageHeight) {
if (widthResult > parentWidth) {
dimentions = {
width: widthResult,
height: 'auto'
};
checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
} else if (heightResult > parentHeight) {
dimentions = {
width: widthResult,
height: 'auto'
};
checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
} else {
allowZoomOut = dragFlag = false;
toggleStandartNavigation();
fitIntoParent();
}
} else if (heightResult > parentHeight) {
dimentions = {
width: 'auto',
height: heightResult
};
checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
} else if (widthResult > parentWidth) {
dimentions = {
width: 'auto',
height: heightResult
};
checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
} else {
allowZoomOut = dragFlag = false;
toggleStandartNavigation();
fitIntoParent();
}
}
return false;
}
/**
* Bind event on scroll on active item in fotorama
* @param e
* @param fotorama - object of fotorama
*/
function mousewheel(e, fotorama, element) {
var $fotoramaStage = fotorama.activeFrame.$stageFrame,
fotoramaStage = $fotoramaStage.get(0);
function onWheel(e) {
var delta = e.deltaY || e.wheelDelta,
ev = e || window.event;
if ($(gallerySelector).data('fotorama').fullScreen) {
if (e.deltaY) {
if (delta > 0) {
zoomOut(ev);
} else {
zoomIn(ev);
}
} else if (delta > 0) {
zoomIn(ev);
} else {
zoomOut(ev);
}
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
}
if (!$fotoramaStage.hasClass('magnify-wheel-loaded')) {
if (fotoramaStage && fotoramaStage.addEventListener) {
if ('onwheel' in document) {
fotoramaStage.addEventListener('wheel', onWheel, { passive: true });
} else if ('onmousewheel' in document) {
fotoramaStage.addEventListener('mousewheel', onWheel);
} else {
fotoramaStage.addEventListener('MozMousePixelScroll', onWheel);
}
$fotoramaStage.addClass('magnify-wheel-loaded');
}
}
}
/**
* Method which makes draggable picture. Also work on touch devices.
*/
function magnifierFullscreen(fotorama) {
var isDragActive = false,
startX,
startY,
imagePosX,
imagePosY,
touch,
swipeSlide,
$gallery = $(gallerySelector),
$image = $(fullscreenImageSelector, $gallery),
$imageContainer = $('[data-gallery-role="stage-shaft"] [data-active="true"]'),
gallery = $gallery.data('fotorama'),
pinchDimention;
swipeSlide = _.throttle(function (direction) {
$(gallerySelector).data('fotorama').show(direction);
}, 500, {
trailing: false
});
/**
* Returns top position value for passed jQuery object.
*
* @param $el
* @return {number}
*/
function getTop($el) {
return parseInt($el.get(0).style.top);
}
function shiftImage(dx, dy, e) {
var top = +imagePosY + dy,
left = +imagePosX + dx,
swipeCondition = $image.width() / 10 + 20;
dragFlag = true;
if ($image.offset().left === $imageContainer.offset().left + $imageContainer.width() - $image.width() && e.keyCode === 39 ||
endX - 1 < $imageContainer.offset().left + $imageContainer.width() - $image.width() && dx < 0 &&
_.isNumber(endX) &&
(e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove')) {
endX = null;
swipeSlide('>');
return;
}
if ($image.offset().left === $imageContainer.offset().left && dx !== 0 && e.keyCode === 37 ||
endX === $imageContainer.offset().left && dx > 0 &&
(e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove')) {
endX = null;
swipeSlide('<');
return;
}
if ($image.height() > $imageContainer.height()) {
if ($imageContainer.height() > $image.height() + top) {
$image.css('top', $imageContainer.height() - $image.height());
} else {
top = $image.height() - getTop($image) - $imageContainer.height();
dy = dy < top ? dy : top;
$image.css('top', getTop($image) + dy);
}
}
if ($image.width() > $imageContainer.width()) {
if ($imageContainer.offset().left + $imageContainer.width() > left + $image.width()) {
left = $imageContainer.offset().left + $imageContainer.width() - $image.width();
} else {
left = $imageContainer.offset().left < left ? $imageContainer.offset().left : left;
}
$image.offset({
'left': left
});
$image.css('right', '');
} else if (Math.abs(dy) < 1 && allowZoomOut &&
!(e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove')) {
dx < 0 ? $(gallerySelector).data('fotorama').show('>') : $(gallerySelector).data('fotorama').show('<');
}
if ($image.width() <= $imageContainer.width() && allowZoomOut &&
(e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove') &&
Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > swipeCondition) {
dx < 0 ? swipeSlide('>') : swipeSlide('<');
}
}
/**
* Sets image size to original or fit in parent block
* @param e - event object
*/
function dblClickHandler(e) {
var imgOriginalSize = getImageSize($image[0]),
proportions;
if (imgOriginalSize.rh < $image.parent().height() && imgOriginalSize.rw < $image.parent().width()) {
return;
}
proportions = imgOriginalSize.rw / imgOriginalSize.rh;
if (allowZoomIn) {
zoomIn(e, imgOriginalSize.rw - $image.width(), imgOriginalSize.rh - $image.height());
} else if (proportions > $imageContainer.width() / $imageContainer.height()) {
zoomOut(e, imgOriginalSize.rw - $imageContainer.width(), imgOriginalSize.rw / proportions);
} else {
zoomOut(e, imgOriginalSize.rw * proportions, imgOriginalSize.rh - $imageContainer.height());
}
}
function detectDoubleTap(e) {
var now = new Date().getTime(),
timesince = now - tapFlag;
if (timesince < 400 && timesince > 0) {
transitionActive = false;
tapFlag = 0;
dblClickHandler(e);
} else {
tapFlag = new Date().getTime();
}
}
if (isTouchEnabled) {
$image.off('tap');
$image.on('tap', function (e) {
if (e.originalEvent.originalEvent.touches.length === 0) {
detectDoubleTap(e);
}
});
} else {
$image.off('dblclick');
$image.on('dblclick', dblClickHandler);
}
if (gallery.fullScreen) {
toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame));
}
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));
}
$image.off(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown');
$image.on(isTouchEnabled ? 'touchstart' : 'pointerdown mousedown MSPointerDown', function (e) {
if (e && e.originalEvent.touches && e.originalEvent.touches.length >= 2) {
e.preventDefault();
pinchDimention = getDimention(e.originalEvent);
isDragActive = false;
if ($image.hasClass(imageDraggableClass)) {
$image.removeClass(imageDraggableClass);
}
} else if (gallery.fullScreen && (!transitionEnabled || !transitionActive)) {
imagePosY = getTop($image);
imagePosX = $image.offset().left;
if (isTouchEnabled) {
touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
e.clientX = touch.pageX;
e.clientY = touch.pageY;
}
startX = e.clientX || e.originalEvent.clientX;
startY = e.clientY || e.originalEvent.clientY;
isDragActive = true;
}
if ($image.offset() && $image.width() > $imageContainer.width()) {
endX = $image.offset().left;
}
});
$image.off(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove');
$image.on(isTouchEnabled ? 'touchmove' : 'mousemove pointermove MSPointerMove', function (e) {
if (e && e.originalEvent.touches && e.originalEvent.touches.length >= 2) {
e.preventDefault();
var currentDimention = getDimention(e.originalEvent);
if ($image.hasClass(imageDraggableClass)) {
$image.removeClass(imageDraggableClass);
}
if (currentDimention < pinchDimention) {
zoomOut(e);
pinchDimention = currentDimention;
} else if (currentDimention > pinchDimention) {
zoomIn(e);
pinchDimention = currentDimention;
}
} else {
var clientX,
clientY;
if (gallery.fullScreen && isDragActive && (!transitionEnabled || !transitionActive)) {
if (allowZoomOut && !$image.hasClass(imageDraggableClass)) {
$image.addClass(imageDraggableClass);
}
clientX = e.clientX || e.originalEvent.clientX;
clientY = e.clientY || e.originalEvent.clientY;
e.preventDefault();
if (isTouchEnabled) {
touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
clientX = touch.pageX;
clientY = touch.pageY;
}
if (allowZoomOut) {
imagePosY = getTop($(fullscreenImageSelector, $gallery));
shiftImage(clientX - startX, clientY - startY, e);
}
}
}
});
$image.off('transitionend webkitTransitionEnd mozTransitionEnd msTransitionEnd ');
$image.on('transitionend webkitTransitionEnd mozTransitionEnd msTransitionEnd', function () {
transitionActive = false;
});
if (keyboardNavigation) {
$(document).off('keydown', keyboardNavigation);
}
/**
* Replaces original navigations with better one
* @param e - event object
*/
keyboardNavigation = function (e) {
var step = 40,
$focus = $(':focus'),
isFullScreen = $(gallerySelector).data('fotorama').fullScreen,
initVars = function () {
imagePosX = $(fullscreenImageSelector, $gallery).offset().left;
imagePosY = getTop($(fullscreenImageSelector, $gallery));
};
if (($focus.attr('data-gallery-role') || !$focus.length) && allowZoomOut) {
if (isFullScreen) {
imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left;
imagePosY = getTop($(fullscreenImageSelector, $(gallerySelector)));
}
if (e.keyCode === 39) {
if (isFullScreen) {
initVars();
shiftImage(-step, 0, e);
}
}
if (e.keyCode === 38) {
if (isFullScreen) {
initVars();
shiftImage(0, step, e);
}
}
if (e.keyCode === 37) {
if (isFullScreen) {
initVars();
shiftImage(step, 0, e);
}
}
if (e.keyCode === 40) {
if (isFullScreen) {
e.preventDefault();
initVars();
shiftImage(0, -step, e);
}
}
}
if (e.keyCode === 27 && isFullScreen && allowZoomOut) {
$(gallerySelector).data('fotorama').cancelFullScreen();
}
};
/**
* @todo keyboard navigation through Fotorama Api.
*/
$(document).on('keydown', keyboardNavigation);
$(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) {
if (gallery.fullScreen) {
if ($image.offset() && $image.width() > $imageContainer.width()) {
endX = $image.offset().left;
}
isDragActive = false;
$image.removeClass(imageDraggableClass);
}
});
$(window).off('resize', resizeHandler);
$(window).on('resize', {
$image: $image,
fotorama: fotorama
}, resizeHandler);
}
/**
* Hides magnifier preview and zoom blocks.
*/
hideMagnifier = function () {
$(magnifierSelector).empty().hide();
$(magnifierZoomSelector).remove();
};
/**
* Check is active frame in gallery include video content.
* If true activeFrame contain video.
* @param $stageFrame - active frame in gallery
* @returns {*|Boolean}
*/
function checkForVideo($stageFrame) {
return $stageFrame.hasClass(videoContainerClass);
}
/**
* Hides magnifier on drag and while arrow click.
*/
function behaveOnDrag(e, initPos) {
var pos = [e.pageX, e.pageY],
isArrow = $(e.target).data('gallery-role') === 'arrow',
isClick = initPos[0] === pos[0] && initPos[1] === pos[1],
isImg = $(e.target).parent().data('active');
if (isArrow || isImg && !isClick) {
hideMagnifier();
}
}
if (config.magnifierOpts.enabled) {
$(element).on('pointerdown mousedown MSPointerDown', function (e) {
var pos = [e.pageX, e.pageY];
$(element).on('mousemove pointermove MSPointerMove', function (ev) {
navigator.msPointerEnabled ? hideMagnifier() : behaveOnDrag(ev, pos);
});
$(document).on('mouseup pointerup MSPointerUp', function () {
$(element).off('mousemove pointermove MSPointerMove');
});
});
}
$.extend(config.magnifierOpts, {
zoomable: false,
thumb: '.fotorama__img',
largeWrapper: '[data-gallery-role="magnifier"]',
height: config.magnifierOpts.height || function () {
return $('[data-active="true"]').height();
},
width: config.magnifierOpts.width || function () {
var productMedia = $(gallerySelector).parent().parent();
return productMedia.parent().width() - productMedia.width() - 20;
},
left: config.magnifierOpts.left || function () {
return $(gallerySelector).offset().left + $(gallerySelector).width() + 20;
},
top: config.magnifierOpts.top || function () {
return $(gallerySelector).offset().top;
}
});
$(element).on('fotorama:load fotorama:showend fotorama:fullscreenexit fotorama:ready', function (e, fotorama) {
var $activeStageFrame = $(gallerySelector).data('fotorama').activeFrame.$stageFrame;
if (!$activeStageFrame.find(magnifierZoomSelector).length) {
hideMagnifier();
if (config.magnifierOpts) {
config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img;
config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original;
!checkForVideo($activeStageFrame) && $($activeStageFrame).magnify(config.magnifierOpts);
}
}
});
$(element).on('gallery:loaded', function (e) {
var $prevImage;
$(element).find(gallerySelector)
.on('fotorama:ready', function (e, fotorama) {
var $zoomIn = $(zoomInButtonSelector),
$zoomOut = $(zoomOutButtonSelector);
if (!$zoomIn.hasClass(zoomInLoaded)) {
$zoomIn.on('click touchstart', zoomIn);
$zoomIn.on('mousedown', function (e) {
e.stopPropagation();
});
$zoomIn.on('keyup', function (e) {
if (e.keyCode === 13) {
zoomIn(e);
}
});
$(window).on('keyup', function (e) {
if (e.keyCode === 107 || fotorama.fullscreen) {
zoomIn(e);
}
});
$zoomIn.addClass(zoomInLoaded);
}
if (!$zoomOut.hasClass(zoomOutLoaded)) {
$zoomOut.on('click touchstart', zoomOut);
$zoomOut.on('mousedown', function (e) {
e.stopPropagation();
});
$zoomOut.on('keyup', function (e) {
if (e.keyCode === 13) {
zoomOut(e);
}
});
$(window).on('keyup', function (e) {
if (e.keyCode === 109 || fotorama.fullscreen) {
zoomOut(e);
}
});
$zoomOut.addClass(zoomOutLoaded);
}
})
.on('fotorama:fullscreenenter fotorama:showend', function (e, fotorama) {
hideMagnifier();
if (!$(fullscreenImageSelector).is($prevImage)) {
resetVars($(fullscreenImageSelector));
}
magnifierFullscreen(fotorama);
mousewheel(e, fotorama, element);
if ($prevImage) {
calculateMinSize($prevImage);
if (!$(fullscreenImageSelector).is($prevImage)) {
resetVars($prevImage);
}
}
toggleStandartNavigation();
})
.on('fotorama:load', function (e, fotorama) {
if ($(gallerySelector).data('fotorama').fullScreen) {
toggleZoomButtons($(fullscreenImageSelector), isTouchEnabled,
checkForVideo(fotorama.activeFrame.$stageFrame));
}
magnifierFullscreen(fotorama);
})
.on('fotorama:show', function (e, fotorama) {
$prevImage = _.clone($(fullscreenImageSelector));
hideMagnifier();
})
.on('fotorama:fullscreenexit', function (e, fotorama) {
resetVars($(fullscreenImageSelector));
hideMagnifier();
hideZoomControls(true);
});
});
return config;
};
});