From af0348c8613f4ac5ab7b43b534b497a2efc18b0e Mon Sep 17 00:00:00 2001 From: Matt Mo Date: Wed, 13 Oct 2021 07:46:40 -0700 Subject: [PATCH] Cleaned up onAttributeChanged and attributes can now use arrays like styles. --- ignite-template.js | 90 ++++++++++++++++++++++++++-------------------- 1 file changed, 51 insertions(+), 39 deletions(-) diff --git a/ignite-template.js b/ignite-template.js index 2d925ad..1fa671e 100644 --- a/ignite-template.js +++ b/ignite-template.js @@ -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; } /**