Skip to content

Conversation

@Nionor
Copy link

@Nionor Nionor commented Mar 19, 2025

#128
Quick and easy solution to add swipe functionality for smartphones to change column.
The swipeThreshold maybe should be changeable from some setting but seems to work quite well overall as is.


const swipeThreshold = 50;

if (Math.abs(touchendX - touchstartX) > Math.abs(touchendY - touchstartY) && Math.abs(touchendX - touchstartX) > swipeThreshold) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall good code but I think this if statement allows angles near 90º to trigger it, I suggest multiplying Math.abs(touchendY - touchstartY) by 2.

Also refactoring those 2 checks into variables is also a good Idea

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I never played around with touch stuff before so I might be wrong how they work but my thinking was that since the length of x must be greater then y the angle has to be less then 45º which I thought was ok.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand, the thing is that the code will trigger with a long swipe whose start and endpoints are in a cone of 90° from eachother. 60° makes more sense and maybe a time limit

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I think I understand what you mean, we just have different ways to look at triangles 😃 But I added the Y*2 so we get a shallower angle.

Copy link

@Muxutruk2 Muxutruk2 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I approve of this

@ralphocdol
Copy link
Contributor

ralphocdol commented Mar 20, 2025

I like this. But it has issues with the navigation when you have a bunch of them and the horizontal videos, scrolling through them would also trigger the swipe.

Edit:
Here's the additional script I tested that seems to fix the issues mentioned

const excludedClass = [
    'carousel-container',
    'mobile-navigation-page-links',
    // did I miss something?
];
document.addEventListener('touchend', function (event) {
    let targetElement = event.target;
    while (targetElement && targetElement.tagName !== 'IFRAME' && !excludedClass.some(c => targetElement.classList.contains(c))) {
      targetElement = targetElement.parentElement;
    }
    if (targetElement) return;

   // continue

}, false);

@Nionor
Copy link
Author

Nionor commented Mar 21, 2025

Ok I added some more checks for when to trigger the left and right swipes, hope that helps.
@ralphocdol that seems like a good idea to add too 👍

@Muxutruk2
Copy link

This should be merged

@hchavez8
Copy link

hchavez8 commented May 6, 2025

I'm new-ish to Github, and very new to app building. It's interesting to see what factors go into a feature that seems so easy. I would never have thought that angles and timing would be a part of it.

@Nionor
Copy link
Author

Nionor commented May 21, 2025

I moved this to a different branch so it got closed, created a new PR #684

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants