diff --git a/ignite-template.js b/ignite-template.js index 2e1511f..2d925ad 100644 --- a/ignite-template.js +++ b/ignite-template.js @@ -49,6 +49,7 @@ class IgniteTemplate { this._destructors = []; this._elementValue = null; this._elementInnerHTML = null; + this._elementInnerText = null; this._resizeObserverCallback = []; this._resizeObserver = null; this._intersectObserverCallback = []; @@ -352,12 +353,12 @@ class IgniteTemplate { IgniteRenderingContext.push(); if (value instanceof IgniteProperty) { - this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged((converter != null ? converter(oldValue) : oldValue), (converter != null ? converter(newValue) : newValue)))); - this._callbacks.push(value.attachOnPush((list, items) => this.onInnerHTMLChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); - this._callbacks.push(value.attachOnUnshift((list, items) => this.onInnerHTMLChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); - this._callbacks.push(value.attachOnPop((list) => this.onInnerHTMLChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); - this._callbacks.push(value.attachOnShift((list) => this.onInnerHTMLChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); - this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onInnerHTMLChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); + this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(converter != null ? converter(newValue) : newValue))); + this._callbacks.push(value.attachOnPush((list, items) => this.onInnerHTMLChanged(converter != null ? converter(list) : null))); + this._callbacks.push(value.attachOnUnshift((list, items) => this.onInnerHTMLChanged(converter != null ? converter(list) : null))); + this._callbacks.push(value.attachOnPop((list) => this.onInnerHTMLChanged(converter != null ? converter(list) : null))); + this._callbacks.push(value.attachOnShift((list) => this.onInnerHTMLChanged(converter != null ? converter(list) : null))); + this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onInnerHTMLChanged(converter != null ? converter(list) : null))); this._elementInnerHTML = (converter != null ? converter(value.value) : value.value); } else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) { @@ -369,12 +370,12 @@ class IgniteTemplate { //Attack a callback for all the properties value.forEach(prop => { if (prop instanceof IgniteProperty) { - this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, oldValue)), converter(...value.getPropertyValues())))); - this._callbacks.push(prop.attachOnPush((list, items) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, list)), converter(...value.getPropertyValues())))); - this._callbacks.push(prop.attachOnUnshift((list, items) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, list)), converter(...value.getPropertyValues())))); - this._callbacks.push(prop.attachOnPop((list) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, list)), converter(...value.getPropertyValues())))); - this._callbacks.push(prop.attachOnShift((list) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, list)), converter(...value.getPropertyValues())))); - this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onInnerHTMLChanged(converter(...value.getOldPropertyValues(prop, list)), converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnPush((list, items) => this.onInnerHTMLChanged(converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnUnshift((list, items) => this.onInnerHTMLChanged(converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnPop((list) => this.onInnerHTMLChanged(converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnShift((list) => this.onInnerHTMLChanged(converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onInnerHTMLChanged(converter(...value.getPropertyValues())))); } }); @@ -387,6 +388,51 @@ class IgniteTemplate { return this; } + /** + * Sets the inner text of the element to be constructed by this template. + * @param {String|IgniteProperty} value text to be set for this element. If a property is passed the text will auto update. + * @param {Function} converter Optional function that can be used to convert the value if needed. + * @returns This ignite template. + */ + innerText(value, converter = null) { + IgniteRenderingContext.push(); + + if (value instanceof IgniteProperty) { + this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerTextChanged(converter != null ? converter(newValue) : newValue))); + this._callbacks.push(value.attachOnPush((list, items) => this.onInnerTextChanged(converter != null ? converter(list) : null))); + this._callbacks.push(value.attachOnUnshift((list, items) => this.onInnerTextChanged(converter != null ? converter(list) : null))); + this._callbacks.push(value.attachOnPop((list) => this.onInnerTextChanged(converter != null ? converter(list) : null))); + this._callbacks.push(value.attachOnShift((list) => this.onInnerTextChanged(converter != null ? converter(list) : null))); + this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onInnerTextChanged(converter != null ? converter(list) : null))); + + this._elementInnerText = (converter != null ? converter(value.value) : value.value); + } else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) { + //There must be a converter for this to work correctly + if (!converter) { + throw "Cannot pass an array of properties without using a converter!"; + } + + //Attack a callback for all the properties + value.forEach(prop => { + if (prop instanceof IgniteProperty) { + this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onInnerTextChanged(converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnPush((list, items) => this.onInnerTextChanged(converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnUnshift((list, items) => this.onInnerTextChanged(converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnPop((list) => this.onInnerTextChanged(converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnShift((list) => this.onInnerTextChanged(converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onInnerTextChanged(converter(...value.getPropertyValues())))); + } + }); + + this._elementInnerText = converter(...value.getPropertyValues()); + } else { + this._elementInnerText = (converter != null ? converter(value) : value); + } + + IgniteRenderingContext.pop(); + return this; + } + /** * Adds a single or series of children to be added once this template * is constructed. Numbers, Strings, and Properties passed will be added as HTML child elements. @@ -503,6 +549,15 @@ class IgniteTemplate { return this.on("change", eventCallback); } + /** + * + * @param {Function|IgniteProperty} eventCallback The callback function to be invoked once the event fires. + * @returns This ignite template. + */ + onPaste(eventCallback) { + return this.on("paste", eventCallback); + } + /** * Adds a on enter key press event handler to this template. * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires. @@ -982,6 +1037,11 @@ class IgniteTemplate { this.element.innerHTML = this._elementInnerHTML; } + //Set the elements inner text if it was set + if (this._elementInnerText != null) { + this.element.innerText = this._elementInnerText; + } + //Construct the children under this element for (var i = 0; i < this.children.length; i++) { this.children[i].construct(this.element); @@ -1218,11 +1278,10 @@ class IgniteTemplate { /** * Called when the inner html for this template was changed and needs to be updated * on the template's element. - * @param {any} oldValue * @param {any} newValue * @ignore */ - onInnerHTMLChanged(oldValue, newValue) { + onInnerHTMLChanged(newValue) { if (this.element) { this.element.innerHTML = newValue; } @@ -1230,6 +1289,20 @@ class IgniteTemplate { this._elementInnerHTML = newValue; } + /** + * Called when the inner text for this template was changed and needs to be updated + * on the template's element. + * @param {any} newValue + * @ignore + */ + onInnerTextChanged(newValue) { + if (this.element) { + this.element.innerText = newValue; + } + + this._elementInnerText = newValue; + } + /** * Called when a ref was changed and we need to update the refs * value to match this elements reference. @@ -1780,6 +1853,82 @@ class line extends IgniteTemplate { } } +/** + * Text is a special template that will construct a text element and automatically update the dom + * if it's content changes. + * @example + * new text(``) + */ +class text extends IgniteTemplate { + /** + * Constructs a text template with the text to render. + * @param {String|IgniteProperty} text The text to render within this text template. + * @param {Function} converter An optional function that can be used to convert the text. + */ + constructor(text, converter) { + super(); + + if (text instanceof IgniteProperty) { + this._callbacks.push(text.attachOnChange((oldValue, newValue) => this.onTextChanged(converter != null ? converter(newValue) : newValue))); + this._callbacks.push(text.attachOnPush((list, items) => this.onTextChanged(converter != null ? converter(list) : null))); + this._callbacks.push(text.attachOnUnshift((list, items) => this.onTextChanged(converter != null ? converter(list) : null))); + this._callbacks.push(text.attachOnPop((list) => this.onTextChanged(converter != null ? converter(list) : null))); + this._callbacks.push(text.attachOnShift((list) => this.onTextChanged(converter != null ? converter(list) : null))); + this._callbacks.push(text.attachOnSplice((list, start, deleteCount, items) => this.onTextChanged(converter != null ? converter(list) : null))); + + this._text = (converter != null ? converter(text.value) : text.value); + } else if (Array.isArray(text) && text.length > 0 && text[0] instanceof IgniteProperty) { + //There must be a converter for this to work correctly + if (!converter) { + throw "Cannot pass an array of properties without using a converter!"; + } + + //Attack a callback for all the properties + text.forEach(prop => { + if (prop instanceof IgniteProperty) { + this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onTextChanged(converter(...text.getPropertyValues())))); + this._callbacks.push(prop.attachOnPush((list, items) => this.onTextChanged(converter(...text.getPropertyValues())))); + this._callbacks.push(prop.attachOnUnshift((list, items) => this.onTextChanged(converter(...text.getPropertyValues())))); + this._callbacks.push(prop.attachOnPop((list) => this.onTextChanged(converter(...text.getPropertyValues())))); + this._callbacks.push(prop.attachOnShift((list) => this.onTextChanged(converter(...text.getPropertyValues())))); + this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onTextChanged(converter(...text.getPropertyValues())))); + } + }); + + this._text = converter(...text.getPropertyValues()); + } else { + this._text = (converter != null ? converter(text) : text); + } + } + + construct(parent, sibling) { + //Don't construct if we have no parent, no sibling and no element. + if (!parent && !sibling && !this.element) { + return; + } + + if (!this.element) { + this.element = window.document.createTextNode(""); + + if (sibling) { + sibling.parentElement.insertBefore(this.element, sibling); + } else { + parent.appendChild(this.element); + } + } + + this.element.data = this._text; + } + + onTextChanged(newValue) { + if (this.element) { + this.element.data = newValue; + } + + this._text = newValue; + } +} + /** * Html is a special template that can construct raw html or properties into the dom and automatically * update the dom if the property changes. @@ -2685,6 +2834,7 @@ class population extends IgniteTemplate { export { IgniteTemplate, div, + text, html, list, a,