H5P.ConfirmationDialog=(function (EventDispatcher){
function ConfirmationDialog(options){
EventDispatcher.call(this);
const self=this;
H5P.ConfirmationDialog.uniqueId +=1;
const { uniqueId }=H5P.ConfirmationDialog;
options=options||{};
options.headerText=options.headerText||H5P.t('confirmDialogHeader');
options.dialogText=options.dialogText||H5P.t('confirmDialogBody');
options.cancelText=options.cancelText||H5P.t('cancelLabel');
options.closeText=options.closeText||H5P.t('close');
options.confirmText=options.confirmText||H5P.t('confirmLabel');
function dialogConfirmed(e){
self.hide();
self.trigger('confirmed');
e.preventDefault();
}
function dialogCanceled(e, options={}){
self.hide();
self.trigger('canceled', { wasExplicitChoice: options.wasExplicitChoice ?? false });
e.preventDefault();
}
function handleTabbing(event){
if(event.key!=='Tab'){
return;
}
event.preventDefault();
const currentIndex=focusableButtons.indexOf(event.target);
const offset=event.shiftKey ? -1:1;
const nextIndex=(currentIndex + offset + focusableButtons.length) % focusableButtons.length;
focusableButtons[nextIndex].focus();
}
const exitButtonOffset=2 * 16;
const shadowOffset=8;
let resizeIFrame=false;
const popupBackground=document.createElement('div');
popupBackground.classList
.add('h5p-confirmation-dialog-background', 'hidden', 'hiding');
if(options.theme){
popupBackground.classList.add('h5p-theme');
}
if(window.H5PEditor){
popupBackground.classList.add('h5peditor');
if(H5PIntegration.theme?.density){
popupBackground.classList.add(`h5p-${H5PIntegration.theme.density}`);
}}
const popup=document.createElement('div');
popup.classList.add('h5p-confirmation-dialog-popup', 'hidden');
if(options.classes){
options.classes.forEach((popupClass)=> {
popup.classList.add(popupClass);
});
}
popup.setAttribute('role', 'alertdialog');
popup.setAttribute('aria-modal', 'true');
popup.setAttribute('aria-labelledby', `h5p-confirmation-dialog-header-text-${uniqueId}`);
popup.setAttribute('aria-describedby', `h5p-confirmation-dialog-text-${uniqueId}`);
popupBackground.appendChild(popup);
popup.addEventListener('keydown', (e)=> {
if(e.key==='Escape'){
dialogCanceled(e);
}});
popup.addEventListener('keydown', (event)=> {
handleTabbing(event);
});
const header=document.createElement('div');
header.classList.add('h5p-confirmation-dialog-header');
popup.appendChild(header);
const headerText=document.createElement('div');
headerText.classList.add('h5p-confirmation-dialog-header-text');
headerText.id=`h5p-confirmation-dialog-dialog-header-text-${uniqueId}`;
headerText.innerHTML=options.headerText;
header.appendChild(headerText);
const body=document.createElement('div');
body.classList.add('h5p-confirmation-dialog-body');
popup.appendChild(body);
const text=document.createElement('div');
text.classList.add('h5p-confirmation-dialog-text');
text.innerHTML=options.dialogText;
text.id=`h5p-confirmation-dialog-dialog-text-${uniqueId}`;
body.appendChild(text);
const buttons=document.createElement('div');
buttons.classList.add('h5p-confirmation-dialog-buttons');
body.appendChild(buttons);
if(!options.hideCancel){
const cancelButton=document.createElement('button');
if(!options.theme){
cancelButton.classList.add('h5p-core-cancel-button');
}else{
cancelButton.classList.add('h5p-theme-button', 'h5p-theme-secondary-cta');
cancelButton.classList.add('h5p-theme-cancel');
}
const cancelText=document.createElement('span');
cancelText.textContent=options.cancelText;
cancelButton.appendChild(cancelText);
cancelButton.addEventListener('click', (event)=> {
dialogCanceled(event, { wasExplicitChoice: true });
});
buttons.appendChild(cancelButton);
}else{
buttons.classList.add('center');
}
const confirmButton=document.createElement('button');
if(!options.theme){
confirmButton.classList.add('h5p-core-button');
}
confirmButton.setAttribute('aria-label', options.confirmText);
if(options.theme){
confirmButton.classList.add('h5p-theme-button', 'h5p-theme-primary-cta');
confirmButton.classList.add('h5p-theme-check');
}
confirmButton.addEventListener('click', dialogConfirmed);
const confirmText=document.createElement('span');
confirmText.textContent=options.confirmText;
confirmButton.appendChild(confirmText);
buttons.appendChild(confirmButton);
let focusableButtons=[...buttons.childNodes];
if(!options.hideExit){
const exitButton=document.createElement('button');
exitButton.classList.add('h5p-confirmation-dialog-exit');
exitButton.setAttribute('aria-label', options.closeText);
exitButton.addEventListener('click', dialogCanceled);
if(options.theme){
header.appendChild(exitButton);
}else{
popup.appendChild(exitButton);
}
focusableButtons.push(exitButton);
}
let wrapperElement;
let wrapperSiblingsHidden=[];
let popupSiblingsHidden=[];
let previouslyFocused;
this.appendTo=function (wrapper){
wrapperElement=wrapper;
return this;
};
const hideSiblings=function (element){
const hiddenSiblings=[];
const siblings=element.parentNode.children;
let i;
for (i=0; i < siblings.length; i +=1){
hiddenSiblings[i] = !!siblings[i].getAttribute('aria-hidden');
if(siblings[i]!==element){
if(siblings[i].getAttribute('aria-live')){
siblings[i].setAttribute('aria-busy', true);
}else{
siblings[i].setAttribute('aria-hidden', true);
}}
}
return hiddenSiblings;
};
const restoreSiblings=function (element, hiddenSiblings){
const siblings=element.parentNode.children;
let i;
for (i=0; i < siblings.length; i +=1){
if(siblings[i]!==element&&!hiddenSiblings[i]){
if(siblings[i].getAttribute('aria-live')){
siblings[i].setAttribute('aria-busy', false);
}else{
siblings[i].removeAttribute('aria-hidden');
}}
}};
const disableUnderlay=function (){
wrapperSiblingsHidden=hideSiblings(wrapperElement);
popupSiblingsHidden=hideSiblings(popupBackground);
};
const restoreUnderlay=function (){
restoreSiblings(wrapperElement, wrapperSiblingsHidden);
restoreSiblings(popupBackground, popupSiblingsHidden);
};
const fitToContainer=function (offsetTop){
let popupOffsetTop=parseInt(popup.style.top, 10);
if(offsetTop!==undefined){
popupOffsetTop=offsetTop;
}
if(!popupOffsetTop){
popupOffsetTop=0;
}
if(popupOffsetTop + popup.offsetHeight > wrapperElement.offsetHeight){
popupOffsetTop=wrapperElement.offsetHeight - popup.offsetHeight - shadowOffset;
}
if(popupOffsetTop - exitButtonOffset <=0){
popupOffsetTop=exitButtonOffset + shadowOffset;
resizeIFrame=true;
}
popup.style.top=`${popupOffsetTop}px`;
};
this.show=function (offsetTop){
previouslyFocused=document.activeElement;
wrapperElement.appendChild(popupBackground);
popupBackground.classList.remove('hidden');
fitToContainer(offsetTop);
popup.classList.remove('hidden');
popupBackground.addEventListener('transitionend', ()=> {
buttons.firstChild.focus();
}, { once: true });
popupBackground.classList.remove('hiding');
disableUnderlay();
if(resizeIFrame&&options.instance){
const minHeight=parseInt(popup.offsetHeight, 10)
+ exitButtonOffset + (2 * shadowOffset);
self.setViewPortMinimumHeight(minHeight);
options.instance.trigger('resize');
resizeIFrame=false;
}
const prefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)");
if(prefersReducedMotion.matches){
buttons.firstChild.focus();
}
return this;
};
this.hide=function (){
restoreUnderlay();
popupBackground.classList.add('hiding');
popup.classList.add('hidden');
if(!options.skipRestoreFocus){
previouslyFocused.focus();
}
popupBackground.classList.add('hidden');
wrapperElement.removeChild(popupBackground);
self.setViewPortMinimumHeight(null);
return this;
};
this.getElement=function (){
return popup;
};
this.getPreviouslyFocused=function (){
return previouslyFocused;
};
this.setViewPortMinimumHeight=function (minHeight){
const container=document.querySelector('.h5p-container')||document.body;
container.style.minHeight=(typeof minHeight==='number') ? (`${minHeight}px`):minHeight;
};}
ConfirmationDialog.prototype=Object.create(EventDispatcher.prototype);
ConfirmationDialog.prototype.constructor=ConfirmationDialog;
return ConfirmationDialog;
}(H5P.EventDispatcher));
H5P.ConfirmationDialog.uniqueId=-1;