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.
This commit is contained in:
parent
c172cb5599
commit
3bee5614ab
@ -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.
|
||||
|
||||
@ -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()))));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user