ignite-html/jsdoc.md

Classes

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.

div

An ignite template that can be used to construct a div element.

a

An ignite template that can be used to construct a hyperlink element.

input

An ignite template that can be used to construct a input element.

textarea

An ignite template that can be used to construct a textarea element.

button

An ignite template that can be used to construct a button element.

h1

An ignite template that can be used to construct a h1 element.

h2

An ignite template that can be used to construct a h2 element.

h3

An ignite template that can be used to construct a h3 element.

h4

An ignite template that can be used to construct a h4 element.

h5

An ignite template that can be used to construct a h5 element.

h6

An ignite template that can be used to construct a h6 element.

hr

An ignite template that can be used to construct a hr element.

p

An ignite template that can be used to construct a p element.

nav

An ignite template that can be used to construct a nav element.

ul

An ignite template that can be used to construct a ul element.

li

An ignite template that can be used to construct a li element.

span

An ignite template that can be used to construct a span element.

small

An ignite template that can be used to construct a small element.

strong

An ignite template that can be used to construct a strong element.

i

An ignite template that can be used to construct an i element.

table

An ignite template that can be used to construct a table element.

td

An ignite template that can be used to construct a td element.

th

An ignite template that can be used to construct a th element.

tr

An ignite template that can be used to construct a tr element.

thead

An ignite template that can be used to construct a thead element.

tbody

An ignite template that can be used to construct a tbody element.

br

An ignite template that can be used to construct a br element.

img

An ignite template that can be used to construct a img element.

label

An ignite template that can be used to construct a label element.

select

An ignite template that can be used to construct a select element.

option

An ignite template that can be used to construct a option element.

script

An ignite template that can be used to construct a script element.

form

An ignite template that can be used to construct a form element.

header

An ignite template that can be used to construct a header element.

footer

An ignite template that can be used to construct a footer element.

progress

An ignite template that can be used to construct a progress element.

svg

An ignite template that can be used to construct a svg element.

g

An ignite template that can be used to construct a g element.

path

An ignite template that can be used to construct a path element.

circle

An ignite template that can be used to construct a circle element.

line

An ignite template that can be used to construct a line element.

text

Text is a special template that will construct a text element and automatically update the dom if it's content changes.

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.

list

A special ignite template that constructs a list of items using a template that is dynamically created for each 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. If classes, styles, or attributes are applied to the slot they will be applied to the children of the slot.

pagination

A pagination is a template that segments a list of items into pages based on the items, page size, current page.

pager

A pager is a template that converts pagination information into elements to form a page selection.

population

An ignite template that can construct a population of items based on a count.

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.

Kind: global class

• IgniteTemplate
  • new IgniteTemplate(tagName, children)
  • .class(name, converter) ⇒ IgniteTemplate
  • .attribute(name, value, converter) ⇒ IgniteTemplate
  • .value(value, reflect, converter, live) ⇒ IgniteTemplate
  • .prop(name, value, reflect, converter) ⇒ IgniteTemplate
  • .property(name, value, reflect, converter) ⇒ IgniteTemplate
  • .variable(name, value, converter) ⇒ IgniteTemplate
  • .reflect(name, target) ⇒ IgniteTemplate
  • .properties(props) ⇒ IgniteTemplate
  • .innerHTML(value, converter) ⇒
  • .innerText(value, converter) ⇒
  • .child(...items) ⇒ IgniteTemplate
  • .ref(refCallback) ⇒ IgniteTemplate
  • .on(eventName, eventCallback) ⇒ IgniteTemplate
  • .onClick(eventCallback) ⇒ IgniteTemplate
  • .onTouch(eventCallback) ⇒ IgniteTemplate
  • .onBlur(eventCallback) ⇒ IgniteTemplate
  • .onFocus(eventCallback) ⇒ IgniteTemplate
  • .onChange(eventCallback) ⇒ IgniteTemplate
  • .onInput(eventCallback) ⇒ IgniteTemplate
  • .onPaste(eventCallback) ⇒
  • .onEnter(eventCallback) ⇒ IgniteTemplate
  • .onBackspace(eventCallback) ⇒ IgniteTemplate
  • .onResize(eventCallback) ⇒ IgniteTemplate
  • .onIntersect(eventCallback) ⇒ IgniteTemplate
  • .onSeen(eventCallback) ⇒ IgniteTemplate
  • .style(name, value, priority, converter) ⇒ IgniteTemplate
  • .hide(value, converter) ⇒ IgniteTemplate
  • .invisible(value, converter) ⇒ IgniteTemplate
  • .show(value, converter) ⇒ IgniteTemplate
  • .visible(value, converter) ⇒ IgniteTemplate
  • .id(value, converter) ⇒ IgniteTemplate
  • .title(value, converter) ⇒ IgniteTemplate
  • .for(value, converter) ⇒ IgniteTemplate
  • .role(value, converter) ⇒ IgniteTemplate
  • .checked(value, converter) ⇒ IgniteTemplate
  • .disabled(value, converter) ⇒ IgniteTemplate
  • .readonly(value, converter) ⇒ IgniteTemplate
  • .type(value, converter) ⇒ IgniteTemplate
  • .min(value, converter) ⇒ IgniteTemplate
  • .max(value, converter) ⇒ IgniteTemplate
  • .step(value, converter) ⇒ IgniteTemplate
  • .data(name, value, converter) ⇒ IgniteTemplate
  • .src(value, converter) ⇒ IgniteTemplate
  • .href(value, converter) ⇒ IgniteTemplate
  • .target(value, converter) ⇒ IgniteTemplate
  • .name(value, converter) ⇒ IgniteTemplate
  • .placeholder(value, converter) ⇒ IgniteTemplate
  • .construct(parent, sibling)
  • .deconstruct()

