+
+
+
+
+
+
+
+
+ IgniteElement
+
+
+
+
+
+
+ The outline of a Ignite Element that extends the html element
+and can be used to create custom components. Ignite Element's use an Ignite Template
+for the render function.
+
+ new IgniteElement()
+
+
+
+ Extends
+
+ HTMLElement
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ class MainApp extends IgniteElement {
+ constructor() {
+ super();
+ }
+
+ get properties() {
+ return {
+ };
+ }
+
+ render() {
+ return this.template
+ .child(
+ new h1(`<i class="fad fa-fire-alt" style="--fa-primary-color: #FFC107; --fa-secondary-color: #FF5722; --fa-secondary-opacity: 1.0;"></i> Ignite HTML`),
+ new h4(`Adding more fire to the web.`)
+ );
+ }
+}
+
+customElements.define("main-app", MainApp);
+
+
+
+
+class MainAppTemplate extends IgniteTemplate {
+ constructor(...children) {
+ super("main-app", children);
+ }
+}
+
+export {
+ MainAppTemplate as MainApp
+}
+
+
+
+new MainApp()
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+
+
+
+
+ Returns an object with all the properties for this ignite element. If null or empty
+then no properties will be created. To change a property and read it's current value see below.
+
+ properties
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ any:
+ An object with properties that will be assigned to this ignite element.
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ get properties() {
+ return {
+ show: false,
+ title: "This is a title",
+ items: [1, 2, 3]
+ };
+}
+
+
+
+this.show = false;
+
+
+console.log(this.title);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns any CSS styling code for this ignite element. If this returns a non null
+value the CSS will auto be injected into the current HTML page once and reused for the life
+of the ignite element.
+
+ styles
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ any:
+ A string containing CSS code to be used with this ignite element.
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+ get styles() {
+ return `
+ h1 {
+ color: black;
+ }
+ `;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
▸
+
resetProperties()
+
+
+
+
+
+
+
+ Resets the properties for this element back to their original default
+value.
+
+ resetProperties()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns the template to be rendered for this element.
+
+ render(): any
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ any:
+ An ignite template to be used to construct this ignite element.
+
+
+
+
+
+
+ Related
+
+
+ this.template is automatically created for each IgniteElement and must be used in the render() function.
+
+
+
+
+
+
+
+
+ Example
+
+
+ render() {
+ return this.template
+ .child(
+ new h1(`<i class="fad fa-fire-alt" style="--fa-primary-color: #FFC107; --fa-secondary-color: #FF5722; --fa-secondary-opacity: 1.0;"></i> Ignite HTML`),
+ new h4(`Adding more fire to the web.`)
+ );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ IgniteTemplate
+
+
+
+
+
+
+ The outline of a ignite template. Templates are a blueprint that specify's
+how to construct an element and then can be used to construct the element. Everything
+starts with a template.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
tagName (String
+ = null)
+ The tag name of the element this template will construct.
+
+
+
+
+
+
+
+
children ((String | Number | IgniteProperty | IgniteTemplate)
+ = null)
+ An array of child elements to be added to this template.
+
+
+
+
+
+
Example
+
+
+
+class div extends IgniteTemplate {
+ constructor(...items) {
+ super("div", items);
+ }
+}
+
+
+
+
+
+
+ Instance Members
+
+
+
+
+
+
▸
+
class(name, converter)
+
+
+
+
+
+
+
+ Adds a CSS class to this template
+to be added once this template is constructed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
name ((String | IgniteProperty))
+ Name of the CSS class to add.
+
+
+
+
+
+
+
+
converter (Function
+ = null)
+ Optional function that can convert the class name into a different one.
+
+
+
+
+
+
Returns
+ any:
+ This ignite template so function calls can be chained.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
▸
+
attribute(name, value, converter)
+
+
+
+
+
+
+
+ Adds a html element attribute to this template to be added once this template is constructed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
name (String)
+ The name of the attribute to add
+
+
+
+
+
+
+
+
value ((String | IgniteProperty))
+ The value of the attribute to set, can be anything. If Property is passed it will auto update.
+
+
+
+
+
+
+
+
converter (Function
+ = null)
+ Optional function that can convert the value if needed.
+
+
+
+
+
+
Returns
+ any:
+ This ignite template so function calls can be chained.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
▸
+
property(name, value, reflect, converter)
+
+
+
+
+
+
+
+ Adds a property to this template to be added once this template is constructed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
name (String)
+ Name of the property to set.
+
+
+
+
+
+
+
+ value ((Any | IgniteProperty))
+ Value of the property to use. If a Property is passed the value will auto update.
+
+
+
+
+
+
+
+
reflect (Boolean
+ = false)
+ If true whenever this property is changed it's value will be passed back to the Property that was passed as value if one was passed.
+
+
+
+
+
+
+
+
converter (Function
+ = null)
+ Optional function that can be used to convert the value if needed.
+
+
+
+
+
+
Returns
+ any:
+ This ignite template so function calls can be chained.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Adds a single or series of children to be added once this template
+is constructed. Numbers, Strings, and Properties passed will be added as HTML child elements.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+ Returns
+ any:
+ This ignite template so function calls can be chained.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Adds a reference callback function to be invoked once this template is constructed. The function will be invoked
+with the constructed HTMLElement. If an IgniteProperty is passed it's value will be set to the constructed HTMLElement once
+the template is constructed.
+
+ ref(refCallback: (
Function | IgniteProperty)): any
Parameters
+
+
+
+
+
refCallback ((Function | IgniteProperty))
+ The callback to be invoked with the HTMLElement of the element this template constructed.
+
+
+
+
+
+
Returns
+ any:
+ This ignite template so function calls can be chained.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
▸
+
on(eventName, eventCallback)
+
+
+
+
+
+
+
+ Adds an event by its name and the function to invoke once the event fires. Properties may be used
+for the function, but their value must be a valid function in order to get a proper event callback.
+
+ on(eventName:
String, eventCallback: (
Function | IgniteProperty)): any
Parameters
+
+
+
+
+
eventName (String)
+ The name of the event to add.
+
+
+
+
+
+
+
+
eventCallback ((Function | IgniteProperty))
+ The callback function to be invoked by the event once it fires.
+
+
+
+
+
+
Returns
+ any:
+ This ignite template so function calls can be chained.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
▸
+
onClick(eventCallback)
+
+
+
+
+
+
+
+ Adds an onclick event handler to this template.
+
+ onClick(eventCallback: (
Function | IgniteProperty)): any
Parameters
+
+
+
+
+
eventCallback ((Function | IgniteProperty))
+ The callback function to be invoked by the event once it fires.
+
+
+
+
+
+
Returns
+ any:
+ This ignite template so function calls can be chained.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
▸
+
onEnter(eventCallback)
+
+
+
+
+
+
+
+ Adds a on enter key press event handler to this template.
+
+ onEnter(eventCallback: (
Function | IgniteProperty)): any
Parameters
+
+
+
+
+
eventCallback ((Function | IgniteProperty))
+ The callback function to be invoked by the event once it fires.
+
+
+
+
+
+
Returns
+ any:
+ This ignite template so function calls can be chained.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
▸
+
style(name, value, priority, converter)
+
+
+
+
+
+
+
+ Adds a CSS property to this template with a value and priority.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
name (String)
+ The name of the CSS property to set.
+
+
+
+
+
+
+
+
value ((String | IgniteProperty))
+ The value to set for the property. If an IgniteProperty is used it will auto update this style.
+
+
+
+
+
+
+
+
priority (String
+ = null)
+ If set to "important" then the style will be marked with !important.
+
+
+
+
+
+
+
+
converter (Function
+ = null)
+ Optional function to convert the value if needed.
+
+
+
+
+
+
Returns
+ any:
+ This ignite template so function calls can be chained.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
▸
+
construct(parent, sibling)
+
+
+
+
+
+
+
+ Constructs this template and adds it to the DOM if this template
+has not already been constructed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
parent (HTMLElement)
+ Parent element that will contain the constructed element.
+
+
+
+
+
+
+
+
sibling (HTMLElement)
+ Optional sibling element that can be used to add the element adjacantly.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Deconstructs this template and cleans up all resources to make sure
+there are no memory leaks.
+
+ deconstruct()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ div
+
+
+
+
+
+
+ An ignite template that can be used to construct a div element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ a
+
+
+
+
+
+
+ An ignite template that can be used to construct a hyperlink element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ An ignite template that can be used to construct a input element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ An ignite template that can be used to construct a button element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ h1
+
+
+
+
+
+
+ An ignite template that can be used to construct a h1 element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ h2
+
+
+
+
+
+
+ An ignite template that can be used to construct a h2 element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ h3
+
+
+
+
+
+
+ An ignite template that can be used to construct a h3 element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ h4
+
+
+
+
+
+
+ An ignite template that can be used to construct a h4 element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ h5
+
+
+
+
+
+
+ An ignite template that can be used to construct a h5 element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ p
+
+
+
+
+
+
+ An ignite template that can be used to construct a p element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ span
+
+
+
+
+
+
+ An ignite template that can be used to construct a span element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ i
+
+
+
+
+
+
+ An ignite template that can be used to construct an i element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ br
+
+
+
+
+
+
+ An ignite template that can be used to construct a br element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ img
+
+
+
+
+
+
+ An ignite template that can be used to construct a img element.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ html
+
+
+
+
+
+
+ Html is a special template that can construct raw html or properties into the dom and automatically
+update the dom if the property changes.
+
+ new html(code: (
String | IgniteProperty))
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
code ((String | IgniteProperty))
+ HTML code to be constructed within this template. If an IgniteProperty is passed it's value will be used.
+
+
+
+
+
+
Example
+
+
+ new html(`<h1>Hello world!</h1>`)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ list
+
+
+
+
+
+
+ A special ignite template that constructs a list of items using a template
+that is dynamically created for each item.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
list ((Array | IgniteProperty))
+ The list of items to construct within this template.
+
+
+
+
+
+
+
+
forEach (Function)
+ A function that construct a template for an item from the list that is passed to it.
+
+
+
+
+
+
Example
+
+
+ new list(["1", "2", "3"], (item) => {
+ return new h1(item);
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ slot
+
+
+
+
+
+
+ A slot template that mimicks the functionality of a slot element in Web Components. This can
+be used to place children of a IgniteElement anywhere in the DOM. Slots don't actually construct an element,
+they simply just place children in place where the slot was used.
+
+
+
+
+
+ Extends
+
+ IgniteTemplate
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
element (IgniteElement)
+ The parent IgniteElement that this slot is for.
+
+
+
+
+
+
Example
+
+
+ new slot(this)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+