MontoyaTech/ignite-html
MontoyaTech/ignite-html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated docs. Added live option to value, if true value changes are reflected as they happen. Added onInput event handler helper.

Browse Source
This commit is contained in:
MattMo 2021-12-30 18:47:55 -08:00
parent b87ea24fe6
commit 3bf10153d4
1 changed files with 57 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
ignite-template.js
View File

@ -80,7 +80,7 @@ class IgniteTemplate {
* @param {Function} converter Optional function that can convert the class name into a different one.
* @example
* .class("row justify-content-center")
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
class(name, converter = null) {
IgniteRenderingContext.push();
@ -141,7 +141,7 @@ class IgniteTemplate {
* @param {String} name The name of the attribute to add
* @param {String|IgniteProperty} value The value of the attribute to set, can be anything. If Property is passed it will auto update.
* @param {Function} converter Optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
attribute(name, value, converter = null) {
IgniteRenderingContext.push();
@ -185,11 +185,12 @@ class IgniteTemplate {
* Sets the value of the element this template is constructing with the option to reflect changes
* to the value.
* @param {String|IgniteProperty} value The value to set on the element.
* @param {Boolean|Function} reflect Whether or not to reflect changes to the value of the element back to the property if one was used.
* @param {Function} converter Optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @param {Boolean|Function} reflect 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.
* @param {Function} converter Optional function that can convert the value if needed. Default is null.
* @param {Boolean} live Whether or not to reflect the value in realtime, ie anytime the input is changed before focus is lost. Default is false.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
value(value, reflect = false, converter = null) {
value(value, reflect = false, converter = null, live = false) {
IgniteRenderingContext.push();
if (value instanceof IgniteProperty) {
@ -227,6 +228,10 @@ class IgniteTemplate {
this._elementValue = newValue;
};
if (live) {
this.on("input", valueChanged);
}
this.on("change", valueChanged);
this.on("keyup", valueChanged);
}
@ -246,7 +251,7 @@ class IgniteTemplate {
* @param {Any|IgniteProperty} value Value of the property to use. If a Property is passed the value will auto update.
* @param {Boolean} reflect 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.
* @param {Function} converter Optional function that can be used to convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
prop(name, value, reflect = false, converter = null) {
return this.property(name, value, reflect, converter);
@ -258,7 +263,7 @@ class IgniteTemplate {
* @param {Any|IgniteProperty} value Value of the property to use. If a Property is passed the value will auto update.
* @param {Boolean} reflect 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.
* @param {Function} converter Optional function that can be used to convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
property(name, value, reflect = false, converter = null) {
IgniteRenderingContext.push();
@ -299,7 +304,7 @@ class IgniteTemplate {
* @param {String} name Name of the variable to set
* @param {Any|IgniteProperty} value Value of the variable to set
* @param {Function} converter Optional function that can be used to convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
variable(name, value, converter = null) {
IgniteRenderingContext.push();
@ -334,7 +339,7 @@ class IgniteTemplate {
* (You can reflect a property more than once if it's needed.)
* @param {String} name Name of the property to reflect.
* @param {IgniteProperty|Function} target The target for the value to be reflected to.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
reflect(name, target) {
IgniteRenderingContext.push();
@ -356,7 +361,7 @@ class IgniteTemplate {
/**
* Adds a set of properties from an object to be added to this template once it's constructed.
* @param {Object|IgniteObject} props The object value that property names/values will be pulled from.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
properties(props) {
//Make sure we have a valid props.
@ -473,7 +478,7 @@ class IgniteTemplate {
* Adds a single or series of children to be added once this template
* is constructed. Numbers, Strings, and Properties passed will be added as HTML child elements.
* @param {...Number|String|IgniteProperty|IgniteTemplate} items A series of children to be added to this template.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
child(...items) {
if (items) {
@ -502,7 +507,7 @@ class IgniteTemplate {
* with the constructed HTMLElement. If an IgniteProperty is passed it's value will be set to the constructed HTMLElement once
* the template is constructed.
* @param {Function|IgniteProperty} refCallback The callback to be invoked with the HTMLElement of the element this template constructed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
ref(refCallback) {
if (refCallback instanceof IgniteProperty) {
@ -520,7 +525,7 @@ class IgniteTemplate {
* for the function, but their value must be a valid function in order to get a proper event callback.
* @param {String} eventName The name of the event to add.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
on(eventName, eventCallback) {
IgniteRenderingContext.push();
@ -543,7 +548,7 @@ class IgniteTemplate {
/**
* Adds a click event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onClick(eventCallback) {
return this.on("click", eventCallback);
@ -552,7 +557,7 @@ class IgniteTemplate {
/**
* Adds a touch event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onTouch(eventCallback) {
return this.on("touch", eventCallback);
@ -561,7 +566,7 @@ class IgniteTemplate {
/**
* Adds a onblur event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onBlur(eventCallback) {
return this.on("blur", eventCallback);
@ -570,7 +575,7 @@ class IgniteTemplate {
/**
* Adds a onfocus event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onFocus(eventCallback) {
return this.on("focus", eventCallback);
@ -579,12 +584,21 @@ class IgniteTemplate {
/**
* Adds a onchange event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onChange(eventCallback) {
return this.on("change", eventCallback);
}
/**
* Adds a oninput event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onInput(eventCallback) {
return this.on("input", eventCallback);
}
/**
*
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked once the event fires.
@ -597,7 +611,7 @@ class IgniteTemplate {
/**
* Adds a on enter key press event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onEnter(eventCallback) {
var eventName = "keydown";
@ -645,7 +659,7 @@ class IgniteTemplate {
/**
* Adds a on backspace key press event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onBackspace(eventCallback) {
var eventName = "keydown";
@ -694,7 +708,7 @@ class IgniteTemplate {
* Adds a special on resize event handler to this template that will
* fire anytime the element is resized by using a resize observer. You can call this more than once to attach more than one callback.
* @param {Function|IgniteProperty} callback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onResize(callback) {
IgniteRenderingContext.push();
@ -713,7 +727,7 @@ class IgniteTemplate {
* Adds a special on intersect event handler to this template that will fire
* once the element is in view. You can call this more than once to attach more than one callback.
* @param {Function|IgniteProperty} callback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onIntersect(callback) {
IgniteRenderingContext.push();
@ -734,7 +748,7 @@ class IgniteTemplate {
* @param {String|IgniteProperty} value The value to set for the property. If an IgniteProperty is used it will auto update this style.
* @param {String} priority If set to "important" then the style will be marked with !important. Acceptable values: important, !important, true, false, null
* @param {Function} converter Optional function to convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
style(name, value, priority = null, converter = null) {
IgniteRenderingContext.push();
@ -799,7 +813,7 @@ class IgniteTemplate {
* Hides the element this template is constructing if the value is true.
* @param {Boolean|IgniteProperty} value If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this.
* @param {Function} converter An optional function to convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
hide(value, converter = null) {
return this.style("display", value, true, (...params) => {
@ -811,7 +825,7 @@ class IgniteTemplate {
* Hides the element this template is constructing if the value is true.
* @param {Boolean|IgniteProperty} value If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this.
* @param {Function} converter An optional function to convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
invisible(value, converter = null) {
return this.style("visibility", value, true, (...params) => {
@ -823,7 +837,7 @@ class IgniteTemplate {
* Shows the element this template is constructing if the value is true.
* @param {Boolean|IgniteProperty} value
* @param {Function} converter
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
show(value, converter = null) {
return this.style("display", value, true, (...params) => {
@ -835,7 +849,7 @@ class IgniteTemplate {
* Shows the element this template is constructing if the value is true.
* @param {Boolean|IgniteProperty} value
* @param {Function} converter
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
visibile(value, converter = null) {
return this.style("visibility", value, true, (...params) => {
@ -847,7 +861,7 @@ class IgniteTemplate {
* Sets the id attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the id attribute of the element this template will construct.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
id(value, converter = null) {
return this.attribute("id", value, converter);
@ -857,7 +871,7 @@ class IgniteTemplate {
* Sets the title attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the title attribute of the element this template will construct.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
title(value, converter = null) {
return this.attribute("title", value, converter);
@ -867,7 +881,7 @@ class IgniteTemplate {
* Sets the for attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the for attribute of the element this template will construct.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
for(value, converter = null) {
return this.attribute("for", value, converter);
@ -877,7 +891,7 @@ class IgniteTemplate {
* Adds a checked attribute to this template.
* @param {Boolean|IgniteProperty} value The value to set for the checked attribute.
* @param {*} converter Optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
checked(value, converter = null) {
return this.attribute("checked", value, converter);
@ -887,7 +901,7 @@ class IgniteTemplate {
* Adds a disabled attribute and class to this template.
* @param {Boolean|IgniteProperty} value A value to determine whether or not the element should be marked as disable dor not.
* @param {*} converter Optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
disabled(value, converter = null) {
if (value instanceof IgniteProperty) {
@ -920,7 +934,7 @@ class IgniteTemplate {
* Sets the type attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the type attribute of the element this template will construct.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
type(value, converter = null) {
return this.attribute("type", value, converter);
@ -930,7 +944,7 @@ class IgniteTemplate {
* Sets the min attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the type attribute of the element this template will construct.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
min(value, converter = null) {
return this.attribute("min", value, converter);
@ -940,7 +954,7 @@ class IgniteTemplate {
* Sets the max attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the type attribute of the element this template will construct.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
max(value, converter = null) {
return this.attribute("max", value, converter);
@ -950,7 +964,7 @@ class IgniteTemplate {
* Sets the step attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the type attribute of the element this template will construct.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
step(value, converter = null) {
return this.attribute("step", value, converter);
@ -961,7 +975,7 @@ class IgniteTemplate {
* @param {String} name The name of the data attribute to set on the element this template will construct.
* @param {String|IgniteProperty} value The value to set for the data attribute of the element this template will construct.
* @param {*} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
data(name, value, converter = null) {
return this.attribute(`data-${name}`, value, converter);
@ -971,7 +985,7 @@ class IgniteTemplate {
* Sets the src attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the src attribute of the element to be constructed by this template.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
src(value, converter = null) {
return this.attribute("src", value, converter);
@ -981,7 +995,7 @@ class IgniteTemplate {
* Sets the href attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the href attribute of the element to be constructed by this template.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
href(value, converter = null) {
return this.attribute("href", value, converter);
@ -991,7 +1005,7 @@ class IgniteTemplate {
* Sets the target attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the target attribute of the element to be constructed by this template.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
target(value, converter = null) {
return this.attribute("target", value, converter);
@ -1001,7 +1015,7 @@ class IgniteTemplate {
* Sets the name attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the name attribute of the element to be constructed by this template.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
name(value, converter = null) {
return this.attribute("name", value, converter);
@ -1011,7 +1025,7 @@ class IgniteTemplate {
* Sets the placeholder attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the placeholder attribute of the element.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
placeholder(value, converter = null) {
//If this is a input element, modify the attribute, otherwise add the placeholder class.