Limit Observer to single action

[Thomas Günther]

I'm still working on my scrollable slider. You can scroll the slider but you can also drag to left/right to move to the next/previous image.

 

It works quite well already, but I noticed an issue with how Observer observes the pointer action. Sometimes you can get stuck in a click — for example when switching the tab and then coming back to the page. You have to click again so Observer (I guess) can catch the mouseup event. Otherwise you'll find the Observer triggering left/right every time you move the mouse.

 

That's why I want to limit the Observer to one single action. Once the action (previous/next image) is called, the Observer should reset. I tried to do that with .disable()and .enable() but it resulted in some wonky behavior instead.

 

Is there some way to do that? Am I missing something? Thanks in advance!

 

See the Pen qBxMVmB by medienbaecker (@medienbaecker) on CodePen

[GreenSock]

Can you provide more details please?: 

1. What do you mean by "limit to a single action"? What are you considering an "action"?
2. How exactly can I reproduce the "wonky behavior" and the "sometimes you can get stuck..."? I switched tabs and came back and didn't seem to get stuck. 

The more focused and reduced the demo, the better we'll be able to get you a solid answer. 

[Thomas Günther]

Hey Jack,

 

thanks for your reply. I'll try to explain it better by answering your questions:

 

28 minutes ago, GreenSock said:

What do you mean by "limit to a single action"? What are you considering an "action"?

An action is animating to the previous or next image to me. And I want to limit one drag (user clicks and drags in a direction) to one action. Currently you can just hold the click and the Observer will trigger every time you move the mouse. It even ignores the dragMinimum

 

28 minutes ago, GreenSock said:

How exactly can I reproduce the "wonky behavior" and the "sometimes you can get stuck..."? I switched tabs and came back and didn't seem to get stuck. 

It's hard to reliably reproduce but it happens periodically, especially on my client's website where I also use this slider: https://stjakobi.de/veranstaltungen/harald-welzer-und-das-schreiben-ueber-krisen

One way to reproduce it is to start dragging, then switching the tab, and then releasing the mouse button. This is of course quite unrealistic and doesn't happen a lot, but similar behavior can get triggered when switching windows, by browser or OS alerts, by scrolling etc.

 

What I want Observer to do: once it triggers an action, for example animating to the next image, it should consider this drag to be done. I need some way to tell Observer to temporarily stop listening to the pointer event.

[GreenSock]

14 hours ago, Thomas Günther said:

Currently you can just hold the click and the Observer will trigger every time you move the mouse. It even ignores the dragMinimum

It works correctly for me - dragMinimum is the minimum number of pixels it will allow the pointer to move before it considers it a drag. That is DIFFERENT than tolerance which is what I think you're looking for. That's for "every x pixels". The dragMinimum is just for the initial movement, not "every x pixels consider it a drag". 

 

14 hours ago, Thomas Günther said:

One way to reproduce it is to start dragging, then switching the tab, and then releasing the mouse button. This is of course quite unrealistic and doesn't happen a lot, but similar behavior can get triggered when switching windows, by browser or OS alerts, by scrolling etc.

Gosh, I don't even know how to do that Wouldn't you need to release your pointer/mouse in order to click on a different tab? I guess you could listen for the visibilitychange event to toggle stuff. 

 

14 hours ago, Thomas Günther said:

What I want Observer to do: once it triggers an action, for example animating to the next image, it should consider this drag to be done. I need some way to tell Observer to temporarily stop listening to the pointer event.

How about just adding conditional logic in the handler so that when you are mid-action, it skips all the events? 

 

Are you saying that if you disable() the Observer and then enable() it, things don't behave as expected? If so, would you mind sharing a minimal demo that clearly illustrates that? 

[Thomas Günther]

Thanks for your help again, Jack. I rebuilt the whole thing for an even more minimal demo and (surprise!) the disable() → enable() approach worked perfectly.

 

Here's the working version for completeness' sake:

 

See the Pen zYjYZWE by medienbaecker (@medienbaecker) on CodePen