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

Moved properties over to a object model and added a resetProperties function that will reset properties to their default values. Fixed a few bugs and cleaned up the code a little more.

Browse Source
This commit is contained in:
Matt Mo
2020-07-29 11:21:02 -07:00
parent 374defdc82
commit 274e09a59b
4 changed files with 147 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/ignite-template.js
View File

@ -1,4 +1,5 @@
import { IgniteProperty } from './ignite-html.js';
import { IgniteElement } from './ignite-element.js';
class IgniteTemplate {
constructor(items) {
@ -31,7 +32,7 @@ class IgniteTemplate {
class(...items) {
for (var i = 0; i < items.length; i++) {
if (items[i] instanceof IgniteProperty) {
this.callbacks.push(items[i].attach(this.onClassChanged));
this.callbacks.push(items[i].attach((oldValue, newValue) => this.onClassChanged(oldValue, newValue)));
this.classes.push(items[i].value);
} else {
this.classes.push(items[i]);
@ -64,7 +65,7 @@ class IgniteTemplate {
*/
property(name, value) {
if (value instanceof IgniteProperty) {
this.callbacks.push(value.attach((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name)));
this.callbacks.push(value.attach((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name)));
this.properties[name] = value.value;
} else {
this.properties[name] = value;
@ -113,14 +114,19 @@ class IgniteTemplate {
* @param {HTMLElement} sibling
*/
construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) {
return;
}
//Construct this element if we haven't already
if (!this.element) {
this.element = window.document.createElement(this.tagName);
if (sibling) {
parent.insertBefore(this.element, sibling);
} else {
parent.appendChild(this.element);
//If this template is creating an ignite element, pass back our template so the element
//can use it without having to create another one.
if (this.element instanceof IgniteElement) {
this.element.template = this;
}
//If the element has a onDisconnected function, attach to it
@ -162,6 +168,15 @@ class IgniteTemplate {
this.children[i].construct(this.element);
}
}
//If our element has not been added to the dom yet, then add it.
if (this.element.isConnected == false && this.element.parentElement == null) {
if (sibling) {
parent.insertBefore(this.element, sibling);
} else {
parent.appendChild(this.element);
}
}
}
/**
@ -206,13 +221,18 @@ class IgniteTemplate {
*/
onClassChanged(oldValue, newValue) {
console.log(`Class changed, oldValue: ${oldValue} newValue: ${newValue}`);
if (oldValue !== null && oldValue !== undefined && oldValue !== "" && oldValue !== " ") {
this.element.classList.remove(oldValue);
if (this.element) {
if (oldValue !== null && oldValue !== undefined && oldValue !== "" && oldValue !== " ") {
this.element.classList.remove(oldValue);
}
if (newValue !== null && newValue !== undefined && newValue !== "" && newValue !== " ") {
this.element.classList.add(newValue);
}
}
if (newValue !== null && newValue !== undefined && newValue !== "" && newValue !== " ") {
this.element.classList.add(newValue);
}
this.classes = this.classes.filter(cl => cl != oldValue && cl != newValue);
this.classes.push(newValue);
}
/**
@ -224,11 +244,15 @@ class IgniteTemplate {
*/
onAttributeChanged(oldValue, newValue, attributeName) {
console.log(`Attribute changed, oldValue: ${oldValue} newValue: ${newValue} attribute: ${attributeName}`);
if (newValue == null || newValue == undefined) {
this.element.removeAttribute(attributeName);
} else {
this.element.setAttribute(attributeName, newValue);
if (this.element) {
if (newValue == null || newValue == undefined) {
this.element.removeAttribute(attributeName);
} else {
this.element.setAttribute(attributeName, newValue);
}
}
this.attributes[attributeName] = newValue;
}
/**
@ -240,8 +264,11 @@ class IgniteTemplate {
*/
onPropertyChanged(oldValue, newValue, propertyName) {
console.log(`Property changed, oldValue: ${oldValue} newValue: ${newValue} property: ${propertyName}`);
if (this.element) {
this.element[propertyName] = newValue;
}
this.properties[propertyName] = newValue;
this.element[propertyName] = newValue;
}
}
@ -266,14 +293,38 @@ class html extends IgniteTemplate {
super([]);
this.code = code;
this.tagName = "shadow html";
this.elements = [];
}
construct(parent) {
if (!parent) {
parent = window.document.body;
construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) {
return;
}
parent.insertAdjacentHTML('beforeend', this.code);
if (!this.element) {
this.element = window.document.createTextNode("");
if (sibling) {
sibling.parentElement.insertBefore(this.element, sibling);
} else {
parent.appendChild(this.element);
}
}
//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.
var template = window.document.createElement("template");
template.innerHTML = this.code;
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();
}
}
}
@ -298,9 +349,19 @@ class list extends IgniteTemplate {
}
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(""); //Use a textnode as our placeholder
parent.appendChild(this.element);
if (sibling) {
sibling.parentElement.insertBefore(this.element, sibling);
} else {
parent.appendChild(this.element);
}
} else {
parent = this.element.parentElement;
}
@ -345,11 +406,16 @@ class property extends IgniteTemplate {
}
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) {
parent.insertBefore(this.element, sibling);
sibling.parentElement.insertBefore(this.element, sibling);
} else {
parent.appendChild(this.element);
}
@ -383,11 +449,16 @@ class slot extends IgniteTemplate {
}
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) {
parent.insertBefore(this.element, sibling);
sibling.parentElement.insertBefore(this.element, sibling);
} else {
parent.appendChild(this.element);
}