HammerWidgets - Actions on Swipe, Pan, Press, Tap and Pinch

[BurningTreeC]

Hi, I've updated my Gesture Widgets that use the hammer.js library (now in the tiddlywiki plugin library)

They allow triggering actions when Swipe, Pan, Press, Tap or Pinch(Rotate) Gestures are recognized

You can use them on any html tag like <div>, <svg>, <a> ... simply said on each element that can have a class attribute, also <$button> and friends

The element needs an assigned class and that class needs to be passed to the hammer widget with $targets="class-of-the-element(s)"

You'll find the docs and widgets on http://hammerwidgets.tiddlyspot.com

For bug reports, help and comments just leave a message in this thread

BurningTreeC

[BurningTreeC]

...Pinch is coming soon!

[TonyM]

I am not sure how I am going to use this but it sounds great.

Please publish some simple use cases and example so the those of us less familular at using this tech can access it.

Good work
Tony

[Mat]

What the...!!! Wow! That should really enable a UI face lift and adaption to the mobile screen age!

now a tiddlywiki core plugin

Unclear what you mean with this. For one thing, the core is a plugin and it is the only plugin that default/empty TW comes installed with. I'm guessing the hammer library will not come with 'empty' by deafult?

Will hammer enable freely scattered tiddlers like in Cecily TW? (I fail to find a link to Cecily)

Thank you BurningTreeC. May you never burn out.

<:-)

p.s I can't help but feel this somehow should be applicable for my TidBitz experiments. BTW, I've continued to dabble around but fail to get anywhere meaningful.

[BurningTreeC]

Thanks Tony,

I'm planning to use them on the page for more real-worls use-cases

Right now each plugin has a doc tiddler with an example

@JD over at http://j.d.material.tiddlyspot.com is using the swipe widget for the FAB button in the bottom right corner and for showing/hiding the sidebar (swipe from the right screen edge/swipe from the left screen edge)

http://smarties.tiddlyspot.com uses the pan widget to move the sidebar

http://panflex.tiddlyspot.com uses the pan widget to show top/bottom/left/right panels

http://tiddlypiano.tiddlyspot.com uses the press widget to create kind of a piano with tuba sounds

The most recent and stable versions of the widgets are on the new page, and there they should be retrieved

BTC

[BurningTreeC]

What the...!!! Wow! That should really enable a UI face lift and adaption to the mobile screen age!

now a tiddlywiki core plugin

Unclear what you mean with this. For one thing, the core is a plugin and it is the only plugin that default/empty TW comes installed with. I'm guessing the hammer library will not come with 'empty' by deafult?

Sorry, I'll edit this. I mean it's in the tiddlywiki plugin library 

Will hammer enable freely scattered tiddlers like in Cecily TW? (I fail to find a link to Cecily)

Yes I already tried that. The pan widget is a multi-talent and I recommend using that. It will need some CSS and formula calculations, but it's doable 

Thank you BurningTreeC. May you never burn out.

<:-)

Thanks Mat, trying to keep the fire burning  

p.s I can't help but feel this somehow should be applicable for my TidBitz experiments. BTW, I've continued to dabble around but fail to get anywhere meaningful.

Yeah, I was thinking if the pan widget maybe can be used as a drag&drop thing, maybe someone comes up with a neat solution

For your TidBitz I'll make a demo for my last solution I sent you when I find the time

BTC

[David Gifford]

Added to the TiddlyWiki toolmap under Mobile tools. Great stuff.

On Sunday, April 8, 2018 at 5:51:52 AM UTC-5, BurningTreeC wrote:

Hi, I've updated my Gesture Widgets that use the hammer.js library (now in the tiddlywiki plugin library)

They allow triggering actions when Swipe, Pan, Press, Tap or Pinch(Rotate) Gestures are recognized

You can use them on any html tag like <div>, <svg>, <a> ... 

The element needs a css class and that class needs to be passed to the hammer widget with $targets="class-of-the-element(s)"

[JD]

I love how simple these widgets are! thank you! 

The Tap and Swipe widgets are really cool. I have them running on my Material Theme demo on the FAB button.

