From 274e09a59b56769df88686dc58af883418b85094 Mon Sep 17 00:00:00 2001 From: Matt Mo Date: Wed, 29 Jul 2020 11:21:02 -0700 Subject: [PATCH] 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. --- src/ignite-element.js | 36 ++++++++++--- src/ignite-template.js | 117 +++++++++++++++++++++++++++++++++-------- src/main-app.js | 18 ++++--- src/sheet.js | 26 +++++---- 4 files changed, 147 insertions(+), 50 deletions(-) diff --git a/src/ignite-element.js b/src/ignite-element.js index a30a843..0dc1fc1 100644 --- a/src/ignite-element.js +++ b/src/ignite-element.js @@ -15,7 +15,7 @@ class IgniteElement extends HTMLElement { * Returns the properties for this ignite element. */ get properties() { - return []; + return {}; } /** @@ -25,8 +25,11 @@ class IgniteElement extends HTMLElement { createProperties() { var props = this.properties; - for (var i = 0; i < props.length; i++) { - this[`_${props[i]}`] = new IgniteProperty(); + var keys = Object.keys(props); + for (var i = 0; i < keys.length; i++) { + var prop = new IgniteProperty(); + this[`_${keys[i]}`] = prop; + prop._value = props[keys[i]]; ((propName) => { Object.defineProperty(this, propName, { @@ -38,7 +41,22 @@ class IgniteElement extends HTMLElement { 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. */ connectedCallback() { - this.template = new IgniteTemplate(); - this.template.element = this; - this.template.tagName = this.tagName; + //If we don't already have a template, make sure we create one, + //this can happen if this element was constructed in the DOM instead of within a template. + 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 this.childNodes.forEach((item) => this.elements.push(item)); diff --git a/src/ignite-template.js b/src/ignite-template.js index 6b25cea..af7f327 100644 --- a/src/ignite-template.js +++ b/src/ignite-template.js @@ -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); } diff --git a/src/main-app.js b/src/main-app.js index 3c45013..7bb3598 100644 --- a/src/main-app.js +++ b/src/main-app.js @@ -5,19 +5,25 @@ import { Sheet } from './sheet.js'; class MainApp extends IgniteElement { constructor() { super(); - - this.name = "Default Name"; } get properties() { - return [ - "name", - ]; + return { + name: "I'm a boss!", + items: ["main1", "main2"], + sheetClass: "test" + }; } render() { 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(`

Im a child for sheet!

`)) + ) .child( new div( new html(`

This is a slot!`), diff --git a/src/sheet.js b/src/sheet.js index 9855f2e..5be7f34 100644 --- a/src/sheet.js +++ b/src/sheet.js @@ -1,23 +1,18 @@ 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 { constructor() { super(); - - this.show = false; - this.items = []; - this.href = "www.google.com"; - this.name = "default content"; } get properties() { - return [ - "show", - "name", - "items", - "href" - ]; + return { + show: false, + items: ["1", "2"], + href: "www.google.com", + name: "default content" + }; } render() { @@ -27,9 +22,12 @@ class Sheet extends IgniteElement { new div( new html("

this is before

"), new list(this.items, (item) => { - return new a(this.name).attribute("href", this.href) + return new a(new html(`

${item}

`)).attribute("href", this.href) }), - new html("

this is after

") + new html("

this is after

"), + new html("

---- begin sheet's slot ----

"), + new slot(this), + new html("

---- end of slot ----

") ) ); }