Galleria thumbnails don't work on mobile

[TheZlodziej]

Describe the bug

Clicking on Galleria thumbnails on mobile device doesn't do anything. If you want to change the image you have to swipe from one side to another

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-tmvmg2i6?file=src%2FApp.vue

Environment

Vue version

3

PrimeVue version

4.2.5

Node version

18.17.1

Browser(s)

No response

Steps to reproduce the behavior

1. Switch the view to mobile (don't resize the window but rather use the "toggle device toolbar" button in devtools [or simply open on mobile device - i found this on iOS, Safari)
2. Click on the thumbnail

Here is the result i get in my app (and reproduced in the link) - in there you can see that only swiping to the side changes the image.

Recording.2024-12-28.133302.mp4

Expected behavior

Clicking on thumbnail should set current index to selected image just like on desktop

[TheZlodziej]

I suppose this part of GalleriaThumbnails is the problem

onTouchStart(e) {
            let touchobj = e.changedTouches[0];

            this.startPos = {
                x: touchobj.pageX,
                y: touchobj.pageY
            };
        },
        onTouchMove(e) {
            if (e.cancelable) {
                e.preventDefault();
            }
        },
        onTouchEnd(e) {
            let touchobj = e.changedTouches[0];

            if (this.isVertical) {
                this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
            } else {
                this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
            }
        },
        changePageOnTouch(e, diff) {
            if (diff < 0) {
                // left
                this.navForward(e);
            } else {
                // right
                this.navBackward(e);
            }
        },

I probably treats a single touch as touch move with diff 0 and thus, treating it as "right swipe" (checks out in the reproducer)

Although if(diff === 0) could solve this issue, I think its ill-behaviour to even consider swipes as a way to change current picture if the "show thumbnails" is enabled.

[github-actions]

Due to PrimeTek's demanding roadmap for PrimeVue and the limited bandwidth of the core team, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨

[JohannesRiegler]

I stumbled upon the same issue, until my PR is released I am using the following workaround to fix it.

  const touchStart = { x: 0, y: 0 }
  const touchThreshold = 10

  function onTouchStart(e: TouchEvent) {
    const touch = e.changedTouches[0]

    touchStart.x = touch.pageX
    touchStart.y = touch.pageY
  }

  function onTouchEnd(event: TouchEvent) {
    const touch = event.changedTouches[0]
    const diffX = touch.pageX - touchStart.x

    if (Math.abs(diffX) < touchThreshold) {
      event.stopPropagation()
    }
  }

And then use the functions in your template like this:

<Galleria>
    <template #thumbnail="slotProps">
      <div @touchstart="onTouchStart" @touchend="onTouchEnd">
        ...
      </div>
    </template>
  </Galleria>