Current Path : C:/xampp/htdocs/moodle/mod/hvp/library/js/ |
Current File : C:/xampp/htdocs/moodle/mod/hvp/library/js/request-queue.js |
/** * Queue requests and handle them at your convenience * * @type {RequestQueue} */ H5P.RequestQueue = (function ($, EventDispatcher) { /** * A queue for requests, will be automatically processed when regaining connection * * @param {boolean} [options.showToast] Show toast when losing or regaining connection * @constructor */ const RequestQueue = function (options) { EventDispatcher.call(this); this.processingQueue = false; options = options || {}; this.showToast = options.showToast; this.itemName = 'requestQueue'; }; /** * Add request to queue. Only supports posts currently. * * @param {string} url * @param {Object} data * @returns {boolean} */ RequestQueue.prototype.add = function (url, data) { if (!window.localStorage) { return false; } let storedStatements = this.getStoredRequests(); if (!storedStatements) { storedStatements = []; } storedStatements.push({ url: url, data: data, }); window.localStorage.setItem(this.itemName, JSON.stringify(storedStatements)); this.trigger('requestQueued', { storedStatements: storedStatements, processingQueue: this.processingQueue, }); return true; }; /** * Get stored requests * * @returns {boolean|Array} Stored requests */ RequestQueue.prototype.getStoredRequests = function () { if (!window.localStorage) { return false; } const item = window.localStorage.getItem(this.itemName); if (!item) { return []; } return JSON.parse(item); }; /** * Clear stored requests * * @returns {boolean} True if the storage was successfully cleared */ RequestQueue.prototype.clearQueue = function () { if (!window.localStorage) { return false; } window.localStorage.removeItem(this.itemName); return true; }; /** * Start processing of requests queue * * @return {boolean} Returns false if it was not possible to resume processing queue */ RequestQueue.prototype.resumeQueue = function () { // Not supported if (!H5PIntegration || !window.navigator || !window.localStorage) { return false; } // Already processing if (this.processingQueue) { return false; } // Attempt to send queued requests const queue = this.getStoredRequests(); const queueLength = queue.length; // Clear storage, failed requests will be re-added this.clearQueue(); // No items left in queue if (!queueLength) { this.trigger('emptiedQueue', queue); return true; } // Make sure requests are not changed while they're being handled this.processingQueue = true; // Process queue in original order this.processQueue(queue); return true }; /** * Process first item in the request queue * * @param {Array} queue Request queue */ RequestQueue.prototype.processQueue = function (queue) { if (!queue.length) { return; } this.trigger('processingQueue'); // Make sure the requests are processed in a FIFO order const request = queue.shift(); const self = this; $.post(request.url, request.data) .fail(self.onQueuedRequestFail.bind(self, request)) .always(self.onQueuedRequestProcessed.bind(self, queue)) }; /** * Request fail handler * * @param {Object} request */ RequestQueue.prototype.onQueuedRequestFail = function (request) { // Queue the failed request again if we're offline if (!window.navigator.onLine) { this.add(request.url, request.data); } }; /** * An item in the queue was processed * * @param {Array} queue Queue that was processed */ RequestQueue.prototype.onQueuedRequestProcessed = function (queue) { if (queue.length) { this.processQueue(queue); return; } // Finished processing this queue this.processingQueue = false; // Run empty queue callback with next request queue const requestQueue = this.getStoredRequests(); this.trigger('queueEmptied', requestQueue); }; /** * Display toast message on the first content of current page * * @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, configOverride) { if (!this.showToast && !forceShow) { return; } const config = H5P.jQuery.extend(true, {}, { position: { horizontal : 'centered', vertical: 'centered', noOverflowX: true, } }, configOverride); H5P.attachToastTo(H5P.jQuery('.h5p-content:first')[0], msg, config); }; return RequestQueue; })(H5P.jQuery, H5P.EventDispatcher); /** * Request queue for retrying failing requests, will automatically retry them when you come online * * @type {offlineRequestQueue} */ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) { /** * 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 requestQueue.clearQueue(); let startTime = null; const retryIntervals = [10, 20, 40, 60, 120, 300, 600]; let intervalIndex = -1; let currentInterval = null; let isAttached = false; let isShowing = false; let isLoading = false; const instance = options.instance; const offlineDialog = new Dialog({ headerText: H5P.t('offlineDialogHeader'), dialogText: H5P.t('offlineDialogBody'), confirmText: H5P.t('offlineDialogRetryButtonLabel'), hideCancel: true, hideExit: true, classes: ['offline'], instance: instance, skipRestoreFocus: true, }); const dialog = offlineDialog.getElement(); // Add retry text to body const countDownText = document.createElement('div'); countDownText.classList.add('count-down'); countDownText.innerHTML = H5P.t('offlineDialogRetryMessage') .replace(':num', '<span class="count-down-num">0</span>'); dialog.querySelector('.h5p-confirmation-dialog-text').appendChild(countDownText); const countDownNum = countDownText.querySelector('.count-down-num'); // Create throbber const throbberWrapper = document.createElement('div'); throbberWrapper.classList.add('throbber-wrapper'); const throbber = document.createElement('div'); throbber.classList.add('sending-requests-throbber'); throbberWrapper.appendChild(throbber); requestQueue.on('requestQueued', function (e) { // Already processing queue, wait until queue has finished processing before showing dialog if (e.data && e.data.processingQueue) { return; } if (!isAttached) { const rootContent = document.body.querySelector('.h5p-content'); if (!rootContent) { return; } offlineDialog.appendTo(rootContent); rootContent.appendChild(throbberWrapper); isAttached = true; } startCountDown(); }.bind(this)); requestQueue.on('queueEmptied', function (e) { if (e.data && e.data.length) { // New requests were added while processing queue or requests failed again. Re-queue requests. startCountDown(true); return; } // Successfully emptied queue clearInterval(currentInterval); toggleThrobber(false); intervalIndex = -1; if (isShowing) { offlineDialog.hide(); isShowing = false; } requestQueue.displayToastMessage( H5P.t('offlineSuccessfulSubmit'), true, { position: { vertical: 'top', offsetVertical: '100', } } ); }.bind(this)); offlineDialog.on('confirmed', function () { // Show dialog on next render in case it is being hidden by the 'confirm' button isShowing = false; setTimeout(function () { retryRequests(); }, 100); }.bind(this)); // Initialize listener for when requests are added to queue window.addEventListener('online', function () { retryRequests(); }.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 * * @param {boolean} [forceShow] Will force throbber visibility if set */ const toggleThrobber = function (forceShow) { isLoading = !isLoading; if (forceShow !== undefined) { isLoading = forceShow; } if (isLoading && isShowing) { offlineDialog.hide(); isShowing = false; } if (isLoading) { throbberWrapper.classList.add('show'); } else { throbberWrapper.classList.remove('show'); } }; /** * Retries the failed requests */ const retryRequests = function () { clearInterval(currentInterval); toggleThrobber(true); requestQueue.resumeQueue(); }; /** * Increments retry interval */ const incrementRetryInterval = function () { intervalIndex += 1; if (intervalIndex >= retryIntervals.length) { intervalIndex = retryIntervals.length - 1; } }; /** * Starts counting down to retrying queued requests. * * @param forceDelayedShow */ const startCountDown = function (forceDelayedShow) { // Already showing, wait for retry if (isShowing) { return; } toggleThrobber(false); if (!isShowing) { if (forceDelayedShow) { // Must force delayed show since dialog may be hiding, and confirmation dialog does not // support this. setTimeout(function () { offlineDialog.show(0); }, 100); } else { offlineDialog.show(0); } } isShowing = true; startTime = new Date().getTime(); incrementRetryInterval(); clearInterval(currentInterval); currentInterval = setInterval(updateCountDown, 100); }; /** * Updates the count down timer. Retries requests when time expires. */ const updateCountDown = function () { const time = new Date().getTime(); const timeElapsed = Math.floor((time - startTime) / 1000); const timeLeft = retryIntervals[intervalIndex] - timeElapsed; countDownNum.textContent = timeLeft.toString(); // Retry interval reached, retry requests if (timeLeft <= 0) { retryRequests(); } }; /** * Add request to offline request queue. Only supports posts for now. * * @param {string} url The request url * @param {Object} data The request data */ this.add = function (url, data) { // Only queue request if it failed because we are offline if (window.navigator.onLine) { return false; } requestQueue.add(url, data); }; }; return offlineRequestQueue; })(H5P.RequestQueue, H5P.ConfirmationDialog);