node-red-dxp

Appearance

DOM Helper ​

The DOM Helper offers utility functions to simplify Node-RED editor DOM manipulation, reducing development effort. Optimized for tree-shaking, it ensures a lightweight and efficient final bundle. 🚀

Usage ​

All functions can be imported from the package like this for example:

typescript
import { initSelect, watchInput } from '@keload/node-red-dxp/editor/dom-helper';

And you benefit from tree-shaking in the final bundle 🚀

INFO

This documentation is automatically generated from the source code.

Functions ​

addClassesOnSelectors() ​

addClassesOnSelectors(selectors, classesToAdd): void

Adds the specified CSS classes to multiple DOM elements.

This is a wrapper for handleAddRemoveClassesOnSelectors with the action set to 'add'.

Parameters ​

selectors ​

string[]

An array of selector strings targeting the elements.

classesToAdd ​

string[]

An array of CSS class names to add.

Returns ​

void

Example ​

ts
// Add the class 'highlight' to multiple elements
addClassesOnSelectors(['#element1', '.element2'], ['highlight']);

getFormValues() ​

getFormValues(prefix): Record<string, string | boolean>

Retrieves values from form inputs within a specific prefix in their id.

It searches for elements with an id starting with node-input-{prefix}- and extracts their values. For checkboxes, it returns a boolean (true or false). For other inputs (e.g., text, select), it returns their value as a string.

Parameters ​

prefix ​

string

The prefix of the id to filter the form inputs.

Returns ​

Record<string, string | boolean>

An object where keys are derived from the input id, and values are the corresponding input values.

Example ​

typescript
// HTML
// <input type="checkbox" id="node-input-settings-enabled" checked />
// <input type="text" id="node-input-settings-username" value="JohnDoe" />

const values = getFormValues('settings');
console.log(values);
// Output: { enabled: true, username: 'JohnDoe' }

handleAddRemoveClassesOnSelectors() ​

handleAddRemoveClassesOnSelectors(action, selectors, classes): void

Handles adding or removing CSS classes on multiple DOM elements based on the specified action.

Parameters ​

action ​

The action to perform: 'add' to add classes, 'remove' to remove classes.

"add" | "remove"

selectors ​

string[]

An array of selector strings targeting the elements.

classes ​

string[]

An array of CSS class names to add or remove.

Returns ​

void

Examples ​

ts
// Add a class to multiple elements
handleAddRemoveClassesOnSelectors('add', ['#element1', '.element2'], ['highlight']);
ts
// Remove a class from multiple elements
handleAddRemoveClassesOnSelectors('remove', ['#element1', '.element2'], ['hidden']);

initSelect() ​

initSelect(selector, options, params?): void

Initializes a <select> element with the given options.

  • The function clears the existing options and populates the <select> with new ones.
  • Supports an optional empty value.
  • Allows pre-selecting an option based on the params object.

Parameters ​

selector ​

string

The selector for the <select> element.

options ​

Record<string, string>[]

An array of objects representing the options, with value and text properties.

params? ​

InitSelectParams

Optional parameters for customization.

Returns ​

void

Example ​

ts
initSelect('$select-id', [{ value: '1', text: 'Option 1' }, { value: '2', text: 'Option 2' }]);
initSelect('$select-id', [{ value: '1', text: 'Option 1' }], { emptyValue: 'Select an option', selected: '1' });

initTabs() ​

initTabs(params): void

Initializes a tab system with the provided configuration and handles tab switching behavior. This function creates a set of tabs and associates them with a specified container. It also sets an initial active tab and switches between tabs when a tab is clicked.

Parameters ​

params ​

InitTabsParams

The configuration object to initialize the tabs.

Returns ​

void

Example ​

ts
// Example usage of the initTabs function
const tabsConfig = {
  targetId: 'myTabContainer',
  tabsLabel: ['Tab 1', 'Tab 2', 'Tab 3'],
  initialTab: 'Tab 2',
};
initTabs(tabsConfig);

// In the above example:
// - The tab container is identified by 'myTabContainer'.
// - Three tabs are created with the labels "Tab 1", "Tab 2", and "Tab 3".
// - The second tab ("Tab 2") is set as the initially active tab.

Throws ​

Throws an error if the params.targetId is missing or invalid.

Throws ​

Throws an error if the params.tabsLabel is empty or not provided.

Throws ​

Throws an error if the params.initialTab does not match any label in tabsLabel.

isCheckboxChecked() ​

isCheckboxChecked(selector): boolean

Checks whether a checkbox is checked based on a CSS selector.

Parameters ​

selector ​

string

A valid CSS selector to identify the checkbox element.

Returns ​

boolean

true if the checkbox is checked, otherwise false.

Example ​

typescript
const isChecked = isCheckboxChecked('#my-checkbox');
console.log(isChecked); // true or false

isNodeInput() ​

isNodeInput(selector): object

Checks if a given selector is a node input selector.

