Components

html

To create a new component you have to create a corresponding dom element that serves as element reference for the component the data-cmp="NAME" attribute. Later this element is accessible via this.getElement() within the component.

<div data-cmp="NAME">...</div>

javascript

In the Javascript folder public/javascript/src/components a new component is created which inherits from clulib.cm.Component. After that the NAME from the html reference must be assigned in public/javascript/src/components.js to the javascript component.

const MyNewComponent = goog.require('gep.components.MyNewComponent');
const collection = {
    'NAME': MyNewComponent,
    ...
}

Components have to important functions:

• waitFor: This inherited method can be used to complete additional load processes before initializing the component.
• onInit: Component is ready and had loaded all dependencies (inherit method waitFor and sub components).

When dynamically creating a dom element within a component that should also initialize a component you have to call after its creation the manager (is part of each component) with the method this.decorate(domElement) for the new dom branch to be checked. The Decorate method returns a Promise after successful initialization of the found and components.

let newDomElement = createDom(TagName.DIV);
dataset.set(newDomElement, 'cmp', 'sub-component-name');
this.manager.decorate(newDomElement).then(() => {
    ...
});

To find subcomponents as instances within the component, for example to call methods in them or add event listeners, the method this.queryComponent('queryselector') for single selection or this.queryComponentAll('queryselector') to get all results for the selector can be used.

this.queryComponent('[data-cmp="sub-component-name"]') // return SubComponent
this.queryComponentAll('[data-cmp="sub-component-name"]') // return Array<SubComponent>

styling

For each component a separate scss file which defined the appearance within the dom of the component should be created in public/scss/6-components. New scss files must be added in public/scss/style.scss to the css building.