diff --git a/ignite-element.js b/ignite-element.js index efc56fa..7b6c96e 100644 --- a/ignite-element.js +++ b/ignite-element.js @@ -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'; /** @@ -73,9 +73,9 @@ class IgniteElement extends HTMLElement { //Init the element before connected callback is fired //Create a new rendering context so the init method can access properties correctly. - IgniteRenderingContext.push(); + IgniteRendering.push(); this.init(); - IgniteRenderingContext.pop(); + IgniteRendering.pop(); } /** @@ -170,9 +170,9 @@ class IgniteElement extends HTMLElement { getProperties() { var ret = {}; var props = this.properties; - IgniteRenderingContext.push(); + IgniteRendering.push(); Object.keys(props).forEach(name => ret[name] = this[name]); - IgniteRenderingContext.pop(); + IgniteRendering.pop(); return ret; } @@ -204,7 +204,7 @@ class IgniteElement extends HTMLElement { Object.keys(props).forEach(name => { var prop = (props[name] instanceof IgniteProperty ? props[name] : new IgniteProperty(props[name])); Object.defineProperty(this, name, { - get: () => { return (IgniteRenderingContext.rendering ? prop : prop.value); }, + get: () => { return (IgniteRendering.rendering ? prop : prop.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. 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"); - styleEl.classList.add(`_${this.tagName}_styling_`); + styleEl.classList.add(`ignite-html-${this.tagName.toLowerCase()}-css`); styleEl.innerHTML = this.styles; document.body.prepend(styleEl); } @@ -259,7 +259,7 @@ class IgniteElement extends HTMLElement { this.childNodes.forEach((item) => this.elements.push(item)); //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. var renderTemplate = this.render(); @@ -277,10 +277,10 @@ class IgniteElement extends HTMLElement { } //Leave the rendering context. - IgniteRenderingContext.leave(); + IgniteRendering.leave(); //Let the rendering context know this element is ready. - IgniteRenderingContext.ready(this.readyCallback); + IgniteRendering.ready(this.readyCallback); } /** diff --git a/ignite-html.js b/ignite-html.js index 5c8bf48..4a190a5 100644 --- a/ignite-html.js +++ b/ignite-html.js @@ -218,57 +218,57 @@ class IgniteProperty { invokeOnChange(oldValue, newValue, reflect = true) { //Enter a new rendering context since this event may contain code that expects a new context. - IgniteRenderingContext.push(); + IgniteRendering.push(); if (reflect) { this.reflect(); } this.onChangeCallbacks.forEach(callback => callback.invoke(oldValue, newValue)); - IgniteRenderingContext.pop(); + IgniteRendering.pop(); } invokeOnPush(items, reflect = true) { - IgniteRenderingContext.push(); + IgniteRendering.push(); if (reflect) { this.reflect(); } this.onPushCallbacks.forEach(callback => callback.invoke(this._value, items)); - IgniteRenderingContext.pop(); + IgniteRendering.pop(); } invokeOnPop(reflect = true) { - IgniteRenderingContext.push(); + IgniteRendering.push(); if (reflect) { this.reflect(); } this.onPopCallbacks.forEach(callback => callback.invoke(this._value)); - IgniteRenderingContext.pop(); + IgniteRendering.pop(); } invokeOnShift(reflect = true) { - IgniteRenderingContext.push(); + IgniteRendering.push(); if (reflect) { this.reflect(); } this.onShiftCallbacks.forEach(callback => callback.invoke(this._value)); - IgniteRenderingContext.pop(); + IgniteRendering.pop(); } invokeOnUnshift(items, reflect = true) { - IgniteRenderingContext.push(); + IgniteRendering.push(); if (reflect) { this.reflect(); } this.onUnshiftCallbacks.forEach(callback => callback.invoke(this._value, items)); - IgniteRenderingContext.pop(); + IgniteRendering.pop(); } invokeOnSplice(start, deleteCount, items, reflect = true) { - IgniteRenderingContext.push(); + IgniteRendering.push(); if (reflect) { this.reflect(); } this.onSpliceCallbacks.forEach(callback => callback.invoke(this._value, start, deleteCount, items)); - IgniteRenderingContext.pop(); + IgniteRendering.pop(); } attachOnChange(onChange) { @@ -389,7 +389,7 @@ class IgniteObject { Object.keys(obj).forEach(name => { var prop = new IgniteProperty(obj[name]); Object.defineProperty(this, name, { - get: () => { return (IgniteRenderingContext.rendering ? prop : prop.value); }, + get: () => { return (IgniteRendering.rendering ? prop : prop.value); }, set: (value) => { prop.value = value; } }); }); @@ -408,7 +408,7 @@ class IgniteObject { var prop = new IgniteProperty(this[name]); delete 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; } }); } @@ -488,68 +488,68 @@ class IgniteCallback { * this would fail. But it's safe since events cannot do that. * @ignore */ -class IgniteRenderingContext { +class IgniteRendering { static enter() { - if (!IgniteRenderingContext.RenderCount) { - IgniteRenderingContext.RenderCount = 0; + if (!IgniteRendering.RenderCount) { + IgniteRendering.RenderCount = 0; } - IgniteRenderingContext.RenderCount++; + IgniteRendering.RenderCount++; } static leave() { - if (IgniteRenderingContext.RenderCount) { - IgniteRenderingContext.RenderCount--; + if (IgniteRendering.RenderCount) { + IgniteRendering.RenderCount--; } } static push() { - if (IgniteRenderingContext.Stack == null) { - IgniteRenderingContext.Stack = []; + if (IgniteRendering.Stack == null) { + IgniteRendering.Stack = []; } - IgniteRenderingContext.Stack.push(IgniteRenderingContext.RenderCount); - IgniteRenderingContext.RenderCount = 0; + IgniteRendering.Stack.push(IgniteRendering.RenderCount); + IgniteRendering.RenderCount = 0; } static pop() { - if (IgniteRenderingContext.Stack && IgniteRenderingContext.Stack.length > 0) { - IgniteRenderingContext.RenderCount = IgniteRenderingContext.Stack.pop(); + if (IgniteRendering.Stack && IgniteRendering.Stack.length > 0) { + IgniteRendering.RenderCount = IgniteRendering.Stack.pop(); } } static ready(callback) { //Setup the callbacks if it's not init'd. - if (!IgniteRenderingContext.ReadyCallbacks) { - IgniteRenderingContext.ReadyCallbacks = []; + if (!IgniteRendering.ReadyCallbacks) { + IgniteRendering.ReadyCallbacks = []; } //Add this ignite callback. - IgniteRenderingContext.ReadyCallbacks.push(callback); + IgniteRendering.ReadyCallbacks.push(callback); //Clear the existing timer if there is one. - if (IgniteRenderingContext.ReadyTimer && !IgniteRenderingContext.ReadyTimerRunning) { - clearTimeout(IgniteRenderingContext.ReadyTimer); + if (IgniteRendering.ReadyTimer && !IgniteRendering.ReadyTimerRunning) { + clearTimeout(IgniteRendering.ReadyTimer); } //Set a new timeout, it will only run once all elements are ready because //of the way single threaded timers work. - if (!IgniteRenderingContext.ReadyTimerRunning) { - IgniteRenderingContext.ReadyTimer = setTimeout(async () => { - IgniteRenderingContext.ReadyTimerRunning = true; - while (IgniteRenderingContext.ReadyCallbacks.length > 0) { - IgniteRenderingContext.ReadyCallbacks.shift().invoke(); + if (!IgniteRendering.ReadyTimerRunning) { + IgniteRendering.ReadyTimer = setTimeout(async () => { + IgniteRendering.ReadyTimerRunning = true; + while (IgniteRendering.ReadyCallbacks.length > 0) { + IgniteRendering.ReadyCallbacks.shift().invoke(); } - IgniteRenderingContext.ReadyCallbacks = []; - IgniteRenderingContext.ReadyTimer = null; - IgniteRenderingContext.ReadyTimerRunning = false; + IgniteRendering.ReadyCallbacks = []; + IgniteRendering.ReadyTimer = null; + IgniteRendering.ReadyTimerRunning = false; }, 1); } } static get rendering() { - if (IgniteRenderingContext.RenderCount && IgniteRenderingContext.RenderCount > 0) { + if (IgniteRendering.RenderCount && IgniteRendering.RenderCount > 0) { 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.IgniteCallback = IgniteCallback; +window.IgniteHtml = IgniteHtml; export { IgniteProperty, IgniteObject, - IgniteRenderingContext, - IgniteCallback + IgniteRendering, + IgniteCallback, + IgniteHtml }; \ No newline at end of file diff --git a/ignite-template.js b/ignite-template.js index 0db8e55..3b446aa 100644 --- a/ignite-template.js +++ b/ignite-template.js @@ -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(); } }