diff --git a/README.md b/README.md index 0338d54..bb49e6d 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,12 @@ A simple responsive javascript UI component framework. -[Documentation](docs.md) \ No newline at end of file +[See Documentation](docs.md) + +### Documentation build command + +` +documentation build ignite-template.js ignite-html.js ignite-element.js -f md > docs.md +` + +[Built using](https://github.com/documentationjs/documentation) \ No newline at end of file diff --git a/docs.md b/docs.md index cc01a21..f7069a5 100644 --- a/docs.md +++ b/docs.md @@ -2,1437 +2,248 @@ ### Table of Contents -* [IgniteObject][1] - * [Parameters][2] - * [update][3] - * [setProperties][4] - * [Parameters][5] - * [create][6] - * [Parameters][7] -* [IgniteHtml][8] - * [register][9] - * [Parameters][10] - * [render][11] -* [IgniteTemplate][12] - * [Parameters][13] - * [Examples][14] - * [class][15] - * [Parameters][16] - * [Examples][17] - * [attribute][18] - * [Parameters][19] - * [value][20] - * [Parameters][21] - * [prop][22] - * [Parameters][23] - * [property][24] - * [Parameters][25] - * [variable][26] - * [Parameters][27] - * [reflect][28] - * [Parameters][29] - * [properties][30] - * [Parameters][31] - * [innerHTML][32] +* [IgniteElement][1] + * [Examples][2] + * [template][3] + * [elements][4] + * [variables][5] + * [Examples][6] + * [properties][7] + * [Examples][8] + * [styles][9] + * [Examples][10] + * [resetVariables][11] + * [getProperties][12] + * [setProperties][13] + * [Parameters][14] + * [resetProperties][15] + * [attachOnDisconnect][16] + * [Parameters][17] + * [render][18] + * [Examples][19] + * [init][20] + * [ready][21] + * [cleanup][22] + * [uuid][23] +* [IgniteObject][24] + * [Parameters][25] + * [update][26] + * [setProperties][27] + * [Parameters][28] + * [create][29] + * [Parameters][30] +* [IgniteHtml][31] + * [register][32] * [Parameters][33] - * [innerText][34] - * [Parameters][35] - * [child][36] - * [Parameters][37] - * [ref][38] + * [render][34] +* [IgniteTemplate][35] + * [Parameters][36] + * [Examples][37] + * [class][38] * [Parameters][39] - * [on][40] - * [Parameters][41] - * [onClick][42] - * [Parameters][43] - * [onTouch][44] - * [Parameters][45] - * [onBlur][46] - * [Parameters][47] - * [onFocus][48] - * [Parameters][49] - * [onChange][50] - * [Parameters][51] - * [onInput][52] - * [Parameters][53] - * [onPaste][54] - * [Parameters][55] - * [onEnter][56] - * [Parameters][57] - * [onBackspace][58] - * [Parameters][59] - * [onResize][60] - * [Parameters][61] - * [onIntersect][62] - * [Parameters][63] - * [onSeen][64] - * [Parameters][65] - * [style][66] - * [Parameters][67] - * [hide][68] - * [Parameters][69] - * [invisible][70] - * [Parameters][71] - * [show][72] - * [Parameters][73] - * [visible][74] - * [Parameters][75] - * [id][76] - * [Parameters][77] - * [title][78] - * [Parameters][79] - * [for][80] - * [Parameters][81] - * [role][82] - * [Parameters][83] - * [checked][84] - * [Parameters][85] - * [disabled][86] - * [Parameters][87] - * [readonly][88] - * [Parameters][89] - * [type][90] - * [Parameters][91] - * [min][92] - * [Parameters][93] - * [max][94] - * [Parameters][95] - * [step][96] - * [Parameters][97] - * [data][98] - * [Parameters][99] - * [src][100] - * [Parameters][101] - * [href][102] - * [Parameters][103] - * [target][104] - * [Parameters][105] - * [name][106] - * [Parameters][107] - * [placeholder][108] - * [Parameters][109] - * [construct][110] - * [Parameters][111] - * [deconstruct][112] -* [div][113] - * [Parameters][114] -* [a][115] - * [Parameters][116] -* [input][117] - * [Parameters][118] -* [textarea][119] - * [Parameters][120] -* [button][121] - * [Parameters][122] -* [h1][123] - * [Parameters][124] -* [h2][125] - * [Parameters][126] -* [h3][127] - * [Parameters][128] -* [h4][129] - * [Parameters][130] -* [h5][131] - * [Parameters][132] -* [h6][133] - * [Parameters][134] -* [hr][135] - * [Parameters][136] -* [p][137] - * [Parameters][138] -* [nav][139] - * [Parameters][140] -* [ul][141] - * [Parameters][142] -* [li][143] - * [Parameters][144] -* [span][145] - * [Parameters][146] -* [small][147] - * [Parameters][148] -* [strong][149] - * [Parameters][150] -* [i][151] - * [Parameters][152] -* [table][153] - * [Parameters][154] -* [td][155] - * [Parameters][156] -* [th][157] - * [Parameters][158] -* [tr][159] - * [Parameters][160] -* [thead][161] - * [Parameters][162] -* [tbody][163] - * [Parameters][164] -* [br][165] - * [Parameters][166] -* [img][167] - * [Parameters][168] -* [label][169] - * [Parameters][170] -* [select][171] - * [Parameters][172] -* [option][173] - * [Parameters][174] -* [script][175] - * [Parameters][176] -* [form][177] - * [Parameters][178] -* [header][179] - * [Parameters][180] -* [footer][181] - * [Parameters][182] -* [progress][183] - * [Parameters][184] -* [svg][185] - * [Parameters][186] -* [g][187] - * [Parameters][188] -* [path][189] - * [Parameters][190] -* [circle][191] - * [Parameters][192] -* [line][193] - * [Parameters][194] -* [text][195] - * [Parameters][196] - * [Examples][197] -* [html][198] + * [Examples][40] + * [attribute][41] + * [Parameters][42] + * [value][43] + * [Parameters][44] + * [prop][45] + * [Parameters][46] + * [property][47] + * [Parameters][48] + * [variable][49] + * [Parameters][50] + * [reflect][51] + * [Parameters][52] + * [properties][53] + * [Parameters][54] + * [innerHTML][55] + * [Parameters][56] + * [innerText][57] + * [Parameters][58] + * [child][59] + * [Parameters][60] + * [ref][61] + * [Parameters][62] + * [on][63] + * [Parameters][64] + * [onClick][65] + * [Parameters][66] + * [onTouch][67] + * [Parameters][68] + * [onBlur][69] + * [Parameters][70] + * [onFocus][71] + * [Parameters][72] + * [onChange][73] + * [Parameters][74] + * [onInput][75] + * [Parameters][76] + * [onPaste][77] + * [Parameters][78] + * [onEnter][79] + * [Parameters][80] + * [onBackspace][81] + * [Parameters][82] + * [onResize][83] + * [Parameters][84] + * [onIntersect][85] + * [Parameters][86] + * [onSeen][87] + * [Parameters][88] + * [style][89] + * [Parameters][90] + * [hide][91] + * [Parameters][92] + * [invisible][93] + * [Parameters][94] + * [show][95] + * [Parameters][96] + * [visible][97] + * [Parameters][98] + * [id][99] + * [Parameters][100] + * [title][101] + * [Parameters][102] + * [for][103] + * [Parameters][104] + * [role][105] + * [Parameters][106] + * [checked][107] + * [Parameters][108] + * [disabled][109] + * [Parameters][110] + * [readonly][111] + * [Parameters][112] + * [type][113] + * [Parameters][114] + * [min][115] + * [Parameters][116] + * [max][117] + * [Parameters][118] + * [step][119] + * [Parameters][120] + * [data][121] + * [Parameters][122] + * [src][123] + * [Parameters][124] + * [href][125] + * [Parameters][126] + * [target][127] + * [Parameters][128] + * [name][129] + * [Parameters][130] + * [placeholder][131] + * [Parameters][132] + * [construct][133] + * [Parameters][134] + * [deconstruct][135] +* [div][136] + * [Parameters][137] +* [a][138] + * [Parameters][139] +* [input][140] + * [Parameters][141] +* [textarea][142] + * [Parameters][143] +* [button][144] + * [Parameters][145] +* [h1][146] + * [Parameters][147] +* [h2][148] + * [Parameters][149] +* [h3][150] + * [Parameters][151] +* [h4][152] + * [Parameters][153] +* [h5][154] + * [Parameters][155] +* [h6][156] + * [Parameters][157] +* [hr][158] + * [Parameters][159] +* [p][160] + * [Parameters][161] +* [nav][162] + * [Parameters][163] +* [ul][164] + * [Parameters][165] +* [li][166] + * [Parameters][167] +* [span][168] + * [Parameters][169] +* [small][170] + * [Parameters][171] +* [strong][172] + * [Parameters][173] +* [i][174] + * [Parameters][175] +* [table][176] + * [Parameters][177] +* [td][178] + * [Parameters][179] +* [th][180] + * [Parameters][181] +* [tr][182] + * [Parameters][183] +* [thead][184] + * [Parameters][185] +* [tbody][186] + * [Parameters][187] +* [br][188] + * [Parameters][189] +* [img][190] + * [Parameters][191] +* [label][192] + * [Parameters][193] +* [select][194] + * [Parameters][195] +* [option][196] + * [Parameters][197] +* [script][198] * [Parameters][199] - * [Examples][200] -* [list][201] - * [Parameters][202] - * [Examples][203] -* [slot][204] +* [form][200] + * [Parameters][201] +* [header][202] + * [Parameters][203] +* [footer][204] * [Parameters][205] - * [Examples][206] -* [pagination][207] - * [Parameters][208] -* [pager][209] - * [Parameters][210] - * [items][211] - * [pageSize][212] - * [currentPage][213] - * [pageRange][214] - * [pageCount][215] - * [pages][216] - * [renderCallback][217] -* [population][218] +* [progress][206] + * [Parameters][207] +* [svg][208] + * [Parameters][209] +* [g][210] + * [Parameters][211] +* [path][212] + * [Parameters][213] +* [circle][214] + * [Parameters][215] +* [line][216] + * [Parameters][217] +* [text][218] * [Parameters][219] -* [IgniteElement][220] - * [Examples][221] - * [elementConnected][222] - * [template][223] - * [elements][224] - * [readyCallback][225] - * [onDisconnectCallbacks][226] - * [variables][227] - * [Examples][228] - * [properties][229] - * [Examples][230] - * [styles][231] - * [Examples][232] - * [resetVariables][233] - * [getProperties][234] - * [setProperties][235] - * [Parameters][236] - * [resetProperties][237] - * [attachOnDisconnect][238] - * [Parameters][239] - * [render][240] - * [Examples][241] - * [init][242] - * [ready][243] - * [cleanup][244] - * [uuid][245] - -## IgniteObject - -The outline of an IgniteObject which contains IgniteProperties. - -### Parameters - -* `obj` **Any** The object to create an IgniteObject out of. - -### update - -Checks this IgniteObject for any properties not converted and automatically -converts them. - -### setProperties - -Sets the values of properties on this ignite object. - -#### Parameters - -* `props` **([Object][246] | [IgniteObject][1])** The properties to set onto this ignite object. - -### create - -Creates an IgniteObject or Array of IgniteObjects and returns it. - -#### Parameters - -* `obj` **([Object][246] | [Array][247])** The object to create an IgniteObject from. - -Returns **[IgniteObject][1]** The created IgniteObject. - -## IgniteHtml - -Main helper class to access ignite html functions. - -### register - -Registers a new element to be rendered when render() is called. - -#### Parameters - -* `name` **[String][248]** The tag name of the element to register. -* `definition` **Any** The class definition of the element. - -### render - -Begins rendering all registered elements. - -## 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][248]** The tag name of the element this template will construct. (optional, default `null`) -* `children` **([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** An array of child elements to be added to this template. (optional, default `null`) - -### Examples - -```javascript -//You can easily create a template to construct any html element. See the following: -class div extends IgniteTemplate { - constructor(...items) { - super("div", items); - } -} -``` - -```javascript -IgniteTemplate's construct method can be extended by adding a callback function to _constructors under a template: -template._constructors.push(() => console.log('constructed')); -``` - -```javascript -IgniteTemplate's deconstruct method can be extended by adding a callback function to _destructors under a template: -template._destructors.push(() => console.log('destructed')); -``` - -### class - -Adds a CSS class to be added once this template is constructed. - -#### Parameters - -* `name` **([String][248] | IgniteProperty)** Name of the CSS class to add. Multiple CSS classes are supported if they are separated by a space. -* `converter` **[Function][250]** Optional function that can convert the class name into a different one. (optional, default `null`) - -#### Examples - -```javascript -.class("row justify-content-center") -``` - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### attribute - -Adds a html element attribute to this template to be added once this template is constructed. - -#### Parameters - -* `name` **[String][248]** The name of the attribute to add -* `value` **([String][248] | IgniteProperty | [Function][250] | [Array][247]\)** The value of the attribute to set, can be anything. If Property is passed it will auto update. -* `converter` **[Function][250]** Optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### value - -Sets the value of the element this template is constructing with the option to reflect changes -to the value. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set on the element. -* `reflect` **([Boolean][251] | [Function][250])** 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. (optional, default `false`) -* `converter` **[Function][250]** Optional function that can convert the value if needed. Default is null. (optional, default `null`) -* `live` **[Boolean][251]** Whether or not to reflect the value in realtime, ie anytime the input is changed before focus is lost. Default is false. (optional, default `false`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### prop - -Sets a property on the element this template will construct. (Shorthand for property()) - -#### Parameters - -* `name` **[String][248]** 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][251]** 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. (optional, default `false`) -* `converter` **[Function][250]** Optional function that can be used to convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### property - -Sets a property on the element this template will construct. - -#### Parameters - -* `name` **[String][248]** 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][251]** 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. (optional, default `false`) -* `converter` **[Function][250]** Optional function that can be used to convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### variable - -Sets a variable on the element this template will construct. - -#### Parameters - -* `name` **[String][248]** Name of the variable to set -* `value` **(Any | IgniteProperty)** Value of the variable to set -* `converter` **[Function][250]** Optional function that can be used to convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### reflect - -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.) - -#### Parameters - -* `name` **[String][248]** Name of the property to reflect. -* `target` **(IgniteProperty | [Function][250])** The target for the value to be reflected to. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### properties - -Adds a set of properties from an object to be added to this template once it's constructed. - -#### Parameters - -* `props` **([Object][246] | [IgniteObject][1])** The object value that property names/values will be pulled from. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### innerHTML - -Sets the inner html of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** InnerHTML to set for element. If a property is passed the html will auto update. -* `converter` **[Function][250]** Optional function that can be used to convert the value if needed. (optional, default `null`) - -Returns **any** This ignite template so funciton calls can be chained. - -### innerText - -Sets the inner text of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty | [Array][247]\ | [Function][250])** text to be set for this element. If a property is passed the text will auto update. -* `converter` **[Function][250]** Optional function that can be used to convert the value if needed. (optional, default `null`) - -Returns **any** This ignite template. - -### child - -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 - -* `items` **...([Number][249] | [String][248] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### ref - -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. - -#### Parameters - -* `refCallback` **([Function][250] | IgniteProperty)** The callback to be invoked with the HTMLElement of the element this template constructed. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### on - -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. - -#### Parameters - -* `eventName` **[String][248]** The name of the event to add. -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onClick - -Adds a click event handler to this template. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onTouch - -Adds a touch event handler to this template. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onBlur - -Adds a onblur event handler to this template. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onFocus - -Adds a onfocus event handler to this template. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onChange - -Adds a onchange event handler to this template. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onInput - -Adds a oninput event handler to this template. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onPaste - -Adds a on paste event handler to this template. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked once the event fires. - -Returns **any** This ignite template. - -### onEnter - -Adds a on enter key press event handler to this template. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onBackspace - -Adds a on backspace key press event handler to this template. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onResize - -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. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onIntersect - -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. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked by the event once it fires. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### onSeen - -Adds a special event handler for this template that will fire the first time the element is seen and does not repeat. - -#### Parameters - -* `eventCallback` **([Function][250] | IgniteProperty)** The callback function to be invoked once this element becomes visible. - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### style - -Adds a CSS property to this template with a value and priority. - -#### Parameters - -* `name` **[String][248]** The name of the CSS property to set. -* `value` **([String][248] | IgniteProperty)** The value to set for the property. If an IgniteProperty is used it will auto update this style. -* `priority` **[String][248]** If set to "important" then the style will be marked with !important. Acceptable values: important, !important, true, false, null (optional, default `null`) -* `converter` **[Function][250]** Optional function to convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### hide - -Hides the element this template is constructing if the value is true. - -#### Parameters - -* `value` **([Boolean][251] | IgniteProperty)** If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this. -* `converter` **[Function][250]** An optional function to convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### invisible - -Hides the element this template is constructing if the value is true. - -#### Parameters - -* `value` **([Boolean][251] | IgniteProperty)** If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this. -* `converter` **[Function][250]** An optional function to convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### show - -Shows the element this template is constructing if the value is true. - -#### Parameters - -* `value` **([Boolean][251] | IgniteProperty)** -* `converter` **[Function][250]** (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### visible - -Shows the element this template is constructing if the value is true. - -#### Parameters - -* `value` **([Boolean][251] | IgniteProperty)** -* `converter` **[Function][250]** (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### id - -Sets the id attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the id attribute of the element this template will construct. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### title - -Sets the title attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the title attribute of the element this template will construct. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### for - -Sets the for attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the for attribute of the element this template will construct. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### role - -Sets the role attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the for attribute of the element this template will construct. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### checked - -Adds a checked attribute to this template. - -#### Parameters - -* `value` **([Boolean][251] | IgniteProperty)** The value to set for the checked attribute. -* `converter` **any** Optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### disabled - -Adds a disabled attribute and class to this template. - -#### Parameters - -* `value` **([Boolean][251] | IgniteProperty)** A value to determine whether or not the element should be marked as disable or not. -* `converter` **any** Optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### readonly - -Adds a readonly attribute and class to this template. - -#### Parameters - -* `value` **([Boolean][251] | IgniteProperty)** A value to determine whether or not the element should be marked as readonly or not. -* `converter` **any** Optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### type - -Sets the type attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the type attribute of the element this template will construct. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### min - -Sets the min attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the type attribute of the element this template will construct. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### max - -Sets the max attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the type attribute of the element this template will construct. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### step - -Sets the step attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the type attribute of the element this template will construct. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### data - -Sets a data attribute on the element to be constructed by this template. - -#### Parameters - -* `name` **[String][248]** The name of the data attribute to set on the element this template will construct. -* `value` **([String][248] | IgniteProperty)** The value to set for the data attribute of the element this template will construct. -* `converter` **any** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### src - -Sets the src attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the src attribute of the element to be constructed by this template. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### href - -Sets the href attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the href attribute of the element to be constructed by this template. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### target - -Sets the target attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the target attribute of the element to be constructed by this template. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### name - -Sets the name attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the name attribute of the element to be constructed by this template. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### placeholder - -Sets the placeholder attribute of the element to be constructed by this template. - -#### Parameters - -* `value` **([String][248] | IgniteProperty)** The value to set for the placeholder attribute of the element. -* `converter` **[Function][250]** An optional function that can convert the value if needed. (optional, default `null`) - -Returns **[IgniteTemplate][12]** This ignite template so function calls can be chained. - -### construct - -Constructs this template and adds it to the DOM if this template -has not already been constructed. - -#### Parameters - -* `parent` **[HTMLElement][252]** Parent element that will contain the constructed element. -* `sibling` **[HTMLElement][252]** Optional sibling element that can be used to add the element adjacantly. - -### deconstruct - -Deconstructs this template and cleans up all resources to make sure -there are no memory leaks. - -## div - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a div element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## a - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a hyperlink element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## input - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a input element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## textarea - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a textarea element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## button - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a button element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## h1 - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a h1 element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## h2 - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a h2 element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## h3 - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a h3 element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## h4 - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a h4 element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## h5 - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a h5 element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## h6 - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a h6 element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## hr - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a hr element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## p - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a p element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## nav - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a nav element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## ul - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a ul element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## li - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a li element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## span - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a span element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## small - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a small element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## strong - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a strong element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## i - -**Extends IgniteTemplate** - -An ignite template that can be used to construct an i element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## table - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a table element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## td - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a td element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## th - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a th element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## tr - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a tr element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## thead - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a thead element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## tbody - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a tbody element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## br - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a br element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## img - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a img element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## label - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a label element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## select - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a select element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## option - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a option element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## script - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a script element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## form - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a form element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## header - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a header element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## footer - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a footer element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## progress - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a progress element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## svg - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a svg element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## g - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a g element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## path - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a path element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## circle - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a circle element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## line - -**Extends IgniteTemplate** - -An ignite template that can be used to construct a line element. - -### Parameters - -* `children` **...([String][248] | [Number][249] | IgniteProperty | [IgniteTemplate][12])** A series of children to be added to this template. - -## text - -**Extends IgniteTemplate** - -Text is a special template that will construct a text element and automatically update the dom -if it's content changes. - -### Parameters - -* `text` **([String][248] | IgniteProperty)** The text to render within this text template. -* `converter` **[Function][250]** An optional function that can be used to convert the text. - -### Examples - -```javascript -new text(``) -``` - -## html - -**Extends IgniteTemplate** - -Html is a special template that can construct raw html or properties into the dom and automatically -update the dom if the property changes. - -### Parameters - -* `code` **([String][248] | IgniteProperty)** HTML code to be constructed within this template. If an IgniteProperty is passed it's value will be used. - -### Examples - -```javascript -new html(`

