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();
if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter)));
this._attributes[name] = converter != null ? converter(value.value) : value.value;
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(name, (converter ? converter(newValue) : newValue))));
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 {
this._attributes[name] = converter != null ? converter(value) : value;
this._attributes[name] = converter ? converter(value) : value;
}
IgniteRenderingContext.pop();
@ -236,12 +260,12 @@ class IgniteTemplate {
}
if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(name, (converter != null ? converter(newValue) : newValue))));
this._callbacks.push(value.attachOnPush((list, items) => this.onPropertyChanged(name, (converter != null ? converter(list) : list))));
this._callbacks.push(value.attachOnUnshift((list, items) => this.onPropertyChanged(name, (converter != null ? converter(list) : list))));
this._callbacks.push(value.attachOnPop((list) => this.onPropertyChanged(name, (converter != null ? converter(list) : list))));
this._callbacks.push(value.attachOnShift((list) => this.onPropertyChanged(name, (converter != null ? converter(list) : list))));
this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onPropertyChanged(name, (converter != null ? converter(list) : list))));
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 ? 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 ? 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 ? converter(list) : list)));
this._properties[name] = {
value: (converter != null ? converter(value.value) : value.value),
@ -273,12 +297,12 @@ class IgniteTemplate {
}
if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onVariableChanged(name, (converter != null ? converter(newValue) : newValue))));
this._callbacks.push(value.attachOnPush((list, items) => this.onVariableChanged(name, (converter != null ? converter(list) : list))));
this._callbacks.push(value.attachOnUnshift((list, items) => this.onVariableChanged(name, (converter != null ? converter(list) : list))));
this._callbacks.push(value.attachOnPop((list) => this.onVariableChanged(name, (converter != null ? converter(list) : list))));
this._callbacks.push(value.attachOnShift((list) => this.onVariableChanged(name, (converter != null ? converter(list) : list))));
this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onVariableChanged(name, (converter != null ? converter(list) : list))));
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 ? 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 ? 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 ? converter(list) : list)));
this._variables[name] = {
value: (converter != null ? converter(value.value) : value.value)
@ -470,7 +494,7 @@ class IgniteTemplate {
*/
ref(refCallback) {
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);
} else {
this._refs.push(refCallback);
@ -1188,27 +1212,20 @@ class IgniteTemplate {
/**
* Called when a attribute on this template was changed and needs to be updated
* on the template's element.
* @param {any} oldValue
* @param {string} name
* @param {any} newValue
* @param {string} attributeName
* @ignore
*/
onAttributeChanged(oldValue, newValue, attributeName, converter) {
if (converter !== null) {
IgniteRenderingContext.push();
newValue = converter(newValue);
IgniteRenderingContext.pop();
}
onAttributeChanged(name, newValue) {
if (this.element) {
if (newValue == null || newValue == undefined) {
this.element.removeAttribute(attributeName);
this.element.removeAttribute(name);
} 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
* value to match this elements reference.
* @param {any} oldValue
* @param {any} newValue
* @param {any} ref
* @param {any} newValue
* @ignore
*/
onRefChanged(oldValue, newValue, ref) {
onRefChanged(ref, newValue) {
//Only set the reference value to ourself if it's not our element.
//Otherwise we will get a never ending loop.
if (this.element != newValue) {
@ -2401,20 +2417,16 @@ class slot extends IgniteTemplate {
* @param {Function} converter Optional converter function for the value if needed.
* @ignore
*/
onAttributeChanged(oldValue, newValue, attributeName, converter) {
if (converter !== null) {
newValue = converter(newValue);
}
onAttributeChanged(name, newValue) {
this.parent.elements.forEach((element) => {
if (newValue == null || newValue == undefined) {
element.removeAttribute(attributeName);
element.removeAttribute(name);
} else {
element.setAttribute(attributeName, newValue);
element.setAttribute(name, newValue);
}
});
this._attributes[attributeName] = newValue;
this._attributes[name] = newValue;
}
/**