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