https://ggtour.or.kr/gto/resources/js/jquery.userTimeout.js

1/*! jQuery userTimeout - v0.4.0 - 2017-10-29
2* https://github.com/lleblanc42/jquery-userTimeout
3* Copyright (c) 2017 Luke LeBlanc; Licensed GPL-3.0 */
4;(function ($, document, window, undefined) {
5	'use strict';
6
7	$.fn.userTimeout = function (opts) {
8		var $defaults = {
9			logouturl: null,                   		// ULR to redirect to, to log user out
10			referer: false,                    		// URL Referer - false, auto or a passed URL
11			refererName: 'refer',              		// Name of the passed referal in the URL
12			notify: true,                      		// Toggle for notification of session ending
13			timer: true,                       		// Toggle for enabling the countdown timer
14			session: 600000,                   		// 10 Minutes in Milliseconds, then notification of logout
15			force: 10000,                      		// 10 Seconds in Milliseconds, then logout
16			ui: 'auto',                        		// Model Dialog selector (auto, bootstrap, jqueryui)
17			debug: false,                      		// Shows alerts
18			modalTitle: 'Session Timeout',     		// Modal Title
19			modalBody: 'You\'re being timed out due to inactivity. Please choose to stay signed in or to logoff. Otherwise, you will logged off automatically.',  // Modal body content
20			modalLogOffBtn: 'Log Off',		   		// Modal log off button text
21			modalStayLoggedBtn: 'Stay Logged In'	// Modal stay logged in button text
22		};
23
24		var $options = $.extend($defaults, opts || {});
25
26		var $timeoutTimer, $logoutTimer, $countDownTimer, $startTime, $elapsedTime, $elapsedCounterTime, $timeDiff, $modalUI;
27
28		/**
29		 * var init -
30		 *
31		 * Initializes the plugin. It first does some basic error checking
32		 * to ensure the plugin is properly configured, then checks to ensure
33		 * one of the two dependencies is available within the page in order
34		 * to utilize the modal feature of the plugin. It finishes by starting
35		 * the session timeout.
36		 *
37		 * @return {undefined}
38		 */
39		var init = function() {
40			if (!$options.logouturl) {
41				if ($options.debug === true) {
42					window.alert('Please configure the userTimeout plugin!');
43				} else {
44					window.console.error('Please configure the userTimeout plugin!');
45				}
46
47				return;
48			}
49
50			if (uiCheck($options.ui) === false) {
51				return;
52			}
53
54			startTimer();
55
56			$(document).on('focus click mousemove mousedown keyup scroll keypress', function () {
57				startTimer();
58			});
59		};
60
61		/**
62		 * var startTimer -
63		 *
64		 * Initially clears all timers to ensure a clean slate, sets the start
65		 * time and then based on the type of timer being used, it will start
66		 * the timeout process.
67		 *
68		 * @param  {string or null} type [Used to distinguish what type of timer
69		 * is being used]
70		 * @return {undefined}
71		 */
72		var startTimer = function (type) {
73			clearTimeout($timeoutTimer);
74			clearTimeout($logoutTimer);
75
76			$startTime = new Date().getTime();
77			$elapsedTime = 0;
78			$elapsedCounterTime = 0;
79
80			switch (type) {
81				case 'logout':
82					$countDownTimer = Math.floor($options.force / 1000);
83					$logoutTimer = setTimeout(function () { checkTimer(type); }, 100);
84					break;
85				default:
86					$timeoutTimer = setTimeout(function () { checkTimer(type); }, 100);
87					break;
88			}
89		};
90
91		/**
92		 * var checkTimer -
93		 *
94		 * Main processor of the timeout script. Every 0.1 seconds, this function
95		 * records the elapsed time it's been executing and calculates the difference
96		 * from the current time with the start time. Based on which type of timer is
97		 * being initiated, it will either continue on to the next phase of execution
98		 * or continue to run until the elapsed time matches the time set in the config.
99		 *
100		 * @param  {string or null} type [Used to distinguish what type of timer
101		 * is being used]
102		 * @return {undefined}
103		 */
104		var checkTimer = function (type) {
105			$elapsedTime += 100;
106			$timeDiff = (new Date().getTime() - $startTime) - $elapsedTime;
107
108			switch (type) {
109				case 'logout':
110					if ($elapsedTime === $options.force) {
111						logout();
112					} else {
113						$elapsedCounterTime += 100;
114
115						if ($elapsedCounterTime === 1000 && $countDownTimer !== 0) {
116							$countDownTimer -= 1;
117							$('#countdowntimer').html($countDownTimer);
118							$elapsedCounterTime = 0;
119						}
120
121						$logoutTimer = setTimeout(function () { checkTimer(type); }, (100 - $timeDiff));
122					}
123
124					break;
125				default:
126					if ($elapsedTime === $options.session) {
127						if ($options.notify === true) {
128							modal();
129						} else {
130							logout();
131						}
132					} else {
133						$timeoutTimer = setTimeout(function () { checkTimer(type); }, (100 - $timeDiff));
134					}
135
136					break;
137			}
138		};
139
140		/**
141		 * var uiCheck -
142		 *
143		 * Checks to see if either bootstrap or jQuery UI is available within the page.
144		 * Otherwise, false will be given. Based on what this function returns, will
145		 * determine which modal, if any at all, will be used.
146		 *
147		 * @param  {string or boolean (false)} uiTest [String or boolean (false) given
148		 * from the passed options of the plugin]
149		 * @return {boolean (true or false)} [Returns false if unable to determine if
150		 * bootstrap or jQuery UI is available within the page, otherwise returns true]
151		 */
152		var uiCheck = function (uiTest) {
153			switch (uiTest) {
154				case 'auto':
155					if (typeof $().emulateTransitionEnd === 'function') {
156						$modalUI = 'bootstrap';
157					} else if (typeof jQuery.ui !== 'undefined') {
158						$modalUI = 'jqueryui';
159					} else {
160						if ($options.debug === true) {
161							window.alert('Twitter Bootstrap 3 nor jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
162						} else {
163							window.console.error('Twitter Bootstrap 3 nor jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
164						}
165
166						return false;

167					}
168
169					break;
170				case 'bootstrap':
171					if (typeof $().emulateTransitionEnd !== 'function') {
172						if ($options.debug === true) {
173							window.alert('Twitter Bootstrap 3 was not found! Please load the proper libraries and their themes to utilize this plugin!');
174						} else {
175							window.console.error('Twitter Bootstrap 3 was not found! Please load the proper libraries and their themes to utilize this plugin!');
176						}
177
178						return false;
179					} else {
180						$modalUI = 'bootstrap';
181					}
182
183					break;
184				case 'jqueryui':
185					if (typeof jQuery.ui === 'undefined') {
186						if ($options.debug === true) {
187							window.alert('jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
188						} else {
189							window.console.error('jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
190						}
191
192						return false;
193					} else {
194						$modalUI = 'jqueryui';
195					}
196
197					break;
198				default:
199					if ($options.debug === true) {
200						window.alert('Twitter Bootstrap 3 nor jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
201					} else {
202						window.console.error('Twitter Bootstrap 3 nor jQueryUI was not found! Please load the proper libraries and their themes to utilize this plugin!');
203					}
204
205					return false;
206			}
207
208			return true;
209		};
210
211		/**
212		 * var modal -
213		 *
214		 * Creates and displays the modal to the end user based on the configuration
215		 * of the plugin. If the modal is bootstrap and the settings for the timer
216		 * are set to true, the countdown timer will display.
217		 *
218		 * @return {undefined}
219		 */
220		var modal = function () {
221			startTimer('logout');
222
223			$(document).on('focus click mousemove mousedown keyup scroll keypress', function () {
224				startTimer('logout');
225			});
226
227			if ($modalUI === 'bootstrap') {
228				var $container, $dialog, $content, $header, $body, $footer, $logoutBtn, $logonBtn;
229

230				$container = $('<div class="modal fade" id="notifyLogout" tabindex="-1" role="dialog" aria-labelledby="notifyLogoutLabel" aria-hidden="true" style="z-index:9999"></div>');
231				$dialog = $('<div class="modal-dialog"></div>');
232				$content = $('<div class="modal-content"></div>');
233				$header = $('<div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><h4 class="modal-title" id="notifyLogoutLabel">' + $options.modalTitle + '</h4></div>');
234				$body = $('<div class="modal-body">' + $options.modalBody + '</div>');
235				$footer = $('<div class="modal-footer"></div>');
236				if ($options.timer === true) {
237					$logonBtn = $('<button type="button" class="btn btn-primary" data-dismiss="modal" id="logon">' +  $options.modalStayLoggedBtn + ' (<span id="countdowntimer">' + $countDownTimer + '</span>)</button>');
238				} else {
239					$logonBtn = $('<button type="button" class="btn btn-primary" data-dismiss="modal" id="logon">' +  $options.modalStayLoggedBtn + '</button>');
240				}
241
242				$logoutBtn = $('<button type="button" class="btn btn-default" id="logoff">' + $options.modalLogOffBtn + '</button>');
243
244				$content.append($header, $body, $footer);
245				$footer.prepend($logonBtn);
246				$footer.prepend($logoutBtn);
247				$dialog.append($content);
248				$container.append($dialog);
249
250				$($container).modal({
251					backdrop: 'static',
252					keyboard: false,
253					show: true
254				});
255
256				$($container).on('hide.bs.modal', function () {
257					startTimer();
258					$($container).remove();
259				});
260
261				$($logoutBtn).on('click', function () {
262					logout();
263				});
264
265				$($logonBtn).on('click', function () {
266					reflash();
267				});
268			} else if ($modalUI === 'jqueryui') {
269				var $jqueryLogout;
270				var $jqueryModalOptions = {};
271				var $jqueryModal = '<div id="notifyLogout"><p>' + $options.modalBody + '</p></div>';
272
273				$jqueryModalOptions[$options.modalStayLoggedBtn] = function (){
274					startTimer();
275					$jqueryLogout.dialog('close');
276				};
277
278				$jqueryModalOptions[$options.modalLogOffBtn] = function (){
279					logout();
280				};
281
282				$jqueryLogout = $($jqueryModal).dialog({
283					buttons: $jqueryModalOptions,
284					modal: true,
285					width: 600,
286					height: 300,
287					resizable: false,
288					title: $options.modalTitle
289				});
290			}
291		};
292
293		/**
294		 * var logout -
295		 *
296		 * Called when the session times out and sends the user to the logout
297		 * page as set in the options. It first checks if the referer settings
298		 * are configured and handles the logout accordingly.
299		 *
300		 * @return {object} [Returns the new window location (logoff)]
301		 */
302		var logout = function () {
303			var $referralURL;
304
305			clearTimeout($timeoutTimer);
306			clearTimeout($logoutTimer);
307
308			if ($options.referer !== false) {
309				if ($options.referer === 'auto') {
310					var $currentReferral = $(location).attr('href');
311
312					$referralURL = $options.logouturl + '?' + encodeURIComponent($options.refererName) + '=' + encodeURIComponent($currentReferral);
313				} else {
314					$referralURL = $options.logouturl + '?' + encodeURIComponent($options.refererName) + '=' + encodeURIComponent($options.referer);
315				}
316			} else {
317				$referralURL = $options.logouturl;
318			}
319
320			return window.location.replace($referralURL);
321		};
322
323		/**
324		 * ÀÛ¼ºÀÚ : ÀÌÈÆÀç
325		 * ¼¼¼Ç À¯Áö ¹öÆ° Ŭ¸¯½Ã init ÇÔ¼ö Àç È£Ãâ
326		 */
327		var reflash = function () {
328			init();
329		};
330
331		/**
332		 * Initializes the plugin.
333		 */
334		return this.each(function () {
335			init();
336		});
337
338		
339
340	};
341
342}(jQuery, document, window));