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()))));
}
});