Swipe up to reveal the secondary FABs. Tapping any of them will hide them again (or swipe down to hide them). May that demo page act as a demo for these widgets as well.

As for theme plugin packaging, do I simply include the widgets on my theme package, or add them as dependents? Thanks!

On Sunday, April 8, 2018 at 7:51:52 PM UTC+9, BurningTreeC wrote:

Hi, I've updated my Gesture Widgets that use the hammer.js library (now in the tiddlywiki plugin library)

They allow triggering actions when Swipe, Pan, Press, Tap or Pinch(Rotate) Gestures are recognized

You can use them on any html tag like <div>, <svg>, <a> ... 

The element needs a css class and that class needs to be passed to the hammer widget with $targets="class-of-the-element(s)"

[BurningTreeC]

Added to the TiddlyWiki toolmap under Mobile tools. Great stuff.

Thanks David, much appreciated!

BTC 

[BurningTreeC]

I love how simple these widgets are! thank you! 

The Tap and Swipe widgets are really cool. I have them running on my Material Theme demo on the FAB button.

Swipe up to reveal the secondary FABs. Tapping any of them will hide them again (or swipe down to hide them). May that demo page act as a demo for these widgets as well.

As for theme plugin packaging, do I simply include the widgets on my theme package, or add them as dependents? Thanks!

Thanks JD, I've tested them on your page, awesome how they work with the FAB Buttons and the sidebar!

I don't know yet how to package them, should they be single plugins or a plugin with all of them?

You can however package them how you like, that's no problem

BTC

[Jan Johannpeter]

Hi Simon,

I am absolutely amazed how much you accomplished ... and I am proud you linked smarties.tiddlyspot.com as a reference. I would like to update which plugins and tiddlers will be necessary for the sidebar after the great update of TW.

Looking at the great UX of the SlideBar, I would I would like to switch to the pan widget for the left menu as well because it explains itself so much better in the experience. 

But I think I still would like to have a feature that could enhance the widget for this:

I would like to have a threshold for the endaction to have this effect:

If I pan the menu it beginns to move out. If pan less then 100px it snaps back, if I pan more than 100px it snaps out completely.

Could you make this possible?

-Jan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/caf7e265-f7df-48ae-96e0-e54eb35522f2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[BurningTreeC]

Hi Simon,

I am absolutely amazed how much you accomplished ... and I am proud you linked smarties.tiddlyspot.com as a reference. I would like to update which plugins and tiddlers will be necessary for the sidebar after the great update of TW.

Looking at the great UX of the SlideBar, I would I would like to switch to the pan widget for the left menu as well because it explains itself so much better in the experience. 

But I think I still would like to have a feature that could enhance the widget for this:

I would like to have a threshold for the endaction to have this effect:

If I pan the menu it beginns to move out. If pan less then 100px it snaps back, if I pan more than 100px it snaps out completely.

Could you make this possible?

-Jan

Hi Jan, yes that's possible to accomplish

You can use the whole left bar as a pan element

then the endactions will look like this: 

<$vars snapLimit="100" pointerPosition={{pan-state-tiddler!!center-x}}>

<$vars positionBelowLimitCheck=<<formula "lte(<<pointerPosition>>, <<snapLimit>>)">>>

<$list filter="[<positionBelowLimitCheck>regexp[^TRUE$]]">

set left bar off

</$list>

<$list filter="[<positionBelowLimitCheck>!regexp[^TRUE$]]">

set left bar on

</$list>

</$vars>

</$vars>

this will not move the left bar with the pointer, it will just jump from on to off and vice-versa

Is that what you want to accomplish?

 

Simon

[BurningTreeC]

@Jan ... with my example, when the left bar is hidden, there's nothing to bring it back by panning

It's better to create a div that's always there, like the slidebar, and assign the pan widget to that div

when the left bar is off, it should be at the left screen border, when the bar is on, it should be where the bar ends

[Jan Johannpeter]

Hi Simon,

very good that this seems to be possible...But I would like to see the sidebar being dragged before snapping back or snapping away when lifting the finger. 

The whole thing ist not vitally necessary of course but it feels better in the user experience...

