Делаю закрытие модального окна lightcase свайпом вверх для мобилок, отслеживаю когда окно открывается, и когда закрываться. Суть в том чтобы выполнять функцию с отслеживанием свайпа когда окно открыто, а когда окно закрылось -> или удалить функцию свайпа или отключить. Слышал о коллбеках в js, может они могут помочь?
Когда кликаю по миниатюре открывается окно. Когда свайпаешь, функция все равно продолжает выполняться..
// Close lightcase on swipe funtion
jQuery(document).ready(function() {
$(".item img").on('click', function(event) {
console.log("open");
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
if ( xDiff > 0 ) { // Свайп в лево
// Не использую, не мешает
} else { // Свайп в право
// Не использую, не мешает
}
} else {
if ( yDiff > 0 ) { // Свайп вверх
lightcase.close();
console.log("close");
callback();
// Даже когда lightcase закрыта, эта if выполняеться, в результате чего сайт стробит. Если бы сдесь венуться на функцию клика, чтобы это все не выполнялось пока не кликнут снова
} else {
lightcase.close(); // Свайп вниз
console.log("close");
callback();
// Даже когда lightcase закрыта, эта if выполняеться, в результате чего сайт стробит. Если бы сдесь венуться на функцию клика, чтобы это все не выполнялось пока не кликнут снова
}
}
xDown = null;
yDown = null;
};
});
});
