JI-1059 Move online/offline logic to offline request queue

Fix only queue requests if we are offline
Fix always assume offline request queue is defined

js/h5p.js

@@ -2077,9 +2077,7 @@ H5P.setFinished = function (contentId, score, maxScore, time) {
     };
     H5P.jQuery.post(H5PIntegration.ajax.setFinished, data)
       .fail(function () {
-        if (H5P.offlineRequestQueue) {
         H5P.offlineRequestQueue.add(H5PIntegration.ajax.setFinished, data);
-        }
       });
   }
 };

js/request-queue.js

@@ -17,14 +17,6 @@ H5P.RequestQueue = (function ($, EventDispatcher) {
 
     this.showToast = options.showToast;
     this.itemName = 'requestQueue';
-
-    // Initialize listener for when requests are added to queue
-    window.addEventListener('offline', this.updateOnlineStatus.bind(this));
-    window.addEventListener('online', this.updateOnlineStatus.bind(this));
-
-    this.on('connectionReestablished', function () {
-      this.resumeQueue();
-    }.bind(this));
   };
 
   /**
@@ -202,27 +194,6 @@ H5P.RequestQueue = (function ($, EventDispatcher) {
     H5P.attachToastTo(H5P.jQuery('.h5p-content:first')[0], msg, config);
   };
 
-  /**
-   * Update online status
-   */
-  RequestQueue.prototype.updateOnlineStatus = function () {
-    // Lost connection
-    if (!window.navigator.onLine) {
-      this.displayToastMessage(H5P.t('connectionLost'));
-      return;
-    }
-
-    // Re-connected, resume processing of queue
-    let message = H5P.t('connectionReestablished');
-    const requestQueue = this.getStoredRequests();
-    if (requestQueue.length) {
-      message += ' ' + H5P.t('resubmitScores');
-      this.trigger('connectionReestablished');
-    }
-
-    this.displayToastMessage(message);
-  };
-
   return RequestQueue;
 })(H5P.jQuery, H5P.EventDispatcher);
 
@@ -331,11 +302,6 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
 
     }.bind(this));
 
-    requestQueue.on('connectionReestablished', function () {
-      // Skip resuming queue since request queue already does this
-      retryRequests(true);
-    }.bind(this));
-
     offlineDialog.on('confirmed', function () {
       // Show dialog on next render in case it is being hidden by the 'confirm' button
       isShowing = false;
@@ -344,6 +310,11 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
       }, 100);
     }.bind(this));
 
+    // Initialize listener for when requests are added to queue
+    window.addEventListener('online', function () {
+      retryRequests();
+    }.bind(this));
+
     // Listen for queued requests outside the iframe
     window.addEventListener('message', function (event) {
       const isValidQueueEvent = window.parent === event.source
@@ -381,15 +352,11 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
     };
     /**
      * Retries the failed requests
-     *
-     * @param {boolean} [skipResumeQueue] Skip resuming queue (just do the visuals)
      */
-    const retryRequests = function (skipResumeQueue) {
+    const retryRequests = function () {
       clearInterval(currentInterval);
       toggleThrobber(true);
-      if (!skipResumeQueue) {
       requestQueue.resumeQueue();
-      }
     };
 
     /**
@@ -454,6 +421,11 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
      * @param {Object} data The request data
      */
     this.add = function (url, data) {
+      // Only queue request if it failed because we are offline
+      if (window.navigator.onLine) {
+        return false;
+      }
+
       requestQueue.add(url, data);
     };
   };

styles/h5p-confirmation-dialog.css

@@ -131,6 +131,7 @@ button.h5p-confirmation-dialog-exit:hover {
 .h5p-confirmation-dialog-popup.offline .h5p-confirmation-dialog-confirm-button:before {
   content: "\e90b";
   font-weight: normal;
+  vertical-align: text-bottom;
 }
 
 .throbber-wrapper {