diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js index 6f04a50b0a87a..97187873ca09b 100644 --- a/lib/web/fotorama/fotorama.js +++ b/lib/web/fotorama/fotorama.js @@ -1878,7 +1878,7 @@ fotoramaVersion = '4.6.4'; } function allowKey(key) { - return o_keyboard[key] || that.fullScreen; + return o_keyboard[key]; } function setStagePosition() { @@ -2240,7 +2240,7 @@ fotoramaVersion = '4.6.4'; if (!$frame) return; - var fullFLAG = that.fullScreen && (!frameData.$full || dataFrame.full) && type === 'stage'; + var fullFLAG = that.fullScreen && !frameData.$full && type === 'stage'; if (frameData.$img && !again && !fullFLAG) return; @@ -2272,6 +2272,7 @@ fotoramaVersion = '4.6.4'; if ((!dataFrame.html || type !== 'stage') && dummy && dummy !== src) { dataFrame[srcKey] = src = dummy; + frameData.$full = null; loadImg([index], type, specialMeasures, true); } else { if (src && !dataFrame.html && !fullFLAG) { diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js index 5d27fe4245aa3..9da939737a284 100644 --- a/lib/web/mage/gallery/gallery.js +++ b/lib/web/mage/gallery/gallery.js @@ -170,7 +170,7 @@ define([ settings.focusableStart = this.settings.$element.find('[data-gallery-role="fotorama__focusable-start"]'); settings.focusableEnd = this.settings.$element.find('[data-gallery-role="fotorama__focusable-end"]'); settings.closeIcon = this.settings.$element.find('[data-gallery-role="fotorama__fullscreen-icon"]'); - settings.fullscreenConfig.swipe = false; + settings.fullscreenConfig.swipe = true; settings.$gallery.on('fotorama:fullscreenenter', function () { settings.closeIcon.show(); @@ -185,9 +185,6 @@ define([ settings.api.updateOptions(settings.activeBreakpoint.options, true); } settings.isFullscreen = true; - settings.$element.data('gallery').updateOptions({ - swipe: false - }); }); settings.$gallery.on('fotorama:fullscreenexit', function () { diff --git a/lib/web/magnifier/magnify.js b/lib/web/magnifier/magnify.js index a31234fb023d6..ccd8935066b21 100644 --- a/lib/web/magnifier/magnify.js +++ b/lib/web/magnifier/magnify.js @@ -24,6 +24,7 @@ define([ zoomOutLoaded = 'zoom-out-loaded', zoomInDisabled = 'fotorama__zoom-in--disabled', zoomOutDisabled = 'fotorama__zoom-out--disabled', + keyboardNavigation, videoContainerClass = 'fotorama-video-container', hideMagnifier, dragFlag, @@ -228,6 +229,36 @@ define([ $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).focus(); + } + } + }; function zoomIn(e, xStep, yStep) { var $image, @@ -249,6 +280,7 @@ define([ imageHeight = $image.height(); ratio = imageWidth / imageHeight; allowZoomOut = true; + toggleStandartNavigation(); if (!$image.hasClass(imageZoommable)) { toggleZoomable($image, true); @@ -375,6 +407,7 @@ define([ checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { allowZoomOut = dragFlag = false; + toggleStandartNavigation(); fitIntoParent(); } } @@ -394,6 +427,7 @@ define([ checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep); } else { allowZoomOut = dragFlag = false; + toggleStandartNavigation(); fitIntoParent(); } } @@ -522,12 +556,12 @@ define([ 'left': left }); $image.css('right', ''); - } else if (Math.abs(dy) < 1 && + } 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() && + 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('<'); @@ -640,11 +674,15 @@ define([ } }); + if (keyboardNavigation) { + $(document).unbind('keydown', keyboardNavigation); + } + /** * Replaces original navigations with better one * @param e - event object */ - var keyboardNavigation = function (e) { + keyboardNavigation = function (e) { var step = 40, $focus = $(':focus'), isFullScreen = $(gallerySelector).data('fotorama').fullScreen, @@ -652,14 +690,8 @@ 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 (($focus.attr('data-gallery-role') || !$focus.length) && allowZoomOut) { if (isFullScreen) { imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left; imagePosY = $(fullscreenImageSelector, $(gallerySelector)).offset().top; @@ -670,8 +702,6 @@ define([ if (isFullScreen) { initVars(); shiftImage(-step, 0, e); - } else { - $(gallerySelector).data('fotorama').show('>'); } } @@ -688,8 +718,6 @@ define([ if (isFullScreen) { initVars(); shiftImage(step, 0, e); - } else { - $(gallerySelector).data('fotorama').show('<'); } } @@ -702,8 +730,8 @@ define([ } } } - - if (e.keyCode === 27 && isFullScreen) { + + if (e.keyCode === 27 && isFullScreen && allowZoomOut) { $(gallerySelector).data('fotorama').cancelFullScreen(); } }; @@ -711,8 +739,7 @@ define([ /** * @todo keyboard navigation through Fotorama Api. */ - //$(document).unbind('keydown', keyboardNavigation); - //$(document).keydown(keyboardNavigation); + $(document).keydown(keyboardNavigation); $(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) { @@ -866,6 +893,8 @@ define([ calculateMinSize($prevImage); resetVars($prevImage); } + + toggleStandartNavigation(); }) .on('fotorama:load', function (e, fotorama) { if ($(gallerySelector).data('fotorama').fullScreen) { @@ -876,6 +905,7 @@ define([ .on('fotorama:show', function (e, fotorama) { $prevImage = $(fullscreenImageSelector); hideMagnifier(); + resetVars($(fullscreenImageSelector)); }) .on('fotorama:fullscreenexit', function (e, fotorama) { resetVars($(fullscreenImageSelector));