Regarding the div to drag/pan in the menu when it is turned off... I thought about that, the problem is that it is either so small that you risk accidentally triggering the jump-back-in-history-mechanism which is implemented in most of the mobile browsers...or it is takink to much space.

I would like to use the entire story-river to drag in the menu on a mobile screen. On bigger screens I would take the left margin of the tiddler - as you did for the slidebar

Herzliche Grüße

Jan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ec58b53c-0741-43ea-ab1e-f868322b4334%40googlegroups.com.

[BurningTreeC]

Hi Simon,

very good that this seems to be possible...But I would like to see the sidebar being dragged before snapping back or snapping away when lifting the finger. 

The whole thing ist not vitally necessary of course but it feels better in the user experience...

Regarding the div to drag/pan in the menu when it is turned off... I thought about that, the problem is that it is either so small that you risk accidentally triggering the jump-back-in-history-mechanism which is implemented in most of the mobile browsers...or it is takink to much space.

I would like to use the entire story-river to drag in the menu on a mobile screen. On bigger screens I would take the left margin of the tiddler - as you did for the slidebar

Herzliche Grüße

Jan

Hi Jan , 

The problem here is not if it's possible or not, but that it's possible to do in so many different ways 

It's a combination of two/three plugins and some css calculations all working together 

The first thing one should understand here is, that the pan widget gives you the coordinates in pixels in the state tiddler (center-x field)

By transcluding that field in a stylesheet you can pan on an element and set the position of that element or another element to that new position

for example:

.tc-tiddler-frame {

    position: absolute;

    left: {{$:/state/pan!!center-x}}px;

}

now if you add the <$pan $targets="tc-tiddler-frame"> in the $:/core/ui/ViewTemplate before the <div class=<<frame-classes>>> then you should be able to move tiddlers left/right

If not, then it needs only some css adjustments 

What I want to say is, that it's important to first understand how these parts work together,

then it's an easy thing to realize your ideas

Simon

[Jan Johannpeter]

Hello Simon, 

I will need some time to see what is best.

I think I will change the story-left with that techinque.

Yours Jan

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/2f6b1e5a-bb39-40e3-bced-cbfc25f08cb0%40googlegroups.com.

[BurningTreeC]

... and the Pinch widget is online, too

some small changes may be made the next days on some widgets the next days. nothing big - cleaning up and looking for errors

BTC

[JD]

Hi, BTC

I noticed that text inside the target-div inside the swipe widget isn't selectable. Is there a work-around to this that I'm missing?

I'm thinking of creating a position:absolute height:100% width:100% view template with the swipe widget that will enable swipe-left to close tiddler, and swipe-right to edit tiddler, but I want to retain the ability to select text. Is this possible? 

[BurningTreeC]

Hi, BTC

I noticed that text inside the target-div inside the swipe widget isn't selectable.

Yes, that's something hammerjs disables by default, because swiping would then select text, too - and that's not wanted in most of the cases

 

Is there a work-around to this that I'm missing?

I could make something that can be passed to the widget to disable it - I'll have to see

You could try a css tweak:

what does adding 

    

     user-select: text !important; 

to the element that should be made swipeable?

I'm thinking of creating a position:absolute height:100% width:100% view template with the swipe widget that will enable swipe-left to close tiddler, and swipe-right to edit tiddler, but I want to retain the ability to select text. Is this possible? 

Because of the text-select blocking I prefer using the top/left/right/bottom unused space of tiddlers for swipe actions

The blocking of user-select is an important part for hammerjs to work better ... I think if it selects the text every time you swipe, you wouldn't be happy either

BTC 

[JD]

what does adding 

    

     user-select: text !important; 

to the element that should be made swipeable?

This works! I tried it on your swipable sidebar over at MuriTest, thanks!

 

Because of the text-select blocking I prefer using the top/left/right/bottom unused space of tiddlers for swipe actions

The blocking of user-select is an important part for hammerjs to work better ... I think if it selects the text every time you swipe, you wouldn't be happy either

Yeah, I imagined applying the above idea to my mobile workflow, where text-selection is triggered by long press. But in touch-enabled desktop, yeah, I can see how text-selection can be disruptive :)