@highcharts/dashboards
Version:
Highcharts Dashboards framework
158 lines (157 loc) • 4.4 kB
JavaScript
/* *
*
* (c) 2009-2026 Highsoft AS
*
* Integration of this software requires a license.
* - For commercial use, see www.highcharts.com/license
* - For non-commercial, see www.highcharts.com/license-eula
*
*
* Authors:
* - Sebastian Bochan
* - Wojciech Chmiel
* - Gøran Slettemark
* - Sophie Bremer
*
* */
import BaseForm from '../../Shared/BaseForm.js';
import EditGlobals from './EditGlobals.js';
import EditRenderer from './EditRenderer.js';
import { createElement } from '../../Shared/Utilities.js';
/**
* Class to create confirmation popup.
*/
class ConfirmationPopup extends BaseForm {
/* *
*
* Static Properties
*
* */
/* *
*
* Constructor
*
* */
/**
* Constructs an instance of the ConfirmationPopup.
*
* @param parentDiv
* Parent div where the popup will be added.
*
* @param iconsURL
* URL to the icons.
*
* @param editMode
* The EditMode instance.
*
* @param options
* Options for confirmation popup.
*/
constructor(parentDiv, iconsURL, editMode, options) {
iconsURL =
options && options.close && options.close.icon ?
options.close.icon :
iconsURL;
super(parentDiv, iconsURL);
this.editMode = editMode;
this.options = options;
}
/* *
*
* Functions
*
* */
/**
* Returns popup container.
*
* @param parentDiv
* Parent div where the popup will be added.
*
* @param className
* Class name added to the popup container.
*/
createPopupContainer(parentDiv, className = EditGlobals.classNames.confirmationPopup) {
return super.createPopupContainer(parentDiv, className);
}
/**
* Adds close button to the popup.
*
* @param className
* Class name added to the close button.
*/
addCloseButton(className = EditGlobals.classNames.popupCloseButton) {
return super.addCloseButton(className);
}
/**
* Adds events to the close button.
*
* @override BaseForm.closeButtonEvents
*/
closeButtonEvents() {
const cancelCallback = this.contentOptions?.cancelButton.callback;
if (!cancelCallback) {
return;
}
cancelCallback();
}
/**
* Adds content inside the popup.
*/
renderContent() {
const options = this.contentOptions;
if (!options) {
return;
}
// Render content wrapper
this.contentContainer = createElement('div', {
className: EditGlobals.classNames.popupContentContainer
}, {}, this.container);
const popupContainer = this.contentContainer.parentNode;
popupContainer.style.marginTop = '0px';
const offsetTop = popupContainer.getBoundingClientRect().top;
popupContainer.style.marginTop = (offsetTop < 0 ? Math.abs(offsetTop - 200) : 200) + 'px';
// Render text
EditRenderer.renderText(this.contentContainer, {
title: options.text || ''
});
// Render button wrapper
this.buttonContainer = createElement('div', {
className: EditGlobals.classNames.popupButtonContainer
}, {}, this.container);
// Render cancel buttons
EditRenderer.renderButton(this.buttonContainer, {
text: options.cancelButton.value,
className: EditGlobals.classNames.popupCancelBtn,
callback: options.cancelButton.callback
});
// Confirm
EditRenderer.renderButton(this.buttonContainer, {
text: options.confirmButton.value,
className: EditGlobals.classNames.popupConfirmBtn,
callback: () => {
options.confirmButton.callback.call(options.confirmButton.context);
this.closePopup();
}
});
}
/**
* Shows confirmation popup.
*
* @param options
* Options for confirmation popup.
*/
show(options) {
this.contentOptions = options;
this.showPopup();
this.renderContent();
this.editMode.setEditOverlay();
}
/**
* Hides confirmation popup.
*/
closePopup() {
super.closePopup();
this.editMode.setEditOverlay(true);
}
}
export default ConfirmationPopup;