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

Cleaned up onAttributeChanged and attributes can now use arrays like styles.

Browse Source
This commit is contained in:
Matt Mo 2021-10-13 07:46:40 -07:00
parent 59bb836bac
commit af0348c861
1 changed files with 51 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
ignite-template.js
View File

@ -147,10 +147,34 @@ class IgniteTemplate {
IgniteRenderingContext.push(); IgniteRenderingContext.push();
if (value instanceof IgniteProperty) { if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter))); this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(name, (converter ? converter(newValue) : newValue))));
this._attributes[name] = converter != null ? converter(value.value) : value.value; this._callbacks.push(value.attachOnPush((list, items) => this.onAttributeChanged(name, converter ? converter(list) : null)));
this._callbacks.push(value.attachOnUnshift((list, items) => this.onAttributeChanged(name, converter ? converter(list) : null)));
this._callbacks.push(value.attachOnPop((list) => this.onAttributeChanged(name, converter ? converter(list) : null)));
this._callbacks.push(value.attachOnShift((list) => this.onAttributeChanged(name, converter ? converter(list) : null)));
this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onAttributeChanged(name, converter ? converter(list) : null)));
this._attributes[name] = converter ? converter(value.value) : value.value;
} else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) {
//There must be a converter for this to work correctly
if (!converter) {
throw "Cannot pass an array of properties without using a converter!";
}
//Attack a callback for all the properties
value.forEach(prop => {
if (prop instanceof IgniteProperty) {
this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onAttributeChanged(name, converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnPush((list, items) => this.onAttributeChanged(name, converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnUnshift((list, items) => this.onAttributeChanged(name, converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnPop((list) => this.onAttributeChanged(name, converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnShift((list) => this.onAttributeChanged(name, converter(...value.getPropertyValues()))));
this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onAttributeChanged(name, converter(...value.getPropertyValues()))));
}
});
this._attributes[name] = converter(...value.getPropertyValues());
} else { } else {
this._attributes[name] = converter != null ? converter(value) : value; this._attributes[name] = converter ? converter(value) : value;
} }
IgniteRenderingContext.pop(); IgniteRenderingContext.pop();
@ -236,12 +260,12 @@ class IgniteTemplate {
} }
if (value instanceof IgniteProperty) { if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(name, (converter != null ? converter(newValue) : newValue)))); this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(name, converter ? converter(newValue) : newValue)));
this._callbacks.push(value.attachOnPush((list, items) => this.onPropertyChanged(name, (converter != null ? converter(list) : list)))); this._callbacks.push(value.attachOnPush((list, items) => this.onPropertyChanged(name, converter ? converter(list) : list)));
this._callbacks.push(value.attachOnUnshift((list, items) => this.onPropertyChanged(name, (converter != null ? converter(list) : list)))); this._callbacks.push(value.attachOnUnshift((list, items) => this.onPropertyChanged(name, converter ? converter(list) : list)));
this._callbacks.push(value.attachOnPop((list) => this.onPropertyChanged(name, (converter != null ? converter(list) : list)))); this._callbacks.push(value.attachOnPop((list) => this.onPropertyChanged(name, converter ? converter(list) : list)));
this._callbacks.push(value.attachOnShift((list) => this.onPropertyChanged(name, (converter != null ? converter(list) : list)))); this._callbacks.push(value.attachOnShift((list) => this.onPropertyChanged(name, converter ? converter(list) : list)));
this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onPropertyChanged(name, (converter != null ? converter(list) : list)))); this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onPropertyChanged(name, converter ? converter(list) : list)));
this._properties[name] = { this._properties[name] = {
value: (converter != null ? converter(value.value) : value.value), value: (converter != null ? converter(value.value) : value.value),
@ -273,12 +297,12 @@ class IgniteTemplate {
} }
if (value instanceof IgniteProperty) { if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onVariableChanged(name, (converter != null ? converter(newValue) : newValue)))); this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onVariableChanged(name, converter ? converter(newValue) : newValue)));
this._callbacks.push(value.attachOnPush((list, items) => this.onVariableChanged(name, (converter != null ? converter(list) : list)))); this._callbacks.push(value.attachOnPush((list, items) => this.onVariableChanged(name, converter ? converter(list) : list)));
this._callbacks.push(value.attachOnUnshift((list, items) => this.onVariableChanged(name, (converter != null ? converter(list) : list)))); this._callbacks.push(value.attachOnUnshift((list, items) => this.onVariableChanged(name, converter ? converter(list) : list)));
this._callbacks.push(value.attachOnPop((list) => this.onVariableChanged(name, (converter != null ? converter(list) : list)))); this._callbacks.push(value.attachOnPop((list) => this.onVariableChanged(name, converter ? converter(list) : list)));
this._callbacks.push(value.attachOnShift((list) => this.onVariableChanged(name, (converter != null ? converter(list) : list)))); this._callbacks.push(value.attachOnShift((list) => this.onVariableChanged(name, converter ? converter(list) : list)));
this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onVariableChanged(name, (converter != null ? converter(list) : list)))); this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onVariableChanged(name, converter ? converter(list) : list)));
this._variables[name] = { this._variables[name] = {
value: (converter != null ? converter(value.value) : value.value) value: (converter != null ? converter(value.value) : value.value)
@ -470,7 +494,7 @@ class IgniteTemplate {
*/ */
ref(refCallback) { ref(refCallback) {
if (refCallback instanceof IgniteProperty) { if (refCallback instanceof IgniteProperty) {
this._callbacks.push(refCallback.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, refCallback))); this._callbacks.push(refCallback.attachOnChange((oldValue, newValue) => this.onRefChanged(refCallback, newValue)));
this._refs.push(element => refCallback.value = element); this._refs.push(element => refCallback.value = element);
} else { } else {
this._refs.push(refCallback); this._refs.push(refCallback);
@ -1188,27 +1212,20 @@ class IgniteTemplate {
/** /**
* Called when a attribute on this template was changed and needs to be updated * Called when a attribute on this template was changed and needs to be updated
* on the template's element. * on the template's element.
* @param {any} oldValue * @param {string} name
* @param {any} newValue * @param {any} newValue
* @param {string} attributeName
* @ignore * @ignore
*/ */
onAttributeChanged(oldValue, newValue, attributeName, converter) { onAttributeChanged(name, newValue) {
if (converter !== null) {
IgniteRenderingContext.push();
newValue = converter(newValue);
IgniteRenderingContext.pop();
}
if (this.element) { if (this.element) {
if (newValue == null || newValue == undefined) { if (newValue == null || newValue == undefined) {
this.element.removeAttribute(attributeName); this.element.removeAttribute(name);
} else { } else {
this.element.setAttribute(attributeName, newValue); this.element.setAttribute(name, newValue);
} }
} }
this._attributes[attributeName] = newValue; this._attributes[name] = newValue;
} }
/** /**
@ -1306,12 +1323,11 @@ class IgniteTemplate {
/** /**
* Called when a ref was changed and we need to update the refs * Called when a ref was changed and we need to update the refs
* value to match this elements reference. * value to match this elements reference.
* @param {any} oldValue
* @param {any} newValue
* @param {any} ref * @param {any} ref
* @param {any} newValue
* @ignore * @ignore
*/ */
onRefChanged(oldValue, newValue, ref) { onRefChanged(ref, newValue) {
//Only set the reference value to ourself if it's not our element. //Only set the reference value to ourself if it's not our element.
//Otherwise we will get a never ending loop. //Otherwise we will get a never ending loop.
if (this.element != newValue) { if (this.element != newValue) {
@ -2401,20 +2417,16 @@ class slot extends IgniteTemplate {
* @param {Function} converter Optional converter function for the value if needed. * @param {Function} converter Optional converter function for the value if needed.
* @ignore * @ignore
*/ */
onAttributeChanged(oldValue, newValue, attributeName, converter) { onAttributeChanged(name, newValue) {
if (converter !== null) {
newValue = converter(newValue);
}
this.parent.elements.forEach((element) => { this.parent.elements.forEach((element) => {
if (newValue == null || newValue == undefined) { if (newValue == null || newValue == undefined) {
element.removeAttribute(attributeName); element.removeAttribute(name);
} else { } else {
element.setAttribute(attributeName, newValue); element.setAttribute(name, newValue);
} }
}); });
this._attributes[attributeName] = newValue; this._attributes[name] = newValue;
} }
/** /**