MontoyaTech/ignite-html
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/ignite-element.js
View File

@ -15,7 +15,7 @@ class IgniteElement extends HTMLElement {
* Returns the properties for this ignite element. * Returns the properties for this ignite element.
*/ */
get properties() { get properties() {
return []; return {};
} }
/** /**
@ -25,8 +25,11 @@ class IgniteElement extends HTMLElement {
createProperties() { createProperties() {
var props = this.properties; var props = this.properties;
for (var i = 0; i < props.length; i++) { var keys = Object.keys(props);
this[`_${props[i]}`] = new IgniteProperty(); for (var i = 0; i < keys.length; i++) {
var prop = new IgniteProperty();
this[`_${keys[i]}`] = prop;
prop._value = props[keys[i]];
((propName) => { ((propName) => {
Object.defineProperty(this, propName, { Object.defineProperty(this, propName, {
@ -38,7 +41,22 @@ class IgniteElement extends HTMLElement {
this[`_${propName}`].value = value; this[`_${propName}`].value = value;
} }
}); });
})(props[i]);
})(keys[i]);
}
}
/**
* Resets the properties for this element back to their original default
* value.
*/
resetProperties() {
var props = this.properties;
var keys = Object.keys(props);
for (var i = 0; i < keys.length; i++) {
this[keys[i]] = props[keys[i]];
} }
} }
@ -47,9 +65,13 @@ class IgniteElement extends HTMLElement {
* this function is called by the DOM upon this element being created somewhere. * this function is called by the DOM upon this element being created somewhere.
*/ */
connectedCallback() { connectedCallback() {
this.template = new IgniteTemplate(); //If we don't already have a template, make sure we create one,
this.template.element = this; //this can happen if this element was constructed in the DOM instead of within a template.
this.template.tagName = this.tagName; if (!this.template) {
this.template = new IgniteTemplate();
this.template.element = this;
this.template.tagName = this.tagName;
}
//Add any childNodes we have to the elements list within this //Add any childNodes we have to the elements list within this
this.childNodes.forEach((item) => this.elements.push(item)); this.childNodes.forEach((item) => this.elements.push(item));

117
src/ignite-template.js
View File

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

18
src/main-app.js
View File

@ -5,19 +5,25 @@ import { Sheet } from './sheet.js';
class MainApp extends IgniteElement { class MainApp extends IgniteElement {
constructor() { constructor() {
super(); super();
this.name = "Default Name";
} }
get properties() { get properties() {
return [ return {
"name", name: "I'm a boss!",
]; items: ["main1", "main2"],
sheetClass: "test"
};
} }
render() { render() {
return this.template return this.template
.child(new Sheet().property("name", this.name)) .child(
new Sheet()
.property("name", this.name)
.property("items", this.items)
.class(this.sheetClass)
.child(new html(`<h3>Im a child for sheet!</h3>`))
)
.child( .child(
new div( new div(
new html(`<h1>This is a slot!`), new html(`<h1>This is a slot!`),

26
src/sheet.js
View File

@ -1,23 +1,18 @@
import { IgniteElement } from './ignite-element.js'; import { IgniteElement } from './ignite-element.js';
import { IgniteTemplate, div, html, list, a } from './ignite-template.js'; import { IgniteTemplate, div, html, list, a, slot } from './ignite-template.js';
class Sheet extends IgniteElement { class Sheet extends IgniteElement {
constructor() { constructor() {
super(); super();
this.show = false;
this.items = [];
this.href = "www.google.com";
this.name = "default content";
} }
get properties() { get properties() {
return [ return {
"show", show: false,
"name", items: ["1", "2"],
"items", href: "www.google.com",
"href" name: "default content"
]; };
} }
render() { render() {
@ -27,9 +22,12 @@ class Sheet extends IgniteElement {
new div( new div(
new html("<h2>this is before</h2>"), new html("<h2>this is before</h2>"),
new list(this.items, (item) => { new list(this.items, (item) => {
return new a(this.name).attribute("href", this.href) return new a(new html(`<h3>${item}</h3>`)).attribute("href", this.href)
}), }),
new html("<h2>this is after</h2>") new html("<h2>this is after</h2>"),
new html("<h3>---- begin sheet's slot ----<h3>"),
new slot(this),
new html("<h3>---- end of slot ----</h3>")
) )
); );
} }