IMPR: Offline functionality

dist/css/app.css

@@ -15383,6 +15383,14 @@ textarea,
   }
 }
 
+.alert-offline {
+  display: none;
+}
+
+body.is-offline .alert-offline {
+  display: block;
+}
+
 input.date[readonly],
 input.time[readonly] {
   background-color: #fff;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "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/_layout.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 
 import Events from './_events';
 
-const LayoutUI = ($ => {
+const LayoutUI = (($) => {
   // Constants
   const W = window;
   const D = document;

src/js/_main.js

@@ -49,6 +49,9 @@ const MainUI = (($) => {
 
   // update online/offline state
   const updateOnlineStatus = () => {
+    if (typeof navigator.onLine === 'undefined') {
+      return;
+    }
     if (!navigator.onLine) {
       console.log('Tab: offline');
       $Body.addClass('is-offline');
@@ -60,27 +63,29 @@ const MainUI = (($) => {
     }
   };
 
-  if (typeof navigator.onLine !== 'undefined') {
-    W.addEventListener(
-      'offline',
-      () => {
-        updateOnlineStatus();
-      },
-      false,
-    );
-
-    W.addEventListener(
-      'online',
-      () => {
-        updateOnlineStatus();
-      },
-      false,
-    );
-
-    W.addEventListener('load', () => {
+  W.addEventListener(
+    'offline',
+    () => {
       updateOnlineStatus();
-    });
-  }
+    },
+    false,
+  );
+
+  W.addEventListener(
+    'online',
+    () => {
+      updateOnlineStatus();
+    },
+    false,
+  );
+
+  W.addEventListener('load', () => {
+    updateOnlineStatus();
+  });
+
+  $(W).on(`${Events.AJAX}`, () => {
+    updateOnlineStatus();
+  });
 
   // scrollTo
   const ScrollTo = (trigger, selector) => {
@@ -324,7 +329,7 @@ const MainUI = (($) => {
 
       W.URLDetails.relative = location.split('#')[0];
       W.URLDetails.hash =
-        hash >= 0 ? location.substr(location.indexOf('#')) : '';
+				hash >= 0 ? location.substr(location.indexOf('#')) : '';
     }
 
     // show site-wide alert
@@ -359,7 +364,10 @@ const MainUI = (($) => {
         });
       }
 
-      if ($AlertNotify.length && typeof $AlertNotify[0].stop !== 'undefined') {
+      if (
+        $AlertNotify.length &&
+				typeof $AlertNotify[0].stop !== 'undefined'
+      ) {
         $AlertNotify[0].stop();
       }