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

When passing a value to a template's element you can now use a function for the reflection. The value function now also supports radio checks. Cleaned up a few things as well.

Browse Source
This commit is contained in:
Matt Mo
2021-03-09 13:06:29 -08:00
parent e99d1e9051
commit 3eaf3b136a
1 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
ignite-template.js
View File

@@ -146,38 +146,55 @@ class IgniteTemplate {
* Sets the value of the element this template is constructing with the option to reflect changes * Sets the value of the element this template is constructing with the option to reflect changes
* to the value. * to the value.
* @param {String|IgniteProperty} value The value to set on the element. * @param {String|IgniteProperty} value The value to set on the element.
* @param {Boolean} reflect Whether or not to reflect changes to the value of the element back to the property if one was used. * @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. * @param {Function} converter Optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained. * @returns This ignite template so function calls can be chained.
*/ */
value(value, reflect = false, converter = null) { value(value, reflect = false, converter = null) {
IgniteRenderingContext.push(); IgniteRenderingContext.push();
if (reflect && converter != null) {
throw `Cannot set a value on an IgniteTemplate: ${this.tagName} with reflect and a converter used at the same time.`;
}
if (value instanceof IgniteProperty) { if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onValueChanged(oldValue, newValue, converter))); this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onValueChanged((converter != null ? converter(newValue) : newValue))));
this._callbacks.push(value.attachOnPush((list, items) => this.onValueChanged((converter != null ? converter(list) : null))));
this._callbacks.push(value.attachOnUnshift((list, items) => this.onValueChanged((converter != null ? converter(list) : null))));
this._callbacks.push(value.attachOnPop((list) => this.onValueChanged((converter != null ? converter(list) : null))));
this._callbacks.push(value.attachOnShift((list) => this.onValueChanged((converter != null ? converter(list) : null))));
this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onValueChanged((converter != null ? converter(list) : null))));
if (reflect) { if (reflect != null && ((typeof (reflect) == "boolean" && reflect == true) || reflect instanceof Function)) {
this.on("change", e => { this.on("change", e => {
var newValue = null;
if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") { if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") {
value.setValue(this.element.checked, true); newValue = this.element.checked;
} else if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "radio") {
newValue = this.element.checked;
} else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") { } else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") {
value.setValue(this.element.textContent, true); newValue = this.element.textContent;
} else { } else {
value.setValue(this.element.value, true); newValue = this.element.value;
}
if (reflect instanceof Function) {
reflect(newValue);
} else {
value.setValue(newValue, true);
} }
}); });
this.on("keyup", e => { this.on("keyup", e => {
if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") { var newValue = null;
value.setValue(this.element.checked, true);
} else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") { if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") {
value.setValue(this.element.textContent, true); newValue = this.element.textContent;
} else { } else {
value.setValue(this.element.value, true); neValue = this.element.value;
}
if (reflect instanceof Function) {
reflect(newValue);
} else {
value.setValue(newValue, true);
} }
}); });
} }
@@ -839,7 +856,7 @@ class IgniteTemplate {
//Set the elements value if there is one. //Set the elements value if there is one.
if (this._elementValue != null) { if (this._elementValue != null) {
if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") { if (this.element.hasAttribute("type") && (this.element.getAttribute("type").toLowerCase().trim() == "checkbox" || this.element.getAttribute("type").toLowerCase().trim() == "radio")) {
this.element.checked = this._elementValue; this.element.checked = this._elementValue;
} else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") { } else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") {
this.element.textContent = this._elementValue.toString(); this.element.textContent = this._elementValue.toString();
@@ -975,22 +992,14 @@ class IgniteTemplate {
/** /**
* Called when a value for this template was changed and needs to be updated on the template's element. * Called when a value for this template was changed and needs to be updated on the template's element.
* @param {any} oldValue
* @param {any} newValue * @param {any} newValue
* @param {Function} converter
* @ignore * @ignore
*/ */
onValueChanged(oldValue, newValue, converter) { onValueChanged(newValue) {
if (converter !== null) {
IgniteRenderingContext.push();
newValue = converter(newValue);
IgniteRenderingContext.pop();
}
//Only update the elements value if it actually changed. //Only update the elements value if it actually changed.
//This is to prevent endless looping potentially. //This is to prevent endless looping potentially.
if (this.element) { if (this.element) {
if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") { if (this.element.hasAttribute("type") && (this.element.getAttribute("type").toLowerCase().trim() == "checkbox" || this.element.getAttribute("type").toLowerCase().trim() == "radio")) {
if (this.element.checked != newValue) { if (this.element.checked != newValue) {
this.element.checked = newValue; this.element.checked = newValue;
} }