mirror of
https://github.com/nasa/openmct.git
synced 2025-01-15 01:10:51 +00:00
ac11f898d4
* fix add links by drag and drop * fix dialog component logging errors * fix search component errors * fix sort * remove unused entrydnd file * remove unnecessary console logs * fix preview action in embed dropdown, which was throwing a type error * invoke PreviewAction once in NotebookController and pass into git add -a * add navigation capability to embeds, and a bunch of cleanup * code cleanup and avoid calling dismiss twice on overlay destroy, which was throwing a DOM error. Calling code should dismiss the overlay * only show elements pool if domainObject has composition * fix error in inspector when no selection is present * wire up object view expand button * listen to composition#remove in TabsView * make reviewer requested changes * make reviewer requested changes, and fix for an edge case where removed tab is at the end of the array and currentTab is not set properly * remove array wrapping dynamic classes in embed.html * add title='View Large' to expand button * change model variable to domainObject in tabs.vue * dismiss top level overlay when esc is pressed (only if overlay is dismissable) * fix link navigation from embeds * use positive flag dismissable instead of negative notDismissable for overlays * make overlays dismissable by default, unless set to false
134 lines
4.6 KiB
JavaScript
134 lines
4.6 KiB
JavaScript
import Overlay from './Overlay';
|
|
import Dialog from './Dialog';
|
|
import ProgressDialog from './ProgressDialog';
|
|
|
|
/**
|
|
* The OverlayAPI is responsible for pre-pending templates to
|
|
* the body of the document, which is useful for displaying templates
|
|
* which need to block the full screen.
|
|
*
|
|
* @memberof api/overlays
|
|
* @constructor
|
|
*/
|
|
|
|
class OverlayAPI {
|
|
constructor() {
|
|
this.activeOverlays = [];
|
|
|
|
this.dismissLastOverlay = this.dismissLastOverlay.bind(this);
|
|
|
|
document.addEventListener('keyup', (event) => {
|
|
if (event.key === 'Escape') {
|
|
this.dismissLastOverlay();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* private
|
|
*/
|
|
showOverlay(overlay) {
|
|
if (this.activeOverlays.length) {
|
|
this.activeOverlays[this.activeOverlays.length - 1].container.classList.add('invisible');
|
|
}
|
|
|
|
this.activeOverlays.push(overlay);
|
|
|
|
overlay.once('destroy', () => {
|
|
this.activeOverlays.splice(this.activeOverlays.indexOf(overlay), 1);
|
|
|
|
if (this.activeOverlays.length) {
|
|
this.activeOverlays[this.activeOverlays.length - 1].container.classList.remove('invisible');
|
|
}
|
|
});
|
|
|
|
overlay.show();
|
|
}
|
|
|
|
/**
|
|
* private
|
|
*/
|
|
dismissLastOverlay() {
|
|
let lastOverlay = this.activeOverlays[this.activeOverlays.length - 1];
|
|
if (lastOverlay && lastOverlay.dismissable) {
|
|
lastOverlay.dismiss();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A description of option properties that can be passed into the overlay
|
|
* @typedef options
|
|
* @property {object} element DOMElement that is to be inserted/shown on the overlay
|
|
* @property {string} size prefered size of the overlay (large, small, fit)
|
|
* @property {array} buttons optional button objects with label and callback properties
|
|
* @property {function} onDestroy callback to be called when overlay is destroyed
|
|
* @property {boolean} dismissable allow user to dismiss overlay by using esc, and clicking away
|
|
* from overlay. Unless set to false, all overlays will be dismissable by default.
|
|
*/
|
|
overlay(options) {
|
|
let overlay = new Overlay(options);
|
|
|
|
this.showOverlay(overlay);
|
|
|
|
return overlay;
|
|
}
|
|
|
|
/**
|
|
* Displays a blocking (modal) dialog. This dialog can be used for
|
|
* displaying messages that require the user's
|
|
* immediate attention.
|
|
* @param {model} options defines options for the dialog
|
|
* @returns {object} with an object with a dismiss function that can be called from the calling code
|
|
* to dismiss/destroy the dialog
|
|
*
|
|
* A description of the model options that may be passed to the
|
|
* dialog method. Note that the DialogModel described
|
|
* here is shared with the Notifications framework.
|
|
* @see NotificationService
|
|
*
|
|
* @typedef options
|
|
* @property {string} title the title to use for the dialog
|
|
* @property {string} iconClass class to apply to icon that is shown on dialog
|
|
* @property {string} message text that indicates a current message,
|
|
* @property {buttons[]} buttons a list of buttons with title and callback properties that will
|
|
* be added to the dialog.
|
|
*/
|
|
dialog(options) {
|
|
let dialog = new Dialog(options);
|
|
|
|
this.showOverlay(dialog);
|
|
|
|
return dialog;
|
|
}
|
|
|
|
|
|
/**
|
|
* Displays a blocking (modal) progress dialog. This dialog can be used for
|
|
* displaying messages that require the user's attention, and show progress
|
|
* @param {model} options defines options for the dialog
|
|
* @returns {object} with an object with a dismiss function that can be called from the calling code
|
|
* to dismiss/destroy the dialog and an updateProgress function that takes progressPercentage(Number 0-100)
|
|
* and progressText (string)
|
|
*
|
|
* A description of the model options that may be passed to the
|
|
* dialog method. Note that the DialogModel described
|
|
* here is shared with the Notifications framework.
|
|
* @see NotificationService
|
|
*
|
|
* @typedef options
|
|
* @property {number} progressPerc the initial progress value (0-100) or {string} 'unknown' for anonymous progress
|
|
* @property {string} progressText the initial text to be shown under the progress bar
|
|
* @property {buttons[]} buttons a list of buttons with title and callback properties that will
|
|
* be added to the dialog.
|
|
*/
|
|
progressDialog(options) {
|
|
let progressDialog = new ProgressDialog(options);
|
|
|
|
this.showOverlay(progressDialog);
|
|
|
|
return progressDialog;
|
|
}
|
|
}
|
|
|
|
export default OverlayAPI;
|