JI-1059 Position offline dialog elements on top of last focused element

js/h5p-confirmation-dialog.js

@@ -378,6 +378,14 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
       return popup;
     };
 
+    /**
+     * Get previously focused element
+     * @return {HTMLElement}
+     */
+    this.getPreviouslyFocused = function () {
+      return previouslyFocused;
+    };
+
     /**
      * Sets the minimum height of the view port
      *

js/request-queue.js

@@ -184,22 +184,22 @@ H5P.RequestQueue = (function ($, EventDispatcher) {
    *
    * @param {string} msg Message to display
    * @param {boolean} [forceShow] Force override showing the toast
+   * @param {Object} [configOverride] Override toast message config
    */
-  RequestQueue.prototype.displayToastMessage = function (msg, forceShow) {
+  RequestQueue.prototype.displayToastMessage = function (msg, forceShow, configOverride) {
     if (!this.showToast && !forceShow) {
       return;
     }
-    H5P.attachToastTo(
+
-      H5P.jQuery('.h5p-content:first')[0],
+    const config = H5P.jQuery.extend(true, {}, {
-      msg,
-      {
       position: {
         horizontal : 'centered',
         vertical: 'centered',
-          noOverflowX: true
+        noOverflowX: true,
       }
-      }
+    }, configOverride);
-    );
+
+    H5P.attachToastTo(H5P.jQuery('.h5p-content:first')[0], msg, config);
   };
 
   /**
@@ -316,7 +316,18 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
         offlineDialog.hide();
         isShowing = false;
       }
-      requestQueue.displayToastMessage(H5P.t('offlineSuccessfulSubmit'), true);
+
+      let toastConfig = {};
+      const topOffset = getFocusedElementOffset();
+      if (topOffset) {
+        toastConfig = {
+          position: {
+            vertical: 'top',
+            offsetVertical: topOffset,
+          }
+        };
+      }
+      requestQueue.displayToastMessage(H5P.t('offlineSuccessfulSubmit'), true, toastConfig);
 
     }.bind(this));
 
@@ -363,6 +374,12 @@ 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');
@@ -404,14 +421,18 @@ 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(0);
+            offlineDialog.show(topOffset);
           }, 100);
         } else {
-          offlineDialog.show(0);
+          offlineDialog.show(topOffset);
         }
       }
       isShowing = true;
@@ -436,6 +457,23 @@ 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

@@ -130,6 +130,7 @@ button.h5p-confirmation-dialog-exit:hover {
 
 .h5p-confirmation-dialog-popup.offline .h5p-confirmation-dialog-confirm-button:before {
   content: "\e90b";
+  font-weight: normal;
 }
 
 .throbber-wrapper {
@@ -161,6 +162,11 @@ button.h5p-confirmation-dialog-exit:hover {
   transform: translate(-50%, -50%);
 }
 
+.throbber-wrapper .sending-requests-throbber.top-offset {
+  top: initial;
+  transform: translateX(-50%);
+}
+
 .throbber-wrapper .sending-requests-throbber:before {
   display: block;
   font-family: 'H5P';