Parameters ​

selector ​

string

The selector string to check.

Returns ​

object

True if the selector is a node input selector, false otherwise.

isFullSelector ​

isFullSelector: boolean

isNodeConfigIdShortcut ​

isNodeConfigIdShortcut: boolean

isNodeIdShortcut ​

isNodeIdShortcut: boolean

value ​

value: boolean

jqSelector() ​

jqSelector(selector): JQuery

Resolves a given selector string into a jQuery object based on predefined rules.

Parameters ​

selector ​

string

A string representing the selector. It can include special shortcuts such as $ or $$.

Returns ​

JQuery

A jQuery object corresponding to the resolved selector.

Examples ​

ts
// Resolving a simple selector
jqSelector('#my-element'); // Returns a jQuery object for #my-element
ts
// Using `$` shortcut for node input
jqSelector('$node-name');
// Resolves to: #node-input-node-name
// Returns a jQuery object for the resolved selector
ts
// Using `$$` shortcut for node config input
jqSelector('$$config-name');
// Resolves to: #node-config-input-config-name
// Returns a jQuery object for the resolved selector

removeClassesOnSelectors() ​

removeClassesOnSelectors(selectors, classesToRemove): void

Removes the specified CSS classes from multiple DOM elements.

This is a wrapper for handleAddRemoveClassesOnSelectors with the action set to 'remove'.

Parameters ​

selectors ​

string[]

An array of selector strings targeting the elements.

classesToRemove ​

string[]

An array of CSS class names to remove.

Returns ​

void

Example ​

ts
// Remove the class 'hidden' from multiple elements
removeClassesOnSelectors(['#element1', '.element2'], ['hidden']);

resolveInputKey() ​

resolveInputKey(selector): string

Extracts the key part from a resolved input selector.

The key is the part of the selector after -input-.

Parameters ​

selector ​

string

A string representing the input selector.

Returns ​

string

The extracted key as a string.

Example ​

ts
resolveInputKey('$node-name'); // Returns 'node-name'
resolveInputKey('#node-input-custom'); // Returns 'custom'

resolveSelector() ​

resolveSelector(inSelector): string

Resolves a selector string into a specific format based on predefined rules.

The function supports two shortcuts:

  • $: Indicates a node input selector, resolved to #node-input-{name}.
  • $$: Indicates a node config input selector, resolved to #node-config-input-{name}.

If no shortcuts are detected, the function returns the input selector unchanged.

Parameters ​

inSelector ​

string

A string representing the selector. May contain shortcuts $ or $$.

Returns ​

string

The resolved selector as a string.

Examples ​

ts
// Resolving a plain selector
resolveSelector('#my-element'); // Returns '#my-element'
ts
// Resolving a `$` shortcut
resolveSelector('$node-name'); // Returns '#node-input-node-name'
ts
// Resolving a `$$` shortcut
resolveSelector('$$config-name'); // Returns '#node-config-input-config-name'

setFormValues() ​

setFormValues(prefix, values): void

Sets values into form inputs identified by a specific prefix in their id.

It searches for elements with an id starting with node-input-{prefix}- and assigns the provided values. For checkboxes, it sets their checked state to true or false. For other inputs (e.g., text, select), it sets their value.

Parameters ​

prefix ​

string

The prefix of the id to identify the form inputs.

values ​

Record<string, unknown>

An object where keys correspond to the suffix of the input id, and values are the corresponding input values.

Returns ​

void

Example ​

typescript
// HTML
// <input type="checkbox" id="node-input-settings-enabled" />
// <input type="text" id="node-input-settings-username" />

setFormValues('settings', { enabled: true, username: 'JaneDoe' });

// Results in:
// Checkbox with id="node-input-settings-enabled" is checked
// Input with id="node-input-settings-username" has value "JaneDoe"

setInputValue() ​

setInputValue(selector, val): void

Sets the value of an input element.

Parameters ​

selector ​

string

The selector for the input element.

val ​

string

The value to set.

Returns ​

void

Example ​

ts
setInputValue('$input-id', 'new value');

setText() ​

setText(selector, text): void

Sets the text content of a DOM element.

Parameters ​

selector ​

string

The selector for the element.

text ​

string

The text to set as the content.

Returns ​

void

Example ​

ts
setText('#label-id', 'Updated text');

watchInput() ​

watchInput<T>(selectors, callback, opt): void

Watches for changes on input elements and triggers a callback with the updated values.

  • Supports single or multiple selectors.
  • Calls the callback every time an input event occurs on the specified elements.

Type Parameters ​

• T = any

Parameters ​

selectors ​

A single selector string or an array of selector strings.

string | string[]

callback ​

(values) => void

A function to call with the updated values of the inputs.

opt ​
additionalEvents ​

any[] = []

Returns ​

void

Example ​

ts
watchInput('$input-id', (values) => console.log(values));
watchInput(['$input-1', '$input-2'], (values) => console.log(values));