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