H5P.RequestQueue=(function ($, EventDispatcher){
const RequestQueue=function (options){
EventDispatcher.call(this);
this.processingQueue=false;
options=options||{};
this.showToast=options.showToast;
this.itemName='requestQueue';
};
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;
};
RequestQueue.prototype.getStoredRequests=function (){
if(!window.localStorage){
return false;
}
const item=window.localStorage.getItem(this.itemName);
if(!item){
return [];
}
return JSON.parse(item);
};
RequestQueue.prototype.clearQueue=function (){
if(!window.localStorage){
return false;
}
window.localStorage.removeItem(this.itemName);
return true;
};
RequestQueue.prototype.resumeQueue=function (){
if(!H5PIntegration||!window.navigator||!window.localStorage){
return false;
}
if(this.processingQueue){
return false;
}
const queue=this.getStoredRequests();
const queueLength=queue.length;
this.clearQueue();
if(!queueLength){
this.trigger('emptiedQueue', queue);
return true;
}
this.processingQueue=true;
this.processQueue(queue);
return true
};
RequestQueue.prototype.processQueue=function (queue){
if(!queue.length){
return;
}
this.trigger('processingQueue');
const request=queue.shift();
const self=this;
$.post(request.url, request.data)
.fail(self.onQueuedRequestFail.bind(self, request))
.always(self.onQueuedRequestProcessed.bind(self, queue))
};
RequestQueue.prototype.onQueuedRequestFail=function (request){
if(!window.navigator.onLine){
this.add(request.url, request.data);
}};
RequestQueue.prototype.onQueuedRequestProcessed=function (queue){
if(queue.length){
this.processQueue(queue);
return;
}
this.processingQueue=false;
const requestQueue=this.getStoredRequests();
this.trigger('queueEmptied', requestQueue);
};
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);
H5P.OfflineRequestQueue=(function (RequestQueue, Dialog){
const offlineRequestQueue=function (options){
const requestQueue=new RequestQueue();
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();
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');
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){
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){
startCountDown(true);
return;
}
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 (){
isShowing=false;
setTimeout(function (){
retryRequests();
}, 100);
}.bind(this));
window.addEventListener('online', function (){
retryRequests();
}.bind(this));
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));
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');
}};
const retryRequests=function (){
clearInterval(currentInterval);
toggleThrobber(true);
requestQueue.resumeQueue();
};
const incrementRetryInterval=function (){
intervalIndex +=1;
if(intervalIndex >=retryIntervals.length){
intervalIndex=retryIntervals.length - 1;
}};
const startCountDown=function (forceDelayedShow){
if(isShowing){
return;
}
toggleThrobber(false);
if(!isShowing){
if(forceDelayedShow){
setTimeout(function (){
offlineDialog.show(0);
}, 100);
}else{
offlineDialog.show(0);
}}
isShowing=true;
startTime=new Date().getTime();
incrementRetryInterval();
clearInterval(currentInterval);
currentInterval=setInterval(updateCountDown, 100);
};
const updateCountDown=function (){
const time=new Date().getTime();
const timeElapsed=Math.floor((time - startTime) / 1000);
const timeLeft=retryIntervals[intervalIndex] - timeElapsed;
countDownNum.textContent=timeLeft.toString();
if(timeLeft <=0){
retryRequests();
}};
this.add=function (url, data){
if(window.navigator.onLine){
return false;
}
requestQueue.add(url, data);
};};
return offlineRequestQueue;
})(H5P.RequestQueue, H5P.ConfirmationDialog);