Coder Social home page Coder Social logo

Comments (7)

vhdinh avatar vhdinh commented on July 2, 2024 1

@Peroucho8 @pjyoti1235 @rahul2270
I was able to get my custom interruption source. Here is an example of how I did it:

this.idle.setInterrupts(
      [
        new EventTargetInterruptSource(document, 'mousemove'),
        new EventTargetInterruptSource(document, 'mousedown'),
        new EventTargetInterruptSource(document, 'mouseup'),
        new EventTargetInterruptSource(document, 'click')
      ]
    );

Hope this helps

from ng2-idle.

alex-ponce avatar alex-ponce commented on July 2, 2024

Please respond to this request. It is the minimum you could do to help us implement custom interrupt sources

from ng2-idle.

moribvndvs avatar moribvndvs commented on July 2, 2024

Have you looked at the source code for any of the interrupts? It's intentionally pretty vague, because I don't want to create too much of an opinion about what your custom source needs to do. However, EventTargetInterruptSource is the most used source and is a good example of implementing a custom interrupt source.

In its simplest form, an interrupt source simply needs to emit from the onInterrupt event emitter whenever your custom code decides the user (or some code on behalf of the user) has done something that should interrupt the idle timeout.

Your actual implementation, however, may be more sophisticated than that. Here's what happens:

  1. You specify interrupt sources using idle.setInterrupts() and provide it an array of sources (anything that derives from InterruptSource).
  2. For each source, it is wrapped in an instance of Interrupt, which is used to manage the event emitter subscription between Idle and the interrupt source. This part is not particularly important, and is mainly used internally for book keeping and clean up.
  3. Each wrapped interrupt is subscribed to a function in idle that calls self.interrupt() and passes any arguments from the interrupt source.
  4. When you call idle.watch, idle enumerates all interrupts and calls resume(), which in turn will call the attach() function on the source. This is where your source should, if necessary, begin listening for whatever your user activity is that can cause an interrupt.
  5. When your interrupt source needs to cause an interrupt, it should emit via onInterrupt.emit and pass any relevant args. This will in turn cause the function I mentioned in item #3 above, which will cause idle to reset the idle count down.
  6. When idle.stop is called, the idle service is destroyed, or the user goes into the timeout state, interrupt.pause is called, which will in turn call the detach() function on the source. This is where your source should (again, if necessary) stop listening for user activity because we are in a state we no longer want to let them cause interrupts.

So using EventTargetInterruptSource as an example, here's what it does.

In the constructor, you provide a target (which is anything that can be made Observable) a space-delimited list of event names on the target that should trigger an interrupt, and optionally time in milliseconds that will throttle incoming events (so we don't swarm your app with user input). We split the events list and enumerate for each event, creating an observable event source, and adding it to a list of event sources that we need to keep track of so we can properly dispose them later. It then creates a handler for the attach and detach methods. Attach simply enumerates through each event source and creates a subscription that emits onInterrupt, and detach enumerates through each subscription we created and unsubscribes.

So now that we've constructed an instance, when a user causes one of the specified events on target, it'll cause an interrupt while the source is attached. When the source is detached, it removes all event handlers and stops listening for user activity.

Attaching and detaching is important in the context of browser events to prevent memory leaks and avoid performance problems. However, that implementation detail is up to your custom handler. I do provide it in the base class so you can receive notification when idle is or isn't requesting interrupts, but if you don't need to attach or detach, you can simply ignore attach/detach and focus on working with onInterrupt.

from ng2-idle.

alex-ponce avatar alex-ponce commented on July 2, 2024

Thank you very much for such detailed response. This will certainly put me on the right path.

from ng2-idle.

pjyoti1235 avatar pjyoti1235 commented on July 2, 2024

i actually wanted the idle.setInterrupts for only mouse click events not for hover or any other event...don't know how to go about it

from ng2-idle.

rahul2270 avatar rahul2270 commented on July 2, 2024

@alex-ponce Can you or someone provide a sample code for setting a list of interrupts. For example, I specifically want the system to remain idle during mouse hovers.
Is there a link or doc for exact values of interrupts?

from ng2-idle.

Peroucho8 avatar Peroucho8 commented on July 2, 2024

@rahul2270 did you find any example for setting a list of interrupts. I specifically just want to interrupt only on mouse click

from ng2-idle.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.