Hello world!

`) -``` - -## list - -**Extends IgniteTemplate** - -A special ignite template that constructs a list of items using a template -that is dynamically created for each item. - -### Parameters - -* `list` **([Array][247] | IgniteProperty)** The list of items to construct within this template. -* `forEachCallback` -* `reflect` **[Boolean][251]** If true any items removed from the DOM will be removed from the list if they exist. By default this is false. (optional, default `false`) - -### Examples - -```javascript -new list(["1", "2", "3"], (item) => { - return new h1(item); -}) -``` - -## slot - -**Extends IgniteTemplate** - -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. - -### Parameters - -* `element` **[IgniteElement][220]** The parent IgniteElement that this slot is for. - -### Examples - -```javascript -//You must pass the ignite element who owns the slot of the first param. -new slot(this) -``` - -```javascript -//Slots can apply classes, attributes, and styles to children within the slot -new slot(this).class("active") //< Would apply .active to all children -``` - -```javascript -//You can also use properties to have dynamic classes, styles, or attributes on slot children -new slot(this).class(this.someClass) -``` - -## pagination - -**Extends IgniteTemplate** - -A pagination is a template that segments a list of items into pages based -on the items, page size, current page. - -### Parameters - -* `list` **([Array][247] | IgniteProperty)** The list of items to paginate. -* `pageSize` **([Number][249] | IgniteProperty)** The size of each page. -* `currentPage` **([Number][249] | IgniteProperty)** The current page to display. -* `forEach` - -## pager - -**Extends IgniteTemplate** - -A pager is a template that converts pagination information into elements -to form a page selection. - -### Parameters - -* `items` **([Number][249] | [Array][247] | IgniteProperty)** The items to construct pages for. -* `pageSize` **([Number][249] | IgniteProperty)** The number of items to show per page. -* `currentPage` **([Number][249] | IgniteProperty)** The current page being shown. -* `pageRange` **([Number][249] | IgniteProperty)** The number of pages that can be selected at a time. 3 is typically chosen. -* `renderCallback` - -### items - -Type: ([Number][249] | [Array][247] | IgniteProperty) - -### pageSize - -Type: ([Number][249] | IgniteProperty) - -### currentPage - -Type: ([Number][249] | IgniteProperty) - -### pageRange - -Type: ([Number][249] | IgniteProperty) - -### pageCount - -Type: [Number][249] - -### pages - -Type: [Array][247]<[IgniteTemplate][12]> - -### renderCallback - -## population - -**Extends IgniteTemplate** - -An ignite template that can construct a population of items -based on a count. - -### Parameters - -* `count` **([Number][249] | IgniteProperty | [Array][247]\)** The number of items in this population. -* `forEach` -* `converter` **[Function][250]** A converter to be used to convert the count if needed. (optional, default `null`) + * [Examples][220] +* [html][221] + * [Parameters][222] + * [Examples][223] +* [list][224] + * [Parameters][225] + * [Examples][226] +* [slot][227] + * [Parameters][228] + * [Examples][229] +* [pagination][230] + * [Parameters][231] +* [pager][232] + * [Parameters][233] + * [items][234] + * [pageSize][235] + * [currentPage][236] + * [pageRange][237] + * [pageCount][238] + * [pages][239] + * [renderCallback][240] +* [population][241] + * [Parameters][242] ## IgniteElement @@ -1486,25 +297,17 @@ export { new MainApp() ``` -### elementConnected - -Type: [Boolean][251] - ### template -Type: [IgniteTemplate][12] +The ignite html template used to construct this element. + +Type: [IgniteTemplate][35] ### elements -Type: [Array][247]<[HTMLElement][252]> +The child elements within this element upon creation. -### readyCallback - -Type: IgniteCallback - -### onDisconnectCallbacks - -Type: [Array][247]\ +Type: [Array][243]<[HTMLElement][244]> ### variables @@ -1522,7 +325,7 @@ get variables() { } ``` -Returns **any** An object with properties that will be assigned to this ignite element as variables. +Returns **[Object][245]** An object with properties that will be assigned to this ignite element as variables. ### properties @@ -1549,7 +352,7 @@ this.show = false; console.log(this.title); ``` -Returns **any** An object with properties that will be assigned to this ignite element. +Returns **[Object][245]** An object with properties that will be assigned to this ignite element. ### styles @@ -1569,7 +372,7 @@ get styles() { } ``` -Returns **any** A string containing CSS code to be used with this ignite element. +Returns **[String][246]** A string containing CSS code to be used with this ignite element. ### resetVariables @@ -1580,6 +383,8 @@ values. Gets all the property values from this element and returns it. +Returns **[Object][245]** An object with all of the property values for this ignite element. + ### setProperties Sets all the property values on this element. @@ -1599,7 +404,7 @@ Attaches a function to the on disconnect event for this element and returns a ca #### Parameters -* `onDisconnect` **[Function][250]** Disconnect function to be called when on disconnect is raised. +* `onDisconnect` **[Function][247]** Disconnect function to be called when on disconnect is raised. Returns **any** IgniteCallback created for this callback. @@ -1625,7 +430,7 @@ Returns **any** An ignite template to be used to construct this ignite element. ### init -Called wehn this ignite element is being initialized. When this is called +Called when this ignite element is being initialized. When this is called the element has not been created. This is good for login checking code or special setup code. ### ready @@ -1644,506 +449,1688 @@ is being destroyed. Generates a uuid and returns it. -[1]: #igniteobject +Returns **[String][246]** A unique string, for example: '1b23ec67-4d90-4992-9c5a-b5c0844deaef' -[2]: #parameters +## IgniteObject -[3]: #update +The outline of an IgniteObject which contains IgniteProperties. -[4]: #setproperties +### Parameters -[5]: #parameters-1 +* `obj` **Any** The object to create an IgniteObject out of. -[6]: #create +### update -[7]: #parameters-2 +Checks this IgniteObject for any properties not converted and automatically +converts them. -[8]: #ignitehtml +### setProperties -[9]: #register +Sets the values of properties on this ignite object. -[10]: #parameters-3 +#### Parameters -[11]: #render +* `props` **([Object][245] | [IgniteObject][24])** The properties to set onto this ignite object. -[12]: #ignitetemplate +### create -[13]: #parameters-4 +Creates an IgniteObject or Array of IgniteObjects and returns it. -[14]: #examples +#### Parameters -[15]: #class +* `obj` **([Object][245] | [Array][243])** The object to create an IgniteObject from. -[16]: #parameters-5 +Returns **[IgniteObject][24]** The created IgniteObject. -[17]: #examples-1 +## IgniteHtml -[18]: #attribute +Main helper class to access ignite html functions. -[19]: #parameters-6 +### register -[20]: #value +Registers a new element to be rendered when render() is called. -[21]: #parameters-7 +#### Parameters -[22]: #prop +* `name` **[String][246]** The tag name of the element to register. +* `definition` **Any** The class definition of the element. -[23]: #parameters-8 +### render -[24]: #property +Begins rendering all registered elements. -[25]: #parameters-9 +## IgniteTemplate -[26]: #variable +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. -[27]: #parameters-10 +### Parameters -[28]: #reflect +* `tagName` **[String][246]** The tag name of the element this template will construct. (optional, default `null`) +* `children` **([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** An array of child elements to be added to this template. (optional, default `null`) -[29]: #parameters-11 +### Examples -[30]: #properties +```javascript +//You can easily create a template to construct any html element. See the following: +class div extends IgniteTemplate { + constructor(...items) { + super("div", items); + } +} +``` -[31]: #parameters-12 +```javascript +IgniteTemplate's construct method can be extended by adding a callback function to _constructors under a template: +template._constructors.push(() => console.log('constructed')); +``` -[32]: #innerhtml +```javascript +IgniteTemplate's deconstruct method can be extended by adding a callback function to _destructors under a template: +template._destructors.push(() => console.log('destructed')); +``` -[33]: #parameters-13 +### class -[34]: #innertext +Adds a CSS class to be added once this template is constructed. -[35]: #parameters-14 +#### Parameters -[36]: #child +* `name` **([String][246] | IgniteProperty)** Name of the CSS class to add. Multiple CSS classes are supported if they are separated by a space. +* `converter` **[Function][247]** Optional function that can convert the class name into a different one. (optional, default `null`) -[37]: #parameters-15 +#### Examples -[38]: #ref +```javascript +.class("row justify-content-center") +``` -[39]: #parameters-16 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[40]: #on +### attribute -[41]: #parameters-17 +Adds a html element attribute to this template to be added once this template is constructed. -[42]: #onclick +#### Parameters -[43]: #parameters-18 +* `name` **[String][246]** The name of the attribute to add +* `value` **([String][246] | IgniteProperty | [Function][247] | [Array][243]\)** The value of the attribute to set, can be anything. If Property is passed it will auto update. +* `converter` **[Function][247]** Optional function that can convert the value if needed. (optional, default `null`) -[44]: #ontouch +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[45]: #parameters-19 +### value -[46]: #onblur +Sets the value of the element this template is constructing with the option to reflect changes +to the value. -[47]: #parameters-20 +#### Parameters -[48]: #onfocus +* `value` **([String][246] | IgniteProperty)** The value to set on the element. +* `reflect` **([Boolean][249] | [Function][247])** 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. (optional, default `false`) +* `converter` **[Function][247]** Optional function that can convert the value if needed. Default is null. (optional, default `null`) +* `live` **[Boolean][249]** Whether or not to reflect the value in realtime, ie anytime the input is changed before focus is lost. Default is false. (optional, default `false`) -[49]: #parameters-21 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[50]: #onchange +### prop -[51]: #parameters-22 +Sets a property on the element this template will construct. (Shorthand for property()) -[52]: #oninput +#### Parameters -[53]: #parameters-23 +* `name` **[String][246]** 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][249]** 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. (optional, default `false`) +* `converter` **[Function][247]** Optional function that can be used to convert the value if needed. (optional, default `null`) -[54]: #onpaste +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[55]: #parameters-24 +### property -[56]: #onenter +Sets a property on the element this template will construct. -[57]: #parameters-25 +#### Parameters -[58]: #onbackspace +* `name` **[String][246]** 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][249]** 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. (optional, default `false`) +* `converter` **[Function][247]** Optional function that can be used to convert the value if needed. (optional, default `null`) -[59]: #parameters-26 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[60]: #onresize +### variable -[61]: #parameters-27 +Sets a variable on the element this template will construct. -[62]: #onintersect +#### Parameters -[63]: #parameters-28 +* `name` **[String][246]** Name of the variable to set +* `value` **(Any | IgniteProperty)** Value of the variable to set +* `converter` **[Function][247]** Optional function that can be used to convert the value if needed. (optional, default `null`) -[64]: #onseen +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[65]: #parameters-29 +### reflect -[66]: #style +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.) -[67]: #parameters-30 +#### Parameters -[68]: #hide +* `name` **[String][246]** Name of the property to reflect. +* `target` **(IgniteProperty | [Function][247])** The target for the value to be reflected to. -[69]: #parameters-31 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[70]: #invisible +### properties -[71]: #parameters-32 +Adds a set of properties from an object to be added to this template once it's constructed. -[72]: #show +#### Parameters -[73]: #parameters-33 +* `props` **([Object][245] | [IgniteObject][24])** The object value that property names/values will be pulled from. -[74]: #visible +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[75]: #parameters-34 +### innerHTML -[76]: #id +Sets the inner html of the element to be constructed by this template. -[77]: #parameters-35 +#### Parameters -[78]: #title +* `value` **([String][246] | IgniteProperty)** InnerHTML to set for element. If a property is passed the html will auto update. +* `converter` **[Function][247]** Optional function that can be used to convert the value if needed. (optional, default `null`) -[79]: #parameters-36 +Returns **any** This ignite template so funciton calls can be chained. -[80]: #for +### innerText -[81]: #parameters-37 +Sets the inner text of the element to be constructed by this template. -[82]: #role +#### Parameters -[83]: #parameters-38 +* `value` **([String][246] | IgniteProperty | [Array][243]\ | [Function][247])** text to be set for this element. If a property is passed the text will auto update. +* `converter` **[Function][247]** Optional function that can be used to convert the value if needed. (optional, default `null`) -[84]: #checked +Returns **any** This ignite template. -[85]: #parameters-39 +### child -[86]: #disabled +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. -[87]: #parameters-40 +#### Parameters -[88]: #readonly +* `items` **...([Number][248] | [String][246] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. -[89]: #parameters-41 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[90]: #type +### ref -[91]: #parameters-42 +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. -[92]: #min +#### Parameters -[93]: #parameters-43 +* `refCallback` **([Function][247] | IgniteProperty)** The callback to be invoked with the HTMLElement of the element this template constructed. -[94]: #max +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[95]: #parameters-44 +### on -[96]: #step +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. -[97]: #parameters-45 +#### Parameters -[98]: #data +* `eventName` **[String][246]** The name of the event to add. +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[99]: #parameters-46 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[100]: #src +### onClick -[101]: #parameters-47 +Adds a click event handler to this template. -[102]: #href +#### Parameters -[103]: #parameters-48 +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[104]: #target +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[105]: #parameters-49 +### onTouch -[106]: #name +Adds a touch event handler to this template. -[107]: #parameters-50 +#### Parameters -[108]: #placeholder +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[109]: #parameters-51 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[110]: #construct +### onBlur -[111]: #parameters-52 +Adds a onblur event handler to this template. -[112]: #deconstruct +#### Parameters -[113]: #div +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[114]: #parameters-53 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[115]: #a +### onFocus -[116]: #parameters-54 +Adds a onfocus event handler to this template. -[117]: #input +#### Parameters -[118]: #parameters-55 +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[119]: #textarea +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[120]: #parameters-56 +### onChange -[121]: #button +Adds a onchange event handler to this template. -[122]: #parameters-57 +#### Parameters -[123]: #h1 +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[124]: #parameters-58 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[125]: #h2 +### onInput -[126]: #parameters-59 +Adds a oninput event handler to this template. -[127]: #h3 +#### Parameters -[128]: #parameters-60 +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[129]: #h4 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[130]: #parameters-61 +### onPaste -[131]: #h5 +Adds a on paste event handler to this template. -[132]: #parameters-62 +#### Parameters -[133]: #h6 +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked once the event fires. -[134]: #parameters-63 +Returns **any** This ignite template. -[135]: #hr +### onEnter -[136]: #parameters-64 +Adds a on enter key press event handler to this template. -[137]: #p +#### Parameters -[138]: #parameters-65 +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[139]: #nav +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[140]: #parameters-66 +### onBackspace -[141]: #ul +Adds a on backspace key press event handler to this template. -[142]: #parameters-67 +#### Parameters -[143]: #li +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[144]: #parameters-68 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[145]: #span +### onResize -[146]: #parameters-69 +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. -[147]: #small +#### Parameters -[148]: #parameters-70 +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[149]: #strong +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[150]: #parameters-71 +### onIntersect -[151]: #i +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. -[152]: #parameters-72 +#### Parameters -[153]: #table +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked by the event once it fires. -[154]: #parameters-73 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[155]: #td +### onSeen -[156]: #parameters-74 +Adds a special event handler for this template that will fire the first time the element is seen and does not repeat. -[157]: #th +#### Parameters -[158]: #parameters-75 +* `eventCallback` **([Function][247] | IgniteProperty)** The callback function to be invoked once this element becomes visible. -[159]: #tr +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[160]: #parameters-76 +### style -[161]: #thead +Adds a CSS property to this template with a value and priority. -[162]: #parameters-77 +#### Parameters -[163]: #tbody +* `name` **[String][246]** The name of the CSS property to set. +* `value` **([String][246] | IgniteProperty)** The value to set for the property. If an IgniteProperty is used it will auto update this style. +* `priority` **[String][246]** If set to "important" then the style will be marked with !important. Acceptable values: important, !important, true, false, null (optional, default `null`) +* `converter` **[Function][247]** Optional function to convert the value if needed. (optional, default `null`) -[164]: #parameters-78 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[165]: #br +### hide -[166]: #parameters-79 +Hides the element this template is constructing if the value is true. -[167]: #img +#### Parameters -[168]: #parameters-80 +* `value` **([Boolean][249] | IgniteProperty)** If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this. +* `converter` **[Function][247]** An optional function to convert the value if needed. (optional, default `null`) -[169]: #label +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[170]: #parameters-81 +### invisible -[171]: #select +Hides the element this template is constructing if the value is true. -[172]: #parameters-82 +#### Parameters -[173]: #option +* `value` **([Boolean][249] | IgniteProperty)** If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this. +* `converter` **[Function][247]** An optional function to convert the value if needed. (optional, default `null`) -[174]: #parameters-83 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[175]: #script +### show -[176]: #parameters-84 +Shows the element this template is constructing if the value is true. -[177]: #form +#### Parameters -[178]: #parameters-85 +* `value` **([Boolean][249] | IgniteProperty)** +* `converter` **[Function][247]** (optional, default `null`) -[179]: #header +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[180]: #parameters-86 +### visible -[181]: #footer +Shows the element this template is constructing if the value is true. -[182]: #parameters-87 +#### Parameters -[183]: #progress +* `value` **([Boolean][249] | IgniteProperty)** +* `converter` **[Function][247]** (optional, default `null`) -[184]: #parameters-88 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[185]: #svg +### id -[186]: #parameters-89 +Sets the id attribute of the element to be constructed by this template. -[187]: #g +#### Parameters -[188]: #parameters-90 +* `value` **([String][246] | IgniteProperty)** The value to set for the id attribute of the element this template will construct. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) -[189]: #path +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[190]: #parameters-91 +### title -[191]: #circle +Sets the title attribute of the element to be constructed by this template. -[192]: #parameters-92 +#### Parameters -[193]: #line +* `value` **([String][246] | IgniteProperty)** The value to set for the title attribute of the element this template will construct. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) -[194]: #parameters-93 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[195]: #text +### for -[196]: #parameters-94 +Sets the for attribute of the element to be constructed by this template. -[197]: #examples-2 +#### Parameters -[198]: #html +* `value` **([String][246] | IgniteProperty)** The value to set for the for attribute of the element this template will construct. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) -[199]: #parameters-95 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[200]: #examples-3 +### role -[201]: #list +Sets the role attribute of the element to be constructed by this template. -[202]: #parameters-96 +#### Parameters -[203]: #examples-4 +* `value` **([String][246] | IgniteProperty)** The value to set for the for attribute of the element this template will construct. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) -[204]: #slot +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[205]: #parameters-97 +### checked -[206]: #examples-5 +Adds a checked attribute to this template. -[207]: #pagination +#### Parameters -[208]: #parameters-98 +* `value` **([Boolean][249] | IgniteProperty)** The value to set for the checked attribute. +* `converter` **any** Optional function that can convert the value if needed. (optional, default `null`) -[209]: #pager +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[210]: #parameters-99 +### disabled -[211]: #items +Adds a disabled attribute and class to this template. -[212]: #pagesize +#### Parameters -[213]: #currentpage +* `value` **([Boolean][249] | IgniteProperty)** A value to determine whether or not the element should be marked as disable or not. +* `converter` **any** Optional function that can convert the value if needed. (optional, default `null`) -[214]: #pagerange +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[215]: #pagecount +### readonly -[216]: #pages +Adds a readonly attribute and class to this template. -[217]: #rendercallback +#### Parameters -[218]: #population +* `value` **([Boolean][249] | IgniteProperty)** A value to determine whether or not the element should be marked as readonly or not. +* `converter` **any** Optional function that can convert the value if needed. (optional, default `null`) -[219]: #parameters-100 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[220]: #igniteelement +### type -[221]: #examples-6 +Sets the type attribute of the element to be constructed by this template. -[222]: #elementconnected +#### Parameters -[223]: #template +* `value` **([String][246] | IgniteProperty)** The value to set for the type attribute of the element this template will construct. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) -[224]: #elements +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[225]: #readycallback +### min -[226]: #ondisconnectcallbacks +Sets the min attribute of the element to be constructed by this template. -[227]: #variables +#### Parameters -[228]: #examples-7 +* `value` **([String][246] | IgniteProperty)** The value to set for the type attribute of the element this template will construct. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) -[229]: #properties-1 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[230]: #examples-8 +### max -[231]: #styles +Sets the max attribute of the element to be constructed by this template. -[232]: #examples-9 +#### Parameters -[233]: #resetvariables +* `value` **([String][246] | IgniteProperty)** The value to set for the type attribute of the element this template will construct. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) -[234]: #getproperties +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[235]: #setproperties-1 +### step -[236]: #parameters-101 +Sets the step attribute of the element to be constructed by this template. -[237]: #resetproperties +#### Parameters -[238]: #attachondisconnect +* `value` **([String][246] | IgniteProperty)** The value to set for the type attribute of the element this template will construct. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) -[239]: #parameters-102 +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[240]: #render-1 +### data -[241]: #examples-10 +Sets a data attribute on the element to be constructed by this template. -[242]: #init +#### Parameters -[243]: #ready +* `name` **[String][246]** The name of the data attribute to set on the element this template will construct. +* `value` **([String][246] | IgniteProperty)** The value to set for the data attribute of the element this template will construct. +* `converter` **any** An optional function that can convert the value if needed. (optional, default `null`) -[244]: #cleanup +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[245]: #uuid +### src -[246]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +Sets the src attribute of the element to be constructed by this template. -[247]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array +#### Parameters -[248]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String +* `value` **([String][246] | IgniteProperty)** The value to set for the src attribute of the element to be constructed by this template. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) -[249]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. -[250]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function +### href -[251]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean +Sets the href attribute of the element to be constructed by this template. -[252]: https://developer.mozilla.org/docs/Web/HTML/Element +#### Parameters + +* `value` **([String][246] | IgniteProperty)** The value to set for the href attribute of the element to be constructed by this template. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) + +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. + +### target + +Sets the target attribute of the element to be constructed by this template. + +#### Parameters + +* `value` **([String][246] | IgniteProperty)** The value to set for the target attribute of the element to be constructed by this template. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) + +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. + +### name + +Sets the name attribute of the element to be constructed by this template. + +#### Parameters + +* `value` **([String][246] | IgniteProperty)** The value to set for the name attribute of the element to be constructed by this template. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) + +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. + +### placeholder + +Sets the placeholder attribute of the element to be constructed by this template. + +#### Parameters + +* `value` **([String][246] | IgniteProperty)** The value to set for the placeholder attribute of the element. +* `converter` **[Function][247]** An optional function that can convert the value if needed. (optional, default `null`) + +Returns **[IgniteTemplate][35]** This ignite template so function calls can be chained. + +### construct + +Constructs this template and adds it to the DOM if this template +has not already been constructed. + +#### Parameters + +* `parent` **[HTMLElement][244]** Parent element that will contain the constructed element. +* `sibling` **[HTMLElement][244]** Optional sibling element that can be used to add the element adjacantly. + +### deconstruct + +Deconstructs this template and cleans up all resources to make sure +there are no memory leaks. + +## div + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a div element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## a + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a hyperlink element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## input + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a input element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## textarea + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a textarea element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## button + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a button element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## h1 + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a h1 element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## h2 + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a h2 element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## h3 + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a h3 element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## h4 + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a h4 element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## h5 + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a h5 element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## h6 + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a h6 element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## hr + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a hr element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## p + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a p element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## nav + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a nav element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## ul + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a ul element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## li + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a li element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## span + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a span element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## small + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a small element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## strong + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a strong element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## i + +**Extends IgniteTemplate** + +An ignite template that can be used to construct an i element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## table + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a table element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## td + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a td element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## th + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a th element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## tr + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a tr element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## thead + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a thead element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## tbody + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a tbody element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## br + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a br element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## img + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a img element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## label + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a label element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## select + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a select element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## option + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a option element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## script + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a script element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## form + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a form element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## header + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a header element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## footer + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a footer element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## progress + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a progress element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## svg + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a svg element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## g + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a g element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## path + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a path element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## circle + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a circle element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## line + +**Extends IgniteTemplate** + +An ignite template that can be used to construct a line element. + +### Parameters + +* `children` **...([String][246] | [Number][248] | IgniteProperty | [IgniteTemplate][35])** A series of children to be added to this template. + +## text + +**Extends IgniteTemplate** + +Text is a special template that will construct a text element and automatically update the dom +if it's content changes. + +### Parameters + +* `text` **([String][246] | IgniteProperty)** The text to render within this text template. +* `converter` **[Function][247]** An optional function that can be used to convert the text. + +### Examples + +```javascript +new text(``) +``` + +## html + +**Extends IgniteTemplate** + +Html is a special template that can construct raw html or properties into the dom and automatically +update the dom if the property changes. + +### Parameters + +* `code` **([String][246] | IgniteProperty)** HTML code to be constructed within this template. If an IgniteProperty is passed it's value will be used. + +### Examples + +```javascript +new html(`

