Class: DroppablePlaceholder

new DroppablePlaceholder_A(parentopt, propsopt)

DroppablePlaceholder_A is a component that represents a droppable placeholder in the TComponents framework. It allows for the insertion of child components and manages their layout and styling.

Parameters:

Name	Type	Attributes	Default	Description
`parent`	HTMLElement	<optional>	null	The parent element to which this component will be attached.
`props`	TComponents.DroppablePlaceholderProps	<optional>	{}	The properties for the droppable placeholder component.

Source: as-droppable-placeholder-a.js, line 38

Example

const droppablePlaceholder = new TComponents.DroppablePlaceholder_A(document.body, {
  position: 'absolute',
  width: 200,
  height: 100,
  zIndex: 1000,
  border: '1px dashed #787878',
  borderRadius: 4,
  backgroundColor: 'rgba(245,245,245,0.3)',
});

droppablePlaceholder.render();

Extends

TComponents.Component_A

Members

contentRoot :HTMLElement|null

Returns the native content root element of the layout placeholder component. The obtained value should be treated as a read-only property and should not be used for manipulation.

Type:

HTMLElement | null

Source: as-droppable-placeholder-a.js, line 71

Example

const droppablePlaceholder = new TComponents.DroppablePlaceholder_A(document.body, {
  position: 'absolute',
  width: 200,
  height: 100,
  zIndex: 1000,
  border: '1px dashed #787878',
  borderRadius: 4,
  backgroundColor: 'rgba(245,245,245,0.3)',
});

await droppablePlaceholder.render();

// Get the content root element
const contentRoot = droppablePlaceholder.contentRoot;

enabled :boolean

Updates the enabled state of the layout placeholder component.

Type:

boolean

Overrides: TComponents.Component_A#enabled
Source: as-droppable-placeholder-a.js, line 103

Example

const droppablePlaceholder = new TComponents.DroppablePlaceholder_A(document.body, {
  position: 'absolute',
  width: 200,
  height: 100,
  zIndex: 1000,
  border: '1px dashed #787878',
  borderRadius: 4,
  backgroundColor: 'rgba(245,245,245,0.3)',
});

await droppablePlaceholder.render();

// Disable the droppable placeholder
droppablePlaceholder.enabled = false;

Methods

appendChild(t, name) → {void}

Appends a child component or element to the current component.

Parameters:

Name	Type	Description
`t`	TComponents.Component_A \| HTMLElement	The child component or element to append.
`name`	string	The name to associate with the child component.

Source: as-droppable-placeholder-a.js, line 326

Returns:

Type:: void

Example

const droppablePlaceholder = new TComponents.DroppablePlaceholder_A(document.body, {
  position: 'absolute',
  width: 200,
  height: 100,
  zIndex: 1000,
  border: '1px dashed #787878',
  borderRadius: 4,
  backgroundColor: 'rgba(245,245,245,0.3)',
});

await droppablePlaceholder.render();

// Append a new button component
const button = new TComponents.Button(null, { text: 'Click Me' });
droppablePlaceholder.appendChild(button, 'myButton');

concatChildren(tArray, update) → {void}

Concatenates an array of child elements to the existing children. Note that this function should ideally be executed before component initialization.

Parameters:

Name	Type	Description
`tArray`	Array.<any>	The array of child elements to concatenate.
`update`	boolean	Whether to update the component props after concatenation.

Source: as-droppable-placeholder-a.js, line 291

Returns:

Type:: void

Example

const droppablePlaceholder = new TComponents.DroppablePlaceholder_A(document.body, {
  position: 'absolute',
  width: 200,
  height: 100,
  zIndex: 1000,
  border: '1px dashed #787878',
  borderRadius: 4,
  backgroundColor: 'rgba(245,245,245,0.3)',
});

// Concatenate new children before rendering
droppablePlaceholder.concatChildren([new TComponents.Button(null, {})], true);

await droppablePlaceholder.render();

concatContent(tArray, update) → {void}

Concatenates an array of content elements to the existing content children. Note that this function should ideally be executed before component initialization.

Parameters:

Name	Type	Description
`tArray`	Array.<any>	The array of content elements to concatenate.
`update`	boolean	Whether to update the component props after concatenation.

Source: as-droppable-placeholder-a.js, line 259

Returns:

Type:: void

Example

const droppablePlaceholder = new TComponents.DroppablePlaceholder_A(document.body, {
  position: 'absolute',
  width: 200,
  height: 100,
  zIndex: 1000,
  border: '1px dashed #787878',
  borderRadius: 4,
  backgroundColor: 'rgba(245,245,245,0.3)',
});

// Concatenate new content before rendering
droppablePlaceholder.concatContent([document.createElement('div')], true);

await droppablePlaceholder.render();

defaultProps() → {TComponents.DroppablePlaceholderProps}

Returns class properties default values.

Overrides: TComponents.Component_A#defaultProps
Source: as-droppable-placeholder-a.js, line 132

Returns:

Default property values.

Type:: TComponents.DroppablePlaceholderProps

mapComponents() → {object}

Returns an object containing the components mapped to their identifiers.

Overrides: TComponents.Component_A#mapComponents
Source: as-droppable-placeholder-a.js, line 200

Returns:

An object containing the components mapped to their identifiers.

Type:: object

markup() → {string}

Returns the HTML markup for the component.

Overrides: TComponents.Component_A#markup
Source: as-droppable-placeholder-a.js, line 210

Returns:

The HTML markup for the component.

Type:: string

onInit() → {void}

Initializes the component by clearing the direct children and populating them from the props.

Overrides: TComponents.Component_A#onInit
Source: as-droppable-placeholder-a.js, line 167

Throws:

If initialization fails.
Type Error

Returns:

Type:: void

onRender() → {void}

Renders the component by setting up the container and attaching direct and slotted children. This method is called after the component has been initialized and its properties have been set.

Overrides: TComponents.Component_A#onRender
Source: as-droppable-placeholder-a.js, line 225

Throws:

If rendering fails.
Type Error

Returns:

Type:: void

removeChild(t) → {void}

Removes a child component or element from the current component.

Parameters:

Name	Type	Description
`t`	string \| TComponents.Component_A	The child component or element to remove, identified by its name or reference.

Source: as-droppable-placeholder-a.js, line 378

Returns:

Type:: void

Example

const droppablePlaceholder = new TComponents.DroppablePlaceholder_A(document.body, {
  position: 'absolute',
  width: 200,
  height: 100,
  zIndex: 1000,
  border: '1px dashed #787878',
  borderRadius: 4,
  backgroundColor: 'rgba(245,245,245,0.3)',
});

await droppablePlaceholder.render();

// Remove a child component
droppablePlaceholder.removeChild('myButton');

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:

Name	Type	Description
`css`	string	The css string to be loaded into style tag

Source: as-droppable-placeholder-a.js, line 527

Returns:

Type:: void

Example

TComponents.DroppablePlaceholder_A.loadCssClassFromString(`.tc-droppable-placeholder-a { background-color: red; }`);