Skip to content

Commit

Permalink
Merge pull request #68 from ValeryYafremau/JS-329
Browse files Browse the repository at this point in the history 
JS-329: Conflict behavior of keyboards events
  • Loading branch information
@uharbachou1
uharbachou1 committed Dec 10, 2015
2 parents fe035ba + 1fd75a9 commit c592174
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 25 deletions.
5 changes: 3 additions & 2 deletions lib/web/fotorama/fotorama.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1878,7 +1878,7 @@ fotoramaVersion = '4.6.4';
}

function allowKey(key) {
return o_keyboard[key] || that.fullScreen;
return o_keyboard[key];
}

function setStagePosition() {
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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) {
Expand Down
5 changes: 1 addition & 4 deletions lib/web/mage/gallery/gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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 () {
Expand Down
68 changes: 49 additions & 19 deletions lib/web/magnifier/magnify.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -249,6 +280,7 @@ define([
imageHeight = $image.height();
ratio = imageWidth / imageHeight;
allowZoomOut = true;
toggleStandartNavigation();

if (!$image.hasClass(imageZoommable)) {
toggleZoomable($image, true);
Expand Down Expand Up @@ -375,6 +407,7 @@ define([
checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
} else {
allowZoomOut = dragFlag = false;
toggleStandartNavigation();
fitIntoParent();
}
}
Expand All @@ -394,6 +427,7 @@ define([
checkFullscreenImagePosition($image, dimentions, zoomWidthStep, zoomHeightStep);
} else {
allowZoomOut = dragFlag = false;
toggleStandartNavigation();
fitIntoParent();
}
}
Expand Down Expand Up @@ -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('<');
Expand Down Expand Up @@ -640,26 +674,24 @@ 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,
initVars = function () {
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;
Expand All @@ -670,8 +702,6 @@ define([
if (isFullScreen) {
initVars();
shiftImage(-step, 0, e);
} else {
$(gallerySelector).data('fotorama').show('>');
}
}

Expand All @@ -688,8 +718,6 @@ define([
if (isFullScreen) {
initVars();
shiftImage(step, 0, e);
} else {
$(gallerySelector).data('fotorama').show('<');
}
}

Expand All @@ -702,17 +730,16 @@ define([
}
}
}

if (e.keyCode === 27 && isFullScreen) {
if (e.keyCode === 27 && isFullScreen && allowZoomOut) {
$(gallerySelector).data('fotorama').cancelFullScreen();
}
};

/**
* @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) {

Expand Down Expand Up @@ -866,6 +893,8 @@ define([
calculateMinSize($prevImage);
resetVars($prevImage);
}

toggleStandartNavigation();
})
.on('fotorama:load', function (e, fotorama) {
if ($(gallerySelector).data('fotorama').fullScreen) {
Expand All @@ -876,6 +905,7 @@ define([
.on('fotorama:show', function (e, fotorama) {
$prevImage = $(fullscreenImageSelector);
hideMagnifier();
resetVars($(fullscreenImageSelector));
})
.on('fotorama:fullscreenexit', function (e, fotorama) {
resetVars($(fullscreenImageSelector));
Expand Down

0 comments on commit c592174

Please sign in to comment.