Hello world!

`) +``` + +## list + +**Extends IgniteTemplate** + +A special ignite template that constructs a list of items using a template +that is dynamically created for each item. + +### Parameters + +* `list` **([Array][243] | IgniteProperty)** The list of items to construct within this template. +* `forEachCallback` +* `reflect` **[Boolean][249]** If true any items removed from the DOM will be removed from the list if they exist. By default this is false. (optional, default `false`) + +### Examples + +```javascript +new list(["1", "2", "3"], (item) => { + return new h1(item); +}) +``` + +## slot + +**Extends IgniteTemplate** + +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. + +### Parameters + +* `element` **[IgniteElement][1]** The parent IgniteElement that this slot is for. + +### Examples + +```javascript +//You must pass the ignite element who owns the slot of the first param. +new slot(this) +``` + +```javascript +//Slots can apply classes, attributes, and styles to children within the slot +new slot(this).class("active") //< Would apply .active to all children +``` + +```javascript +//You can also use properties to have dynamic classes, styles, or attributes on slot children +new slot(this).class(this.someClass) +``` + +## pagination + +**Extends IgniteTemplate** + +A pagination is a template that segments a list of items into pages based +on the items, page size, current page. + +### Parameters + +* `list` **([Array][243] | IgniteProperty)** The list of items to paginate. +* `pageSize` **([Number][248] | IgniteProperty)** The size of each page. +* `currentPage` **([Number][248] | IgniteProperty)** The current page to display. +* `forEach` + +## pager + +**Extends IgniteTemplate** + +A pager is a template that converts pagination information into elements +to form a page selection. + +### Parameters + +* `items` **([Number][248] | [Array][243] | IgniteProperty)** The items to construct pages for. +* `pageSize` **([Number][248] | IgniteProperty)** The number of items to show per page. +* `currentPage` **([Number][248] | IgniteProperty)** The current page being shown. +* `pageRange` **([Number][248] | IgniteProperty)** The number of pages that can be selected at a time. 3 is typically chosen. +* `renderCallback` + +### items + +Type: ([Number][248] | [Array][243] | IgniteProperty) + +### pageSize + +Type: ([Number][248] | IgniteProperty) + +### currentPage + +Type: ([Number][248] | IgniteProperty) + +### pageRange + +Type: ([Number][248] | IgniteProperty) + +### pageCount + +Type: [Number][248] + +### pages + +Type: [Array][243]<[IgniteTemplate][35]> + +### renderCallback + +## population + +**Extends IgniteTemplate** + +An ignite template that can construct a population of items +based on a count. + +### Parameters + +* `count` **([Number][248] | IgniteProperty | [Array][243]\)** The number of items in this population. +* `forEach` +* `converter` **[Function][247]** A converter to be used to convert the count if needed. (optional, default `null`) + +[1]: #igniteelement + +[2]: #examples + +[3]: #template + +[4]: #elements + +[5]: #variables + +[6]: #examples-1 + +[7]: #properties + +[8]: #examples-2 + +[9]: #styles + +[10]: #examples-3 + +[11]: #resetvariables + +[12]: #getproperties + +[13]: #setproperties + +[14]: #parameters + +[15]: #resetproperties + +[16]: #attachondisconnect + +[17]: #parameters-1 + +[18]: #render + +[19]: #examples-4 + +[20]: #init + +[21]: #ready + +[22]: #cleanup + +[23]: #uuid + +[24]: #igniteobject + +[25]: #parameters-2 + +[26]: #update + +[27]: #setproperties-1 + +[28]: #parameters-3 + +[29]: #create + +[30]: #parameters-4 + +[31]: #ignitehtml + +[32]: #register + +[33]: #parameters-5 + +[34]: #render-1 + +[35]: #ignitetemplate + +[36]: #parameters-6 + +[37]: #examples-5 + +[38]: #class + +[39]: #parameters-7 + +[40]: #examples-6 + +[41]: #attribute + +[42]: #parameters-8 + +[43]: #value + +[44]: #parameters-9 + +[45]: #prop + +[46]: #parameters-10 + +[47]: #property + +[48]: #parameters-11 + +[49]: #variable + +[50]: #parameters-12 + +[51]: #reflect + +[52]: #parameters-13 + +[53]: #properties-1 + +[54]: #parameters-14 + +[55]: #innerhtml + +[56]: #parameters-15 + +[57]: #innertext + +[58]: #parameters-16 + +[59]: #child + +[60]: #parameters-17 + +[61]: #ref + +[62]: #parameters-18 + +[63]: #on + +[64]: #parameters-19 + +[65]: #onclick + +[66]: #parameters-20 + +[67]: #ontouch + +[68]: #parameters-21 + +[69]: #onblur + +[70]: #parameters-22 + +[71]: #onfocus + +[72]: #parameters-23 + +[73]: #onchange + +[74]: #parameters-24 + +[75]: #oninput + +[76]: #parameters-25 + +[77]: #onpaste + +[78]: #parameters-26 + +[79]: #onenter + +[80]: #parameters-27 + +[81]: #onbackspace + +[82]: #parameters-28 + +[83]: #onresize + +[84]: #parameters-29 + +[85]: #onintersect + +[86]: #parameters-30 + +[87]: #onseen + +[88]: #parameters-31 + +[89]: #style + +[90]: #parameters-32 + +[91]: #hide + +[92]: #parameters-33 + +[93]: #invisible + +[94]: #parameters-34 + +[95]: #show + +[96]: #parameters-35 + +[97]: #visible + +[98]: #parameters-36 + +[99]: #id + +[100]: #parameters-37 + +[101]: #title + +[102]: #parameters-38 + +[103]: #for + +[104]: #parameters-39 + +[105]: #role + +[106]: #parameters-40 + +[107]: #checked + +[108]: #parameters-41 + +[109]: #disabled + +[110]: #parameters-42 + +[111]: #readonly + +[112]: #parameters-43 + +[113]: #type + +[114]: #parameters-44 + +[115]: #min + +[116]: #parameters-45 + +[117]: #max + +[118]: #parameters-46 + +[119]: #step + +[120]: #parameters-47 + +[121]: #data + +[122]: #parameters-48 + +[123]: #src + +[124]: #parameters-49 + +[125]: #href + +[126]: #parameters-50 + +[127]: #target + +[128]: #parameters-51 + +[129]: #name + +[130]: #parameters-52 + +[131]: #placeholder + +[132]: #parameters-53 + +[133]: #construct + +[134]: #parameters-54 + +[135]: #deconstruct + +[136]: #div + +[137]: #parameters-55 + +[138]: #a + +[139]: #parameters-56 + +[140]: #input + +[141]: #parameters-57 + +[142]: #textarea + +[143]: #parameters-58 + +[144]: #button + +[145]: #parameters-59 + +[146]: #h1 + +[147]: #parameters-60 + +[148]: #h2 + +[149]: #parameters-61 + +[150]: #h3 + +[151]: #parameters-62 + +[152]: #h4 + +[153]: #parameters-63 + +[154]: #h5 + +[155]: #parameters-64 + +[156]: #h6 + +[157]: #parameters-65 + +[158]: #hr + +[159]: #parameters-66 + +[160]: #p + +[161]: #parameters-67 + +[162]: #nav + +[163]: #parameters-68 + +[164]: #ul + +[165]: #parameters-69 + +[166]: #li + +[167]: #parameters-70 + +[168]: #span + +[169]: #parameters-71 + +[170]: #small + +[171]: #parameters-72 + +[172]: #strong + +[173]: #parameters-73 + +[174]: #i + +[175]: #parameters-74 + +[176]: #table + +[177]: #parameters-75 + +[178]: #td + +[179]: #parameters-76 + +[180]: #th + +[181]: #parameters-77 + +[182]: #tr + +[183]: #parameters-78 + +[184]: #thead + +[185]: #parameters-79 + +[186]: #tbody + +[187]: #parameters-80 + +[188]: #br + +[189]: #parameters-81 + +[190]: #img + +[191]: #parameters-82 + +[192]: #label + +[193]: #parameters-83 + +[194]: #select + +[195]: #parameters-84 + +[196]: #option + +[197]: #parameters-85 + +[198]: #script + +[199]: #parameters-86 + +[200]: #form + +[201]: #parameters-87 + +[202]: #header + +[203]: #parameters-88 + +[204]: #footer + +[205]: #parameters-89 + +[206]: #progress + +[207]: #parameters-90 + +[208]: #svg + +[209]: #parameters-91 + +[210]: #g + +[211]: #parameters-92 + +[212]: #path + +[213]: #parameters-93 + +[214]: #circle + +[215]: #parameters-94 + +[216]: #line + +[217]: #parameters-95 + +[218]: #text + +[219]: #parameters-96 + +[220]: #examples-7 + +[221]: #html + +[222]: #parameters-97 + +[223]: #examples-8 + +[224]: #list + +[225]: #parameters-98 + +[226]: #examples-9 + +[227]: #slot + +[228]: #parameters-99 + +[229]: #examples-10 + +[230]: #pagination + +[231]: #parameters-100 + +[232]: #pager + +[233]: #parameters-101 + +[234]: #items + +[235]: #pagesize + +[236]: #currentpage + +[237]: #pagerange + +[238]: #pagecount + +[239]: #pages + +[240]: #rendercallback + +[241]: #population + +[242]: #parameters-102 + +[243]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array + +[244]: https://developer.mozilla.org/docs/Web/HTML/Element + +[245]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object + +[246]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String + +[247]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function + +[248]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number + +[249]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean diff --git a/ignite-element.js b/ignite-element.js index 7b6c96e..acae117 100644 --- a/ignite-element.js +++ b/ignite-element.js @@ -50,19 +50,34 @@ class IgniteElement extends HTMLElement { constructor() { super(); - /** @type {Boolean} */ + /** + * @ignore + * @type {Boolean} + * */ this.elementConnected = false; //Used to know if the connectedCallback was already called. - /** @type {IgniteTemplate} */ + /** + * The ignite html template used to construct this element. + * @type {IgniteTemplate} + * */ this.template = null; - /** @type {HTMLElement[]} */ + /** + * The child elements within this element upon creation. + * @type {HTMLElement[]} + * */ this.elements = []; - /** @type {IgniteCallback} */ + /** + * @ignore + * @type {IgniteCallback} + * */ this.readyCallback = new IgniteCallback(() => this.ready()); - /** @type {IgniteCallback[]} */ + /** + * @ignore + * @type {IgniteCallback[]} + * */ this.onDisconnectCallbacks = []; //Create the variables for this element. @@ -82,7 +97,7 @@ class IgniteElement extends HTMLElement { * Returns an object with all the variables for this ignite element. Variables * unlike properties have no callbacks or events, they are just data. * - * @returns An object with properties that will be assigned to this ignite element as variables. + * @returns {Object} An object with properties that will be assigned to this ignite element as variables. * * @example * get variables() { @@ -100,7 +115,7 @@ class IgniteElement extends HTMLElement { * 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. * - * @returns An object with properties that will be assigned to this ignite element. + * @returns {Object} An object with properties that will be assigned to this ignite element. * * @example * get properties() { @@ -127,7 +142,7 @@ class IgniteElement extends HTMLElement { * value the CSS will auto be injected into the current HTML page once and reused for the life * of the ignite element. * - * @returns A string containing CSS code to be used with this ignite element. + * @returns {String} A string containing CSS code to be used with this ignite element. * * @example * get styles() { @@ -166,6 +181,7 @@ class IgniteElement extends HTMLElement { /** * Gets all the property values from this element and returns it. + * @returns {Object} An object with all of the property values for this ignite element. */ getProperties() { var ret = {}; @@ -357,7 +373,7 @@ class IgniteElement extends HTMLElement { } /** - * Called wehn this ignite element is being initialized. When this is called + * Called when this ignite element is being initialized. When this is called * the element has not been created. This is good for login checking code or special setup code. */ init() { @@ -384,6 +400,7 @@ class IgniteElement extends HTMLElement { /** * Generates a uuid and returns it. + * @returns {String} A unique string, for example: '1b23ec67-4d90-4992-9c5a-b5c0844deaef' */ uuid() { return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>