Added focus capturing, redirecting it to the open confirmation dialog

HFJ-1995
pull/22/head
Thomas Marstrander 2016-06-07 14:31:41 +02:00
parent 87658ed42b
commit 77fb832221
1 changed files with 31 additions and 0 deletions

View File

@ -158,6 +158,9 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
// Wrapper element // Wrapper element
var wrapperElement; var wrapperElement;
// Focus capturing
var focusPredator;
/** /**
* Set parent of confirmation dialog * Set parent of confirmation dialog
* @param {HTMLElement} wrapper * @param {HTMLElement} wrapper
@ -168,6 +171,32 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
return this; return this;
}; };
/**
* Capture the focus element, send it to confirmation button
* @param {Event} e Original focus event
*/
var captureFocus = function (e) {
if (!popupBackground.contains(e.target)) {
e.preventDefault();
confirmButton.focus();
}
};
/**
* Start capturing focus of parent and send it to dialog
*/
var startCapturingFocus = function () {
focusPredator = wrapperElement.parentNode || wrapperElement;
focusPredator.addEventListener('focus', captureFocus, true);
};
/**
* Clean up event listener for capturing focus
*/
var stopCapturingFocus = function () {
focusPredator.removeEventListener('focus', captureFocus, true);
};
/** /**
* Fit popup to container. Makes sure it doesn't overflow. * Fit popup to container. Makes sure it doesn't overflow.
* @params {number} [offsetTop] Offset of popup * @params {number} [offsetTop] Offset of popup
@ -199,6 +228,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
*/ */
this.show = function (offsetTop) { this.show = function (offsetTop) {
wrapperElement.appendChild(popupBackground); wrapperElement.appendChild(popupBackground);
startCapturingFocus();
popupBackground.classList.remove('hidden'); popupBackground.classList.remove('hidden');
fitToContainer(offsetTop); fitToContainer(offsetTop);
setTimeout(function () { setTimeout(function () {
@ -232,6 +262,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
popup.classList.add('hidden'); popup.classList.add('hidden');
setTimeout(function () { setTimeout(function () {
popupBackground.classList.add('hidden'); popupBackground.classList.add('hidden');
stopCapturingFocus();
wrapperElement.removeChild(popupBackground); wrapperElement.removeChild(popupBackground);
}, 100); }, 100);