maa3444
/
BIM-Resource


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Jquery-idletimer : provides you a way to monitor user activity with a page." />
    <title>Jquery-idletimer</title>

    <!-- jQuery and idleTimer -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../src/idle-timer.js"></script>

    <!-- Bootstrap/respond (ie8) and moment -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.js"></script>

    <!-- Respond.js proxy on external server -->
    <link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="respond.proxy.js"></script>
    <style>
        .bold {
            font-weight: bold;
        }

        body {
            margin-top: 40px;
            margin-bottom: 40px;
        }
    </style>
</head>
<body>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">Jquery-idletimer</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="index.html">Main Demo</a></li>
                    <li><a href="defaultbinding.html">Default Binding</a></li>
                    <li><a href="https://github.com/thorst/jquery-idletimer">Documentation</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="https://github.com/thorst/jquery-idletimer/zipball/master">Zip</a></li>
                    <li><a href="https://github.com/thorst/jquery-idletimer/tarball/master">Tar</a></li>
                    <li><a href="https://github.com/thorst/jquery-idletimer">Github</a></li>
                </ul>
            </div>
            <!--/.nav-collapse  -->
        </div>
    </div>
    <div class="container">
        <h2>Concept</h2>
        <p>
            Wait 10 seconds, you will see a expiring warning. Wait 10 more seconds and you will see that you have been logged out.
        </p>
        <p>
            In the real world I forward them to the logout url, which intern fowards them to login screen, instead of showing the 2nd dialog.
            You can modify the session.logout function.
        </p>
        <p>
            We could use the active.idleTimer event to clearTimeout, however I prefer the user to explicitly say they want to keep the
            session open by clicking ok, not just moving the mouse on the screen.
        </p>
        <p>
            This demo takes into account when a mobile device closes the browser, and after the idle timeout expires, launches the browser again. Instead
            of displaying the warning, it will jump straight to the logged out dialog.
        </p>
        <p>
            For the sake of complete demo, I've included the code needed to call a keepalive url to keep the server side session valid.
        </p>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Session Expiration Warning</h4>
                </div>
                <div class="modal-body">
                    <p>You've been inactive for a while. For your security, we'll log you out automatically. Click "Stay Online" to continue your session. </p>
                    <p>Your session will expire in <span class="bold" id="sessionSecondsRemaining">120</span> seconds.</p>
                </div>
                <div class="modal-footer">
                    <button id="extendSession" type="button" class="btn btn-default btn-success" data-dismiss="modal">Stay Online</button>
                    <button id="logoutSession" type="button" class="btn btn-default" data-dismiss="modal">Logout</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="mdlLoggedOut" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">You have been logged out</h4>
                </div>
                <div class="modal-body">
                    <p>Your session has expired.</p>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
    <script>
        (function ($) {
            var
                session = {
                    //Logout Settings
                    inactiveTimeout: 10000,     //(ms) The time until we display a warning message
                    warningTimeout: 10000,      //(ms) The time until we log them out
                    minWarning: 5000,           //(ms) If they come back to page (on mobile), The minumum amount, before we just log them out
                    warningStart: null,         //Date time the warning was started
                    warningTimer: null,         //Timer running every second to countdown to logout
                    logout: function () {       //Logout function once warningTimeout has expired
                        //window.location = settings.autologout.logouturl;
                        $("#mdlLoggedOut").modal("show");
                    },

                    //Keepalive Settings
                    keepaliveTimer: null,
                    keepaliveUrl: "",
                    keepaliveInterval: 5000,     //(ms) the interval to call said url
                    keepAlive: function () {
                        $.ajax({ url: session.keepaliveUrl });
                    }
                }
            ;


            $(document).on("idle.idleTimer", function (event, elem, obj) {
                //Get time when user was last active
                var
                    diff = (+new Date()) - obj.lastActive - obj.timeout,
                    warning = (+new Date()) - diff
                ;
                
                //On mobile js is paused, so see if this was triggered while we were sleeping
                if (diff >= session.warningTimeout || warning <= session.minWarning) {
                    $("#mdlLoggedOut").modal("show");
                } else {
                    //Show dialog, and note the time
                    $('#sessionSecondsRemaining').html(Math.round((session.warningTimeout - diff) / 1000));
                    $("#myModal").modal("show");
                    session.warningStart = (+new Date()) - diff;

                    //Update counter downer every second
                    session.warningTimer = setInterval(function () {
                        var remaining = Math.round((session.warningTimeout / 1000) - (((+new Date()) - session.warningStart) / 1000));
                        if (remaining >= 0) {
                            $('#sessionSecondsRemaining').html(remaining);
                        } else {
                            session.logout();
                        }
                    }, 1000)
                }
            });

            // create a timer to keep server session alive, independent of idle timer
            session.keepaliveTimer = setInterval(function () {
                session.keepAlive();
            }, session.keepaliveInterval);

            //User clicked ok to extend session
            $("#extendSession").click(function () {
                clearTimeout(session.warningTimer);
            });
            //User clicked logout
            $("#logoutSession").click(function () {
                session.logout();
            });

            //Set up the timer, if inactive for 10 seconds log them out
            $(document).idleTimer(session.inactiveTimeout);
        })(jQuery);
    </script>
</body>
</html>