idleService

Advanced nav service

by long2know

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-controller="myCtrl as vm">
    <label>Timer</label>&nbsp;&nbsp;<span ng-bind="vm.counter"></span>
    <br/>
    <button ng-click="vm.resetCounter()">Reset Timer</button>
</div>

<script type="text/ng-template" id="modalGeneral.html">
    <div class="modal-header">
        <h3 ng-bind-html="modalHeader"></h3>
    </div>
    <div class="modal-body" ng-bind-html="modalBody"></div>
    <div class="modal-footer">
        <input class="btn" type="button" ng-show="hasCancel" data-ng-click="cancel()" value="Cancel">
       ...

CSS

.itemlist {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: white;
    height: 100%;
    width: 100%;
}

.itemlist > li {
    line-height: 1.4em;
    background-color: white;
    color: black;
    cursor: pointer;
    padding: 6px 0 6px 5px;
}

.new-item {
    background-color: red !important;
    overflow: none;
}

JavaScript

(function () {
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);
    angular.module('myApp.directives', []);
    angular.module('myApp.controllers', []);

    var myApp = angular.module('myApp', [
        'myApp.services',
        'myApp.controllers',
        'myApp.directives',
        'ngSanitize',
        'ngAnimate',
        'ui.bootstrap',
        'ui']);

    var myController = function ($scope, $sce, $timeout, $animate, $log, idleService, dialogService) {               
        var vm = this,
            myTimeout,
            startCounter = function() {
                vm.counter = 0;
                myTimeout = $timeout(incrementCounter,1000);
                idleService.resetTimer();
            },
            resetCounter = function() {
                $timeout.cancel(myTimeout)
                startCounter();
            },
            incrementCounter = function() {
                vm.counter++;
                myTimeout = $timeout(incrementCounter,1000);
            },       
            init = function() {
                startCounter();
                vm.resetCounter = resetCounter;
                $scope.$on('sessionExpiring', function() {
                    var modalTitle = 'Session Expiring!';
                    var modalBody = 'Your session is about to expire.  Are you still there?';
                    dialogService.openDialog("modalGeneral.html", ['$scope', '$modalInstance', function ($modalScope, $modalInstance) {
                        $modalScope.modalHeader = $sce.trustAsHtml(modalTitle);
                        $modalScope.modalBody = $sce.trustAsHtml(dialogService.stringFormat("<p><strong>{0}</strong></p>", modalBody));
                        $modalScope.ok = function () {
                            $modalInstance.close();
                            makeRequest();
                        };
                        $modalScope.hasCancel = false;
                        $modalScope.cancel = function () {
         ...