From 3b685a5520abb3eec8afbb115a56fed9e3883a7c Mon Sep 17 00:00:00 2001
From: Thomas Marstrander <marstranderthomas@gmail.com>
Date: Fri, 5 Apr 2019 16:11:19 +0200
Subject: [PATCH] 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      |  5 +++-
 js/request-queue.js                | 47 +++++++-----------------------
 styles/h5p-confirmation-dialog.css |  7 +----
 3 files changed, 15 insertions(+), 44 deletions(-)

diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js
index eb2f8cc..cd3536e 100644
--- a/js/h5p-confirmation-dialog.js
+++ b/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');
diff --git a/js/request-queue.js b/js/request-queue.js
index b943e25..ad87ed2 100644
--- a/js/request-queue.js
+++ b/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.
      *
diff --git a/styles/h5p-confirmation-dialog.css b/styles/h5p-confirmation-dialog.css
index c809a81..4558d76 100644
--- a/styles/h5p-confirmation-dialog.css
+++ b/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%);
 }