Implementing mouse over interactions in Ng-Idle framework

Our application utilizes Angularjs 1.5 and the Ng-Idle module to monitor user inactivity time within specific intervals. A notification window is displayed when the timeout threshold is reached, prompting the user to refresh their session based on the Idle start and Idle end events. While this method works well for detecting true inactivity (no scrolling, clicking, or typing), it lacks the capability to register user activity when simply moving the mouse over the screen. Is there a way to implement additional event listeners such as mouse movements within the Ng_Idle module to prevent false inactivity triggers?

For reference, you can find the code snippet here


function closeModals() {
if ($scope.warning) {
$scope.warning.close();
$scope.warning = null;
//refreshing the session from server
}
if ($scope.timedout) {
$scope.timedout.close();
$scope.timedout = null;
}
}
$scope.$on('IdleStart', function() {
closeModals();
$scope.warning = $uibModal.open({
templateUrl: 'warning-dialog.html'
});
});

$scope.$on('IdleEnd', function() {
closeModals();
});
$scope.$on('IdleTimeout',
function() {
closeModals();
$scope.timedout = $uibModal.open({
templateUrl: 'timedout-dialog.html'
});
$timeout(
function() {
//logout the application
}, 72000);
});

Answer №1

The instructions do not seem to address this particular feature.

Nevertheless, there are various methods to achieve this task. One approach is to simply connect Ng-Idle events with angular's built-in directive events as illustrated below

angular.module('myApp')
  .controller('MyCtrl', function($scope) {
    $scope.$on('IdleTimeout', function(){
       renderModal();
    });
    
    $scope.$on('IdleStart', function(){
       createModal();
    });
    
    $scope.$on('IdleEnd', function(){
       closeModal();
    });
    
    $scope.mouseenter = function(){
      $scope.$emit('IdleEnd');
    };
  })
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-mouseenter="mouseenter()">Hover Me to Stop</div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The transparency level of materials in THREE.js

When using the lambert shader, I encountered an issue with setting the material. In the example provided, it sets the material as follows: this.material.uniforms.emissive.value = new THREE.Color( Math.random(), Math.random(), Math.random()); Prior ...

Steps for removing an element from an array using Mongoose and Node.js

After reading and attempting to implement the solutions provided by others, I am still struggling to understand why it's not working for me. This is my first project involving backend development. While progressing through a course, I decided to work ...

Retrieve the date and month information from the data-date-format

Can anyone help me figure out how to extract only the date and month from a bootstrap date picker and assign them to variables? <div class="input-append date dp3" data-date-format="dd.mm.yyyy"> <input class="span2" size="16" type="text" id="R ...

Updating the status of the checkbox on a specific row using Typescript in AngularJS

My goal is to toggle the checkbox between checked and unchecked when clicking on any part of the row. Additionally, I want to change the color of the selected rows. Below is my current implementation: player.component.html: <!-- Displaying players in ...

Incorporating server-side rendered components into a Vue.js parent component

I have a server-side rendered page that includes information about "orders" and a root Vue object initialized as the "parent object." Is it feasible to assign the rendered HTML orders as children of that parent Vue object? Vue.js is known for its dynamic ...

What is the best method for inserting a dictionary into an input using AngularJS?

I've got a data dictionary in my controller that I'm currently showcasing using ng-repeat. The Title is the key, while the value is shown in the value field of an input. My goal is to allow users to alter these values and then submit the form. Ho ...

The way in which notifications for updates are displayed on the Stack Overflow website

Could someone shed some light on how the real-time update messages on this platform are created? For instance, when I am composing a response to a question and a new answer is added, I receive a notification message at the top of the page. How is this fun ...

Enhance the variety of types for an external module in TypeScript

I am in the process of migrating an existing codebase from a JavaScript/React/JSX setup to TypeScript. My plan is to tackle this task file by file, but I have a question regarding the best approach to make the TypeScript compiler work seamlessly with the e ...

Change the rectangle's position by rotating another rectangle

I am facing a challenge with two rectangles that have pivots attached to them, The task at hand is to align the green rectangle's position based on the rotation of the red rectangle. The desired outcome should resemble the image provided: Despite t ...

Is there a way to seamlessly navigate through different pages in a browser using the back and forward buttons within NextJS without losing the state of each page?

Is there a way to preserve state when navigating back and forth between pages using the browser's back and forward buttons in NextJS? Specifically, I am looking for a solution to maintain state while transitioning between pages, especially when dealin ...

Having difficulty placing a marker on Google Maps

I am currently working on an application that relies on placing markers on a Google map. While the click event functions as expected when I test the code in Chrome, I am facing difficulties with recognizing the touch event on an Android device where I&apos ...

Linking JSON information to an HTML document

I'm struggling to integrate some JSON data into an HTML page using "Vanilla Javascript," but I'm unsure of how to proceed. Can you please provide assistance? I can share the HTML, CSS code, and an example of the JSON data I want to incorporate in ...

AngularJS utilizes the observe directive to dynamically inherit scope through attribute expressions

Here is my simple code: .controller('Ctrl', ['$scope', '$timeout', function ($scope, $timeout) { $timeout(function () { $scope.x = 5; }, 2000); }]) .directive('ngHey', ['$parse', function ( ...

Finding a quicker route to fulfill a commitment

When dealing with asynchronous behavior in a function, I often find myself creating a deferred and returning a promise. For example: var deferred = $q.defer(); //...some async operation return deferred.promise; However, sometimes I want to skip the async ...

Using jQuery to obtain the object context while inside a callback function

Suppose I have the following object defined: var myObj = function(){ this.hello = "Hello,"; } myObj.prototype.sayHello = function(){ var persons = {"Jim", "Joe", "Doe","John"}; $.each(persons, function(i, person){ console.log(this.h ...

Troubleshooting an issue with importing a Component in ReactJS using material-ui

Using the material-ui library, I attempted to create a Table following the code provided in the Custom Table Pagination Action example. However, I encountered the following error: Error Encountered: Warning: React.createElement: type is invalid -- expect ...

Token does not function properly on Fetch request sent to PHP script

I have a pair of files: one is revealing a session token, while the other is responding to a javascript fetch. The first file goes like this: <?php session_start(); unset($_SESSION['sessionToken']); $_SESSION['sessionToken'] = vsprin ...

Execute a function (with arguments) within a v-for loop in Vue.js

Currently, I am attempting to create a select element using Vue.js and Material Design that has 2 levels: categories and items. Each category can contain multiple items which may be selected or not. <md-select v-if="categories.length > 0" name="cate ...

Can a client application access a token and client_id from the GITHUB API without a server involved?

Is there a way to access data from the GitHub API in my Angular application without requiring a server component? Can I pass along username and password or a personal token to authenticate with GitHub? I want to retrieve information from the GitHub API, b ...

Saving updated numerical value on the server and receiving immediate feedback

I'm looking to implement a real-time website counter that decreases by 1 every 10 minutes. I believe this can be achieved easily using JavaScript. However, I also need a way to store the current number (not on the client side) so that visitors see upd ...