Namespace: reearth.modal
The Modal type defines the structure and capabilities of modal dialog components within reearth. The Re-Earth plugin system supports the usage of modals through the reearth.modal.
Description: This method displays a modal dialog with the provided HTML content. It allows for the customization of the modal’s size and background and provides flexibility in how the modal appears to the user. It accepts two parameters: The HTML content to be displayed, and the options object which contains optional settings to customize the appearance of the modal.
Syntax: reearth.modal.show(html, options) => void
Parameters:
// The HTML content to be displayed within the modal
html: string,
options?: {
// Specifies the width of the modal. A numeric value is interpreted as pixels, while a string value should be a valid CSS size unit (e.g., "50%", "300px"). If not specified, a default width may be used.
width?: number | string;
// Specifies the height of the modal. Similar to the width, a numeric value represents pixels, and a string value should be a valid CSS size unit. The absence of this parameter may result in a default height
height?: number | string;
// Defines the background style of the modal, which can be any valid CSS color or image.
background?: string;
},
Return Value: None (void). This method is used for its side effect of displaying the modal and does not return a value.
Example Usage:
// HTML content as a string
reearth.modal.show(`<h1>Welcome</h1><p>This is a modal dialog.</p>`, {
// Set the width of the modal
width: 350,
// Set the height of the modal
height: 103,
// Set the background of the modal
background: "#00000066"
});
Description: This method is designed for enabling communication between a modal window and other parts of reearth , or between components within the modal itself**.** It can be utilized for a variety of purposes, such as notifying reearth about user interactions within the modal or requesting data or actions from other components. It accepts one parameter: message, which can be of any data type.
Syntax: reearth.modal.postMessage: (message: any) => void
Parameters:
// // The message to be sent from the modal. The any type indicated that this parameter can accept data of various types.
(message: any) => void
Return Value: None (void). The method performs its operation without returning a value.
Example Usage:
// Example of sending a simple text message
reearth.modal.postMessage("Hello, Re:Earth!")
// Send an object message
reearth.modal.postMessage({ message: "greeting" });
Description: Updates the properties of a modal and allows for the modification of the modal’s dimensions and background. This functionality is important for adapting the modal’s appearance in response to changes in content, user interaction, or other conditions within reearth. It accepts one parameter: options, which is an object containing the properties to update on the modal. Each of these properties are optional.
Syntax: reearth.modal.update: (options) => void
Parameters:
options: {
// Specifies the new width of the modal. A numeric value is interpreted as pixels, while a string value should be a valid CSS size unit (e.g., "50%", "300px").
width?: number | string;
// Specifies the new height of the modal. Similar to the width, a numeric value represents pixels, and a string value should be a valid CSS size unit.
height?: number | string;
// Sets a new background for the modal. This can be any valid CSS color or image.
background?: string;
},
Return Value: None (void). The method performs its operation without returning a value.
Example Usage:
// Update the modal's width and background color
reearth.modal.update({
width: "60%",
background: "#f0f0f0"
});
// Set the modal to a specific size and transparent background
reearth.modal.update({
width: 500, // pixels
height: 400, // pixels
background: "rgba(255, 255, 255, 0.5)"
});
Description: Used to close an open modal. Users can dismiss the modal based on task completion, logical conditions or other user actions. It does not require any parameters.
Syntax: reearth.modal.close: () => void
Parameters: None
Return Value: None (void). The method performs its operation without returning a value.
Example Usage:
// Close the currently open modal
reearth.modal.close();