sholeace & mobile gesture

[hanc2006]

Hi @claviska,

what do you think about having a component that can handle gestures?
I did a few attempts to add the ability to slide the months in the sl-datepicker component using the gestures. The code worked, but I decided to move all the logic outside, in a new component that could handle more gestures, and can be shared with other components.

This new sl-gesture component can be used by other components to handle the following gestures:

• swipe
• slide
• drag
• pinch
• tap
• dbtap
• press

I also worked on another component that works closely with the above component. This other new component is called sl-transform, and is able to reflect all the CSS transformations generated from the sl-gesture component.

I shared a sandbox https://y1k8s.csb.app code that explains better when I just said. The code can also be tried on a desktop platform, as it uses a touch emulator. Hold SHIFT + mouse to emulate two fingers.

[claviska]

That's a pretty slick demo. It could be a handy utility. My gut reaction is I that don't want to commit to owning what's effectively a Hammer.js equivalent, but then again I haven't compared them side by side to see the differences (size, functionality, etc.).

Is the code in src/internal/gesture|matrix|etc. all original?

[hanc2006]

but then again I haven't compared them side by side to see the differences (size, functionality, etc.)

This small gesture library supports the same gestures as Hammer.js. I don't know if Hammer.js has more specific features because I always used it like a black box. What I know is that Hammer.js today has 271 open issues, and the latest official release is from 2016.

Hammer.js 11.5Kb gzip (v2.0.8)
Gesture.js 1.5Kb gzip

Is the code in src/internal/gesture|matrix|etc. all original?

The matrix.ts was created using code from several repositories and online articles. This version has a single method that generates a CSS matrix from all CSS transformation property at once.

The touch-emulator.js is my custom version of the one used in Hammer.js to work with web components that make use of shadow DOM.

In transform.ts, the idea of ​​creating responsive properties using callbacks comes from an online article.

All the rest of the code is original 👍

[claviska]

What I know is that Hammer.js today has 271 open issues, and the latest official release is from 2016.

This is my concern. Gestures aren't an easy thing to get right and I'll be responsible for the support and maintenance burden moving forward. If this is something you're interesting in maintaining, perhaps releasing it as a separate library is a better idea.

The matrix.ts was created using code from several repositories and online articles.

Licensing and attribution is important, so anything copied or derived needs to be labeled as such (whether it goes into SL or your own repo).

Don't get me wrong — it's a really cool idea and definitely useful! It might be a bit out of scope for what I'm able to maintain though.

[hanc2006]

Licensing and attribution is important, so anything copied or derived needs to be labeled as such (whether it goes into SL or your own repo).

Of course! This code is still in draft, and once completed all external references will be added.

Don't get me wrong — it's a really cool idea and definitely useful! It might be a bit out of scope for what I'm able to maintain though.

Don't worry, I get it. I am using the shoelace library in my project and I created these components because I need them, but in any case I like to contribute and give something to the community.

As you say maybe I will create a separate add-ons library that can be used with shoelace to add extra components or functionalities 👍