IMPR: stop and resume AJAX on OFFLINE/ONLINE states

src/js/_components/_ui.ajax.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 import $ from 'jquery';
 import Events from '../_events';
@@ -52,12 +52,17 @@ const AjaxUI = (($) => {
       // update document location
       G.MainUI.updateLocation(url);
 
-      const absoluteLocation = G.URLDetails['base'] + G.URLDetails['relative'].substring(1);
+      const absoluteLocation =
+        G.URLDetails['base'] + G.URLDetails['relative'].substring(1);
       if (absoluteLocation !== G.location.href) {
-        G.history.pushState({
+        G.history.pushState(
+          {
             ajax: true,
             page: absoluteLocation,
-        }, document.title, absoluteLocation);
+          },
+          document.title,
+          absoluteLocation,
+        );
       }
 
       $.ajax({
@@ -96,9 +101,9 @@ const AjaxUI = (($) => {
       const js = jqXHR.getResponseHeader('X-Include-JS').split(',') || [];
 
       // Replace HTML regions
-      if (typeof(data.regions) === 'object') {
+      if (typeof data.regions === 'object') {
         for (const key in data.regions) {
-          if (typeof(data.regions[key]) === 'string') {
+          if (typeof data.regions[key] === 'string') {
             AjaxUI.replaceRegion(data.regions[key], key);
           }
         }
@@ -129,20 +134,23 @@ const AjaxUI = (($) => {
       this.preload(css).then(() => {
         const $head = $('head');
         css.forEach((el) => {
-          $head.append(`<link rel="stylesheet" type="text/css" href="${el}" />`);
+          $head.append(
+            `<link rel="stylesheet" type="text/css" href="${el}" />`,
+          );
         });
 
         // preload JS
         this.preload(js, 'script').then(() => {
-
           js.forEach((el) => {
-            $Body.append(`<script type="text/javascript" charset="UTF-8" src="${el}"></script>`);
+            $Body.append(
+              `<script type="text/javascript" charset="UTF-8" src="${el}"></script>`,
+            );
           });
 
           console.log('New page is loaded!');
 
           // trigger events
-          if (typeof(data.events) === 'object') {
+          if (typeof data.events === 'object') {
             for (const eventName in data.events) {
               $(D).trigger(eventName, [data.events[eventName]]);
             }
@@ -256,6 +264,54 @@ const AjaxUI = (($) => {
     }
   };
 
+  // manage AJAX requests
+  $.ajaxPrefilter((options, originalOptions, jqXHR) => {
+    jqXHR.opts = options;
+    $.xhrPool.requests[jqXHR.opts.url] = jqXHR;
+  });
+
+  $.xhrPool = {
+    requests: {},
+    paused: false,
+    pauseAll: () => {
+      $.xhrPool.paused = true;
+
+      for (let url in $.xhrPool.requests) {
+        const jqXHR = $.xhrPool.requests[url];
+        jqXHR.abort();
+        console.log(`AJAX request is paused (${jqXHR.opts.url})`);
+      }
+    },
+    restoreAll: () => {
+      for (let url in $.xhrPool.requests) {
+        const jqXHR = $.xhrPool.requests[url];
+        $.ajax(jqXHR.opts);
+        console.log(`AJAX request is restored (${jqXHR.opts.url})`);
+      }
+
+      $.xhrPool.paused = false;
+    },
+  };
+
+  $.ajaxSetup({
+    beforeSend: (jqXHR) => {}, //  and connection to list
+    complete: (jqXHR) => {
+      if (!$.xhrPool.paused) {
+        console.log(`AJAX request is done (${jqXHR.opts.url})`);
+        delete $.xhrPool.requests[jqXHR.opts.url];
+      }
+    },
+  });
+
+  // attach events
+  $Body.on(`${Events.OFFLINE}`, () => {
+    $.xhrPool.pauseAll();
+  });
+
+  $Body.on(`${Events.ONLINE}`, () => {
+    $.xhrPool.restoreAll();
+  });
+
   return AjaxUI;
 })($);
 

src/js/_components/_ui.sidebar.js

@@ -25,7 +25,6 @@ const SidebarUI = (($) => {
       //const fontSize = parseInt($Body.css('font-size'));
       const fontSize = 0;
       const contentElement = $(`.${CONTENTHOLDER}`)[0];
-      console.log(contentElement);
 
       //$(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`);
       const $el = $(`.${CLASSNAME}`);
@@ -42,23 +41,28 @@ const SidebarUI = (($) => {
 
       $Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => {
         const contentOffset = parseInt(contentElement.offsetTop) + fontSize;
-        const contentOffsetHeight = parseInt(contentElement.offsetHeight) - fontSize;
+        const contentOffsetHeight =
+          parseInt(contentElement.offsetHeight) - fontSize;
         const sidebarWidth = $el[0].offsetWidth;
 
-
         const scrollPos = parseInt($Body.scrollTop());
 
         // normal pos
         if (contentOffset >= scrollPos) {
           $innerWrapper.attr('style', '');
-        }else if(scrollPos >= (contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight)){
+        } else if (
+          scrollPos >=
+          contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight
+        ) {
           // bottom pos
           $innerWrapper.attr('style', `position:absolute;bottom:${fontSize}px`);
         } else {
           // scrolled pos
-          $innerWrapper.attr('style', `position:fixed;top:${fontSize}px;width:${sidebarWidth}px`);
+          $innerWrapper.attr(
+            'style',
+            `position:fixed;top:${fontSize}px;width:${sidebarWidth}px`,
+          );
         }
-
       });
     }
 

src/js/_main.js

@@ -436,7 +436,6 @@ const MainUI = (($) => {
 
               $el.trigger(`${Events.LAZYIMAGEREADY}`);
             });
-
           });
         }
       });