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

Ignite properties now patch lists to capture push/pop events so that when used in a list template the whole list doesn't have to be rerendered. Also cleaned up some code and moved things around.

Browse Source
This commit is contained in:
Matt Mo 2020-08-22 16:15:45 -07:00
parent a22d5cc6aa
commit 56530fc966
4 changed files with 154 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/ignite-element.js
View File

@ -38,9 +38,8 @@ class IgniteElement extends HTMLElement {
var keys = Object.keys(props);
for (var i = 0; i < keys.length; i++) {
var prop = new IgniteProperty();
let prop = new IgniteProperty(props[keys[i]]);
this[`_${keys[i]}`] = prop;
prop._value = props[keys[i]];
((propName) => {
Object.defineProperty(this, propName, {
@ -56,8 +55,6 @@ class IgniteElement extends HTMLElement {
this[`_${propName}`].value = value;
}
});
})(keys[i]);
}
}

128
src/ignite-html.js
View File

@ -3,9 +3,14 @@
* can be used to invoke call back functions when the value of the property changes.
*/
class IgniteProperty {
constructor() {
this.callbacks = [];
this._value = null;
constructor(val) {
this.onChangeCallbacks = [];
this.onPushCallbacks = [];
this.onPopCallbacks = [];
this._value = val;
//Attempt to patch the value if it's a list.
this.patchListValue();
}
get value() {
@ -16,15 +21,64 @@ class IgniteProperty {
var old = this._value;
this._value = val;
//Attempt to patch the value if it's a list.
this.patchListValue();
//Invoke any callbacks letting them know the value changed.
for (var i = 0; i < this.callbacks.length; i++) {
this.callbacks[i].invoke(old, val);
this.invokeOnChange(old, val);
}
patchListValue() {
if (Array.isArray(this._value)) {
let prop = this;
this._value.push = function () {
var len = Array.prototype.push.apply(this, arguments);
prop.invokeOnPush();
return len;
};
this._value.pop = function () {
var len = Array.prototype.pop.apply(this, arguments);
prop.invokeOnPop();
return len;
}
}
}
attach(onChange) {
var callback = new IgnitePropertyCallback(this, onChange);
this.callbacks.push(callback);
invokeOnChange(oldValue, newValue) {
for (var i = 0; i < this.onChangeCallbacks.length; i++) {
this.onChangeCallbacks[i].invoke(oldValue, newValue);
}
}
invokeOnPush() {
for (var i = 0; i < this.onPushCallbacks.length; i++) {
this.onPushCallbacks[i].invoke(null, this._value);
}
}
invokeOnPop() {
for (var i = 0; i < this.onPopCallbacks.length; i++) {
this.onPopCallbacks[i].invoke(null, this._value);
}
}
attachOnChange(onChange) {
var callback = new IgnitePropertyOnChangeCallback(this, onChange);
this.onChangeCallbacks.push(callback);
return callback;
}
attachOnPush(onPush) {
var callback = new IgnitePropertyOnPushCallback(this, onPush);
this.onPushCallbacks.push(callback);
return callback;
}
attachOnPop(onPop) {
var callback = new IgnitePropertyOnPopCallback(this, onPop);
this.onPopCallbacks.push(callback);
return callback;
}
}
@ -38,10 +92,10 @@ IgniteProperty.prototype.toString = function () {
}
/**
* The outline of a ignite property callback that allows
* The outline of a ignite property onchange callback that allows
* disconnecting of callbacks on demand when they are no longer needed.
*/
class IgnitePropertyCallback {
class IgnitePropertyOnChangeCallback {
constructor(property, callback) {
this.callback = callback;
this.property = property;
@ -57,7 +111,59 @@ class IgnitePropertyCallback {
this.callback = null;
if (this.property) {
this.property.callbacks = this.property.callbacks.filter(callback => callback != this);
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;
}
}

40
src/ignite-template.js
View File

@ -39,7 +39,7 @@ class IgniteTemplate {
class(...items) {
for (var i = 0; i < items.length; i++) {
if (items[i] instanceof IgniteProperty) {
this.callbacks.push(items[i].attach((oldValue, newValue) => this.onClassChanged(oldValue, newValue)));
this.callbacks.push(items[i].attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue)));
this.classes.push(items[i].value);
} else {
this.classes.push(items[i]);
@ -56,7 +56,7 @@ class IgniteTemplate {
*/
attribute(name, value) {
if (value instanceof IgniteProperty) {
this.callbacks.push(value.attach((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name)));
this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name)));
this.attributes[name] = value.value;
} else {
this.attributes[name] = value;
@ -72,7 +72,7 @@ class IgniteTemplate {
*/
property(name, value) {
if (value instanceof IgniteProperty) {
this.callbacks.push(value.attach((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name)));
this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name)));
this.properties[name] = value.value;
} else {
this.properties[name] = value;
@ -110,7 +110,7 @@ class IgniteTemplate {
*/
ref(item) {
if (item instanceof IgniteProperty) {
this.callbacks.push(item.attach((oldValue, newValue) => this.onRefChanged(oldValue, newValue, item)));
this.callbacks.push(item.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, item)));
this.refs.push((element) => item.value = element);
} else {
this.refs.push(item);
@ -130,7 +130,7 @@ class IgniteTemplate {
}
if (func instanceof IgniteProperty) {
this.callbacks.push(func.attach((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName)));
this.callbacks.push(func.attachOnChange((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName)));
this.events[eventName].push(func.value);
} else {
this.events[eventName].push(func);
@ -153,7 +153,7 @@ class IgniteTemplate {
}
if (func instanceof IgniteProperty) {
this.callbacks.push(func.attach((oldValue, newValue) => {
this.callbacks.push(func.attachOnChange((oldValue, newValue) => {
//Create a new wrapped function to check for the enter key being pressed.
var wrapped = (e) => {
if (e.key === 'Enter') {
@ -201,7 +201,7 @@ class IgniteTemplate {
*/
style(name, value, priority = null) {
if (value instanceof IgniteProperty) {
this.callbacks.push(value.attach((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name)));
this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name)));
this.styles[name] = { name: name, value: value.value, priority: priority };
} else {
this.styles[name] = { name: name, value: value, priority: priority };
@ -480,7 +480,7 @@ class html extends IgniteTemplate {
super([]);
if (code instanceof IgniteProperty) {
this.callbacks.push(code.attach((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue)));
this.callbacks.push(code.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue)));
this.code = code.value;
} else {
this.code = code;
@ -539,7 +539,9 @@ class list extends IgniteTemplate {
this.tagName = "shadow list";
if (list instanceof IgniteProperty) {
this.callbacks.push(list.attach((oldValue, newValue) => this.onListChanged(oldValue, newValue)));
this.callbacks.push(list.attachOnChange((oldValue, newValue) => this.onListChanged(oldValue, newValue)));
this.callbacks.push(list.attachOnPush((oldValue, newValue) => this.onListPush(oldValue, newValue)));
this.callbacks.push(list.attachOnPop((oldValue, newValue) => this.onListPop(oldValue, newValue)));
this.list = list.value;
} else {
@ -608,6 +610,26 @@ class list extends IgniteTemplate {
IgniteRenderingContext.leave();
}
onListPush(oldValue, newValue) {
IgniteRenderingContext.enter();
try {
var template = this.forEach(this.list[this.list.length - 1]);
template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling);
this.children.push(template);
this.elements.push(template.element);
} catch { }
IgniteRenderingContext.leave();
}
onListPop(oldValue, newValue) {
this.children[this.children.length - 1].deconstruct();
this.children.pop();
this.elements.pop();
}
}
class slot extends IgniteTemplate {

8
src/sheet.js
View File

@ -35,9 +35,11 @@ class Sheet extends IgniteElement {
new div(
new input().attribute("type", "text").onEnter(this.enter),
new html("<h2>this is before</h2>"),
new list(this.items, (item) => {
return new a(new html(`<h3>${item}</h3>`)).attribute("href", this.href)
}),
new div(
new list(this.items, (item) => {
return new a(new html(`<h3>${item}</h3>`)).attribute("href", this.href)
})
),
new html("<h2>this is after</h2>"),
new html("<h3>---- begin sheet's slot ----<h3>"),
new slot(this),