How to include mouse over events in Ng-Idle module

1.1k views Asked by At

We are using Angularjs 1.5 and Ng-Idle module to capture the user inactivity time for certain interval in our application. We show alert window if the timeout reaches for the user to refresh the user session based on Idle start and Idle end. This approach is fine when the user is really inactive that means he does not scroll, mouse click or enter anything but it does not detect when the user is active on the screen by simply moving the mouse over the application. Is there anyway to add additional events to capture like mouse over in the Ng_Idle module to disrupt the inactivity by more events ?

Please find the code snippet, it is referred from here

http://hackedbychinese.github.io/ng-idle/

                      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);
                                      });
1

There are 1 answers

0
Mohib Wasay On

The documentation doesn't seem to provide such functionality.

However there are multiple ways to do this. One of them would be simply bind Ng-Idle events with angular's native directive events simply like this

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>