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

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.

Browse Source
This commit is contained in:
Matt Mo 2020-10-26 15:30:11 -07:00
parent c172cb5599
commit 3bee5614ab
2 changed files with 201 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/ignite-html.js
View File

@ -40,7 +40,21 @@ class IgniteProperty {
return; return;
} }
//Get the old value
var old = this._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; this._value = val;
//Attempt to patch the value if it's an array. //Attempt to patch the value if it's an array.

330
src/ignite-template.js
View File

@ -23,19 +23,18 @@ class IgniteTemplate {
* @param {String|Number|IgniteProperty|IgniteTemplate} children An array of child elements to be added to this template. * @param {String|Number|IgniteProperty|IgniteTemplate} children An array of child elements to be added to this template.
*/ */
constructor(tagName = null, children = null) { constructor(tagName = null, children = null) {
this.siblings = [];
this.children = []; this.children = [];
this.attributes = {};
this.classes = [];
this.tagName = tagName; this.tagName = tagName;
this.element = null; this.element = null;
this.properties = {}; this._attributes = {};
this.refs = []; this._classes = [];
this.callbacks = []; this._properties = {};
this.events = {}; this._refs = [];
this.styles = {}; this._callbacks = [];
this.elementValue = null; this._events = {};
this.elementInnerHTML = null; this._styles = {};
this._elementValue = null;
this._elementInnerHTML = null;
if (children) { if (children) {
for (var i = 0; i < children.length; i++) { for (var i = 0; i < children.length; i++) {
@ -68,11 +67,11 @@ class IgniteTemplate {
IgniteRenderingContext.push(); IgniteRenderingContext.push();
if (name instanceof IgniteProperty) { if (name instanceof IgniteProperty) {
this.callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged((converter != null ? converter(oldValue) : oldValue), (converter != null ? converter(newValue) : newValue)))); this._callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged((converter != null ? converter(oldValue) : oldValue), (converter != null ? converter(newValue) : newValue))));
var value = (converter != null ? converter(name.value) : name.value); var value = (converter != null ? converter(name.value) : name.value);
(value != null ? value.toString().split(" ") : []).forEach(cl => { (value != null ? value.toString().split(" ") : []).forEach(cl => {
if (cl.length > 0) { if (cl.length > 0) {
this.classes.push(cl); this._classes.push(cl);
} }
}); });
} else if (Array.isArray(name) && name.length > 0 && name[0] instanceof IgniteProperty) { } 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 //Attack a callback for all the properties
name.forEach(prop => { name.forEach(prop => {
if (prop instanceof IgniteProperty) { 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.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.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.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.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.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.attachOnSplice((list, start, deleteCount, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues()))));
} }
}); });
var value = converter(...name.getPropertyValues()); var value = converter(...name.getPropertyValues());
(value != null ? value.toString().split(" ") : []).forEach(cl => { (value != null ? value.toString().split(" ") : []).forEach(cl => {
if (cl.length > 0) { if (cl.length > 0) {
this.classes.push(cl); this._classes.push(cl);
} }
}); });
} else { } else {
var value = (converter != null ? converter(name) : name); var value = (converter != null ? converter(name) : name);
(value != null ? value.toString().split(" ") : []).forEach(cl => { (value != null ? value.toString().split(" ") : []).forEach(cl => {
if (cl.length > 0) { if (cl.length > 0) {
this.classes.push(cl); this._classes.push(cl);
} }
}); });
} }
@ -123,10 +122,10 @@ class IgniteTemplate {
IgniteRenderingContext.push(); IgniteRenderingContext.push();
if (value instanceof IgniteProperty) { if (value instanceof IgniteProperty) {
this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter))); this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter)));
this.attributes[name] = converter != null ? converter(value.value) : value.value; this._attributes[name] = converter != null ? converter(value.value) : value.value;
} else { } else {
this.attributes[name] = converter != null ? converter(value) : value; this._attributes[name] = converter != null ? converter(value) : value;
} }
IgniteRenderingContext.pop(); IgniteRenderingContext.pop();
@ -149,23 +148,33 @@ class IgniteTemplate {
} }
if (value instanceof IgniteProperty) { 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) { if (reflect) {
this.on("change", (event) => { this.on("change", e => {
var newValue = (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox" ? this.element.checked : this.element.value); if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") {
value.setValue(newValue, true); 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) => { this.on("keyup", e => {
var newValue = (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox" ? this.element.checked : this.element.value); if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") {
value.setValue(newValue, true); 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 { } else {
this.elementValue = (converter != null ? converter(value) : value); this._elementValue = (converter != null ? converter(value) : value);
} }
IgniteRenderingContext.pop(); IgniteRenderingContext.pop();
@ -183,7 +192,7 @@ class IgniteTemplate {
property(name, value, reflect = false, converter = null) { property(name, value, reflect = false, converter = null) {
IgniteRenderingContext.push(); 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.`; 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) { if (value instanceof IgniteProperty) {
this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name, converter))); this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name, converter)));
this.properties[name] = { this._properties[name] = {
value: (converter != null ? converter(value.value) : value.value), value: (converter != null ? converter(value.value) : value.value),
reflect: (reflect == true ? value : null) reflect: (reflect == true ? value : null)
}; };
} else { } else {
this.properties[name] = { this._properties[name] = {
value: (converter != null ? converter(value) : value), value: (converter != null ? converter(value) : value),
reflect: null reflect: null
}; };
@ -208,6 +217,33 @@ class IgniteTemplate {
return this; 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. * 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. * @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(); IgniteRenderingContext.push();
if (value instanceof IgniteProperty) { if (value instanceof IgniteProperty) {
this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(oldValue, newValue, converter))); this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(oldValue, newValue, converter)));
this.elementInnerHTML = (converter != null ? converter(value.value) : value.value); this._elementInnerHTML = (converter != null ? converter(value.value) : value.value);
} else { } else {
this.elementInnerHTML = (converter != null ? converter(value) : value); this._elementInnerHTML = (converter != null ? converter(value) : value);
} }
IgniteRenderingContext.pop(); IgniteRenderingContext.pop();
@ -265,10 +301,10 @@ class IgniteTemplate {
*/ */
ref(refCallback) { ref(refCallback) {
if (refCallback instanceof IgniteProperty) { if (refCallback instanceof IgniteProperty) {
this.callbacks.push(refCallback.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, refCallback))); this._callbacks.push(refCallback.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, refCallback)));
this.refs.push((element) => refCallback.value = element); this._refs.push((element) => refCallback.value = element);
} else { } else {
this.refs.push(refCallback); this._refs.push(refCallback);
} }
return this; return this;
@ -282,15 +318,15 @@ class IgniteTemplate {
* @returns This ignite template so function calls can be chained. * @returns This ignite template so function calls can be chained.
*/ */
on(eventName, eventCallback) { on(eventName, eventCallback) {
if (!this.events[eventName]) { if (!this._events[eventName]) {
this.events[eventName] = []; this._events[eventName] = [];
} }
if (eventCallback instanceof IgniteProperty) { if (eventCallback instanceof IgniteProperty) {
this.callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName))); this._callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName)));
this.events[eventName].push(eventCallback.value); this._events[eventName].push(eventCallback.value);
} else { } else {
this.events[eventName].push(eventCallback); this._events[eventName].push(eventCallback);
} }
return this; return this;
@ -340,12 +376,12 @@ class IgniteTemplate {
onEnter(eventCallback) { onEnter(eventCallback) {
var eventName = "keydown"; var eventName = "keydown";
if (!this.events[eventName]) { if (!this._events[eventName]) {
this.events[eventName] = []; this._events[eventName] = [];
} }
if (eventCallback instanceof IgniteProperty) { 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. //Create a new wrapped function to check for the enter key being pressed.
var wrapped = (e) => { var wrapped = (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@ -368,7 +404,7 @@ class IgniteTemplate {
//Store the wrapped so that it's the old value next time around. //Store the wrapped so that it's the old value next time around.
eventCallback._value = wrapped; eventCallback._value = wrapped;
this.events[eventName].push(wrapped); this._events[eventName].push(wrapped);
} else { } else {
this.on(eventName, (e) => { this.on(eventName, (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@ -388,12 +424,12 @@ class IgniteTemplate {
onBackspace(eventCallback) { onBackspace(eventCallback) {
var eventName = "keydown"; var eventName = "keydown";
if (!this.events[eventName]) { if (!this._events[eventName]) {
this.events[eventName] = []; this._events[eventName] = [];
} }
if (eventCallback instanceof IgniteProperty) { 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. //Create a new wrapped function to check for the enter key being pressed.
var wrapped = (e) => { var wrapped = (e) => {
if (e.key === 'Backspace') { if (e.key === 'Backspace') {
@ -416,7 +452,7 @@ class IgniteTemplate {
//Store the wrapped so that it's the old value next time around. //Store the wrapped so that it's the old value next time around.
eventCallback._value = wrapped; eventCallback._value = wrapped;
this.events[eventName].push(wrapped); this._events[eventName].push(wrapped);
} else { } else {
this.on(eventName, (e) => { this.on(eventName, (e) => {
if (e.key === 'Backspace') { if (e.key === 'Backspace') {
@ -459,8 +495,8 @@ class IgniteTemplate {
} }
if (value instanceof IgniteProperty) { if (value instanceof IgniteProperty) {
this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onStyleChanged(name, (converter ? converter(newValue) : newValue)))); 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._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) { } else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) {
//There must be a converter for this to work correctly //There must be a converter for this to work correctly
if (!converter) { if (!converter) {
@ -470,18 +506,18 @@ class IgniteTemplate {
//Attack a callback for all the properties //Attack a callback for all the properties
value.forEach(prop => { value.forEach(prop => {
if (prop instanceof IgniteProperty) { if (prop instanceof IgniteProperty) {
this.callbacks.push(prop.attachOnChange((oldValue, newValue) => 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.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.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.attachOnPop((list) => this.onStyleChanged(name, converter(...value.getPropertyValues()))));
this.callbacks.push(prop.attachOnShift((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.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 { } 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(); IgniteRenderingContext.pop();
@ -611,28 +647,28 @@ class IgniteTemplate {
} }
//Invoke any refs we have and pass back the element reference. //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 //Set the classes on this element
for (var i = 0; i < this.classes.length; i++) { for (var i = 0; i < this._classes.length; i++) {
if (this.classes[i] !== null && this.classes[i] !== undefined && this.classes[i] !== "") { if (this._classes[i] !== null && this._classes[i] !== undefined && this._classes[i] !== "") {
this.element.classList.add(this.classes[i]); this.element.classList.add(this._classes[i]);
} }
} }
//Set the attributes on this element //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++) { for (var i = 0; i < keys.length; i++) {
if (this.attributes[keys[i]] !== null && this.attributes[keys[i]] !== undefined) { if (this._attributes[keys[i]] !== null && this._attributes[keys[i]] !== undefined) {
this.element.setAttribute(keys[i], this.attributes[keys[i]]); this.element.setAttribute(keys[i], this._attributes[keys[i]]);
} }
} }
//Set the events on this element //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++) { 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) { if (event !== null && event !== undefined) {
this.element.addEventListener(keys[i], event); this.element.addEventListener(keys[i], event);
} }
@ -640,25 +676,25 @@ class IgniteTemplate {
} }
//Set the styles on this element. //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++) { 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); this.element.style.setProperty(style.name, style.value, style.priority);
} }
//Set the properties on this element //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++) { 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) { if (this._properties[keys[i]].reflect != null) {
this.element[keys[i]].reflected.push(this.properties[keys[i]].reflect); this.element[keys[i]].reflected.push(this._properties[keys[i]].reflect);
} }
} }
//Set the elements inner html if it was set //Set the elements inner html if it was set
if (this.elementInnerHTML != null) { if (this._elementInnerHTML != null) {
this.element.innerHTML = this.elementInnerHTML; this.element.innerHTML = this._elementInnerHTML;
} }
//Construct the children under this element //Construct the children under this element
@ -667,11 +703,13 @@ class IgniteTemplate {
} }
//Set the elements value if there is one. //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") { 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 { } else {
this.element.value = this.elementValue; this.element.value = this._elementValue;
} }
} }
@ -691,12 +729,12 @@ class IgniteTemplate {
*/ */
deconstruct() { deconstruct() {
//Remove and disconnect all events //Remove and disconnect all events
if (this.element && this.events) { if (this.element && this._events) {
var keys = Object.keys(this.events); var keys = Object.keys(this._events);
for (var i = 0; i < keys.length; i++) { 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. //Remove our element if we have one.
@ -716,16 +754,16 @@ class IgniteTemplate {
} }
//Disconnect all callbacks //Disconnect all callbacks
if (this.callbacks) { if (this._callbacks) {
this.callbacks.forEach((item) => item.disconnect()); this._callbacks.forEach((item) => item.disconnect());
this.callbacks = null; this._callbacks = null;
} }
//Remove any refs //Remove any refs
if (this.refs) { if (this._refs) {
//Pass null to our refs so that the reference is updated. //Pass null to our refs so that the reference is updated.
this.refs.forEach(ref => ref(null)); this._refs.forEach(ref => ref(null));
this.refs = null; this._refs = null;
} }
} }
@ -747,14 +785,14 @@ class IgniteTemplate {
} }
//Remove the old values from the template, but only remove one copy. //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. //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 //For any classes that are missing on the element, add them. If we have duplicates this
//can happen. //can happen.
this.classes.forEach((cl) => { this._classes.forEach((cl) => {
if (!this.element.classList.contains(cl)) { if (!this.element.classList.contains(cl)) {
this.element.classList.add(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) { if (this.element.checked != newValue) {
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 { } else {
if (this.element.value != newValue) { if (this.element.value != newValue) {
this.element.value = newValue; this.element.value = newValue;
} }
} }
} }
this._elementValue = newValue;
} }
/** /**
@ -838,7 +882,7 @@ class IgniteTemplate {
this.element[`_${propertyName}`].setValue(newValue, false); 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.element.innerHTML = newValue;
} }
this.elementInnerHTML = newValue; this._elementInnerHTML = newValue;
} }
/** /**
@ -897,11 +941,11 @@ class IgniteTemplate {
} }
//Remove the old value from the events //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 //Add the new value if it's needed
if (newValue !== null && newValue !== undefined) { if (newValue !== null && newValue !== undefined) {
this.events[eventName].push(newValue); this._events[eventName].push(newValue);
} }
} }
} }
@ -919,10 +963,10 @@ class IgniteTemplate {
} }
if (this.element) { 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(); super();
if (code instanceof IgniteProperty) { 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; this.code = code.value;
} else { } else {
this.code = code; this.code = code;
@ -1296,12 +1340,12 @@ class list extends IgniteTemplate {
super(); super();
if (list instanceof IgniteProperty) { if (list instanceof IgniteProperty) {
this.callbacks.push(list.attachOnChange((oldValue, newValue) => this.onListChanged(oldValue, newValue))); 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.attachOnPush((list, items) => this.onListPush(list, items)));
this.callbacks.push(list.attachOnUnshift((list, items) => this.onListUnshift(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.attachOnPop(list => this.onListPop(list)));
this.callbacks.push(list.attachOnShift(list => this.onListShift(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.attachOnSplice((list, start, deleteCount, items) => this.onListSplice(list, start, deleteCount, items)));
this.list = list.value; this.list = list.value;
} else { } else {
@ -1478,10 +1522,10 @@ class list extends IgniteTemplate {
onStyleChanged(name, newValue) { onStyleChanged(name, newValue) {
this.elements.forEach((element) => { 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); this.element.parentElement.insertBefore(item, this.element);
//Set the classes on the item //Set the classes on the item
for (var i = 0; i < this.classes.length; i++) { for (var i = 0; i < this._classes.length; i++) {
if (this.classes[i] !== null && this.classes[i] !== undefined && this.classes[i] !== "") { if (this._classes[i] !== null && this._classes[i] !== undefined && this._classes[i] !== "") {
item.classList.add(this.classes[i]); item.classList.add(this._classes[i]);
} }
} }
//Set the attributes on the item //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++) { for (var i = 0; i < keys.length; i++) {
if (this.attributes[keys[i]] !== null && this.attributes[keys[i]] !== undefined) { if (this._attributes[keys[i]] !== null && this._attributes[keys[i]] !== undefined) {
item.setAttribute(keys[i], this.attributes[keys[i]]); item.setAttribute(keys[i], this._attributes[keys[i]]);
} }
} }
//Set the styles on the item //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++) { 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); 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(" ") : []); var newClasses = (newValue != null && newValue != "" ? newValue.toString().split(" ") : []);
//Remove the old values from the template, but only remove one copy. //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. //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 //Add the classes to the elements
this.parent.elements.forEach((element) => { this.parent.elements.forEach((element) => {
@ -1590,7 +1634,7 @@ class slot extends IgniteTemplate {
newClasses.forEach((cl) => element.classList.add(cl)); newClasses.forEach((cl) => element.classList.add(cl));
//Add any missing ones //Add any missing ones
this.classes.forEach((cl) => { this._classes.forEach((cl) => {
if (!element.classList.contains(cl)) { if (!element.classList.contains(cl)) {
element.classList.add(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) { onStyleChanged(name, newValue) {
this.parent.elements.forEach((element) => { 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(); super();
if (list instanceof IgniteProperty) { if (list instanceof IgniteProperty) {
this.callbacks.push(list.attachOnChange((oldValue, newValue) => this.onListChanged(oldValue, newValue))); 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.attachOnPush((list, items) => this.onListPush(list, items)));
this.callbacks.push(list.attachOnUnshift((list, items) => this.onListUnshift(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.attachOnPop(list => this.onListPop(list)));
this.callbacks.push(list.attachOnShift(list => this.onListShift(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.attachOnSplice((list, start, deleteCount, items) => this.onListSplice(list, start, deleteCount, items)));
this.list = list.value; this.list = list.value;
} else { } else {
@ -1660,14 +1704,14 @@ class pagination extends IgniteTemplate {
} }
if (pageSize instanceof IgniteProperty) { 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; this.pageSize = pageSize.value;
} else { } else {
this.pageSize = pageSize; this.pageSize = pageSize;
} }
if (currentPage instanceof IgniteProperty) { 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; this.currentPage = currentPage.value;
} else { } else {
this.currentPage = currentPage; this.currentPage = currentPage;
@ -1940,7 +1984,7 @@ class population extends IgniteTemplate {
super(); super();
if (count instanceof IgniteProperty) { 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; this.count = count.value;
} else if (Array.isArray(count) && count.length > 0 && count[0] instanceof IgniteProperty) { } else if (Array.isArray(count) && count.length > 0 && count[0] instanceof IgniteProperty) {
//There must be a converter for this to work correctly //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 //Attack a callback for all the properties
count.forEach(prop => { count.forEach(prop => {
if (prop instanceof IgniteProperty) { if (prop instanceof IgniteProperty) {
this.callbacks.push(prop.attachOnChange((oldValue, newValue) => 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.attachOnPush((list, items) => this.onCountChange(converter(...count.getPropertyValues()))));
this.callbacks.push(prop.attachOnUnshift((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.attachOnPop((list) => this.onCountChange(converter(...count.getPropertyValues()))));
this.callbacks.push(prop.attachOnShift((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.attachOnSplice((list, start, deleteCount, items) => this.onCountChange(converter(...count.getPropertyValues()))));
} }
}); });