JI-1059 Add resizing of offline request dialog for small content

Fix height calculation of confirmation dialog when not provided
lucaboesch · Apr 3, 2019 · 0b1aadb · 0b1aadb
1 parent 687f886
commit 0b1aadb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js
@@ -291,10 +291,14 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
      */
     var fitToContainer = function (offsetTop) {
       var popupOffsetTop = parseInt(popup.style.top, 10);
-      if (offsetTop) {
+      if (offsetTop !== undefined) {
         popupOffsetTop = offsetTop;
       }
 
+      if (!popupOffsetTop) {
+        popupOffsetTop = 0;
+      }
+
       // Overflows height
       if (popupOffsetTop + popup.offsetHeight > wrapperElement.offsetHeight) {
         popupOffsetTop = wrapperElement.offsetHeight - popup.offsetHeight - shadowOffset;

diff --git a/js/h5p.js b/js/h5p.js
@@ -104,8 +104,6 @@ H5P.init = function (target) {
       metadata: contentData.metadata
     };
 
-    H5P.offlineRequestQueue = new H5P.OfflineRequestQueue();
-
     H5P.getUserData(contentId, 'state', function (err, previousState) {
       if (previousState) {
         library.userDatas = {
@@ -138,6 +136,8 @@ H5P.init = function (target) {
     // Create new instance.
     var instance = H5P.newRunnable(library, contentId, $container, true, {standalone: true});
 
+    H5P.offlineRequestQueue = new H5P.OfflineRequestQueue({instance: instance});
+
     // Check if we should add and display a fullscreen button for this H5P.
     if (contentData.fullScreen == 1 && H5P.fullscreenSupported) {
       H5P.jQuery(

diff --git a/js/request-queue.js b/js/request-queue.js
@@ -232,7 +232,14 @@ H5P.RequestQueue = (function ($, EventDispatcher) {
  * @type {offlineRequestQueue}
  */
 H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
-  const offlineRequestQueue = function () {
+
+  /**
+   * Constructor
+   *
+   * @param {Object} [options] Options for offline request queue
+   * @param {Object} [options.instance] The H5P instance which UI components are placed within
+   */
+  const offlineRequestQueue = function (options) {
     const requestQueue = new RequestQueue();
 
     // We could handle requests from previous pages here, but instead we throw them away
@@ -245,6 +252,7 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
     let isAttached = false;
     let isShowing = false;
     let isLoading = false;
+    const instance = options.instance;
 
     const offlineDialog = new Dialog({
       headerText: H5P.t('offlineDialogHeader'),
@@ -253,6 +261,7 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
       hideCancel: true,
       hideExit: true,
       classes: ['offline'],
+      instance: instance,
     });
 
     const dialog = offlineDialog.getElement();
@@ -399,10 +408,10 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
           // Must force delayed show since dialog may be hiding, and confirmation dialog does not
           //  support this.
           setTimeout(function () {
-            offlineDialog.show();
+            offlineDialog.show(0);
           }, 100);
         } else {
-          offlineDialog.show();
+          offlineDialog.show(0);
         }
       }
       isShowing = true;