Added focus capturing, redirecting it to the open confirmation dialog
HFJ-1995pull/22/head
parent
87658ed42b
commit
77fb832221
|
@ -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);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue