JI-1059 Fix offline dialog always showing at the top of the instance

This is needed because we can't determine where the user was on the page
when the request failed
Avoid restoring focus to prevent the screen from jumping around
pull/61/head
Thomas Marstrander 2019-04-05 16:11:19 +02:00
parent 38fc962625
commit 3b685a5520
3 changed files with 15 additions and 44 deletions

View File

@ -13,6 +13,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
* @param [options.confirmText] Confirm dialog button text
* @param [options.hideCancel] Hide cancel button
* @param [options.hideExit] Hide exit button
* @param [options.skipRestoreFocus] Skip restoring focus when hiding the dialog
* @param [options.classes] Extra classes for popup
* @constructor
*/
@ -358,7 +359,9 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
// Restore focus
stopCapturingFocus();
previouslyFocused.focus();
if (!options.skipRestoreFocus) {
previouslyFocused.focus();
}
restoreUnderlay();
setTimeout(function () {
popupBackground.classList.add('hidden');

View File

@ -262,6 +262,7 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
hideExit: true,
classes: ['offline'],
instance: instance,
skipRestoreFocus: true,
});
const dialog = offlineDialog.getElement();
@ -317,17 +318,16 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
isShowing = false;
}
let toastConfig = {};
const topOffset = getFocusedElementOffset();
if (topOffset) {
toastConfig = {
requestQueue.displayToastMessage(
H5P.t('offlineSuccessfulSubmit'),
true,
{
position: {
vertical: 'top',
offsetVertical: topOffset,
offsetVertical: '100',
}
};
}
requestQueue.displayToastMessage(H5P.t('offlineSuccessfulSubmit'), true, toastConfig);
}
);
}.bind(this));
@ -374,12 +374,6 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
}
if (isLoading) {
let topOffset = getFocusedElementOffset();
if (topOffset) {
throbber.classList.add('top-offset');
throbber.style.top = topOffset + 'px';
}
throbberWrapper.classList.add('show');
} else {
throbberWrapper.classList.remove('show');
@ -421,18 +415,14 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
toggleThrobber(false);
if (!isShowing) {
let topOffset = getFocusedElementOffset();
if (!topOffset) {
topOffset = 0;
}
if (forceDelayedShow) {
// Must force delayed show since dialog may be hiding, and confirmation dialog does not
// support this.
setTimeout(function () {
offlineDialog.show(topOffset);
offlineDialog.show(0);
}, 100);
} else {
offlineDialog.show(topOffset);
offlineDialog.show(0);
}
}
isShowing = true;
@ -457,23 +447,6 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
}
};
/**
* Get previously focused element's top offset
* @return {null|number}
*/
const getFocusedElementOffset = function () {
let previouslyFocused = offlineDialog.getPreviouslyFocused();
if (!previouslyFocused) {
previouslyFocused = document.activeElement;
}
if (!previouslyFocused) {
return null;
}
return H5P.jQuery(previouslyFocused).offset().top;
};
/**
* Add request to offline request queue. Only supports posts for now.
*

View File

@ -157,13 +157,8 @@ button.h5p-confirmation-dialog-exit:hover {
.throbber-wrapper .sending-requests-throbber{
position: absolute;
top: 50%;
top: 7em;
left: 50%;
transform: translate(-50%, -50%);
}
.throbber-wrapper .sending-requests-throbber.top-offset {
top: initial;
transform: translateX(-50%);
}