new IgniteTemplate(tagName, children)

Creates a new IgniteTemplate with the tag name of the element that will be constructed and an array of child elements.

Param	Type	Default	Description
tagName	String		The tag name of the element this template will construct.
children	String | Number | IgniteProperty | IgniteTemplate		An array of child elements to be added to this template.

Example

//You can easily create a template to construct any html element. See the following:
class div extends IgniteTemplate {
 constructor(...items) {
     super("div", items);
 }
}

Example

IgniteTemplate's construct method can be extended by adding a callback function to _constructors under a template:
template._constructors.push(() => console.log('constructed'));

Example

IgniteTemplate's deconstruct method can be extended by adding a callback function to _destructors under a template:
template._destructors.push(() => console.log('destructed'));

igniteTemplate.class(name, converter) ⇒ IgniteTemplate

Adds a CSS class to be added once this template is constructed.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
name	String | IgniteProperty		Name of the CSS class to add. Multiple CSS classes are supported if they are separated by a space.
converter	function		Optional function that can convert the class name into a different one.

Example

.class("row justify-content-center")

igniteTemplate.attribute(name, value, converter) ⇒ IgniteTemplate

Adds a html element attribute to this template to be added once this template is constructed.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
name	String		The name of the attribute to add
value	String | IgniteProperty | function | Array.<IgniteProperty>		The value of the attribute to set, can be anything. If Property is passed it will auto update.
converter	function		Optional function that can convert the value if needed.

igniteTemplate.value(value, reflect, converter, live) ⇒ IgniteTemplate

Sets the value of the element this template is constructing with the option to reflect changes to the value.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set on the element.
reflect	Boolean | function	false	Whether or not to reflect changes to the value of the element back to the property if one was used. If function passed it will be invoked on value change. Default is false.
converter	function		Optional function that can convert the value if needed. Default is null.
live	Boolean	false	Whether or not to reflect the value in realtime, ie anytime the input is changed before focus is lost. Default is false.

igniteTemplate.prop(name, value, reflect, converter) ⇒ IgniteTemplate

Sets a property on the element this template will construct. (Shorthand for property())

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
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		Optional function that can be used to convert the value if needed.

igniteTemplate.property(name, value, reflect, converter) ⇒ IgniteTemplate

Sets a property on the element this template will construct.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
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		Optional function that can be used to convert the value if needed.

igniteTemplate.variable(name, value, converter) ⇒ IgniteTemplate

Sets a variable on the element this template will construct.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
name	String		Name of the variable to set
value	Any | IgniteProperty		Value of the variable to set
converter	function		Optional function that can be used to convert the value if needed.

igniteTemplate.reflect(name, target) ⇒ IgniteTemplate

