JI-1059 Fix offline dialog always showing at the top of the instance

This is needed because we can't determine where the user was on the page
when the request failed
Avoid restoring focus to prevent the screen from jumping around

js/h5p-confirmation-dialog.js

@@ -13,6 +13,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
    * @param [options.confirmText] Confirm dialog button text
    * @param [options.hideCancel] Hide cancel button
    * @param [options.hideExit] Hide exit button
+   * @param [options.skipRestoreFocus] Skip restoring focus when hiding the dialog
    * @param [options.classes] Extra classes for popup
    * @constructor
    */
@@ -358,7 +359,9 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
 
       // Restore focus
       stopCapturingFocus();
-      previouslyFocused.focus();
+      if (!options.skipRestoreFocus) {
+        previouslyFocused.focus();
+      }
       restoreUnderlay();
       setTimeout(function () {
         popupBackground.classList.add('hidden');

js/request-queue.js

@@ -262,6 +262,7 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
       hideExit: true,
       classes: ['offline'],
       instance: instance,
+      skipRestoreFocus: true,
     });
 
     const dialog = offlineDialog.getElement();
@@ -317,17 +318,16 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
         isShowing = false;
       }
 
-      let toastConfig = {};
-      const topOffset = getFocusedElementOffset();
-      if (topOffset) {
-        toastConfig = {
+      requestQueue.displayToastMessage(
+        H5P.t('offlineSuccessfulSubmit'),
+        true,
+        {
           position: {
             vertical: 'top',
-            offsetVertical: topOffset,
+            offsetVertical: '100',
           }
-        };
-      }
-      requestQueue.displayToastMessage(H5P.t('offlineSuccessfulSubmit'), true, toastConfig);
+        }
+      );
 
     }.bind(this));
 
@@ -374,12 +374,6 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
       }
 
       if (isLoading) {
-        let topOffset = getFocusedElementOffset();
-        if (topOffset) {
-          throbber.classList.add('top-offset');
-          throbber.style.top = topOffset + 'px';
-        }
-
         throbberWrapper.classList.add('show');
       } else {
         throbberWrapper.classList.remove('show');
@@ -421,18 +415,14 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
 
       toggleThrobber(false);
       if (!isShowing) {
-        let topOffset = getFocusedElementOffset();
-        if (!topOffset) {
-          topOffset = 0;
-        }
         if (forceDelayedShow) {
           // Must force delayed show since dialog may be hiding, and confirmation dialog does not
           //  support this.
           setTimeout(function () {
-            offlineDialog.show(topOffset);
+            offlineDialog.show(0);
           }, 100);
         } else {
-          offlineDialog.show(topOffset);
+          offlineDialog.show(0);
         }
       }
       isShowing = true;
@@ -457,23 +447,6 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
       }
     };
 
-    /**
-     * Get previously focused element's top offset
-     * @return {null|number}
-     */
-    const getFocusedElementOffset = function () {
-      let previouslyFocused = offlineDialog.getPreviouslyFocused();
-      if (!previouslyFocused) {
-        previouslyFocused = document.activeElement;
-      }
-
-      if (!previouslyFocused) {
-        return null;
-      }
-
-      return H5P.jQuery(previouslyFocused).offset().top;
-    };
-
     /**
      * Add request to offline request queue. Only supports posts for now.
      *

styles/h5p-confirmation-dialog.css

@@ -157,13 +157,8 @@ button.h5p-confirmation-dialog-exit:hover {
 
 .throbber-wrapper .sending-requests-throbber{
   position: absolute;
-  top: 50%;
+  top: 7em;
   left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.throbber-wrapper .sending-requests-throbber.top-offset {
-  top: initial;
   transform: translateX(-50%);
 }