IMPR: AJAX online/offline handling

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-	"version": "2.5.2",
+	"version": "2.5.3",
 	"author": "Tony Air <tony@twma.pro>",
 	"license": "MIT",
 	"description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",

src/js/_components/_ui.ajax.js

@@ -286,7 +286,7 @@ const AjaxUI = (($) => {
       for (const url in $.xhrPool.requests) {
         const jqXHR = $.xhrPool.requests[url];
         $.ajax(jqXHR.opts);
-        //console.log(`${NAME}: AJAX request is restored (${jqXHR.opts.url})`);
+        console.log(`${NAME}: AJAX request is restored (${jqXHR.opts.url})`);
       }
 
       $.xhrPool.paused = false;
@@ -308,7 +308,7 @@ const AjaxUI = (($) => {
     $.xhrPool.pauseAll();
   });
 
-  $Body.on(`${Events.ONLINE}`, () => {
+  $Body.on(`${Events.BACKONLINE}`, () => {
     $.xhrPool.restoreAll();
   });
 

src/js/_events.js

@@ -10,6 +10,7 @@ module.exports = {
   TABFOCUSED: 'tab-focused',
   OFFLINE: 'offline',
   ONLINE: 'online',
+  BACKONLINE: 'back-online',
   TOUCHENABLE: 'touch-enabled',
   TOUCHDISABLED: 'touch-disabled',
   LOADED: 'load',

src/js/_main.js

@@ -90,13 +90,15 @@ const MainUI = (($) => {
   });
 
   // session ping
+  let pingInterval;
+  let pingLock = false;
   const sessionPing = () => {
-		if ($Body.hasClass('is-offline')) {
+    if (pingLock || $Body.hasClass('is-offline')) {
       return;
     }
 
     console.log(`${NAME}: session ping`);
-
+    pingLock = true;
     $.ajax({
       sync: false,
       async: true,
@@ -105,37 +107,58 @@ const MainUI = (($) => {
       global: false,
       type: 'POST',
       complete: (data, datastatus) => {
+        updateOnlineStatus();
         if (datastatus !== 'success') {
           console.warn(`${NAME}: ping failed`);
+
           clearInterval(pingInterval);
+          pingInterval = null;
         }
-				updateOnlineStatus();
+
+        pingLock = false;
       },
     });
   };
 
-	let pingInterval = setInterval(sessionPing, 300000); // 5 min in ms
-
   // update online/offline state
   const updateOnlineStatus = () => {
     if (typeof navigator.onLine === 'undefined') {
-			return;
+      return false;
     }
+
     if (!navigator.onLine) {
       console.log(`${NAME}: Tab: offline`);
+
       clearInterval(pingInterval);
+      pingInterval = null;
 
       $Body.addClass('is-offline');
+      $Body.removeClass('is-online');
+
       $Body.trigger(Events.OFFLINE);
       $W.trigger(Events.OFFLINE);
-		} else {
-			console.log(`${NAME}: Tab: online`);
-			pingInterval = setInterval(sessionPing, 300000); // 5 min in ms
 
+      return true;
+    }
+
+    if (!pingInterval) {
+      pingInterval = setInterval(sessionPing, 300000); // 5 min in ms
+    }
+
+    console.log(`${NAME}: Tab: online`);
+    if ($Body.hasClass('is-offline')) {
+      sessionPing();
+
+      $Body.trigger(Events.BACKONLINE);
+    }
+
+    $Body.addClass('is-online');
     $Body.removeClass('is-offline');
+
     $Body.trigger(Events.ONLINE);
     $W.trigger(Events.ONLINE);
-		}
+
+    return true;
   };
 
   W.addEventListener(
@@ -154,11 +177,7 @@ const MainUI = (($) => {
     false,
   );
 
-	W.addEventListener(`${Events.LOADED}`, () => {
-		updateOnlineStatus();
-	});
-
-	$W.on(`${Events.AJAX}`, () => {
+  $W.on(`${Events.LOADED} ${Events.AJAX}`, () => {
     updateOnlineStatus();
   });
 
@@ -441,10 +460,7 @@ const MainUI = (($) => {
         });
       }
 
-			if (
-				$AlertNotify.length &&
-				typeof $AlertNotify[0].stop !== 'undefined'
-			) {
+      if ($AlertNotify.length && typeof $AlertNotify[0].stop !== 'undefined') {
         $AlertNotify[0].stop();
       }
 
@@ -581,9 +597,7 @@ const MainUI = (($) => {
   // hide spinner on target _blank
   $('[target="_blank"],.external').on('click submit', (e) => {
     if (
-			$(e.currentTarget).is(
-				'[data-toggle="lightbox"],[data-lightbox-gallery]',
-			)
+      $(e.currentTarget).is('[data-toggle="lightbox"],[data-lightbox-gallery]')
     ) {
       return false;
     }