JI-1059 Position offline dialog elements on top of last focused element
parent
70278d15f4
commit
38fc962625
|
@ -378,6 +378,14 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
|
|||
return popup;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get previously focused element
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
this.getPreviouslyFocused = function () {
|
||||
return previouslyFocused;
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the minimum height of the view port
|
||||
*
|
||||
|
|
|
@ -184,22 +184,22 @@ H5P.RequestQueue = (function ($, EventDispatcher) {
|
|||
*
|
||||
* @param {string} msg Message to display
|
||||
* @param {boolean} [forceShow] Force override showing the toast
|
||||
* @param {Object} [configOverride] Override toast message config
|
||||
*/
|
||||
RequestQueue.prototype.displayToastMessage = function (msg, forceShow) {
|
||||
RequestQueue.prototype.displayToastMessage = function (msg, forceShow, configOverride) {
|
||||
if (!this.showToast && !forceShow) {
|
||||
return;
|
||||
}
|
||||
H5P.attachToastTo(
|
||||
H5P.jQuery('.h5p-content:first')[0],
|
||||
msg,
|
||||
{
|
||||
position: {
|
||||
horizontal: 'centered',
|
||||
vertical: 'centered',
|
||||
noOverflowX: true
|
||||
}
|
||||
|
||||
const config = H5P.jQuery.extend(true, {}, {
|
||||
position: {
|
||||
horizontal : 'centered',
|
||||
vertical: 'centered',
|
||||
noOverflowX: true,
|
||||
}
|
||||
);
|
||||
}, configOverride);
|
||||
|
||||
H5P.attachToastTo(H5P.jQuery('.h5p-content:first')[0], msg, config);
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -316,7 +316,18 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
|
|||
offlineDialog.hide();
|
||||
isShowing = false;
|
||||
}
|
||||
requestQueue.displayToastMessage(H5P.t('offlineSuccessfulSubmit'), true);
|
||||
|
||||
let toastConfig = {};
|
||||
const topOffset = getFocusedElementOffset();
|
||||
if (topOffset) {
|
||||
toastConfig = {
|
||||
position: {
|
||||
vertical: 'top',
|
||||
offsetVertical: topOffset,
|
||||
}
|
||||
};
|
||||
}
|
||||
requestQueue.displayToastMessage(H5P.t('offlineSuccessfulSubmit'), true, toastConfig);
|
||||
|
||||
}.bind(this));
|
||||
|
||||
|
@ -363,6 +374,12 @@ 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');
|
||||
|
@ -404,14 +421,18 @@ 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(0);
|
||||
offlineDialog.show(topOffset);
|
||||
}, 100);
|
||||
} else {
|
||||
offlineDialog.show(0);
|
||||
offlineDialog.show(topOffset);
|
||||
}
|
||||
}
|
||||
isShowing = true;
|
||||
|
@ -436,6 +457,23 @@ 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.
|
||||
*
|
||||
|
|
|
@ -130,6 +130,7 @@ button.h5p-confirmation-dialog-exit:hover {
|
|||
|
||||
.h5p-confirmation-dialog-popup.offline .h5p-confirmation-dialog-confirm-button:before {
|
||||
content: "\e90b";
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.throbber-wrapper {
|
||||
|
@ -161,6 +162,11 @@ button.h5p-confirmation-dialog-exit:hover {
|
|||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.throbber-wrapper .sending-requests-throbber.top-offset {
|
||||
top: initial;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.throbber-wrapper .sending-requests-throbber:before {
|
||||
display: block;
|
||||
font-family: 'H5P';
|
||||
|
|
Loading…
Reference in New Issue