JI-1059 Position offline dialog elements on top of last focused element

pull/61/head
Thomas Marstrander 2019-04-05 14:49:55 +02:00
parent 70278d15f4
commit 38fc962625
3 changed files with 66 additions and 14 deletions

View File

@ -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
*

View File

@ -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.
*

View File

@ -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';