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.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');
|
||||||
|
|
|
@ -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.
|
||||||
*
|
*
|
||||||
|
|
|
@ -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%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue