Class: Lapel

Members

staticLapel.componentsArray.<LapelComponent>

Container for added components.

Methods

staticLapel.add(p_component){LapelComponent}

source/lapel.doc.js, line 130

Register a new component to the component pool.

Name	Type	Description
p_component	LapelComponent	Reference to the Lapel component.

Returns:

Type	Description
LapelComponent	Reference to the added component.

Examples

Given the script

 var c = {
 tag: "custom-component",
 src: "<div class='custom'></div>",
 init: function(p_element) {
     p_element.textContent = "I'm Here.";
 },
 inner: false
};
Lapel.add(c);

Add the custom tag in the HTML

<custom-component>Original Text</custom-component>

<!-- After Init -->
<div class='custom'>I'm Here.</div>

<!-- If `inner` is true, then the result will be. -->
<custom-component><div class='custom'>I'm Here.</div></component>

staticLapel.create(p_tag, p_attribs, p_src){Element}

source/lapel.doc.js, line 89

Creates a new instance of a LapelComponent.

Name	Type	Description
p_tag	String | LapelComponent	Name of the template's tag or reference to the component itself.
p_attribs	Object	nullable Table of attributes for the created Element.
p_src	String	nullable String that can fill the 'textContent' variable of the created Element. Defaults to empty.

Returns:

Type	Description
Element	Reference to the created Element with features of the component.

Example

//Define a simple component.
Lapel.add({
 tag: "custom-button",
 src: "<button class='custom'></button>"
});

var bt = Lapel.create("custom-button",{name: "cbutton"},"Click Me!");
console.log(bt); //<button class='custom' name="cbutton">Click Me!</button>

staticLapel.find(p_tag){LapelComponent}

source/lapel.doc.js, line 63

Finds a LapelComponent template based on its tag name. If none is found, null is returned.

Name	Type	Description
p_tag	String	HTML tag of the template.

Returns:

Type	Description
LapelComponent	Reference to the lapel component template.

Example

//Define a simple component.
Lapel.add({
 tag: "my-component",
 src: "<div class='my-component'></div>"
});
var c = Lapel.find("my-component");
console.log(c); //{ tag: 'my-component', src: "<div class='my-component'></div>" }