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; return popup;
}; };
/**
* Get previously focused element
* @return {HTMLElement}
*/
this.getPreviouslyFocused = function () {
return previouslyFocused;
};
/** /**
* Sets the minimum height of the view port * 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 {string} msg Message to display
* @param {boolean} [forceShow] Force override showing the toast * @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) { if (!this.showToast && !forceShow) {
return; return;
} }
H5P.attachToastTo(
H5P.jQuery('.h5p-content:first')[0], const config = H5P.jQuery.extend(true, {}, {
msg,
{
position: { position: {
horizontal: 'centered', horizontal : 'centered',
vertical: 'centered', vertical: 'centered',
noOverflowX: true noOverflowX: true,
} }
} }, configOverride);
);
H5P.attachToastTo(H5P.jQuery('.h5p-content:first')[0], msg, config);
}; };
/** /**
@ -316,7 +316,18 @@ H5P.OfflineRequestQueue = (function (RequestQueue, Dialog) {
offlineDialog.hide(); offlineDialog.hide();
isShowing = false; 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)); }.bind(this));
@ -363,6 +374,12 @@ 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');
@ -404,14 +421,18 @@ 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(0); offlineDialog.show(topOffset);
}, 100); }, 100);
} else { } else {
offlineDialog.show(0); offlineDialog.show(topOffset);
} }
} }
isShowing = true; 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. * 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 { .h5p-confirmation-dialog-popup.offline .h5p-confirmation-dialog-confirm-button:before {
content: "\e90b"; content: "\e90b";
font-weight: normal;
} }
.throbber-wrapper { .throbber-wrapper {
@ -161,6 +162,11 @@ button.h5p-confirmation-dialog-exit:hover {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.throbber-wrapper .sending-requests-throbber.top-offset {
top: initial;
transform: translateX(-50%);
}
.throbber-wrapper .sending-requests-throbber:before { .throbber-wrapper .sending-requests-throbber:before {
display: block; display: block;
font-family: 'H5P'; font-family: 'H5P';