Comments (7)
@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.
Please respond to this request. It is the minimum you could do to help us implement custom interrupt sources
from ng2-idle.
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:
- You specify interrupt sources using
idle.setInterrupts()
and provide it an array of sources (anything that derives fromInterruptSource
). - For each source, it is wrapped in an instance of
Interrupt
, which is used to manage the event emitter subscription betweenIdle
and the interrupt source. This part is not particularly important, and is mainly used internally for book keeping and clean up. - Each wrapped interrupt is subscribed to a function in idle that calls
self.interrupt()
and passes any arguments from the interrupt source. - When you call
idle.watch
, idle enumerates all interrupts and callsresume()
, which in turn will call theattach()
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. - 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. - 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 thedetach()
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.
Thank you very much for such detailed response. This will certainly put me on the right path.
from ng2-idle.
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.
@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.
@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)
- @ng-idle/[email protected] requires @ng-idle/core^11.0.0 HOT 1
- idleTimeoutWarning lags wall-clock when tab is in background) HOT 8
- Question: Does ng-idle still work even after user closed tab/closes browser? HOT 2
- remove mousemove etc events from Ng-Idle
- js setInterval continuing interrupting idletime HOT 2
- INTERRUPTS Changing HOT 2
- Update to Angular 13's new package format and compile with partial-ivy HOT 5
- idle stop not stopping idle watch. HOT 1
- Implement a privacy preserving mode functionality avoiding usage of the persistent browser localStorage
- Package version in npm registry HOT 2
- Release version 12 HOT 9
- ng2-idle pauses when the tab is in the background HOT 3
- Add support for Angular 16 HOT 5
- ng2-idle move on multiple tabs screen stuck
- Re-set the idle period setting HOT 3
- Configure Timeout to not check for idle, just countdown HOT 6
- Add support for Angular 17 HOT 11
- idleExpiry compare UTC and local time
- Multiple tabs - Signing out on one tab causes a timeout on another tab
- Timeout happening on one idle instance is causing the interrupt to stop working on the other idle instance HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng2-idle.