nerv-project/sphinx_galleria
5
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix swipe

Browse source
This commit is contained in:
Kujiu 2021-07-25 13:08:41 +02:00
parent 5bd4bd72d6
commit 3ddf47cd70
Signed by: kujiu
GPG key ID: ABBB2CAC6855599F
1 changed files with 68 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
static/sphinxgalleria/sphinxgalleria.mjs
View file

@ -170,47 +170,60 @@ export class SphinxGalleria {
var moveSwipe = function(ev) {self.moveSwipe(ev);}; var moveSwipe = function(ev) {self.moveSwipe(ev);};
var endSwipe = function(ev) {self.endSwipe(ev);}; var endSwipe = function(ev) {self.endSwipe(ev);};
self.node_mask.addEventListener('touchstart', startSwipe, true); self.node_mask.addEventListener('touchstart', startSwipe);
self.node_mask.addEventListener('touchmove', moveSwipe, true); self.node_mask.addEventListener('touchmove', moveSwipe);
self.node_mask.addEventListener('touchend', endSwipe, true); self.node_mask.addEventListener('touchend', endSwipe);
self.node_mask.addEventListener('touchcancel', endSwipe);
self.node_target.addEventListener('touchstart', startSwipe, true); self.node_target.addEventListener('touchstart', startSwipe);
self.node_target.addEventListener('touchmove', moveSwipe); self.node_target.addEventListener('touchmove', moveSwipe);
self.node_target.addEventListener('touchend', endSwipe, true); self.node_target.addEventListener('touchend', endSwipe);
self.node_target.addEventListener('touchcancel', endSwipe);
self.node_image.addEventListener('touchstart', startSwipe, true); self.node_mask.addEventListener('mousedown', startSwipe);
self.node_image.addEventListener('touchmove', moveSwipe); self.node_mask.addEventListener('mousemove', moveSwipe);
self.node_image.addEventListener('touchend', endSwipe, true); self.node_mask.addEventListener('mouseup', endSwipe);
self.dialog_image.addEventListener('touchstart', startSwipe, true); self.node_target.addEventListener('mousedown', startSwipe);
self.dialog_image.addEventListener('touchmove', moveSwipe); self.node_target.addEventListener('mousemove', moveSwipe);
self.dialog_image.addEventListener('touchend', endSwipe, true); self.node_target.addEventListener('mouseup', endSwipe);
self.node_mask.addEventListener('mousedown', startSwipe, true); startSwipe = function(ev) {
self.node_mask.addEventListener('mousemove', moveSwipe, true); if(ev.type !== 'touchstart') {
self.node_mask.addEventListener('mouseup', endSwipe, true);
self.node_target.addEventListener('mousedown', startSwipe, true);
self.node_target.addEventListener('mousemove', moveSwipe, true);
self.node_target.addEventListener('mouseup', endSwipe, true);
self.node_image.addEventListener('mousedown', startSwipe, true);
self.node_image.addEventListener('mousemove', moveSwipe, true);
self.node_image.addEventListener('mouseup', endSwipe, true);
self.dialog_image.addEventListener('mousedown', startSwipe, true);
self.dialog_image.addEventListener('mousemove', moveSwipe, true);
self.dialog_image.addEventListener('mouseup', endSwipe, true);
var removeClick = function(ev) {
if(self.touch_data.noclick) {
self.touch_data.noclick = false;
ev.preventDefault(); ev.preventDefault();
ev.stopImmediatePropagation();
} }
self.startSwipe(ev);
}; };
self.node_mask.addEventListener('click', removeClick, true); moveSwipe = function(ev) {
self.node_target.addEventListener('click', removeClick, true); if(ev.type !== 'touchmove') {
ev.preventDefault();
}
self.moveSwipe(ev);
};
endSwipe = function(ev) {
if(ev.type !== 'touchend' && ev.type !== 'touchcancel') {
ev.preventDefault();
}
self.endSwipe(ev);
};
self.node_image.addEventListener('touchstart', startSwipe);
self.node_image.addEventListener('touchmove', moveSwipe);
self.node_image.addEventListener('touchend', endSwipe);
self.node_image.addEventListener('touchcancel', endSwipe);
self.dialog_image.addEventListener('touchstart', startSwipe);
self.dialog_image.addEventListener('touchmove', moveSwipe);
self.dialog_image.addEventListener('touchend', endSwipe);
self.dialog_image.addEventListener('touchcancel', endSwipe);
self.node_image.addEventListener('mousedown', startSwipe);
self.node_image.addEventListener('mousemove', moveSwipe);
self.node_image.addEventListener('mouseup', endSwipe);
self.dialog_image.addEventListener('mousedown', startSwipe);
self.dialog_image.addEventListener('mousemove', moveSwipe);
self.dialog_image.addEventListener('mouseup', endSwipe);
var onprev = function(ev) { var onprev = function(ev) {
var key = ev.key; var key = ev.key;
@ -476,11 +489,10 @@ export class SphinxGalleria {
startSwipe(ev) { startSwipe(ev) {
var self = this; var self = this;
if(!self.oneimage && self.touch_data.id === -1) { if(!self.oneimage && self.touch_data.id === -1) {
ev.preventDefault();
if(ev.type === 'touchstart') { if(ev.type === 'touchstart') {
self.touch_data.id = ev.changedTouches[0].identifier; self.touch_data.id = ev.changedTouches[0].identifier;
self.touch_data.x = ev.changedTouches[0].clientX; self.touch_data.x = ev.changedTouches[0].clientX;
self.touch_data.y = ev.changedTouches[1].clientY; self.touch_data.y = ev.changedTouches[0].clientY;
} else { } else {
self.touch_data.id = -2; self.touch_data.id = -2;
self.touch_data.x = ev.clientX; self.touch_data.x = ev.clientX;
@ -500,16 +512,17 @@ export class SphinxGalleria {
moveSwipe(ev) { moveSwipe(ev) {
var self = this; var self = this;
var move = false; var move = false;
var touch = null;
if(!self.oneimage && self.touch_data.x) { if(!self.oneimage && self.touch_data.x) {
ev.preventDefault();
if(ev.type === 'touchmove') { if(ev.type === 'touchmove') {
ev.changedTouches.forEach(function(touch) { for(var i=0; i<ev.changedTouches.length; i++) {
touch = ev.changedTouches[i];
if(touch.identifier === self.touch_data.id) { if(touch.identifier === self.touch_data.id) {
move = true; move = true;
self.touch_data.current_x = touch.clientX; self.touch_data.current_x = touch.clientX;
} }
}); }
} else if(ev.which > 0) { } else if(ev.which > 0) {
move = true; move = true;
self.touch_data.current_x = ev.clientX; self.touch_data.current_x = ev.clientX;
@ -520,17 +533,18 @@ export class SphinxGalleria {
endSwipe(ev) { endSwipe(ev) {
var self = this; var self = this;
var stop = false; var stop = false;
var touch = null;
if(!self.oneimage && self.touch_data.x) { if(!self.oneimage && self.touch_data.x) {
ev.preventDefault(); if(ev.type === "touchend" || ev.type === "touchcancel") {
if(ev.type === "touchend") { for(var i=0; i<ev.changedTouches.length; i++) {
ev.changedTouches.forEach(function(touch) { touch = ev.changedTouches[i];
if(touch.identifier === self.touch_data.id) { if(touch.identifier === self.touch_data.id) {
stop = true; stop = true;
self.touch_data.current_x = touch.clientX; self.touch_data.current_x = touch.clientX;
self.touch_data.current_y = touch.clientY; self.touch_data.current_y = touch.clientY;
} }
}); }
} else { } else {
stop = true; stop = true;
self.touch_data.current_x = ev.clientX; self.touch_data.current_x = ev.clientX;
@ -547,6 +561,13 @@ export class SphinxGalleria {
self.swipeItem(); self.swipeItem();
} }
if(self.touch_data.swiped) {
self.touch_data.noclick = true;
setTimeout(function() {
self.touch_data.noclick = false;
}, 300);
}
self.touch_data.x = null; self.touch_data.x = null;
self.touch_data.y = null; self.touch_data.y = null;
self.touch_data.current_x = null; self.touch_data.current_x = null;
@ -562,25 +583,23 @@ export class SphinxGalleria {
var height = self.touch_data.current_y - self.touch_data.y; var height = self.touch_data.current_y - self.touch_data.y;
if(Math.abs(width) > self.getMinWidthSwipe()) { if(Math.abs(width) > self.getMinWidthSwipe()) {
if(width > 0) { if(width < 0) {
self.next(true); self.next(true);
self.touch_data.noclick = true;
self.touch_data.swiped = true; self.touch_data.swiped = true;
} else { } else {
self.prev(true); self.prev(true);
self.touch_data.noclick = true;
self.touch_data.swiped = true; self.touch_data.swiped = true;
} }
} else if(Math.abs(height) > self.node_mask.clientHeight/2) { } else if(Math.abs(height) > self.node_mask.clientHeight/3) {
self.closeModal(); self.closeModal();
self.touch_data.noclick = true; self.touch_data.swiped = true;
} }
} }
getMinWidthSwipe() { getMinWidthSwipe() {
if(this.node_mask.hidden) { if(this.node_mask.hidden) {
return this.node_image.clientWidth/2; return this.node_image.clientWidth/3;
} }
return this.dialog_image.clientWidth/2; return this.dialog_image.clientWidth/3;
} }
} }