0

I am trying to detect idle user (such as no mouse or touch events) and display a pop up warning. I have one service of detecting timeout and another to display the pop up. Time out service is being called from app.run. I have almost completed it, have the following two issues,

  1. pop up is being displayed in same page, not as a modal.
  2. pop up is being displayed multiple time.

Here is my code. /*** App ****/

var myapp = angular.module("myapp", ['ui.bootstrap']);
myapp.run(function ($rootScope, timeoutService) {    
timeoutService.setup();
});

/**** time out sevice ****/

  myapp.factory('timeoutService', function ($window, modalService) {
  var timeoutID;
  var startTimer = function () {
    // wait 2 seconds before calling goInactive
    timeoutID = $window.setTimeout(goInactive, 2000);
}
 var resetTimer =function(e) {
    $window.clearTimeout(timeoutID);
    goActive();
 }
 var goInactive = function () {
     modalService.showModal({}, modalOptions).then(function (result) {
         alert("Hello");
     });

 }
 var goActive=function() {
     startTimer();
 }
 var modalOptions = {
     closeButtonText: 'Cancel',
     actionButtonText: 'Delete Customer',
     headerText: 'Delete ?',
     bodyText: 'Are you sure you want to delete this customer?'
 };
var timeOutService = {};
timeOutService.setup = function () {
    $window.addEventListener("mousemove", resetTimer, false);
    $window.addEventListener("mousedown", resetTimer, false);
    $window.addEventListener("keypress", resetTimer, false);
    $window.addEventListener("DOMMouseScroll", resetTimer, false);
    $window.addEventListener("mousewheel", resetTimer, false);
    $window.addEventListener("touchmove", resetTimer, false);
    $window.addEventListener("MSPointerMove", resetTimer, false);
    startTimer();
};    
return timeOutService;
});

/****** Modal Service ******/

 myapp.service('modalService', ['$modal', function ($modal) {

var modalDefaults = {
    backdrop: true,
    keyboard: true,
    modalFade: true,
    templateUrl:'../Modal.html'
};
var modalOptions = {
    closeButtonText: 'Close',
    actionButtonText: 'OK,',
    headerText: 'Proceed?',
    bodyText: 'Perform this action?'
};
this.showModal = function (customModalDefaults, customModalOptions) {
    if (!customModalDefaults) customModalDefaults = {};
    customModalDefaults.backdrop = 'static';
    return this.show(customModalDefaults, customModalOptions);
};
this.show = function (customModalDefaults, customModalOptions) {
    //Create temp objects to work with since we're in a singleton service
    var tempModalDefaults = {};
    var tempModalOptions = {};

    //Map angular-ui modal custom defaults to modal defaults defined in service
    angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

    //Map modal.html $scope custom properties to defaults defined in service
    angular.extend(tempModalOptions, modalOptions, customModalOptions);

    if (!tempModalDefaults.controller) {
        tempModalDefaults.controller = function ($scope, $modalInstance) {
            $scope.modalOptions = tempModalOptions;
            $scope.modalOptions.ok = function (result) {
                $modalInstance.close(result);
            };
            $scope.modalOptions.close = function (result) {
                $modalInstance.dismiss('cancel');
            };
        }
    }

    return $modal.open(tempModalDefaults).result;
};

}]);

1 Answer 1

0

You must create a global controller that functions defined beginning , this driver can be used on the homepage or send calls from any page of the document . Reference should be made to assign the controller html < div ng - controller = " SesionCtrl "> < / div >

app.controller('SesionCtrl',function($scope,Idle,Keepalive,$log){
 $Scope.$On('IdleStart',function(){
 //Open Modal code
 });
 $ Scope . $ On ( ' IdleTimeout ', function () {
  // The end of the timeout Logout
  window.location = " logout.php " ;
 });
} ) ;

<html lang="en"ng-app="myApp">
<body ng-app="myApp">

<div ng-controller="SesionCtrl"></div><!--Instance Controller-->
</body>
</html>
1
  • Please provide some explanation of your answer to help other users of the site.
    – Tristan
    Feb 2, 2016 at 22:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.