search

MurhafSousli / ngx-gallery

Angular Gallery, Carousel and Lightbox
https://ngx-gallery.netlify.app/
MIT License
609 stars 129 forks source link

Replace hammerjs with native touch events #449

Open vpetrusevici opened 2 years ago

vpetrusevici commented 2 years ago

What is the expected behavior?

Use native pointermove event instead of outdated hammerjs.

What is the current behavior?

We should install and use hammerjs to enable touch events.

What is the use-case or motivation for changing an existing behavior?

Possibility to avoid additional dependency.

Is there anything else we should know?

I can try to implement it if you agree.

vpetrusevici commented 2 years ago

It also can be just another tree-shacking library like this one https://github.com/nolimits4web/swiper

MurhafSousli commented 2 years ago

Yes, you can try, PRs are welcome!

vpetrusevici commented 2 years ago

Added a draft PR as PoW

MurhafSousli commented 2 years ago

@vpetrusevici Thanks, I will have a look!

vpetrusevici commented 2 years ago

@MurhafSousli I finished all related work. Hope I didn't miss any features

vpetrusevici commented 2 years ago

Hi, @MurhafSousli Sorry to bother you, but could you please check my PR?

MurhafSousli commented 2 years ago

@vpetrusevici an update on this issue... version 8 removed the usage of HammerJs for mobile sliding! it does not use the native touch events either! it is now using the native scrolling to slide the gallery!

However, HammerJs is still used BUT only for sliding on desktop browser using the mouse.

Feedback is appreciated https://github.com/MurhafSousli/ngx-gallery/releases/tag/v8.0.0-beta.1

vpetrusevici commented 2 years ago

Thank you! I'll test it :)

vpetrusevici commented 2 years ago

Hi! I notice some update promlem in gallery thumbs https://1drv.ms/u/s!ArDpOrDSusKbvyki94glg5pxuZNB?e=h3S3aK

MurhafSousli commented 2 years ago

Should be fixed in v8.0.0-beta3

vpetrusevici commented 2 years ago

It's working well in a lightbox, but in a simple gallery the problem still exists. I think the problem in the async pipe. You can try to use this variant https://github.com/MurhafSousli/ngx-gallery/pull/483/files#diff-b9348fa0028b29ce8458b889a0dbfa72d9b766f99e4666c57e9392a5de5c7012 It should subscribe outside of ngZone and execute changes in ngZone

MurhafSousli commented 2 years ago

The problem is with the gallery size, if the gallery's width value has fraction e.g. 500.63px, then it will have this issue, but with the latest fix, I forced the gallery to have a fixed size value

vpetrusevici commented 2 years ago

I tried with beta4. The same behaviour

vpetrusevici commented 2 years ago

Tested on mobile. Here looks good

MurhafSousli commented 1 year ago

Can you test it with beta5?

vpetrusevici commented 1 year ago

I tested in chrome and android. Looks good. Only 1 bug found for SSR https://github.com/MurhafSousli/ngx-gallery/issues/532