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 · 2 comments
Open
4 tasks

Galleria thumbnails don't work on mobile #7021

TheZlodziej opened this issue Dec 28, 2024 · 2 comments
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Milestone

Comments

@TheZlodziej
Copy link
Contributor

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
Contributor 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.

@mertsincan mertsincan added Resolution: Help Wanted Issue or pull request requires extra help and feedback and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jan 6, 2025
@mertsincan mertsincan added this to the Future milestone Jan 6, 2025
@github-project-automation github-project-automation bot moved this to Review in PrimeVue Jan 6, 2025
Copy link

github-actions bot commented Jan 6, 2025

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! ✨

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Projects
Status: Review
Development

No branches or pull requests

2 participants