Renamed IgniteRenderingContext to IgniteRendering. Added a new IgniteHtml class which contains function to register elements for rendering and a global render function to start the rendering process. Changed elements css style class name to be more meaningful.

This commit is contained in:
2022-08-26 08:34:20 -07:00
parent 9af84da6a0
commit fca9af5f73
3 changed files with 135 additions and 99 deletions

View File

@ -1,4 +1,4 @@
import { IgniteObject, IgniteProperty, IgniteRenderingContext } from './ignite-html.js';
import { IgniteObject, IgniteProperty, IgniteRendering } from './ignite-html.js';
import { IgniteElement } from './ignite-element.js';
/**
@ -83,7 +83,7 @@ class IgniteTemplate {
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
class(name, converter = null) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (name instanceof IgniteProperty) {
this._callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged((converter != null ? converter(oldValue) : oldValue), (converter != null ? converter(newValue) : newValue))));
@ -132,7 +132,7 @@ class IgniteTemplate {
});
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -144,7 +144,7 @@ class IgniteTemplate {
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
attribute(name, value, converter = null) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(name, (converter ? converter(newValue) : newValue))));
@ -179,7 +179,7 @@ class IgniteTemplate {
this._attributes[name] = converter ? converter(value) : value;
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -193,7 +193,7 @@ class IgniteTemplate {
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
value(value, reflect = false, converter = null, live = false) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onValueChanged((converter != null ? converter(newValue) : newValue))));
@ -243,7 +243,7 @@ class IgniteTemplate {
this._elementValue = (converter != null ? converter(value) : value);
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -268,7 +268,7 @@ class IgniteTemplate {
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
property(name, value, reflect = false, converter = null) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (this._properties[name]) {
throw `Attempted to set a property twice on a IgniteTemplate: ${this.tagName}. This is not allowed and should be avoided.`;
@ -297,7 +297,7 @@ class IgniteTemplate {
};
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -309,7 +309,7 @@ class IgniteTemplate {
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
variable(name, value, converter = null) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (this._variables[name]) {
throw `Attempted to set a variable twice on a IgniteTemplate: ${this.tagName}. This is not allowed and should be avoided.`;
@ -332,7 +332,7 @@ class IgniteTemplate {
};
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -344,7 +344,7 @@ class IgniteTemplate {
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
reflect(name, target) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (this._reflecting[name] == undefined || this._reflecting[name] == null) {
this._reflecting[name] = [];
@ -356,7 +356,7 @@ class IgniteTemplate {
this._reflecting[name].push(target);
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -393,7 +393,7 @@ class IgniteTemplate {
* @returns This ignite template so funciton calls can be chained.
*/
innerHTML(value, converter = null) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(converter != null ? converter(newValue) : newValue)));
@ -427,7 +427,7 @@ class IgniteTemplate {
this._elementInnerHTML = (converter != null ? converter(value) : value);
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -438,7 +438,7 @@ class IgniteTemplate {
* @returns This ignite template.
*/
innerText(value, converter = null) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (value instanceof IgniteProperty) {
this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerTextChanged(converter != null ? converter(newValue) : newValue)));
@ -474,7 +474,7 @@ class IgniteTemplate {
this._elementInnerText = converter ? converter(value) : value;
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -532,7 +532,7 @@ class IgniteTemplate {
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
on(eventName, eventCallback) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (!this._events[eventName]) {
this._events[eventName] = [];
@ -545,7 +545,7 @@ class IgniteTemplate {
this._events[eventName].push(eventCallback);
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -715,7 +715,7 @@ class IgniteTemplate {
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onResize(callback) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (callback instanceof IgniteProperty) {
this._resizeObserverCallback.push(callback.value);
@ -723,7 +723,7 @@ class IgniteTemplate {
this._resizeObserverCallback.push(callback);
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -734,7 +734,7 @@ class IgniteTemplate {
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onIntersect(callback) {
IgniteRenderingContext.push();
IgniteRendering.push();
if (callback instanceof IgniteProperty) {
this._intersectObserverCallback.push(callback.value);
@ -742,7 +742,7 @@ class IgniteTemplate {
this._intersectObserverCallback.push(callback);
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -755,7 +755,7 @@ class IgniteTemplate {
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
style(name, value, priority = null, converter = null) {
IgniteRenderingContext.push();
IgniteRendering.push();
//If the name has a : remove it.
if (name && typeof name === "string" && name.includes(":")) {
@ -808,7 +808,7 @@ class IgniteTemplate {
this._styles[name] = { name: name, value: (converter != null ? converter(value) : value), priority: priority };
}
IgniteRenderingContext.pop();
IgniteRendering.pop();
return this;
}
@ -1358,13 +1358,13 @@ class IgniteTemplate {
if (this.element) {
//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.
IgniteRenderingContext.enter();
IgniteRendering.enter();
if (this.element[propertyName] instanceof IgniteProperty) {
this.element[propertyName].setValue(newValue, false);
} else {
this.element[propertyName] = newValue;
}
IgniteRenderingContext.leave();
IgniteRendering.leave();
}
this._properties[propertyName].value = newValue;
@ -2246,7 +2246,7 @@ class list extends IgniteTemplate {
onListChanged(newValue) {
this.list = newValue;
IgniteRenderingContext.enter();
IgniteRendering.enter();
try {
//Reset the list so it's scroll resets too. ScrollTop is unreliable.
@ -2257,11 +2257,11 @@ class list extends IgniteTemplate {
console.error("An error occurred during onListChanged:", error);
}
IgniteRenderingContext.leave();
IgniteRendering.leave();
}
onListPush(items) {
IgniteRenderingContext.enter();
IgniteRendering.enter();
try {
items.forEach(item => {
@ -2285,11 +2285,11 @@ class list extends IgniteTemplate {
console.error("An error occurred during onListPush:", error);
}
IgniteRenderingContext.leave();
IgniteRendering.leave();
}
onListUnshift(items) {
IgniteRenderingContext.enter();
IgniteRendering.enter();
try {
items.reverse();
@ -2313,7 +2313,7 @@ class list extends IgniteTemplate {
console.error("An error occurred during onListUnshift:", error);
}
IgniteRenderingContext.leave();
IgniteRendering.leave();
}
onListPop() {
@ -2343,7 +2343,7 @@ class list extends IgniteTemplate {
}
onListSplice(start, deleteCount, items) {
IgniteRenderingContext.enter();
IgniteRendering.enter();
//Remove any items that will no longer exist.
if (deleteCount > 0 && this.children.length > 0) {
@ -2390,7 +2390,7 @@ class list extends IgniteTemplate {
});
}
IgniteRenderingContext.leave();
IgniteRendering.leave();
}
onItemRemove(item) {
@ -2790,7 +2790,7 @@ class pagination extends IgniteTemplate {
onListChanged(oldValue, newValue) {
this.list = newValue;
IgniteRenderingContext.enter();
IgniteRendering.enter();
try {
this.construct(null); //The list changed, reconstruct this template.
@ -2798,11 +2798,11 @@ class pagination extends IgniteTemplate {
console.error("An error occurred during onListChanged:", error);
}
IgniteRenderingContext.leave();
IgniteRendering.leave();
}
onListPush(list, items) {
IgniteRenderingContext.enter();
IgniteRendering.enter();
try {
items.forEach(item => {
@ -2824,11 +2824,11 @@ class pagination extends IgniteTemplate {
console.error("An error occurred during onListPush:", error);
}
IgniteRenderingContext.leave();
IgniteRendering.leave();
}
onListUnshift(list, items) {
IgniteRenderingContext.enter();
IgniteRendering.enter();
try {
items.reverse();
@ -2851,7 +2851,7 @@ class pagination extends IgniteTemplate {
console.error("An error occurred during onListUnshift:", error);
}
IgniteRenderingContext.leave();
IgniteRendering.leave();
}
onListPop(list) {
@ -2877,7 +2877,7 @@ class pagination extends IgniteTemplate {
}
onListSplice(list, start, deleteCount, items) {
IgniteRenderingContext.enter();
IgniteRendering.enter();
//Remove any items that are needed.
if (deleteCount > 0 && this.children.length > 0) {
@ -2915,7 +2915,7 @@ class pagination extends IgniteTemplate {
//Recalculate the pagination.
this.recalculate();
IgniteRenderingContext.leave();
IgniteRendering.leave();
}
}
@ -3003,7 +3003,7 @@ class population extends IgniteTemplate {
}
onCountChange(newValue) {
IgniteRenderingContext.enter();
IgniteRendering.enter();
if (newValue != this.elements.length) {
//Remove all our existing elements.
@ -3027,7 +3027,7 @@ class population extends IgniteTemplate {
this.count = newValue;
}
IgniteRenderingContext.leave();
IgniteRendering.leave();
}
}