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,7 +63,6 @@ const MainUI = (($) => {
     }
   };
 
-  if (typeof navigator.onLine !== 'undefined') {
   W.addEventListener(
     'offline',
     () => {
@@ -80,7 +82,10 @@ const MainUI = (($) => {
   W.addEventListener('load', () => {
     updateOnlineStatus();
   });
-  }
+
+  $(W).on(`${Events.AJAX}`, () => {
+    updateOnlineStatus();
+  });
 
   // scrollTo
   const ScrollTo = (trigger, selector) => {
@@ -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();
       }