Class ModalDialog

Create a modal dialog for displaying titile, close button and content.

Index

Constructors

Methods

close create createSegmentButtons open

Constructors

constructor

new ModalDialog(className: string, title: string): ModalDialog
Constructor
Parameters
- className: string
  top level CSS class name for the dialog
- title: string
  titile of the dialog
Returns ModalDialog
- Defined in src/lib/helpers/modalDialog.ts:14

Methods

close

close(): void
Close the modal dialog.

Returns void
- Defined in src/lib/helpers/modalDialog.ts:103

create

create(
parentElement: HTMLElement,
addConttent: (contentElement: HTMLDivElement) => HTMLDivElement,
): void
Create a modal dialog content and return content element.
Parameters
- parentElement: HTMLElement
  parent element to append the dialog
- addConttent: (contentElement: HTMLDivElement) => HTMLDivElement
  callback function to add content to the dialog. The callback receives a content element as an argument and must return the modified content element.
Returns void
HTMLDialogElement
Example
```
const dialog = new ModalDialog('my-dialog', 'My Dialog');
dialog.create(document.body, (content) => {
  const p = document.createElement('p');
  p.textContent = 'This is my dialog content.';
  content.appendChild(p);
  return content;
});
dialog.open();
```
- Defined in src/lib/helpers/modalDialog.ts:36

createSegmentButtons

createSegmentButtons(
    options: { label: string; value: string }[],
    defaultValue: string,
    onClick?: (value: string) => void,
): HTMLDivElement
Create segment buttons element for the dialog.
Parameters
- options: { label: string; value: string }[]
  options for creating segment buttons
- defaultValue: string
  default value for the segment buttons
- onClick: (value: string) => void = ...
  a callback function to handle click events on the segment buttons
Returns HTMLDivElement
Example
```
const segmentButtons = createSegmentButtons(
  [{ value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }],
  'option1',
  (value) => console.log(`Selected: ${value}`)
);
document.body.appendChild(segmentButtons);
```
- Defined in src/lib/helpers/modalDialog.ts:123

open

open(): void
Open the modal dialog.

Returns void
- Defined in src/lib/helpers/modalDialog.ts:96