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

Cleaned up code and fixed an issue with the gulp file where dev was still minifying js. Added reflected properties support and fixed a few other issues.

Browse Source
This commit is contained in:
Matt Mo
2020-08-23 11:50:31 -07:00
parent d4df41e427
commit f4ac568976
7 changed files with 151 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/ignite-html.js
View File

@ -7,11 +7,13 @@ class IgniteProperty {
this.onChangeCallbacks = [];
this.onPushCallbacks = [];
this.onPopCallbacks = [];
this.callbacks = [];
this.arrayCallbacks = [];
this.reflected = [];
this._value = val;
this.ignoreValueChange = false;
//Attempt to patch the value if it's a list.
this.patchList();
this.patchArray();
}
get value() {
@ -19,21 +21,39 @@ class IgniteProperty {
}
set value(val) {
this.setValue(val, true);
}
setValue(val, reflect) {
//If the ignore value change flag is set exit.
if (this.ignoreValueChange) {
return;
}
var old = this._value;
this._value = val;
//Disconnect any existing callbacks
this.callbacks.forEach(callback => callback.disconnect());
this.callbacks = [];
//Attempt to patch the value if it's a list.
this.patchList();
//Attempt to patch the value if it's an array.
this.patchArray();
//Invoke any callbacks letting them know the value changed.
this.invokeOnChange(old, val);
if (reflect) {
this.ignoreValueChange = true; //Ignore changes incase we are connected to any reflected properties.
this.reflected.forEach(reflect => reflect.value = val);
this.ignoreValueChange = false;
}
}
patchList() {
patchArray() {
//Disconnect any existing array callbacks
if (this.arrayCallbacks.length > 0) {
this.arrayCallbacks.forEach(callback => callback.disconnect());
this.arrayCallbacks = [];
}
//If our value is an array and it hasn't been patched, then patch it.
if (Array.isArray(this._value) && this._value.onPushCallbacks == undefined) {
this._value.onPushCallbacks = [];
this._value.onPopCallbacks = [];
@ -70,11 +90,12 @@ class IgniteProperty {
this.onPopCallbacks = this.onPopCallbacks.filter(pop => pop != callback);
}
this.callbacks.push(this._value.attachOnPush(() => this.invokeOnPush()));
this.callbacks.push(this._value.attachOnPop(() => this.invokeOnPop()));
this.arrayCallbacks.push(this._value.attachOnPush(() => this.invokeOnPush()));
this.arrayCallbacks.push(this._value.attachOnPop(() => this.invokeOnPop()));
} else if (Array.isArray(this._value) && this._value.onPushCallbacks) {
this.callbacks.push(this._value.attachOnPush(() => this.invokeOnPush()));
this.callbacks.push(this._value.attachOnPop(() => this.invokeOnPop()));
//This array has already been patched but attach to it so we get callbacks.
this.arrayCallbacks.push(this._value.attachOnPush(() => this.invokeOnPush()));
this.arrayCallbacks.push(this._value.attachOnPop(() => this.invokeOnPop()));
}
}
@ -146,8 +167,6 @@ class IgniteCallback {
}
invoke(...params) {
console.log("Invoke with params:", params);
if (this.callback) {
this.callback(...params);
}
@ -195,5 +214,7 @@ class IgniteRenderingContext {
window.IgniteRenderingContext = IgniteRenderingContext;
export {
IgniteProperty
IgniteProperty,
IgniteRenderingContext,
IgniteCallback
};