diff --git a/js/h5p.js b/js/h5p.js index aed6375..20a88ce 100644 --- a/js/h5p.js +++ b/js/h5p.js @@ -66,8 +66,6 @@ H5P.init = function (target) { H5P.$body = H5P.jQuery(document.body); } - H5P.offlineRequestQueue = new H5P.OfflineRequestQueue(); - // Determine if we can use full screen if (H5P.fullscreenSupported === undefined) { /** @@ -106,6 +104,8 @@ H5P.init = function (target) { metadata: contentData.metadata }; + H5P.offlineRequestQueue = new H5P.OfflineRequestQueue(); + H5P.getUserData(contentId, 'state', function (err, previousState) { if (previousState) { library.userDatas = { @@ -2077,7 +2077,9 @@ H5P.setFinished = function (contentId, score, maxScore, time) { }; H5P.jQuery.post(H5PIntegration.ajax.setFinished, data) .fail(function () { - H5P.offlineRequestQueue.add(H5PIntegration.ajax.setFinished, data); + if (H5P.offlineRequestQueue) { + H5P.offlineRequestQueue.add(H5PIntegration.ajax.setFinished, data); + } }); } }; diff --git a/js/request-queue.js b/js/request-queue.js index 2459461..560062f 100644 --- a/js/request-queue.js +++ b/js/request-queue.js @@ -21,6 +21,10 @@ H5P.RequestQueue = (function ($, EventDispatcher) { // 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)); }; /** @@ -213,7 +217,7 @@ H5P.RequestQueue = (function ($, EventDispatcher) { const requestQueue = this.getStoredRequests(); if (requestQueue.length) { message += ' ' + H5P.t('resubmitScores'); - this.resumeQueue(); + this.trigger('connectionReestablished'); } this.displayToastMessage(message); @@ -228,7 +232,7 @@ H5P.RequestQueue = (function ($, EventDispatcher) { * @type {offlineRequestQueue} */ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) { - return function offlineRequestQueue() { + const offlineRequestQueue = function () { const requestQueue = new RequestQueue(); // We could handle requests from previous pages here, but instead we throw them away @@ -251,7 +255,6 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) { classes: ['offline'], }); - const dialog = offlineDialog.getElement(); // Add retry text to body @@ -308,6 +311,11 @@ 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; @@ -316,6 +324,19 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) { }, 100); }.bind(this)); + // Listen for queued requests outside the iframe + window.addEventListener('message', function (event) { + const isValidQueueEvent = window.parent === event.source + && event.data.context === 'h5p' + && event.data.action === 'queueRequest'; + + if (!isValidQueueEvent) { + return; + } + + this.add(event.data.url, event.data.data); + }.bind(this)); + /** * Toggle throbber visibility * @@ -334,19 +355,21 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) { if (isLoading) { throbberWrapper.classList.add('show'); - } - else { + } else { throbberWrapper.classList.remove('show'); } }; - /** * Retries the failed requests + * + * @param {boolean} [skipResumeQueue] Skip resuming queue (just do the visuals) */ - const retryRequests = function () { + const retryRequests = function (skipResumeQueue) { clearInterval(currentInterval); toggleThrobber(true); - requestQueue.resumeQueue(); + if (!skipResumeQueue) { + requestQueue.resumeQueue(); + } }; /** @@ -365,6 +388,11 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) { * @param forceDelayedShow */ const startCountDown = function (forceDelayedShow) { + // Already showing, wait for retry + if (isShowing) { + return; + } + toggleThrobber(false); if (!isShowing) { if (forceDelayedShow) { @@ -373,14 +401,14 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) { setTimeout(function () { offlineDialog.show(); }, 100); - } - else { + } else { offlineDialog.show(); } } isShowing = true; startTime = new Date().getTime(); incrementRetryInterval(); + clearInterval(currentInterval); currentInterval = setInterval(updateCountDown, 100); }; @@ -409,4 +437,6 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) { requestQueue.add(url, data); }; }; + + return offlineRequestQueue; })(H5P.RequestQueue, H5P.ConfirmationDialog); \ No newline at end of file