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

View File

@ -262,6 +262,7 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
hideExit: true, hideExit: true,
classes: ['offline'], classes: ['offline'],
instance: instance, instance: instance,
skipRestoreFocus: true,
}); });
const dialog = offlineDialog.getElement(); const dialog = offlineDialog.getElement();
@ -317,17 +318,16 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
isShowing = false; isShowing = false;
} }
let toastConfig = {}; requestQueue.displayToastMessage(
const topOffset = getFocusedElementOffset(); H5P.t('offlineSuccessfulSubmit'),
if (topOffset) { true,
toastConfig = { {
position: { position: {
vertical: 'top', vertical: 'top',
offsetVertical: topOffset, offsetVertical: '100',
} }
};
} }
requestQueue.displayToastMessage(H5P.t('offlineSuccessfulSubmit'), true, toastConfig); );
}.bind(this)); }.bind(this));
@ -374,12 +374,6 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
} }
if (isLoading) { if (isLoading) {
let topOffset = getFocusedElementOffset();
if (topOffset) {
throbber.classList.add('top-offset');
throbber.style.top = topOffset + 'px';
}
throbberWrapper.classList.add('show'); throbberWrapper.classList.add('show');
} else { } else {
throbberWrapper.classList.remove('show'); throbberWrapper.classList.remove('show');
@ -421,18 +415,14 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
toggleThrobber(false); toggleThrobber(false);
if (!isShowing) { if (!isShowing) {
let topOffset = getFocusedElementOffset();
if (!topOffset) {
topOffset = 0;
}
if (forceDelayedShow) { if (forceDelayedShow) {
// Must force delayed show since dialog may be hiding, and confirmation dialog does not // Must force delayed show since dialog may be hiding, and confirmation dialog does not
// support this. // support this.
setTimeout(function () { setTimeout(function () {
offlineDialog.show(topOffset); offlineDialog.show(0);
}, 100); }, 100);
} else { } else {
offlineDialog.show(topOffset); offlineDialog.show(0);
} }
} }
isShowing = true; 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. * 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{ .throbber-wrapper .sending-requests-throbber{
position: absolute; position: absolute;
top: 50%; top: 7em;
left: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.throbber-wrapper .sending-requests-throbber.top-offset {
top: initial;
transform: translateX(-50%); transform: translateX(-50%);
} }