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

Removed property template, made html template do the same thing and now it is automatically used if a property is added as a child. Strings now also use the html template. Added a check to warn if adding a child that is not supported.

Browse Source
This commit is contained in:
Matt Mo 2020-07-29 14:01:41 -07:00
parent 4f2d3aa63c
commit feac134353
1 changed files with 36 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/ignite-template.js
View File

@ -16,9 +16,13 @@ class IgniteTemplate {
if (items) {
for (var i = 0; i < items.length; i++) {
if (items[i] instanceof IgniteProperty) {
this.children.push(new property(items[i]));
} else {
this.children.push(new html(items[i]));
} else if (items[i] instanceof String || typeof items[i] === 'string') {
this.children.push(new html(items[i]));
} else if (items[i] instanceof IgniteTemplate || items[i].prototype instanceof IgniteTemplate) {
this.children.push(items[i]);
} else {
console.warn("Attempted to add a child for template: ", this, " which is not supported. Unsupported child element: ", items[i]);
}
}
}
@ -82,9 +86,13 @@ class IgniteTemplate {
child(...items) {
for (var i = 0; i < items.length; i++) {
if (items[i] instanceof IgniteProperty) {
this.children.push(new property(items[i]));
} else {
this.children.push(new html(items[i]));
} else if (items[i] instanceof String || typeof items[i] === 'string') {
this.children.push(new html(items[i]));
} else if (items[i] instanceof IgniteTemplate || items[i].prototype instanceof IgniteTemplate) {
this.children.push(items[i]);
} else {
console.warn("Attempted to add a child for template: ", this, " which is not supported. Unsupported child element: ", items[i]);
}
}
@ -161,11 +169,7 @@ class IgniteTemplate {
//Construct the children under this element
for (var i = 0; i < this.children.length; i++) {
if (this.children[i] instanceof String || typeof this.children[i] === 'string') {
this.element.appendChild(document.createTextNode(this.children[i]));
} else if (this.children[i] instanceof IgniteTemplate || this.children[i].prototype instanceof IgniteTemplate) {
this.children[i].construct(this.element);
}
this.children[i].construct(this.element);
}
//If our element has not been added to the dom yet, then add it.
@ -307,7 +311,14 @@ class a extends IgniteTemplate {
class html extends IgniteTemplate {
constructor(code) {
super([]);
this.code = code;
if (code instanceof IgniteProperty) {
this.callbacks.push(code.attach((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue)));
this.code = code.value;
} else {
this.code = code;
}
this.tagName = "shadow html";
this.elements = [];
}
@ -328,10 +339,9 @@ class html extends IgniteTemplate {
}
}
//If we haven't created any elements before then create some now.
if (this.elements.length == 0) {
//Create a template to hold the elements that will be created from the
//properties value and then add them to the DOM and store their pointer.
//Create a template to hold the elements that will be created from the
//properties value and then add them to the DOM and store their pointer.
if (this.elements.length == 0 && this.code) {
var template = window.document.createElement("template");
template.innerHTML = this.code;
while (template.content.childNodes.length > 0) {
@ -342,6 +352,18 @@ class html extends IgniteTemplate {
template.remove();
}
}
onPropertyChanged(oldValue, newValue) {
//Update our code to the new value from the property.
this.code = newValue;
//Remove any elements that already exist.
this.elements.forEach((item) => item.remove());
this.elements = [];
//Reconstruct them html
this.construct(null, null);
}
}
class list extends IgniteTemplate {
@ -412,51 +434,6 @@ class list extends IgniteTemplate {
}
}
class property extends IgniteTemplate {
constructor(prop) {
super(null);
this.property = prop;
this.elements = [];
this.callbacks.push(this.property.attach((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue)));
}
construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) {
return;
}
if (!this.element) {
this.element = window.document.createTextNode("");
if (sibling) {
sibling.parentElement.insertBefore(this.element, sibling);
} else {
parent.appendChild(this.element);
}
}
//Remove any elements that already exist.
this.elements.forEach((item) => item.remove());
//Create a template to hold the elements that will be created from the
//properties value and then add them to the DOM and store their pointer.
var template = window.document.createElement("template");
template.innerHTML = this.property.value;
while (template.content.childNodes.length > 0) {
var item = template.content.childNodes[0];
this.element.parentElement.insertBefore(item, this.element);
this.elements.push(item);
}
template.remove();
}
onPropertyChanged(oldValue, newValue) {
this.construct(null, null);
}
}
class slot extends IgniteTemplate {
constructor(element) {
super(null);