h5p-php-library/js/h5p-confirmation-dialog.js

229 lines
6.6 KiB
JavaScript
Raw Normal View History

2016-04-05 18:35:02 +02:00
/*global H5P*/
H5P.ConfirmationDialog = (function (EventDispatcher) {
"use strict";
/**
* Create a confirmation dialog
*
* @param [options] Options for confirmation dialog
* @param [options.instance] Instance that uses confirmation dialog
2016-04-05 18:35:02 +02:00
* @param [options.headerText] Header text
* @param [options.dialogText] Dialog text
* @param [options.cancelText] Cancel dialog button text
* @param [options.confirmText] Confirm dialog button text
* @constructor
*/
function ConfirmationDialog(options) {
EventDispatcher.call(this);
var self = this;
// Default options
options = options || {};
options.headerText = options.headerText || H5P.t('confirmDialogHeader');
options.dialogText = options.dialogText || H5P.t('confirmDialogBody');
options.cancelText = options.cancelText || H5P.t('cancelLabel');
options.confirmText = options.confirmText || H5P.t('confirmLabel');
// Offset of exit button
var exitButtonOffset = 2 * 16;
var shadowOffset = 8;
2016-04-05 18:35:02 +02:00
// Determine if we are too large for our container and must resize
var resizeIFrame = false;
2016-04-05 18:35:02 +02:00
// Create background
var popupBackground = document.createElement('div');
popupBackground.classList
.add('h5p-confirmation-dialog-background', 'hidden', 'hiding');
// Create outer popup
var popup = document.createElement('div');
popup.classList.add('h5p-confirmation-dialog-popup', 'hidden');
popupBackground.appendChild(popup);
// Popup header
var header = document.createElement('div');
header.classList.add('h5p-confirmation-dialog-header');
popup.appendChild(header);
// Header text
var headerText = document.createElement('div');
headerText.classList.add('h5p-confirmation-dialog-header-text');
headerText.innerHTML = options.headerText;
header.appendChild(headerText);
// Popup body
var body = document.createElement('div');
body.classList.add('h5p-confirmation-dialog-body');
popup.appendChild(body);
// Popup text
var text = document.createElement('div');
text.classList.add('h5p-confirmation-dialog-text');
text.innerHTML = options.dialogText;
body.appendChild(text);
// Popup buttons
var buttons = document.createElement('div');
buttons.classList.add('h5p-confirmation-dialog-buttons');
body.appendChild(buttons);
// Cancel button
var cancelButton = document.createElement('a');
2016-04-05 18:35:02 +02:00
cancelButton.classList.add('h5p-core-cancel-button');
cancelButton.href = '#';
2016-04-05 18:35:02 +02:00
cancelButton.textContent = options.cancelText;
cancelButton.onclick = function (e) {
2016-04-05 18:35:02 +02:00
self.hide();
self.trigger('canceled');
e.preventDefault();
};
cancelButton.onkeydown = function (e) {
if (e.which === 32) { // Space
// Prevent jumping
e.preventDefault();
}
else if (e.which === 13) { // Enter
self.hide();
self.trigger('canceled');
e.preventDefault();
}
2016-04-05 18:35:02 +02:00
};
buttons.appendChild(cancelButton);
// Confirm button
var confirmButton = document.createElement('a');
2016-04-05 18:35:02 +02:00
confirmButton.classList.add('h5p-core-button',
'h5p-confirmation-dialog-confirm-button');
confirmButton.href = '#';
2016-04-05 18:35:02 +02:00
confirmButton.textContent = options.confirmText;
confirmButton.onclick = function (e) {
2016-04-05 18:35:02 +02:00
self.hide();
self.trigger('confirmed');
e.preventDefault();
};
confirmButton.onkeydown = function (e) {
if (e.which === 32) { // Space
// Prevent jumping
e.preventDefault();
}
else if (e.which === 13) { // Enter
self.hide();
self.trigger('confirmed');
e.preventDefault();
}
2016-04-05 18:35:02 +02:00
};
buttons.appendChild(confirmButton);
// Exit button
var exitButton = document.createElement('a');
exitButton.href = '#';
2016-04-05 18:35:02 +02:00
exitButton.classList.add('h5p-confirmation-dialog-exit');
exitButton.onclick = function (e) {
2016-04-05 18:35:02 +02:00
self.hide();
self.trigger('canceled');
e.preventDefault();
};
exitButton.onkeydown = function (e) {
if (e.which === 32) { // Space
// Prevent jumping
e.preventDefault();
}
else if (e.which === 13) { // Enter
self.hide();
self.trigger('canceled');
e.preventDefault();
}
2016-04-05 18:35:02 +02:00
};
popup.appendChild(exitButton);
// Wrapper element
var wrapperElement;
/**
* Append confirmation dialog
* @param {HTMLElement} wrapper
* @returns {H5P.ConfirmationDialog}
*/
this.appendTo = function (wrapper) {
wrapper.appendChild(popupBackground);
wrapperElement = wrapper;
return this;
};
/**
* Fit popup to container. Makes sure it doesn't overflow.
*/
var fitToContainer = function () {
var popupOffsetTop = parseInt(popup.style.top, 10);
2016-04-05 18:35:02 +02:00
// Overflows height
if (popupOffsetTop + popup.offsetHeight > wrapperElement.offsetHeight) {
popupOffsetTop = wrapperElement.offsetHeight - popup.offsetHeight - shadowOffset;
2016-04-05 18:35:02 +02:00
}
if (popupOffsetTop - exitButtonOffset <= 0) {
popupOffsetTop = exitButtonOffset + shadowOffset;
// We are too big and must resize
resizeIFrame = true;
}
popup.style.top = popupOffsetTop + 'px';
2016-04-05 18:35:02 +02:00
};
/**
* Show confirmation dialog
* @params {number} offsetTop Offset top
* @returns {H5P.ConfirmationDialog}
*/
this.show = function (offsetTop) {
2016-04-05 18:35:02 +02:00
popup.style.top = offsetTop + 'px';
popupBackground.classList.remove('hidden');
fitToContainer();
setTimeout(function () {
popup.classList.remove('hidden');
popupBackground.classList.remove('hiding');
// Resize iFrame if necessary
if (resizeIFrame && options.instance) {
setTimeout(function () {
var minHeight = parseInt(popup.offsetHeight, 10) +
exitButtonOffset + (2 * shadowOffset);
wrapperElement.style.minHeight = minHeight + 'px';
options.instance.trigger('resize');
resizeIFrame = false;
}, 100);
}
}, 0);
// Programmatically focus popup
popup.setAttribute('tabindex', '-1');
popup.focus();
2016-04-05 18:35:02 +02:00
return this;
};
/**
* Hide confirmation dialog
* @returns {H5P.ConfirmationDialog}
*/
this.hide = function () {
popupBackground.classList.add('hiding');
popup.classList.add('hidden');
setTimeout(function () {
popupBackground.classList.add('hidden');
}, 100);
return this;
};
}
ConfirmationDialog.prototype = Object.create(EventDispatcher.prototype);
ConfirmationDialog.prototype.constructor = ConfirmationDialog;
return ConfirmationDialog;
}(H5P.EventDispatcher));