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:
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user