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

Simplified callbacks into a single class with a detach function option so we can use them generically. Patached arrays can have multiple on push/on pop callbacks and moved over to this new model. Needs more testing and cleanup.

Browse Source
This commit is contained in:
Matt Mo 2020-08-22 18:11:37 -07:00
parent 56530fc966
commit d4df41e427
3 changed files with 75 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/ignite-html.js
View File

@ -7,10 +7,11 @@ class IgniteProperty {
this.onChangeCallbacks = [];
this.onPushCallbacks = [];
this.onPopCallbacks = [];
this.callbacks = [];
this._value = val;
//Attempt to patch the value if it's a list.
this.patchListValue();
this.patchList();
}
get value() {
@ -21,28 +22,59 @@ class IgniteProperty {
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.patchListValue();
this.patchList();
//Invoke any callbacks letting them know the value changed.
this.invokeOnChange(old, val);
}
patchListValue() {
if (Array.isArray(this._value)) {
let prop = this;
patchList() {
if (Array.isArray(this._value) && this._value.onPushCallbacks == undefined) {
this._value.onPushCallbacks = [];
this._value.onPopCallbacks = [];
this._value.push = function () {
var len = Array.prototype.push.apply(this, arguments);
prop.invokeOnPush();
this.onPushCallbacks.forEach((callback) => callback.invoke(arguments[0]));
return len;
};
this._value.pop = function () {
var len = Array.prototype.pop.apply(this, arguments);
prop.invokeOnPop();
this.onPopCallbacks.forEach((callback) => callback.invoke());
return len;
}
this._value.attachOnPush = function (func) {
var callback = new IgniteCallback(func, (detach) => this.detachOnPush(detach));
this.onPushCallbacks.push(callback);
return callback;
}
this._value.attachOnPop = function (func) {
var callback = new IgniteCallback(func, (detach) => this.detachOnPop(detach));
this.onPopCallbacks.push(callback);
return callback;
}
this._value.detachOnPush = function (callback) {
this.onPushCallbacks = this.onPushCallbacks.filter(push => push != callback);
}
this._value.detachOnPop = function (callback) {
this.onPopCallbacks = this.onPopCallbacks.filter(pop => pop != callback);
}
this.callbacks.push(this._value.attachOnPush(() => this.invokeOnPush()));
this.callbacks.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()));
}
}
@ -65,22 +97,34 @@ class IgniteProperty {
}
attachOnChange(onChange) {
var callback = new IgnitePropertyOnChangeCallback(this, onChange);
var callback = new IgniteCallback(onChange, (detach) => this.detachOnChange(detach));
this.onChangeCallbacks.push(callback);
return callback;
}
attachOnPush(onPush) {
var callback = new IgnitePropertyOnPushCallback(this, onPush);
var callback = new IgniteCallback(onPush, (detach) => this.detachOnPush(detach));
this.onPushCallbacks.push(callback);
return callback;
}
attachOnPop(onPop) {
var callback = new IgnitePropertyOnPopCallback(this, onPop);
var callback = new IgniteCallback(onPop, (detach) => this.detachOnPop(detach));
this.onPopCallbacks.push(callback);
return callback;
}
detachOnChange(callback) {
this.onChangeCallbacks = this.onChangeCallbacks.filter(change => change != callback);
}
detachOnPush(callback) {
this.onPushCallbacks = this.onPushCallbacks.filter(push => push != callback);
}
detachOnPop(callback) {
this.onPopCallbacks = this.onPopCallbacks.filter(pop => pop != callback);
}
}
/**
@ -92,79 +136,28 @@ IgniteProperty.prototype.toString = function () {
}
/**
* The outline of a ignite property onchange callback that allows
* disconnecting of callbacks on demand when they are no longer needed.
* The outline of a ignite callback that can be invoked and disconnected
* to help maintain and cleanup callbacks.
*/
class IgnitePropertyOnChangeCallback {
constructor(property, callback) {
class IgniteCallback {
constructor(callback, detach) {
this.callback = callback;
this.property = property;
this.detach = detach;
}
invoke(oldValue, newValue) {
invoke(...params) {
console.log("Invoke with params:", params);
if (this.callback) {
this.callback(oldValue, newValue);
this.callback(...params);
}
}
disconnect() {
this.callback = null;
if (this.property) {
this.property.onChangeCallbacks = this.property.onChangeCallbacks.filter(callback => callback != this);
this.property = null;
}
}
}
/**
* The outline of a ignite property onpush callback that allows
* disconnecting of callbacks on demand when they are no longer needed.
*/
class IgnitePropertyOnPushCallback {
constructor(property, callback) {
this.callback = callback;
this.property = property;
}
invoke(oldValue, newValue) {
if (this.callback) {
this.callback(oldValue, newValue);
}
}
disconnect() {
this.callback = null;
if (this.property) {
this.property.onPushCallbacks = this.property.onPushCallbacks.filter(callback => callback != this);
this.property = null;
}
}
}
/**
* The outline of a ignite property onpop callback that allows
* disconnecting of callbacks on demand when they are no longer needed.
*/
class IgnitePropertyOnPopCallback {
constructor(property, callback) {
this.callback = callback;
this.property = property;
}
invoke(oldValue, newValue) {
if (this.callback) {
this.callback(oldValue, newValue);
}
}
disconnect() {
this.callback = null;
if (this.property) {
this.property.onPopCallbacks = this.property.onPopCallbacks.filter(callback => callback != this);
this.property = null;
if (this.detach) {
this.detach(this);
}
}
}

11
src/ignite-template.js
View File

@ -600,13 +600,15 @@ class list extends IgniteTemplate {
}
onListChanged(oldValue, newValue) {
console.log("On List changed:", newValue);
this.list = newValue;
IgniteRenderingContext.enter();
try {
this.construct(null); //The list changed, reconstruct this template.
} catch { }
} catch (error) { console.error(error); }
IgniteRenderingContext.leave();
}
@ -616,7 +618,12 @@ class list extends IgniteTemplate {
try {
var template = this.forEach(this.list[this.list.length - 1]);
template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling);
if (this.elements.length > 0) {
template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling);
} else {
template.construct(this.element.parentElement, null);
}
this.children.push(template);
this.elements.push(template.element);

2
src/main-app.js
View File

@ -26,7 +26,7 @@ class MainApp extends IgniteElement {
.class(this.sheetClass)
.child(new html(`<h3>Im a child for sheet!</h3>`))
)
.child(new Sheet())
.child(new Sheet().property("items", this.items))
.child(
new div(
new html(`<h1>This is a slot!`),