Scrolling in element is not picked up

dset0x commented 5 years ago

Hello, jquery.idle has been working great for me, except for one case. I have a <pre> element with a scrollbar (overflow:auto) and I use jquery.idle in Firefox as such:

    $(function(){
        $(document).idle({
            onIdle: function(){
                ...
            },
            onActive: function(){
                ...
            },
            onShow: function(){
                ...
            },
            onHide: function(){
                ...
            },
            events: 'click contextmenu dblclick mousedown mouseenter mouseleave mouseover mouseout mouseup wheel drag dragend dragenter dragleave dragover dragstart drop resize scroll select',
            idle: 3500
        })
    });

When a user is using said scrollbar with the mouse, jquery.idle thinks the page is in idle mode. I do not know what component this is a limitation of, but I wonder if there is a way to get it to work (or if I'm doing something wrong).

Thanks in advance!

henriqueboaventura commented 5 years ago

Hi, could you please share a jsfiddle or something like that showing the problem ? I guess that the approach to a solution is better this way :)

dset0x commented 5 years ago

Hello @kidh0 , you're right about that. (Also I wrote auto above. I meant to say scroll, which makes your point)

Navigate here and open the console so you can see the logging https://jsfiddle.net/9fg8pjcz/2/
Use the scrollbar of the div element and keep scrolling up and down. Notice how you eventually enter the onIdle state even though you are still moving the mouse.
You may stop moving the mouse now.

Edit: Same happens if you mouse-select some text and keep the mouse button down.

henriqueboaventura commented 5 years ago

Are you testing on google chrome or other browser? I just tested on google chrome and it worked everytime, using the mousescroll and using the up and down arrows of the keyboard. You were able to reproduce the problem on the jsfiddle?

dset0x commented 5 years ago

I am testing both on Google Chrome and Firefox. OS is Linux (Xorg).

Using the scroll wheel and keyboard buttons generate events which are picked up in the document, so jquery.idle remains in onActive state. That is fine.

However, if you hold the left mouse button on the scrollbar and scroll by moving the mouse up and down, you will reach the onIdle state.

henriqueboaventura commented 5 years ago

True that, but it will trigger the isActive as soon as you stop holding the button. Right? I guess this is a behavior of the browser, not an issue.

dset0x commented 5 years ago

It will trigger isActive, but it's too late, since the user was already not idle.

I understand jquery.idle expects the browser to inform it about events, but I don't know if there is another way for the browsers to communicate this information, so that this problem does not occur. Hence why I opened this issue.

Even if there is no such way, it would be nice to at least have a section regarding jquery.idle's limitations (even if they do not stem from itself).

dset0x commented 5 years ago

It looks like there should be a way. With addEventListener one can specify useCapture=true and (at least) scroll events are then picked up from any element. https://jsfiddle.net/uzkd3xqp/6/

henriqueboaventura commented 5 years ago

Seems that it is an open issue on jQuery backlog: https://github.com/jquery/jquery/issues/1735 Right now, the vanilla version of the plugin uses AddEventListeners, maybe you could give it a try using the useCapture parameter: https://github.com/kidh0/jquery.idle/blob/master/vanilla.idle.js

dset0x commented 5 years ago

Using the vanilla version, modified to pass useCapture=true, with the drag event enabled seems to do the trick in the jsfiddle example. Thanks.

Would you be interested in adding a useCapture option to jquery.idle's interface?
Would it make sense for you to convert jquery.idle.js into a thin wrapper around vanilla.idle.js so that both may provide this functionality?
I noticed that there is a difference in the interfaces. jquery.idle.js accepts a string for events, but vanilla.idle.js expects a list of strings. It will be important to make sure both are accepted if you merge the two.

henriqueboaventura commented 5 years ago

It may be a good think to wrap the vanilla into a jQuery container. I guess that it will be much easier to maintain the code. Probably it will be the next major release (2.x.x). Are you willing to make this update and maybe add some tests ? It is open for pull requests ;)

dset0x commented 5 years ago

I would want to work on it. Unfortunately it has been (and by the looks of it will remain) on the back burner due to more pressing issues. I have it noted down and will hopefully get to it when possible.

ssimsekler commented 5 years ago

May the reason for idle time not being reset with mouse scroll be linked to the comment in the Stackoverflow post here:

https://stackoverflow.com/questions/667555/how-to-detect-idle-time-in-javascript-elegantly

Check DaxChen's comment Frank Conijn's response.

For example, if you hold the mouse still and only do scrolling, does it reset the timer for you?

henriqueboaventura / jquery.idle

Scrolling in element is not picked up #34