From 3bee5614ab3976f6d0917bae1e4aae4f6b484d7f Mon Sep 17 00:00:00 2001 From: Matt Mo Date: Mon, 26 Oct 2020 15:30:11 -0700 Subject: [PATCH] Ignite properties now try to keep the value as the same type as the original when a new value is set. Support for value() on contenteditable was added along with reflecting contenteditable values. --- src/ignite-html.js | 14 ++ src/ignite-template.js | 330 +++++++++++++++++++++++------------------ 2 files changed, 201 insertions(+), 143 deletions(-) diff --git a/src/ignite-html.js b/src/ignite-html.js index aca86d5..c6cee88 100644 --- a/src/ignite-html.js +++ b/src/ignite-html.js @@ -40,7 +40,21 @@ class IgniteProperty { return; } + //Get the old value var old = this._value; + + //Based on the old value, see if we need to convert the new value to match the original type. + if (typeof old === typeof true) { + val = val != null && val != undefined ? val.toString().toLowerCase().trim() : val; + val = val == "true" || val == "1" || val == "yes" || val == "t" || val == "y"; + } else if (typeof old === typeof 0) { + val = Number(val != null && val != undefined ? val.toString().trim() : "0"); + val = isNaN(val) ? 0 : val; + } else if (typeof old === typeof "") { + val = val != null && val != undefined ? val.toString() : null; + } + + //Set the new value this._value = val; //Attempt to patch the value if it's an array. diff --git a/src/ignite-template.js b/src/ignite-template.js index a0ee5e1..d7093bc 100644 --- a/src/ignite-template.js +++ b/src/ignite-template.js @@ -23,19 +23,18 @@ class IgniteTemplate { * @param {String|Number|IgniteProperty|IgniteTemplate} children An array of child elements to be added to this template. */ constructor(tagName = null, children = null) { - this.siblings = []; this.children = []; - this.attributes = {}; - this.classes = []; this.tagName = tagName; this.element = null; - this.properties = {}; - this.refs = []; - this.callbacks = []; - this.events = {}; - this.styles = {}; - this.elementValue = null; - this.elementInnerHTML = null; + this._attributes = {}; + this._classes = []; + this._properties = {}; + this._refs = []; + this._callbacks = []; + this._events = {}; + this._styles = {}; + this._elementValue = null; + this._elementInnerHTML = null; if (children) { for (var i = 0; i < children.length; i++) { @@ -68,11 +67,11 @@ class IgniteTemplate { IgniteRenderingContext.push(); 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)))); var value = (converter != null ? converter(name.value) : name.value); (value != null ? value.toString().split(" ") : []).forEach(cl => { if (cl.length > 0) { - this.classes.push(cl); + this._classes.push(cl); } }); } else if (Array.isArray(name) && name.length > 0 && name[0] instanceof IgniteProperty) { @@ -84,26 +83,26 @@ class IgniteTemplate { //Attack a callback for all the properties name.forEach(prop => { if (prop instanceof IgniteProperty) { - this.callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, oldValue)), converter(...name.getPropertyValues())))); - this.callbacks.push(prop.attachOnPush((list, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); - this.callbacks.push(prop.attachOnUnshift((list, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); - this.callbacks.push(prop.attachOnPop((list) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); - this.callbacks.push(prop.attachOnShift((list) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); - this.callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, oldValue)), converter(...name.getPropertyValues())))); + this._callbacks.push(prop.attachOnPush((list, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + this._callbacks.push(prop.attachOnUnshift((list, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + this._callbacks.push(prop.attachOnPop((list) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + this._callbacks.push(prop.attachOnShift((list) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); } }); var value = converter(...name.getPropertyValues()); (value != null ? value.toString().split(" ") : []).forEach(cl => { if (cl.length > 0) { - this.classes.push(cl); + this._classes.push(cl); } }); } else { var value = (converter != null ? converter(name) : name); (value != null ? value.toString().split(" ") : []).forEach(cl => { if (cl.length > 0) { - this.classes.push(cl); + this._classes.push(cl); } }); } @@ -123,10 +122,10 @@ class IgniteTemplate { IgniteRenderingContext.push(); if (value instanceof IgniteProperty) { - this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter))); - this.attributes[name] = converter != null ? converter(value.value) : value.value; + this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter))); + this._attributes[name] = converter != null ? converter(value.value) : value.value; } else { - this.attributes[name] = converter != null ? converter(value) : value; + this._attributes[name] = converter != null ? converter(value) : value; } IgniteRenderingContext.pop(); @@ -149,23 +148,33 @@ class IgniteTemplate { } if (value instanceof IgniteProperty) { - this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onValueChanged(oldValue, newValue, converter))); + this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onValueChanged(oldValue, newValue, converter))); if (reflect) { - this.on("change", (event) => { - var newValue = (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox" ? this.element.checked : this.element.value); - value.setValue(newValue, true); + this.on("change", e => { + if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") { + value.setValue(this.element.checked, true); + } else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") { + value.setValue(this.element.textContent, true); + } else { + value.setValue(this.element.value, true); + } }); - this.on("keyup", (event) => { - var newValue = (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox" ? this.element.checked : this.element.value); - value.setValue(newValue, true); + this.on("keyup", e => { + if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") { + value.setValue(this.element.checked, true); + } else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") { + value.setValue(this.element.textContent, true); + } else { + value.setValue(this.element.value, true); + } }); } - this.elementValue = (converter != null ? converter(value.value) : value.value); + this._elementValue = (converter != null ? converter(value.value) : value.value); } else { - this.elementValue = (converter != null ? converter(value) : value); + this._elementValue = (converter != null ? converter(value) : value); } IgniteRenderingContext.pop(); @@ -183,7 +192,7 @@ class IgniteTemplate { property(name, value, reflect = false, converter = null) { IgniteRenderingContext.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.`; } @@ -192,13 +201,13 @@ class IgniteTemplate { } if (value instanceof IgniteProperty) { - this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name, converter))); - this.properties[name] = { + this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name, converter))); + this._properties[name] = { value: (converter != null ? converter(value.value) : value.value), reflect: (reflect == true ? value : null) }; } else { - this.properties[name] = { + this._properties[name] = { value: (converter != null ? converter(value) : value), reflect: null }; @@ -208,6 +217,33 @@ class IgniteTemplate { return this; } + /** + * Adds a set of properties from an object to be added to this template once it's constructed. + * @param {Object} props The object value that property names/values will be pulled from. + * @returns This ignite template so function calls can be chained. + */ + properties(props) { + IgniteRenderingContext.push(); + + //Make sure we have a valid props. + if (props == null || props == undefined) { + return; + } + + if (!(typeof props === 'object')) { + throw `Cannot set properties with a non object set of properties: ${props}`; + } + + var propNames = Object.keys(props); + + propNames.forEach(name => { + this.property(name, props[name], false, null); + }); + + IgniteRenderingContext.pop(); + return this; + } + /** * Sets the inner html of the element to be constructed by this template. * @param {String|IgniteProperty} value InnerHTML to set for element. If a property is passed the html will auto update. @@ -218,10 +254,10 @@ class IgniteTemplate { IgniteRenderingContext.push(); if (value instanceof IgniteProperty) { - this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(oldValue, newValue, converter))); - this.elementInnerHTML = (converter != null ? converter(value.value) : value.value); + this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(oldValue, newValue, converter))); + this._elementInnerHTML = (converter != null ? converter(value.value) : value.value); } else { - this.elementInnerHTML = (converter != null ? converter(value) : value); + this._elementInnerHTML = (converter != null ? converter(value) : value); } IgniteRenderingContext.pop(); @@ -265,10 +301,10 @@ class IgniteTemplate { */ ref(refCallback) { if (refCallback instanceof IgniteProperty) { - this.callbacks.push(refCallback.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, refCallback))); - this.refs.push((element) => refCallback.value = element); + this._callbacks.push(refCallback.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, refCallback))); + this._refs.push((element) => refCallback.value = element); } else { - this.refs.push(refCallback); + this._refs.push(refCallback); } return this; @@ -282,15 +318,15 @@ class IgniteTemplate { * @returns This ignite template so function calls can be chained. */ on(eventName, eventCallback) { - if (!this.events[eventName]) { - this.events[eventName] = []; + if (!this._events[eventName]) { + this._events[eventName] = []; } if (eventCallback instanceof IgniteProperty) { - this.callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName))); - this.events[eventName].push(eventCallback.value); + this._callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName))); + this._events[eventName].push(eventCallback.value); } else { - this.events[eventName].push(eventCallback); + this._events[eventName].push(eventCallback); } return this; @@ -340,12 +376,12 @@ class IgniteTemplate { onEnter(eventCallback) { var eventName = "keydown"; - if (!this.events[eventName]) { - this.events[eventName] = []; + if (!this._events[eventName]) { + this._events[eventName] = []; } if (eventCallback instanceof IgniteProperty) { - this.callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => { + this._callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => { //Create a new wrapped function to check for the enter key being pressed. var wrapped = (e) => { if (e.key === 'Enter') { @@ -368,7 +404,7 @@ class IgniteTemplate { //Store the wrapped so that it's the old value next time around. eventCallback._value = wrapped; - this.events[eventName].push(wrapped); + this._events[eventName].push(wrapped); } else { this.on(eventName, (e) => { if (e.key === 'Enter') { @@ -388,12 +424,12 @@ class IgniteTemplate { onBackspace(eventCallback) { var eventName = "keydown"; - if (!this.events[eventName]) { - this.events[eventName] = []; + if (!this._events[eventName]) { + this._events[eventName] = []; } if (eventCallback instanceof IgniteProperty) { - this.callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => { + this._callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => { //Create a new wrapped function to check for the enter key being pressed. var wrapped = (e) => { if (e.key === 'Backspace') { @@ -416,7 +452,7 @@ class IgniteTemplate { //Store the wrapped so that it's the old value next time around. eventCallback._value = wrapped; - this.events[eventName].push(wrapped); + this._events[eventName].push(wrapped); } else { this.on(eventName, (e) => { if (e.key === 'Backspace') { @@ -459,8 +495,8 @@ class IgniteTemplate { } if (value instanceof IgniteProperty) { - this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onStyleChanged(name, (converter ? converter(newValue) : newValue)))); - this.styles[name] = { name: name, value: (converter ? converter(value.value) : value.value), priority: priority }; + this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onStyleChanged(name, (converter ? converter(newValue) : newValue)))); + this._styles[name] = { name: name, value: (converter ? converter(value.value) : value.value), priority: priority }; } else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) { //There must be a converter for this to work correctly if (!converter) { @@ -470,18 +506,18 @@ class IgniteTemplate { //Attack a callback for all the properties value.forEach(prop => { if (prop instanceof IgniteProperty) { - this.callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); - this.callbacks.push(prop.attachOnPush((list, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); - this.callbacks.push(prop.attachOnUnshift((list, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); - this.callbacks.push(prop.attachOnPop((list) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); - this.callbacks.push(prop.attachOnShift((list) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); - this.callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnPush((list, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnUnshift((list, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnPop((list) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnShift((list) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); } }); - this.styles[name] = { name: name, value: converter(...value.getPropertyValues()), priority: priority }; + this._styles[name] = { name: name, value: converter(...value.getPropertyValues()), priority: priority }; } else { - 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(); @@ -611,28 +647,28 @@ class IgniteTemplate { } //Invoke any refs we have and pass back the element reference. - this.refs.forEach((ref) => ref(this.element)); + this._refs.forEach((ref) => ref(this.element)); } //Set the classes on this element - for (var i = 0; i < this.classes.length; i++) { - if (this.classes[i] !== null && this.classes[i] !== undefined && this.classes[i] !== "") { - this.element.classList.add(this.classes[i]); + for (var i = 0; i < this._classes.length; i++) { + if (this._classes[i] !== null && this._classes[i] !== undefined && this._classes[i] !== "") { + this.element.classList.add(this._classes[i]); } } //Set the attributes on this element - var keys = Object.keys(this.attributes); + var keys = Object.keys(this._attributes); for (var i = 0; i < keys.length; i++) { - if (this.attributes[keys[i]] !== null && this.attributes[keys[i]] !== undefined) { - this.element.setAttribute(keys[i], this.attributes[keys[i]]); + if (this._attributes[keys[i]] !== null && this._attributes[keys[i]] !== undefined) { + this.element.setAttribute(keys[i], this._attributes[keys[i]]); } } //Set the events on this element - var keys = Object.keys(this.events); + var keys = Object.keys(this._events); for (var i = 0; i < keys.length; i++) { - this.events[keys[i]].forEach((event) => { + this._events[keys[i]].forEach((event) => { if (event !== null && event !== undefined) { this.element.addEventListener(keys[i], event); } @@ -640,25 +676,25 @@ class IgniteTemplate { } //Set the styles on this element. - var keys = Object.keys(this.styles); + var keys = Object.keys(this._styles); for (var i = 0; i < keys.length; i++) { - var style = this.styles[keys[i]]; + var style = this._styles[keys[i]]; this.element.style.setProperty(style.name, style.value, style.priority); } //Set the properties on this element - var keys = Object.keys(this.properties); + var keys = Object.keys(this._properties); for (var i = 0; i < keys.length; i++) { - this.element[keys[i]] = this.properties[keys[i]].value; + this.element[keys[i]] = this._properties[keys[i]].value; - if (this.properties[keys[i]].reflect != null) { - this.element[keys[i]].reflected.push(this.properties[keys[i]].reflect); + if (this._properties[keys[i]].reflect != null) { + this.element[keys[i]].reflected.push(this._properties[keys[i]].reflect); } } //Set the elements inner html if it was set - if (this.elementInnerHTML != null) { - this.element.innerHTML = this.elementInnerHTML; + if (this._elementInnerHTML != null) { + this.element.innerHTML = this._elementInnerHTML; } //Construct the children under this element @@ -667,11 +703,13 @@ class IgniteTemplate { } //Set the elements value if there is one. - if (this.elementValue != null) { + if (this._elementValue != null) { if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") { - this.element.checked = this.elementValue; + this.element.checked = this._elementValue; + } else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") { + this.element.textContent = this._elementValue.toString(); } else { - this.element.value = this.elementValue; + this.element.value = this._elementValue; } } @@ -691,12 +729,12 @@ class IgniteTemplate { */ deconstruct() { //Remove and disconnect all events - if (this.element && this.events) { - var keys = Object.keys(this.events); + if (this.element && this._events) { + var keys = Object.keys(this._events); for (var i = 0; i < keys.length; i++) { - this.element.removeEventListener(keys[i], this.events[keys[i]]); + this.element.removeEventListener(keys[i], this._events[keys[i]]); } - this.events = null; + this._events = null; } //Remove our element if we have one. @@ -716,16 +754,16 @@ class IgniteTemplate { } //Disconnect all callbacks - if (this.callbacks) { - this.callbacks.forEach((item) => item.disconnect()); - this.callbacks = null; + if (this._callbacks) { + this._callbacks.forEach((item) => item.disconnect()); + this._callbacks = null; } //Remove any refs - if (this.refs) { + if (this._refs) { //Pass null to our refs so that the reference is updated. - this.refs.forEach(ref => ref(null)); - this.refs = null; + this._refs.forEach(ref => ref(null)); + this._refs = null; } } @@ -747,14 +785,14 @@ class IgniteTemplate { } //Remove the old values from the template, but only remove one copy. - oldClasses.forEach((cl) => this.classes.splice(this.classes.indexOf(cl), 1)); + oldClasses.forEach((cl) => this._classes.splice(this._classes.indexOf(cl), 1)); //Add the new classes to the template. - newClasses.forEach((cl) => this.classes.push(cl)); + newClasses.forEach((cl) => this._classes.push(cl)); //For any classes that are missing on the element, add them. If we have duplicates this //can happen. - this.classes.forEach((cl) => { + this._classes.forEach((cl) => { if (!this.element.classList.contains(cl)) { this.element.classList.add(cl); } @@ -784,7 +822,7 @@ class IgniteTemplate { } } - this.attributes[attributeName] = newValue; + this._attributes[attributeName] = newValue; } /** @@ -808,12 +846,18 @@ class IgniteTemplate { if (this.element.checked != newValue) { this.element.checked = newValue; } + } else if (this.element.hasAttribute("contenteditable") && this.element.getAttribute("contenteditable").toLowerCase().trim() == "true") { + if (this.element.textContent != newValue.toString()) { + this.element.textContent = newValue.toString(); + } } else { if (this.element.value != newValue) { this.element.value = newValue; } } } + + this._elementValue = newValue; } /** @@ -838,7 +882,7 @@ class IgniteTemplate { this.element[`_${propertyName}`].setValue(newValue, false); } - this.properties[propertyName].value = newValue; + this._properties[propertyName].value = newValue; } /** @@ -860,7 +904,7 @@ class IgniteTemplate { this.element.innerHTML = newValue; } - this.elementInnerHTML = newValue; + this._elementInnerHTML = newValue; } /** @@ -897,11 +941,11 @@ class IgniteTemplate { } //Remove the old value from the events - this.events[eventName] = this.events[eventName].filter(ev => ev != oldValue); + this._events[eventName] = this._events[eventName].filter(ev => ev != oldValue); //Add the new value if it's needed if (newValue !== null && newValue !== undefined) { - this.events[eventName].push(newValue); + this._events[eventName].push(newValue); } } } @@ -919,10 +963,10 @@ class IgniteTemplate { } if (this.element) { - this.element.style.setProperty(name, newValue, this.styles[name].priority); + this.element.style.setProperty(name, newValue, this._styles[name].priority); } - this.styles[name].value = newValue; + this._styles[name].value = newValue; } } @@ -1219,7 +1263,7 @@ class html extends IgniteTemplate { super(); if (code instanceof IgniteProperty) { - this.callbacks.push(code.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue))); + this._callbacks.push(code.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue))); this.code = code.value; } else { this.code = code; @@ -1296,12 +1340,12 @@ class list extends IgniteTemplate { super(); if (list instanceof IgniteProperty) { - this.callbacks.push(list.attachOnChange((oldValue, newValue) => this.onListChanged(oldValue, newValue))); - this.callbacks.push(list.attachOnPush((list, items) => this.onListPush(list, items))); - this.callbacks.push(list.attachOnUnshift((list, items) => this.onListUnshift(list, items))); - this.callbacks.push(list.attachOnPop(list => this.onListPop(list))); - this.callbacks.push(list.attachOnShift(list => this.onListShift(list))); - this.callbacks.push(list.attachOnSplice((list, start, deleteCount, items) => this.onListSplice(list, start, deleteCount, items))); + this._callbacks.push(list.attachOnChange((oldValue, newValue) => this.onListChanged(oldValue, newValue))); + this._callbacks.push(list.attachOnPush((list, items) => this.onListPush(list, items))); + this._callbacks.push(list.attachOnUnshift((list, items) => this.onListUnshift(list, items))); + this._callbacks.push(list.attachOnPop(list => this.onListPop(list))); + this._callbacks.push(list.attachOnShift(list => this.onListShift(list))); + this._callbacks.push(list.attachOnSplice((list, start, deleteCount, items) => this.onListSplice(list, start, deleteCount, items))); this.list = list.value; } else { @@ -1478,10 +1522,10 @@ class list extends IgniteTemplate { onStyleChanged(name, newValue) { this.elements.forEach((element) => { - element.style.setProperty(name, newValue, this.styles[name].priority); + element.style.setProperty(name, newValue, this._styles[name].priority); }); - this.styles[name].value = newValue; + this._styles[name].value = newValue; } } @@ -1539,24 +1583,24 @@ class slot extends IgniteTemplate { this.element.parentElement.insertBefore(item, this.element); //Set the classes on the item - for (var i = 0; i < this.classes.length; i++) { - if (this.classes[i] !== null && this.classes[i] !== undefined && this.classes[i] !== "") { - item.classList.add(this.classes[i]); + for (var i = 0; i < this._classes.length; i++) { + if (this._classes[i] !== null && this._classes[i] !== undefined && this._classes[i] !== "") { + item.classList.add(this._classes[i]); } } //Set the attributes on the item - var keys = Object.keys(this.attributes); + var keys = Object.keys(this._attributes); for (var i = 0; i < keys.length; i++) { - if (this.attributes[keys[i]] !== null && this.attributes[keys[i]] !== undefined) { - item.setAttribute(keys[i], this.attributes[keys[i]]); + if (this._attributes[keys[i]] !== null && this._attributes[keys[i]] !== undefined) { + item.setAttribute(keys[i], this._attributes[keys[i]]); } } //Set the styles on the item - var keys = Object.keys(this.styles); + var keys = Object.keys(this._styles); for (var i = 0; i < keys.length; i++) { - var style = this.styles[keys[i]]; + var style = this._styles[keys[i]]; item.style.setProperty(style.name, style.value, style.priority); } }); @@ -1576,10 +1620,10 @@ class slot extends IgniteTemplate { var newClasses = (newValue != null && newValue != "" ? newValue.toString().split(" ") : []); //Remove the old values from the template, but only remove one copy. - oldClasses.forEach((cl) => this.classes.splice(this.classes.indexOf(cl), 1)); + oldClasses.forEach((cl) => this._classes.splice(this._classes.indexOf(cl), 1)); //Add the new classes to the template. - newClasses.forEach((cl) => this.classes.push(cl)); + newClasses.forEach((cl) => this._classes.push(cl)); //Add the classes to the elements this.parent.elements.forEach((element) => { @@ -1590,7 +1634,7 @@ class slot extends IgniteTemplate { newClasses.forEach((cl) => element.classList.add(cl)); //Add any missing ones - this.classes.forEach((cl) => { + this._classes.forEach((cl) => { if (!element.classList.contains(cl)) { element.classList.add(cl); } @@ -1620,7 +1664,7 @@ class slot extends IgniteTemplate { } }); - this.attributes[attributeName] = newValue; + this._attributes[attributeName] = newValue; } /** @@ -1631,10 +1675,10 @@ class slot extends IgniteTemplate { */ onStyleChanged(name, newValue) { this.parent.elements.forEach((element) => { - element.style.setProperty(name, newValue, this.styles[name].priority); + element.style.setProperty(name, newValue, this._styles[name].priority); }); - this.styles[name].value = newValue; + this._styles[name].value = newValue; } } @@ -1647,12 +1691,12 @@ class pagination extends IgniteTemplate { super(); if (list instanceof IgniteProperty) { - this.callbacks.push(list.attachOnChange((oldValue, newValue) => this.onListChanged(oldValue, newValue))); - this.callbacks.push(list.attachOnPush((list, items) => this.onListPush(list, items))); - this.callbacks.push(list.attachOnUnshift((list, items) => this.onListUnshift(list, items))); - this.callbacks.push(list.attachOnPop(list => this.onListPop(list))); - this.callbacks.push(list.attachOnShift(list => this.onListShift(list))); - this.callbacks.push(list.attachOnSplice((list, start, deleteCount, items) => this.onListSplice(list, start, deleteCount, items))); + this._callbacks.push(list.attachOnChange((oldValue, newValue) => this.onListChanged(oldValue, newValue))); + this._callbacks.push(list.attachOnPush((list, items) => this.onListPush(list, items))); + this._callbacks.push(list.attachOnUnshift((list, items) => this.onListUnshift(list, items))); + this._callbacks.push(list.attachOnPop(list => this.onListPop(list))); + this._callbacks.push(list.attachOnShift(list => this.onListShift(list))); + this._callbacks.push(list.attachOnSplice((list, start, deleteCount, items) => this.onListSplice(list, start, deleteCount, items))); this.list = list.value; } else { @@ -1660,14 +1704,14 @@ class pagination extends IgniteTemplate { } if (pageSize instanceof IgniteProperty) { - this.callbacks.push(pageSize.attachOnChange((oldValue, newValue) => this.onPageSizeChanged(newValue))); + this._callbacks.push(pageSize.attachOnChange((oldValue, newValue) => this.onPageSizeChanged(newValue))); this.pageSize = pageSize.value; } else { this.pageSize = pageSize; } if (currentPage instanceof IgniteProperty) { - this.callbacks.push(currentPage.attachOnChange((oldValue, newValue) => this.onCurrentPageChanged(newValue))); + this._callbacks.push(currentPage.attachOnChange((oldValue, newValue) => this.onCurrentPageChanged(newValue))); this.currentPage = currentPage.value; } else { this.currentPage = currentPage; @@ -1940,7 +1984,7 @@ class population extends IgniteTemplate { super(); if (count instanceof IgniteProperty) { - this.callbacks.push(count.attachOnChange((oldValue, newValue) => this.onCountChange(converter != null ? converter(newValue) : newValue))); + this._callbacks.push(count.attachOnChange((oldValue, newValue) => this.onCountChange(converter != null ? converter(newValue) : newValue))); this.count = count.value; } else if (Array.isArray(count) && count.length > 0 && count[0] instanceof IgniteProperty) { //There must be a converter for this to work correctly @@ -1951,12 +1995,12 @@ class population extends IgniteTemplate { //Attack a callback for all the properties count.forEach(prop => { if (prop instanceof IgniteProperty) { - this.callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onCountChange(converter(...count.getPropertyValues())))); - this.callbacks.push(prop.attachOnPush((list, items) => this.onCountChange(converter(...count.getPropertyValues())))); - this.callbacks.push(prop.attachOnUnshift((list, items) => this.onCountChange(converter(...count.getPropertyValues())))); - this.callbacks.push(prop.attachOnPop((list) => this.onCountChange(converter(...count.getPropertyValues())))); - this.callbacks.push(prop.attachOnShift((list) => this.onCountChange(converter(...count.getPropertyValues())))); - this.callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onCountChange(converter(...count.getPropertyValues())))); + this._callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onCountChange(converter(...count.getPropertyValues())))); + this._callbacks.push(prop.attachOnPush((list, items) => this.onCountChange(converter(...count.getPropertyValues())))); + this._callbacks.push(prop.attachOnUnshift((list, items) => this.onCountChange(converter(...count.getPropertyValues())))); + this._callbacks.push(prop.attachOnPop((list) => this.onCountChange(converter(...count.getPropertyValues())))); + this._callbacks.push(prop.attachOnShift((list) => this.onCountChange(converter(...count.getPropertyValues())))); + this._callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onCountChange(converter(...count.getPropertyValues())))); } });