MontoyaTech/ignite-html
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
Show Stats 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
* to the value.
* @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.
* @returns This ignite template so function calls can be chained.
*/
value(value, reflect = false, converter = null) {
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) {
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 => {
var newValue = null;
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") {
value.setValue(this.element.textContent, true);
newValue = this.element.textContent;
} 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 => {
if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") {
value.setValue(this.element.checked, true);
} else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") {
value.setValue(this.element.textContent, true);
var newValue = null;
if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") {
newValue = this.element.textContent;
} 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.
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;
} else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") {
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.
* @param {any} oldValue
* @param {any} newValue
* @param {Function} converter
* @ignore
*/
onValueChanged(oldValue, newValue, converter) {
if (converter !== null) {
IgniteRenderingContext.push();
newValue = converter(newValue);
IgniteRenderingContext.pop();
}
onValueChanged(newValue) {
//Only update the elements value if it actually changed.
//This is to prevent endless looping potentially.
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) {
this.element.checked = newValue;
}