Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Galleria thumbnails don't work on mobile #7021

Open
4 tasks
TheZlodziej opened this issue Dec 28, 2024 · 1 comment
Open
4 tasks

Galleria thumbnails don't work on mobile #7021

TheZlodziej opened this issue Dec 28, 2024 · 1 comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@TheZlodziej
Copy link

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 TheZlodziej added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 28, 2024
@TheZlodziej
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant