DomUtils

Gondel 🚡 has a utility belt to get fast access to currently active Gondel instances.

Methods

Reference

startComponents (domContext, namespace)

Creates a new instance for every element with a data-g-name attribute in the document and runs its start method.
Elements which have already been started will be ignored.

Optionally, you can provide a domContext to define which part of the dom should be started.
Please note that Gondel will search through the dom Context and all of it's children for elments which have not been started yet. The domContext might be a domElement, a NodeList or even a jQuery element.

By default Gondel will use data-g-name however it is possible to change the g to any other value by passing a namespace as last argument to define a custom scope.

For example:

startComponents();

Here startComponents will start all components in the DOM.

const footer = document.querySelector('footer');
startComponents(footer);

Here startComponents will start only components in the footer.

startComponents(document.body, 't');

Here startComponents will start only components in the body with a data-t-name attribute.

stopComponents (domContext, namespace)

Calls the stop method for every element with a data-g-name attribute in the document. Elements which have already been stopped will be ignored.

Optionally, you can provide a domContext to define which part of the dom should be stopped.
Please note that Gondel will search through the dom Context and all of it's children for elments which have not been stopped yet. The domContext might be a domElement, a NodeList or even a jQuery element.

By default Gondel will use data-g-name however it is possible to change the g to any other value by passing a namespace as last argument to define a custom scope.

For example:

stopComponents();

Here stopComponents will stop all components in the DOM.

const footer = document.querySelector('footer');
stopComponents(footer);

Here stopComponents will stop only components in the footer.

stopComponents(document.body, 't');

Here stopComponents will stop only components in the body with a data-t-name attribute.

hasMountedGondelComponent (domNode, namespace):boolean

Returns true if the given domNode is the root element of an active Gondel instance. The domNode might be a domElement, a NodeList or even a jQuery element.

By default Gondel will use data-g-name however it is possible to change the g to any other value by passing a namespace as last argument to define a custom scope.

For example:

const passwordInput = document.querySelector('.password');
if (hasMountedGondelComponent(passwordInput)) {
    console.log('the password input has an active gondel instance attached');
}

getComponentByDomNode (domNode, namespace):GondelBaseComponent

Returns the Gondel instance which is attached to the given domNode.
The domNode might be a domElement, a NodeList or even a jQuery element.

If the instance if the domNode doesn't contain a Gondel instance or the instance has already been stopped an exception will be thrown.

By default Gondel will use data-g-name however it is possible to change the g to any other value by passing a namespace as last argument to define a custom scope.

For example:

const passwordInput = document.querySelector('.password');
const passwordComponent = getComponentByDomNode(passwordInput);

getComponentByDomNodeAsync (domNode, namespace):Promise<GondelBaseComponent>

Returns a Promise of a Gondel instance which is attached to the given domNode. The returned Promise will be resolved once the start method was executed. The domNode might be a domElement, a NodeList or even a jQuery element.

If the instance if the domNode doesn't contain a Gondel instance or the instance has already been stopped an exception will be thrown.

By default Gondel will use data-g-name however it is possible to change the g to any other value by passing a namespace as last argument to define a custom scope.

For example:

const passwordInput = document.querySelector('.password');
const passwordComponent = await getComponentByDomNodeAsync(passwordInput);

findComponents<T extends GondelComponent> (domNode, componentName, namespace):Array<GondelBaseComponent>

Searches for all components with a data-g-name attribute in the document and returns them.

Optionally, you can provide a domNode to define in which part of the dom should be searched.
The domNode might be a domElement, a NodeList or even a jQuery element.

Optionally, you can provide the name of the Gondel components you are looking for.

By default Gondel will use data-g-name however it is possible to change the g to any other value by passing a namespace as last argument to define a custom scope.

For example:

const allComponents = findComponents();

Here findComponents will return all Gondel instances found in the DOM.

const footer = document.querySelector('footer');
const footerSliderComponents = findComponents(footer, 'Slider');

Here findComponents will return all Gondel Slider instances found in footer.

triggerPublicEvent(eventName, gondelComponent, target, eventData, canBubble)

Fires a custom browser event similar to a click event which can be caught with addEventListener.
This is helpfull to notify parent nodes about a state change.

The first argument is the name of the event which should start with the namespace e.g. gChange.

The second argument is the gondelComponent which is emitting the event.

Optionally, you can provide the element which should trigger the event. By default that's gondelComponent._ctx.

By default Gondel will emit a bubbling event unless canBubble is set to false.

For example:

@Component("Input")
export class Input extends GondelBaseComponent {
  @EventListener("input")
  _handleInput() {
    this._ctx.value = this._ctx.value.trim(); 
    triggerPublicEvent("gInput", this);
  }
}