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
Download Patch File Download Diff File Expand all files Collapse all files

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 {