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

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.

Browse Source
This commit is contained in:
MattMo 2022-08-26 08:34:20 -07:00
parent 9af84da6a0
commit fca9af5f73
3 changed files with 135 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ignite-element.js
View File

@ -1,4 +1,4 @@
import { IgniteProperty, IgniteCallback, IgniteRenderingContext } from './ignite-html.js'; import { IgniteProperty, IgniteCallback, IgniteRendering } from './ignite-html.js';
import { IgniteTemplate } from './ignite-template.js'; import { IgniteTemplate } from './ignite-template.js';
/** /**
@ -73,9 +73,9 @@ class IgniteElement extends HTMLElement {
//Init the element before connected callback is fired //Init the element before connected callback is fired
//Create a new rendering context so the init method can access properties correctly. //Create a new rendering context so the init method can access properties correctly.
IgniteRenderingContext.push(); IgniteRendering.push();
this.init(); this.init();
IgniteRenderingContext.pop(); IgniteRendering.pop();
} }
/** /**
@ -170,9 +170,9 @@ class IgniteElement extends HTMLElement {
getProperties() { getProperties() {
var ret = {}; var ret = {};
var props = this.properties; var props = this.properties;
IgniteRenderingContext.push(); IgniteRendering.push();
Object.keys(props).forEach(name => ret[name] = this[name]); Object.keys(props).forEach(name => ret[name] = this[name]);
IgniteRenderingContext.pop(); IgniteRendering.pop();
return ret; return ret;
} }
@ -204,7 +204,7 @@ class IgniteElement extends HTMLElement {
Object.keys(props).forEach(name => { Object.keys(props).forEach(name => {
var prop = (props[name] instanceof IgniteProperty ? props[name] : new IgniteProperty(props[name])); var prop = (props[name] instanceof IgniteProperty ? props[name] : new IgniteProperty(props[name]));
Object.defineProperty(this, name, { Object.defineProperty(this, name, {
get: () => { return (IgniteRenderingContext.rendering ? prop : prop.value); }, get: () => { return (IgniteRendering.rendering ? prop : prop.value); },
set: (value) => { prop.value = value; } set: (value) => { prop.value = value; }
}); });
}); });
@ -239,9 +239,9 @@ class IgniteElement extends HTMLElement {
//See if a styling sheet has been created for this element if it's needed. //See if a styling sheet has been created for this element if it's needed.
if (this.styles !== null && this.styles !== "") { if (this.styles !== null && this.styles !== "") {
if (document.getElementsByClassName(`_${this.tagName}_styling_`).length == 0) { if (document.getElementsByClassName(`ignite-html-${this.tagName.toLowerCase()}-css`).length == 0) {
var styleEl = document.createElement("style"); var styleEl = document.createElement("style");
styleEl.classList.add(`_${this.tagName}_styling_`); styleEl.classList.add(`ignite-html-${this.tagName.toLowerCase()}-css`);
styleEl.innerHTML = this.styles; styleEl.innerHTML = this.styles;
document.body.prepend(styleEl); document.body.prepend(styleEl);
} }
@ -259,7 +259,7 @@ class IgniteElement extends HTMLElement {
this.childNodes.forEach((item) => this.elements.push(item)); this.childNodes.forEach((item) => this.elements.push(item));
//Enter a rendering context so properties don't expose their values until we are done. //Enter a rendering context so properties don't expose their values until we are done.
IgniteRenderingContext.enter(); IgniteRendering.enter();
//Make sure the render template is our template, if not, add it as a child. //Make sure the render template is our template, if not, add it as a child.
var renderTemplate = this.render(); var renderTemplate = this.render();
@ -277,10 +277,10 @@ class IgniteElement extends HTMLElement {
} }
//Leave the rendering context. //Leave the rendering context.
IgniteRenderingContext.leave(); IgniteRendering.leave();
//Let the rendering context know this element is ready. //Let the rendering context know this element is ready.
IgniteRenderingContext.ready(this.readyCallback); IgniteRendering.ready(this.readyCallback);
} }
/** /**

122
ignite-html.js
View File

@ -218,57 +218,57 @@ class IgniteProperty {
invokeOnChange(oldValue, newValue, reflect = true) { invokeOnChange(oldValue, newValue, reflect = true) {
//Enter a new rendering context since this event may contain code that expects a new context. //Enter a new rendering context since this event may contain code that expects a new context.
IgniteRenderingContext.push(); IgniteRendering.push();
if (reflect) { if (reflect) {
this.reflect(); this.reflect();
} }
this.onChangeCallbacks.forEach(callback => callback.invoke(oldValue, newValue)); this.onChangeCallbacks.forEach(callback => callback.invoke(oldValue, newValue));
IgniteRenderingContext.pop(); IgniteRendering.pop();
} }
invokeOnPush(items, reflect = true) { invokeOnPush(items, reflect = true) {
IgniteRenderingContext.push(); IgniteRendering.push();
if (reflect) { if (reflect) {
this.reflect(); this.reflect();
} }
this.onPushCallbacks.forEach(callback => callback.invoke(this._value, items)); this.onPushCallbacks.forEach(callback => callback.invoke(this._value, items));
IgniteRenderingContext.pop(); IgniteRendering.pop();
} }
invokeOnPop(reflect = true) { invokeOnPop(reflect = true) {
IgniteRenderingContext.push(); IgniteRendering.push();
if (reflect) { if (reflect) {
this.reflect(); this.reflect();
} }
this.onPopCallbacks.forEach(callback => callback.invoke(this._value)); this.onPopCallbacks.forEach(callback => callback.invoke(this._value));
IgniteRenderingContext.pop(); IgniteRendering.pop();
} }
invokeOnShift(reflect = true) { invokeOnShift(reflect = true) {
IgniteRenderingContext.push(); IgniteRendering.push();
if (reflect) { if (reflect) {
this.reflect(); this.reflect();
} }
this.onShiftCallbacks.forEach(callback => callback.invoke(this._value)); this.onShiftCallbacks.forEach(callback => callback.invoke(this._value));
IgniteRenderingContext.pop(); IgniteRendering.pop();
} }
invokeOnUnshift(items, reflect = true) { invokeOnUnshift(items, reflect = true) {
IgniteRenderingContext.push(); IgniteRendering.push();
if (reflect) { if (reflect) {
this.reflect(); this.reflect();
} }
this.onUnshiftCallbacks.forEach(callback => callback.invoke(this._value, items)); this.onUnshiftCallbacks.forEach(callback => callback.invoke(this._value, items));
IgniteRenderingContext.pop(); IgniteRendering.pop();
} }
invokeOnSplice(start, deleteCount, items, reflect = true) { invokeOnSplice(start, deleteCount, items, reflect = true) {
IgniteRenderingContext.push(); IgniteRendering.push();
if (reflect) { if (reflect) {
this.reflect(); this.reflect();
} }
this.onSpliceCallbacks.forEach(callback => callback.invoke(this._value, start, deleteCount, items)); this.onSpliceCallbacks.forEach(callback => callback.invoke(this._value, start, deleteCount, items));
IgniteRenderingContext.pop(); IgniteRendering.pop();
} }
attachOnChange(onChange) { attachOnChange(onChange) {
@ -389,7 +389,7 @@ class IgniteObject {
Object.keys(obj).forEach(name => { Object.keys(obj).forEach(name => {
var prop = new IgniteProperty(obj[name]); var prop = new IgniteProperty(obj[name]);
Object.defineProperty(this, name, { Object.defineProperty(this, name, {
get: () => { return (IgniteRenderingContext.rendering ? prop : prop.value); }, get: () => { return (IgniteRendering.rendering ? prop : prop.value); },
set: (value) => { prop.value = value; } set: (value) => { prop.value = value; }
}); });
}); });
@ -408,7 +408,7 @@ class IgniteObject {
var prop = new IgniteProperty(this[name]); var prop = new IgniteProperty(this[name]);
delete this[name]; delete this[name];
Object.defineProperty(this, name, { Object.defineProperty(this, name, {
get: () => { return (IgniteRenderingContext.rendering ? prop : prop.value); }, get: () => { return (IgniteRendering.rendering ? prop : prop.value); },
set: (value) => { prop.value = value; } set: (value) => { prop.value = value; }
}); });
} }
@ -488,68 +488,68 @@ class IgniteCallback {
* this would fail. But it's safe since events cannot do that. * this would fail. But it's safe since events cannot do that.
* @ignore * @ignore
*/ */
class IgniteRenderingContext { class IgniteRendering {
static enter() { static enter() {
if (!IgniteRenderingContext.RenderCount) { if (!IgniteRendering.RenderCount) {
IgniteRenderingContext.RenderCount = 0; IgniteRendering.RenderCount = 0;
} }
IgniteRenderingContext.RenderCount++; IgniteRendering.RenderCount++;
} }
static leave() { static leave() {
if (IgniteRenderingContext.RenderCount) { if (IgniteRendering.RenderCount) {
IgniteRenderingContext.RenderCount--; IgniteRendering.RenderCount--;
} }
} }
static push() { static push() {
if (IgniteRenderingContext.Stack == null) { if (IgniteRendering.Stack == null) {
IgniteRenderingContext.Stack = []; IgniteRendering.Stack = [];
} }
IgniteRenderingContext.Stack.push(IgniteRenderingContext.RenderCount); IgniteRendering.Stack.push(IgniteRendering.RenderCount);
IgniteRenderingContext.RenderCount = 0; IgniteRendering.RenderCount = 0;
} }
static pop() { static pop() {
if (IgniteRenderingContext.Stack && IgniteRenderingContext.Stack.length > 0) { if (IgniteRendering.Stack && IgniteRendering.Stack.length > 0) {
IgniteRenderingContext.RenderCount = IgniteRenderingContext.Stack.pop(); IgniteRendering.RenderCount = IgniteRendering.Stack.pop();
} }
} }
static ready(callback) { static ready(callback) {
//Setup the callbacks if it's not init'd. //Setup the callbacks if it's not init'd.
if (!IgniteRenderingContext.ReadyCallbacks) { if (!IgniteRendering.ReadyCallbacks) {
IgniteRenderingContext.ReadyCallbacks = []; IgniteRendering.ReadyCallbacks = [];
} }
//Add this ignite callback. //Add this ignite callback.
IgniteRenderingContext.ReadyCallbacks.push(callback); IgniteRendering.ReadyCallbacks.push(callback);
//Clear the existing timer if there is one. //Clear the existing timer if there is one.
if (IgniteRenderingContext.ReadyTimer && !IgniteRenderingContext.ReadyTimerRunning) { if (IgniteRendering.ReadyTimer && !IgniteRendering.ReadyTimerRunning) {
clearTimeout(IgniteRenderingContext.ReadyTimer); clearTimeout(IgniteRendering.ReadyTimer);
} }
//Set a new timeout, it will only run once all elements are ready because //Set a new timeout, it will only run once all elements are ready because
//of the way single threaded timers work. //of the way single threaded timers work.
if (!IgniteRenderingContext.ReadyTimerRunning) { if (!IgniteRendering.ReadyTimerRunning) {
IgniteRenderingContext.ReadyTimer = setTimeout(async () => { IgniteRendering.ReadyTimer = setTimeout(async () => {
IgniteRenderingContext.ReadyTimerRunning = true; IgniteRendering.ReadyTimerRunning = true;
while (IgniteRenderingContext.ReadyCallbacks.length > 0) { while (IgniteRendering.ReadyCallbacks.length > 0) {
IgniteRenderingContext.ReadyCallbacks.shift().invoke(); IgniteRendering.ReadyCallbacks.shift().invoke();
} }
IgniteRenderingContext.ReadyCallbacks = []; IgniteRendering.ReadyCallbacks = [];
IgniteRenderingContext.ReadyTimer = null; IgniteRendering.ReadyTimer = null;
IgniteRenderingContext.ReadyTimerRunning = false; IgniteRendering.ReadyTimerRunning = false;
}, 1); }, 1);
} }
} }
static get rendering() { static get rendering() {
if (IgniteRenderingContext.RenderCount && IgniteRenderingContext.RenderCount > 0) { if (IgniteRendering.RenderCount && IgniteRendering.RenderCount > 0) {
return true; return true;
} }
@ -557,13 +557,49 @@ class IgniteRenderingContext {
} }
} }
window.IgniteRenderingContext = IgniteRenderingContext; /**
* Main helper class to access ignite html functions.
*/
class IgniteHtml {
/**
* Registers a new element to be rendered when render() is called.
* @param {String} name The tag name of the element to register.
* @param {Any} definition The class definition of the element.
*/
static register(name, definition) {
if (!IgniteHtml.registered) {
IgniteHtml.registered = { };
}
if (!IgniteHtml.registered[name]) {
IgniteHtml.registered[name] = definition;
}
}
/**
* Begins rendering all registered elements.
*/
static render() {
if (IgniteHtml.registered) {
var elements = Object.keys(IgniteHtml.registered);
for (var i = 0; i < elements.length; i++) {
customElements.define(elements[i], IgniteHtml.registered[elements[i]]);
}
}
}
}
window.IgniteProperty = IgniteProperty;
window.IgniteRendering = IgniteRendering;
window.IgniteObject = IgniteObject; window.IgniteObject = IgniteObject;
window.IgniteCallback = IgniteCallback; window.IgniteCallback = IgniteCallback;
window.IgniteHtml = IgniteHtml;
export { export {
IgniteProperty, IgniteProperty,
IgniteObject, IgniteObject,
IgniteRenderingContext, IgniteRendering,
IgniteCallback IgniteCallback,
IgniteHtml
}; };

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