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,
- pop up is being displayed in same page, not as a modal.
- 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;
};
}]);