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 aroundpull/61/head
parent
38fc962625
commit
3b685a5520
|
@ -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');
|
||||
|
|
|
@ -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.
|
||||
*
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue