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

Cleaned up code and fixed an issue with the gulp file where dev was still minifying js. Added reflected properties support and fixed a few other issues.

Browse Source
This commit is contained in:
Matt Mo
2020-08-23 11:50:31 -07:00
parent d4df41e427
commit f4ac568976
7 changed files with 151 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
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) {
@ -25,7 +26,7 @@ class IgniteTemplate {
} 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]);
throw `Attempted to add a child for template: ${this.tagName} which is not supported. Child: ${items[i]}`;
}
}
}
@ -70,12 +71,16 @@ class IgniteTemplate {
* @param {string} name
* @param {any} value
*/
property(name, value) {
property(name, value, reflect = false) {
if (this.properties[name]) {
throw `Attempted to set a property twice on a IgniteTemplate: ${this.tagName}. This is not allowed and should be avoided.`;
}
if (value instanceof IgniteProperty) {
this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name)));
this.properties[name] = value.value;
this.properties[name] = { value: value.value, reflect: (reflect == true ? value : null) };
} else {
this.properties[name] = value;
this.properties[name] = { value: value, reflect: null };
}
return this;
@ -97,7 +102,7 @@ class IgniteTemplate {
} 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]);
throw `Attempted to add a child for template: ${this.tagName} which is not supported. Child: ${items[i]}`;
}
}
@ -139,12 +144,20 @@ class IgniteTemplate {
return this;
}
/**
* Adds a on click event handler to this template.
* @param {Any} func
*/
onClick(func) {
this.on("click", func);
return this;
}
/**
* Adds a on enter key press event handler to this template.
* @param {Any} func
*/
onEnter(func) {
var eventName = "keydown";
@ -226,8 +239,11 @@ class IgniteTemplate {
if (!this.element) {
this.element = window.document.createElement(this.tagName);
//Pass back our template to the element we are creating.
this.element.template = this;
//Pass back our template to the element we are creating if it's not a ignite element, since
//it will have it's own template automatically.
if (!(this.element instanceof IgniteElement)) {
this.element.template = this;
}
//If the element has a onDisconnected function, attach to it
//(This way if a custom element is removed we can deconstruct and cleanup)
@ -235,7 +251,7 @@ class IgniteTemplate {
this.element.onDisconnected = () => this.deconstruct();
}
//Invoke any refs we have
//Invoke any refs we have and pass back the element reference.
this.refs.forEach((ref) => ref(this.element));
}
@ -274,7 +290,11 @@ class IgniteTemplate {
//Set the properties on this element
var keys = Object.keys(this.properties);
for (var i = 0; i < keys.length; i++) {
this.element[keys[i]] = this.properties[keys[i]];
this.element[keys[i]] = this.properties[keys[i]].value;
if (this.properties[keys[i]].reflect != null) {
this.element[keys[i]].reflected.push(this.properties[keys[i]].reflect);
}
}
//Construct the children under this element
@ -297,8 +317,6 @@ class IgniteTemplate {
* there are no memory leaks.
*/
deconstruct() {
console.log(`Deconstructing ${this.tagName}`);
//Remove and disconnect all events
if (this.element && this.events) {
var keys = Object.keys(this.events);
@ -390,10 +408,12 @@ class IgniteTemplate {
*/
onPropertyChanged(oldValue, newValue, propertyName) {
if (this.element) {
this.element[propertyName] = newValue;
//Use the set value function and don't reflect the change because it came from above which
//would be the reflected property, this reduces some functions being called twice that don't need to be.
this.element[`_${propertyName}`].setValue(newValue, false);
}
this.properties[propertyName] = newValue;
this.properties[propertyName].value = newValue;
}
/**
@ -475,6 +495,70 @@ class input extends IgniteTemplate {
}
}
class h1 extends IgniteTemplate {
constructor(...items) {
super(items);
this.tagName = "h1";
}
}
class h2 extends IgniteTemplate {
constructor(...items) {
super(items);
this.tagName = "h2";
}
}
class h3 extends IgniteTemplate {
constructor(...items) {
super(items);
this.tagName = "h3";
}
}
class h4 extends IgniteTemplate {
constructor(...items) {
super(items);
this.tagName = "h4";
}
}
class h5 extends IgniteTemplate {
constructor(...items) {
super(items);
this.tagName = "h5";
}
}
class p extends IgniteTemplate {
constructor(...items) {
super(items);
this.tagName = "p";
}
}
class span extends IgniteTemplate {
constructor(...items) {
super(items);
this.tagName = "span";
}
}
class i extends IgniteTemplate {
constructor(...items) {
super(items);
this.tagName = "i";
}
}
class html extends IgniteTemplate {
constructor(code) {
super([]);
@ -600,15 +684,15 @@ class list extends IgniteTemplate {
}
onListChanged(oldValue, newValue) {
console.log("On List changed:", newValue);
this.list = newValue;
IgniteRenderingContext.enter();
try {
this.construct(null); //The list changed, reconstruct this template.
} catch (error) { console.error(error); }
} catch (error) {
console.error(error);
}
IgniteRenderingContext.leave();
}
@ -674,5 +758,13 @@ export {
list,
a,
input,
h1,
h2,
h3,
h4,
h5,
p,
span,
i,
slot
};