Makes a property on this template reflect its value back to the given target. (You can reflect a property more than once if it's needed.)

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
name	String	Name of the property to reflect.
target	IgniteProperty | function	The target for the value to be reflected to.

igniteTemplate.properties(props) ⇒ IgniteTemplate

Adds a set of properties from an object to be added to this template once it's constructed.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
props	Object | IgniteObject	The object value that property names/values will be pulled from.

igniteTemplate.innerHTML(value, converter) ⇒

Sets the inner html of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: This ignite template so funciton calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		InnerHTML to set for element. If a property is passed the html will auto update.
converter	function		Optional function that can be used to convert the value if needed.

igniteTemplate.innerText(value, converter) ⇒

Sets the inner text of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: This ignite template.

Param	Type	Default	Description
value	String | IgniteProperty | Array.<IgniteProperty> | function		text to be set for this element. If a property is passed the text will auto update.
converter	function		Optional function that can be used to convert the value if needed.

igniteTemplate.child(...items) ⇒ IgniteTemplate

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.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
...items	Number | String | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

igniteTemplate.ref(refCallback) ⇒ IgniteTemplate

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.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
refCallback	function | IgniteProperty	The callback to be invoked with the HTMLElement of the element this template constructed.

igniteTemplate.on(eventName, eventCallback) ⇒ IgniteTemplate

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.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventName	String	The name of the event to add.
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onClick(eventCallback) ⇒ IgniteTemplate

Adds a click event handler to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onTouch(eventCallback) ⇒ IgniteTemplate

Adds a touch event handler to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onBlur(eventCallback) ⇒ IgniteTemplate

Adds a onblur event handler to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onFocus(eventCallback) ⇒ IgniteTemplate

Adds a onfocus event handler to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onChange(eventCallback) ⇒ IgniteTemplate

Adds a onchange event handler to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onInput(eventCallback) ⇒ IgniteTemplate

Adds a oninput event handler to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onPaste(eventCallback) ⇒

Adds a on paste event handler to this template.

Kind: instance method of IgniteTemplate
Returns: This ignite template.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked once the event fires.

igniteTemplate.onEnter(eventCallback) ⇒ IgniteTemplate

Adds a on enter key press event handler to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onBackspace(eventCallback) ⇒ IgniteTemplate

Adds a on backspace key press event handler to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onResize(eventCallback) ⇒ IgniteTemplate

Adds a special on resize event handler to this template that will fire anytime the element is resized by using a resize observer. You can call this more than once to attach more than one callback.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onIntersect(eventCallback) ⇒ IgniteTemplate

Adds a special on intersect event handler to this template that will fire once the element is in view. You can call this more than once to attach more than one callback.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked by the event once it fires.

igniteTemplate.onSeen(eventCallback) ⇒ IgniteTemplate

Adds a special event handler for this template that will fire the first time the element is seen and does not repeat.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Description
eventCallback	function | IgniteProperty	The callback function to be invoked once this element becomes visible.

igniteTemplate.style(name, value, priority, converter) ⇒ IgniteTemplate

Adds a CSS property to this template with a value and priority.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
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		If set to "important" then the style will be marked with !important. Acceptable values: important, !important, true, false, null
converter	function		Optional function to convert the value if needed.

igniteTemplate.hide(value, converter) ⇒ IgniteTemplate

Hides the element this template is constructing if the value is true.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	Boolean | IgniteProperty		If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this.
converter	function		An optional function to convert the value if needed.

igniteTemplate.invisible(value, converter) ⇒ IgniteTemplate

Hides the element this template is constructing if the value is true.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	Boolean | IgniteProperty		If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this.
converter	function		An optional function to convert the value if needed.

igniteTemplate.show(value, converter) ⇒ IgniteTemplate

Shows the element this template is constructing if the value is true.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default
value	Boolean | IgniteProperty
converter	function

igniteTemplate.visible(value, converter) ⇒ IgniteTemplate

Shows the element this template is constructing if the value is true.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default
value	Boolean | IgniteProperty
converter	function

igniteTemplate.id(value, converter) ⇒ IgniteTemplate

Sets the id attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the id attribute of the element this template will construct.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.title(value, converter) ⇒ IgniteTemplate

Sets the title attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the title attribute of the element this template will construct.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.for(value, converter) ⇒ IgniteTemplate

Sets the for attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the for attribute of the element this template will construct.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.role(value, converter) ⇒ IgniteTemplate

Sets the role attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the for attribute of the element this template will construct.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.checked(value, converter) ⇒ IgniteTemplate

Adds a checked attribute to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	Boolean | IgniteProperty		The value to set for the checked attribute.
converter	*		Optional function that can convert the value if needed.

igniteTemplate.disabled(value, converter) ⇒ IgniteTemplate

Adds a disabled attribute and class to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	Boolean | IgniteProperty		A value to determine whether or not the element should be marked as disable or not.
converter	*		Optional function that can convert the value if needed.

igniteTemplate.readonly(value, converter) ⇒ IgniteTemplate

Adds a readonly attribute and class to this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	Boolean | IgniteProperty		A value to determine whether or not the element should be marked as readonly or not.
converter	*		Optional function that can convert the value if needed.

igniteTemplate.type(value, converter) ⇒ IgniteTemplate

Sets the type attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the type attribute of the element this template will construct.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.min(value, converter) ⇒ IgniteTemplate

Sets the min attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the type attribute of the element this template will construct.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.max(value, converter) ⇒ IgniteTemplate

Sets the max attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the type attribute of the element this template will construct.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.step(value, converter) ⇒ IgniteTemplate

Sets the step attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the type attribute of the element this template will construct.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.data(name, value, converter) ⇒ IgniteTemplate

Sets a data attribute on the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
name	String		The name of the data attribute to set on the element this template will construct.
value	String | IgniteProperty		The value to set for the data attribute of the element this template will construct.
converter	*		An optional function that can convert the value if needed.

igniteTemplate.src(value, converter) ⇒ IgniteTemplate

Sets the src attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the src attribute of the element to be constructed by this template.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.href(value, converter) ⇒ IgniteTemplate

Sets the href attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the href attribute of the element to be constructed by this template.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.target(value, converter) ⇒ IgniteTemplate

Sets the target attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the target attribute of the element to be constructed by this template.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.name(value, converter) ⇒ IgniteTemplate

Sets the name attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the name attribute of the element to be constructed by this template.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.placeholder(value, converter) ⇒ IgniteTemplate

Sets the placeholder attribute of the element to be constructed by this template.

Kind: instance method of IgniteTemplate
Returns: IgniteTemplate - This ignite template so function calls can be chained.

Param	Type	Default	Description
value	String | IgniteProperty		The value to set for the placeholder attribute of the element.
converter	function		An optional function that can convert the value if needed.

igniteTemplate.construct(parent, sibling)

Constructs this template and adds it to the DOM if this template has not already been constructed.

Kind: instance method of IgniteTemplate

Param	Type	Description
parent	HTMLElement	Parent element that will contain the constructed element.
sibling	HTMLElement	Optional sibling element that can be used to add the element adjacantly.

igniteTemplate.deconstruct()

Deconstructs this template and cleans up all resources to make sure there are no memory leaks.

Kind: instance method of IgniteTemplate

div

An ignite template that can be used to construct a div element.

Kind: global class

new div(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

a

An ignite template that can be used to construct a hyperlink element.

Kind: global class

new a(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

input

An ignite template that can be used to construct a input element.

Kind: global class

new input(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

textarea

An ignite template that can be used to construct a textarea element.

Kind: global class

new textarea(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

button

An ignite template that can be used to construct a button element.

Kind: global class

new button(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

h1

An ignite template that can be used to construct a h1 element.

Kind: global class

new h1(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

h2

An ignite template that can be used to construct a h2 element.

Kind: global class

new h2(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

h3

An ignite template that can be used to construct a h3 element.

Kind: global class

new h3(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

h4

An ignite template that can be used to construct a h4 element.

Kind: global class

new h4(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

h5

An ignite template that can be used to construct a h5 element.

Kind: global class

new h5(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

h6

An ignite template that can be used to construct a h6 element.

Kind: global class

new h6(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

hr

An ignite template that can be used to construct a hr element.

Kind: global class

new hr(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

p

An ignite template that can be used to construct a p element.

Kind: global class

new p(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

nav

An ignite template that can be used to construct a nav element.

Kind: global class

new nav(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

ul

An ignite template that can be used to construct a ul element.

Kind: global class

new ul(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

li

An ignite template that can be used to construct a li element.

Kind: global class

new li(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

span

An ignite template that can be used to construct a span element.

Kind: global class

new span(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

small

An ignite template that can be used to construct a small element.

Kind: global class

new small(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

strong

An ignite template that can be used to construct a strong element.

Kind: global class

new strong(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

i

An ignite template that can be used to construct an i element.

Kind: global class

new i(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

table

An ignite template that can be used to construct a table element.

Kind: global class

new table(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

td

An ignite template that can be used to construct a td element.

Kind: global class

new td(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

th

An ignite template that can be used to construct a th element.

Kind: global class

new th(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

tr

An ignite template that can be used to construct a tr element.

Kind: global class

new tr(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

thead

An ignite template that can be used to construct a thead element.

Kind: global class

new thead(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

tbody

An ignite template that can be used to construct a tbody element.

Kind: global class

new tbody(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

br

An ignite template that can be used to construct a br element.

Kind: global class

new br(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

img

An ignite template that can be used to construct a img element.

Kind: global class

new img(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

label

An ignite template that can be used to construct a label element.

Kind: global class

new label(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

select

An ignite template that can be used to construct a select element.

Kind: global class

new select(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

option

An ignite template that can be used to construct a option element.

Kind: global class

new option(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

script

An ignite template that can be used to construct a script element.

Kind: global class

new script(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

form

An ignite template that can be used to construct a form element.

Kind: global class

new form(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

header

An ignite template that can be used to construct a header element.

Kind: global class

new header(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

footer

An ignite template that can be used to construct a footer element.

Kind: global class

new footer(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

progress

An ignite template that can be used to construct a progress element.

Kind: global class

new progress(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

svg

An ignite template that can be used to construct a svg element.

Kind: global class

new svg(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

g

An ignite template that can be used to construct a g element.

Kind: global class

new g(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

path

An ignite template that can be used to construct a path element.

Kind: global class

new path(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

circle

An ignite template that can be used to construct a circle element.

Kind: global class

new circle(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

line

An ignite template that can be used to construct a line element.

Kind: global class

new line(...children)

Param	Type	Description
...children	String | Number | IgniteProperty | IgniteTemplate	A series of children to be added to this template.

text

Text is a special template that will construct a text element and automatically update the dom if it's content changes.

Kind: global class

new text(text, converter)

Constructs a text template with the text to render.

Param	Type	Description
text	String | IgniteProperty	The text to render within this text template.
converter	function	An optional function that can be used to convert the text.

Example

new text(`<script>Will show up as text</script>`)

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.

Kind: global class

new html(code)

Param	Type	Description
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.

Kind: global class

new list(list, forEachCallback, reflect)

Param	Type	Default	Description
list	Array | IgniteProperty		The list of items to construct within this template.
forEachCallback	function		A function that constructs a template foreach item.
reflect	Boolean	false	If true any items removed from the DOM will be removed from the list if they exist. By default this is false.

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. If classes, styles, or attributes are applied to the slot they will be applied to the children of the slot.

Kind: global class

new slot(element)

Creates a new slot with the element who's children will be injected.

Param	Type	Description
element	IgniteElement	The parent IgniteElement that this slot is for.

Example

//You must pass the ignite element who owns the slot of the first param.
new slot(this)

Example

//Slots can apply classes, attributes, and styles to children within the slot
new slot(this).class("active") //< Would apply .active to all children

Example

//You can also use properties to have dynamic classes, styles, or attributes on slot children
new slot(this).class(this.someClass)

pagination

A pagination is a template that segments a list of items into pages based on the items, page size, current page.

Kind: global class

new pagination(list, pageSize, currentPage, forEach)

Constructs a new pagination with all the settings needed.

Param	Type	Description
list	Array | IgniteProperty	The list of items to paginate.
pageSize	Number | IgniteProperty	The size of each page.
currentPage	Number | IgniteProperty	The current page to display.
forEach	function	The render function foreach item in the list.

pager

A pager is a template that converts pagination information into elements to form a page selection.

Kind: global class

• pager
  • new pager(items, pageSize, currentPage, pageRange, renderCallback)
  • .items : Number | Array | IgniteProperty
  • .pageSize : Number | IgniteProperty
  • .currentPage : Number | IgniteProperty
  • .pageRange : Number | IgniteProperty
  • .pageCount : Number
  • .pages : Array.<IgniteTemplate>
  • .renderCallback : function

new pager(items, pageSize, currentPage, pageRange, renderCallback)

Constructs a new pager with all the settings needed.

Param	Type	Description
items	Number | Array | IgniteProperty	The items to construct pages for.
pageSize	Number | IgniteProperty	The number of items to show per page.
currentPage	Number | IgniteProperty	The current page being shown.
pageRange	Number | IgniteProperty	The number of pages that can be selected at a time. 3 is typically chosen.
renderCallback	function	Render function for a page, pageIndex is the index of the page, current is whether or not this is the current page, dots is whether this render is for dots.

pager.items : Number | Array | IgniteProperty

Kind: instance property of pager

pager.pageSize : Number | IgniteProperty

Kind: instance property of pager

pager.currentPage : Number | IgniteProperty

Kind: instance property of pager

pager.pageRange : Number | IgniteProperty

Kind: instance property of pager

pager.pageCount : Number

Kind: instance property of pager

pager.pages : Array.<IgniteTemplate>

Kind: instance property of pager

pager.renderCallback : function

Kind: instance property of pager

population

An ignite template that can construct a population of items based on a count.

Kind: global class

new population(count, forEach, converter)

Creates a new population with the number of items in it, a converter if needed, and a foreach function.

Param	Type	Default	Description
count	Number | IgniteProperty | Array.<IgniteProperty>		The number of items in this population.
forEach	function		A function to generate items in the population.
converter	function		A converter to be used to convert the count if needed.