Skip to content

Commit c592174

Browse files
uharbachouuharbachou
committed
Merge pull request #68 from ValeryYafremau/JS-329
JS-329: Conflict behavior of keyboards events
2 parents fe035ba + 1fd75a9 commit c592174

File tree

3 files changed

+53
-25
lines changed

3 files changed

+53
-25
lines changed

‎lib/web/fotorama/fotorama.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1878,7 +1878,7 @@ fotoramaVersion = '4.6.4';
18781878
}
18791879

18801880
function allowKey(key) {
1881-
return o_keyboard[key] || that.fullScreen;
1881+
return o_keyboard[key];
18821882
}
18831883

18841884
function setStagePosition() {
@@ -2240,7 +2240,7 @@ fotoramaVersion = '4.6.4';
22402240

22412241
if (!$frame) return;
22422242

2243-
var fullFLAG = that.fullScreen && (!frameData.$full || dataFrame.full) && type === 'stage';
2243+
var fullFLAG = that.fullScreen && !frameData.$full && type === 'stage';
22442244

22452245
if (frameData.$img && !again && !fullFLAG) return;
22462246

@@ -2272,6 +2272,7 @@ fotoramaVersion = '4.6.4';
22722272

22732273
if ((!dataFrame.html || type !== 'stage') && dummy && dummy !== src) {
22742274
dataFrame[srcKey] = src = dummy;
2275+
frameData.$full = null;
22752276
loadImg([index], type, specialMeasures, true);
22762277
} else {
22772278
if (src && !dataFrame.html && !fullFLAG) {

‎lib/web/mage/gallery/gallery.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ define([
170170
settings.focusableStart = this.settings.$element.find('[data-gallery-role="fotorama__focusable-start"]');
171171
settings.focusableEnd = this.settings.$element.find('[data-gallery-role="fotorama__focusable-end"]');
172172
settings.closeIcon = this.settings.$element.find('[data-gallery-role="fotorama__fullscreen-icon"]');
173-
settings.fullscreenConfig.swipe = false;
173+
settings.fullscreenConfig.swipe = true;
174174

175175
settings.$gallery.on('fotorama:fullscreenenter', function () {
176176
settings.closeIcon.show();
@@ -185,9 +185,6 @@ define([
185185
settings.api.updateOptions(settings.activeBreakpoint.options, true);
186186
}
187187
settings.isFullscreen = true;
188-
settings.$element.data('gallery').updateOptions({
189-
swipe: false
190-
});
191188
});
192189

193190
settings.$gallery.on('fotorama:fullscreenexit', function () {

‎lib/web/magnifier/magnify.js

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ define([
2424
zoomOutLoaded = 'zoom-out-loaded',
2525
zoomInDisabled = 'fotorama__zoom-in--disabled',
2626
zoomOutDisabled = 'fotorama__zoom-out--disabled',
27+
keyboardNavigation,
2728
videoContainerClass = 'fotorama-video-container',
2829
hideMagnifier,
2930
dragFlag,
@@ -228,6 +229,36 @@ define([
228229
$image.css(settings);
229230
}
230231
}
232+
/**
233+
* Toggles fotorama's keyboard and mouse/touch navigation.
234+
*/
235+
function toggleStandartNavigation () {
236+
var $selectable =
237+
$('a[href], area[href], input, select, textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]')
238+
.not('[tabindex=-1], [disabled], :hidden'),
239+
fotorama = $(gallerySelector).data('fotorama'),
240+
$focus = $(':focus'),
241+
index;
242+
243+
if (fotorama.fullScreen) {
244+
245+
$selectable.each(function (number) {
246+
247+
if ($(this).is($focus)) {
248+
index = number;
249+
}
250+
});
251+
252+
fotorama.setOptions({
253+
swipe: !allowZoomOut,
254+
keyboard: !allowZoomOut
255+
});
256+
257+
if (_.isNumber(index)) {
258+
$selectable.eq(index).focus();
259+
}
260+
}
261+
};
231262

232263
function zoomIn(e, xStep, yStep) {
233264
var $image,
@@ -249,6 +280,7 @@ define([
249280
imageHeight = $image.height();
250281
ratio = imageWidth / imageHeight;
251282
allowZoomOut = true;
283+
toggleStandartNavigation();
252284

253285
if (!$image.hasClass(imageZoommable)) {
254286
toggleZoomable($image, true);
@@ -375,6 +407,7 @@ define([
375407
checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
376408
} else {
377409
allowZoomOut = dragFlag = false;
410+
toggleStandartNavigation();
378411
fitIntoParent();
379412
}
380413
}
@@ -394,6 +427,7 @@ define([
394427
checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
395428
} else {
396429
allowZoomOut = dragFlag = false;
430+
toggleStandartNavigation();
397431
fitIntoParent();
398432
}
399433
}
@@ -522,12 +556,12 @@ define([
522556
'left': left
523557
});
524558
$image.css('right', '');
525-
} else if (Math.abs(dy) < 1 &&
559+
} else if (Math.abs(dy) < 1 && allowZoomOut &&
526560
!(e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove')) {
527561
dx < 0 ? $(gallerySelector).data('fotorama').show('>') : $(gallerySelector).data('fotorama').show('<');
528562
}
529563

530-
if ($image.width() <= $imageContainer.width() &&
564+
if ($image.width() <= $imageContainer.width() && allowZoomOut &&
531565
(e.type === 'mousemove' || e.type === 'touchmove' || e.type === 'pointermove' || e.type === 'MSPointerMove') &&
532566
Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > swipeCondition) {
533567
dx < 0 ? swipeSlide('>') : swipeSlide('<');
@@ -640,26 +674,24 @@ define([
640674
}
641675
});
642676

677+
if (keyboardNavigation) {
678+
$(document).unbind('keydown', keyboardNavigation);
679+
}
680+
643681
/**
644682
* Replaces original navigations with better one
645683
* @param e - event object
646684
*/
647-
var keyboardNavigation = function (e) {
685+
keyboardNavigation = function (e) {
648686
var step = 40,
649687
$focus = $(':focus'),
650688
isFullScreen = $(gallerySelector).data('fotorama').fullScreen,
651689
initVars = function () {
652690
imagePosX = $(fullscreenImageSelector, $gallery).offset().left;
653691
imagePosY = $(fullscreenImageSelector, $gallery).offset().top;
654692
};
655-
656-
if (isFullScreen && !$focus.attr('data-gallery-role') && e.keyCode === 9) {
657-
$('[data-gallery-role="fotorama__fullscreen-icon"]').focus();
658-
e.preventDefault();
659-
}
660-
661-
if ($focus.attr('data-gallery-role') || !$focus.length) {
662-
693+
694+
if (($focus.attr('data-gallery-role') || !$focus.length) && allowZoomOut) {
663695
if (isFullScreen) {
664696
imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left;
665697
imagePosY = $(fullscreenImageSelector, $(gallerySelector)).offset().top;
@@ -670,8 +702,6 @@ define([
670702
if (isFullScreen) {
671703
initVars();
672704
shiftImage(-step, 0, e);
673-
} else {
674-
$(gallerySelector).data('fotorama').show('>');
675705
}
676706
}
677707

@@ -688,8 +718,6 @@ define([
688718
if (isFullScreen) {
689719
initVars();
690720
shiftImage(step, 0, e);
691-
} else {
692-
$(gallerySelector).data('fotorama').show('<');
693721
}
694722
}
695723

@@ -702,17 +730,16 @@ define([
702730
}
703731
}
704732
}
705-
706-
if (e.keyCode === 27 && isFullScreen) {
733+
734+
if (e.keyCode === 27 && isFullScreen && allowZoomOut) {
707735
$(gallerySelector).data('fotorama').cancelFullScreen();
708736
}
709737
};
710738

711739
/**
712740
* @todo keyboard navigation through Fotorama Api.
713741
*/
714-
//$(document).unbind('keydown', keyboardNavigation);
715-
//$(document).keydown(keyboardNavigation);
742+
$(document).keydown(keyboardNavigation);
716743

717744
$(document).on(isTouchEnabled ? 'touchend' : 'mouseup pointerup MSPointerUp', function (e) {
718745

@@ -866,6 +893,8 @@ define([
866893
calculateMinSize($prevImage);
867894
resetVars($prevImage);
868895
}
896+
897+
toggleStandartNavigation();
869898
})
870899
.on('fotorama:load', function (e, fotorama) {
871900
if ($(gallerySelector).data('fotorama').fullScreen) {
@@ -876,6 +905,7 @@ define([
876905
.on('fotorama:show', function (e, fotorama) {
877906
$prevImage = $(fullscreenImageSelector);
878907
hideMagnifier();
908+
resetVars($(fullscreenImageSelector));
879909
})
880910
.on('fotorama:fullscreenexit', function (e, fotorama) {
881911
resetVars($(fullscreenImageSelector));

0 commit comments

Comments
 (0)