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

Properties now change their value if an array is modified. Properties don't invoke any callbacks if the value hasn't actually changed. And a few other improvements.

Browse Source
This commit is contained in:
Matt Mo 2021-02-12 18:53:09 -08:00
parent 4bbdf4865d
commit e99d1e9051
2 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
ignite-html.js
View File

@ -40,6 +40,11 @@ class IgniteProperty {
return;
}
//If the current value is the same as the old value don't do anything.
if (this._value === val) {
return;
}
//Get the old value
var old = this._value;
@ -60,15 +65,8 @@ class IgniteProperty {
//Attempt to patch the value if it's an array.
this.patchArray();
//If we want to reflect the value then bubble it up.
if (reflect) {
this.ignoreValueChange = true; //Ignore changes incase we are connected to any reflected properties.
this.reflected.forEach(reflect => reflect instanceof Function ? reflect(val) : (reflect.value = val));
this.ignoreValueChange = false;
}
//Invoke any callbacks letting them know the value changed.
this.invokeOnChange(old, val);
this.invokeOnChange(old, val, reflect);
}
patchArray() {
@ -140,8 +138,8 @@ class IgniteProperty {
return callback;
}
this._value.attachonSplice = function (func) {
var callback = new IgniteCallback(func, detach => this.detachonSplice(detach));
this._value.attachOnSplice = function (func) {
var callback = new IgniteCallback(func, detach => this.detachOnSplice(detach));
this.onSpliceCallbacks.push(callback);
return callback;
}
@ -162,7 +160,7 @@ class IgniteProperty {
this.onShiftCallbacks = this.onShiftCallbacks.filter(shift => shift != callback);
}
this._value.detachonSplice = function (callback) {
this._value.detachOnSplice = function (callback) {
this.onSpliceCallbacks = this.onSpliceCallbacks.filter(slice => slice != callback);
}
}
@ -173,43 +171,67 @@ class IgniteProperty {
this.arrayCallbacks.push(this._value.attachOnPop(() => this.invokeOnPop()));
this.arrayCallbacks.push(this._value.attachOnShift(() => this.invokeOnShift()));
this.arrayCallbacks.push(this._value.attachOnUnshift((items) => this.invokeOnUnshift(items)));
this.arrayCallbacks.push(this._value.attachonSplice((start, deleteCount, items) => this.invokeonSplice(start, deleteCount, items)));
this.arrayCallbacks.push(this._value.attachOnSplice((start, deleteCount, items) => this.invokeOnSplice(start, deleteCount, items)));
}
}
invokeOnChange(oldValue, newValue) {
reflect() {
this.ignoreValueChange = true; //Ignore changes incase we are connected to any reflected properties.
this.reflected.forEach(reflect => reflect instanceof Function ? reflect(this._value) : (reflect.value = this._value));
this.ignoreValueChange = false;
}
invokeOnChange(oldValue, newValue, reflect = true) {
//Enter a new rendering context since this event may contain code that expects a new context.
IgniteRenderingContext.push();
if (reflect) {
this.reflect();
}
this.onChangeCallbacks.forEach(callback => callback.invoke(oldValue, newValue));
IgniteRenderingContext.pop();
}
invokeOnPush(items) {
invokeOnPush(items, reflect = true) {
IgniteRenderingContext.push();
if (reflect) {
this.reflect();
}
this.onPushCallbacks.forEach(callback => callback.invoke(this._value, items));
IgniteRenderingContext.pop();
}
invokeOnPop() {
invokeOnPop(reflect = true) {
IgniteRenderingContext.push();
if (reflect) {
this.reflect();
}
this.onPopCallbacks.forEach(callback => callback.invoke(this._value));
IgniteRenderingContext.pop();
}
invokeOnShift() {
invokeOnShift(reflect = true) {
IgniteRenderingContext.push();
if (reflect) {
this.reflect();
}
this.onShiftCallbacks.forEach(callback => callback.invoke(this._value));
IgniteRenderingContext.pop();
}
invokeOnUnshift(items) {
invokeOnUnshift(items, reflect = true) {
IgniteRenderingContext.push();
if (reflect) {
this.reflect();
}
this.onUnshiftCallbacks.forEach(callback => callback.invoke(this._value, items));
IgniteRenderingContext.pop();
}
invokeonSplice(start, deleteCount, items) {
invokeOnSplice(start, deleteCount, items, reflect = true) {
IgniteRenderingContext.push();
if (reflect) {
this.reflect();
}
this.onSpliceCallbacks.forEach(callback => callback.invoke(this._value, start, deleteCount, items));
IgniteRenderingContext.pop();
}
@ -245,7 +267,7 @@ class IgniteProperty {
}
attachOnSplice(onSplice) {
var callback = new IgniteCallback(onSplice, detach => this.detachonSplice(detach));
var callback = new IgniteCallback(onSplice, detach => this.detachOnSplice(detach));
this.onSpliceCallbacks.push(callback);
return callback;
}
@ -270,7 +292,7 @@ class IgniteProperty {
this.onUnshiftCallbacks = this.onUnshiftCallbacks.filter(unshift => unshift != callback);
}
detachonSplice(callback) {
detachOnSplice(callback) {
this.onSpliceCallbacks = this.onSpliceCallbacks.filter(slice => slice != callback);
}
}

20
ignite-template.js
View File

@ -211,7 +211,13 @@ class IgniteTemplate {
}
if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name, converter)));
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._properties[name] = {
value: (converter != null ? converter(value.value) : value.value),
reflect: (reflect == true ? value : null)
@ -1005,19 +1011,11 @@ class IgniteTemplate {
/**
* Called when a property on this template was changed and needs to be updated
* on the template's element.
* @param {any} oldValue
* @param {any} newValue
* @param {string} propertyName
* @param {Function} converter
* @param {any} newValue
* @ignore
*/
onPropertyChanged(oldValue, newValue, propertyName, converter) {
if (converter !== null) {
IgniteRenderingContext.push();
newValue = converter(newValue);
IgniteRenderingContext.pop();
}
onPropertyChanged(propertyName, newValue) {
if (this.element) {
//Use the set value function and don't reflect the change because it came from above which
//would be the reflected property, this reduces some functions being called twice that don't need to be.