add swiping for expanded image modal

master
Aevann 2024-02-18 22:44:44 +02:00
parent 9590db0ddc
commit 6686ed0229
1 changed files with 85 additions and 0 deletions

View File

@ -61,3 +61,88 @@ imgnav_prev.onclick = () => {
expandImage(imgnav_prev.href) expandImage(imgnav_prev.href)
handle_navigation(-1) handle_navigation(-1)
} }
//swiping
if (screen_width < 768) {
let active = true
const _C = document.querySelector('#expandImageModal')
const N = _C.children.length
const NF = 30
let i = 0, x0 = null, y0 = null, locked = false, w, ini, fin, anf, n;
function unify(e) { return e.changedTouches ? e.changedTouches[0] : e };
function lock(e) {
x0 = unify(e).clientX;
y0 = unify(e).clientY;
locked = true
};
function drag(e) {
if(locked) {
let dx = unify(e).clientX - x0
let f = +(dx/w).toFixed(2);
let dy = unify(e).clientY - y0
let fy = +(dy/y).toFixed(2);
if (active && (f > 0.04 || f < -0.04) && (fy < 0.03 && fy > -0.03)) {
if (f > 0.2) {
active = false;
imgnav_prev.click()
setTimeout(() => {
active = true;
}, 500);
}
if (f < -0.2) {
active = false;
imgnav_next.click()
setTimeout(() => {
active = true;
}, 500);
}
}
}
};
function move(e) {
if(locked) {
let dx = unify(e).clientX - x0,
s = Math.sign(dx),
f = +(s*dx/w).toFixed(2);
ini = i - s*f;
if((i > 0 || s < 0) && (i < N - 1 || s > 0) && f > .2) {
i -= s;
f = 1 - f
}
fin = i;
anf = Math.round(f*NF);
n = 2 + Math.round(f)
x0 = null;
y0 = null;
locked = false;
}
};
function size() {
w = window.innerWidth
y = window.innerHeight
};
size();
addEventListener('resize', size, false);
_C.addEventListener('mousedown', lock, false);
_C.addEventListener('touchstart', lock, false);
_C.addEventListener('mousemove', drag, false);
_C.addEventListener('touchmove', drag, false);
_C.addEventListener('mouseup', move, false);
_C.addEventListener('touchend', move, false);
}