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

Added converters for classes, styles, and attributes. Only one class can now be defined per function call but this is worth while trade.

Browse Source
This commit is contained in:
Matt Mo 2020-08-23 22:27:12 -07:00
parent c7529f1efc
commit 2da77f5177
1 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/ignite-template.js
View File

@ -35,16 +35,14 @@ class IgniteTemplate {
/** /**
* Adds a single or series of classes to this template * Adds a single or series of classes to this template
* to be added once this template is constructed. * to be added once this template is constructed.
* @param {...any} items * @param {...any} items
*/ */
class(...items) { class(name, converter = null) {
for (var i = 0; i < items.length; i++) { if (name instanceof IgniteProperty) {
if (items[i] instanceof IgniteProperty) { this.callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue, converter)));
this.callbacks.push(items[i].attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue))); this.classes.push(converter != null ? converter(name.value) : name.value);
this.classes.push(items[i].value); } else {
} else { this.classes.push(converter != null ? converter(name) : name);
this.classes.push(items[i]);
}
} }
return this; return this;
@ -55,12 +53,12 @@ class IgniteTemplate {
* @param {string} name * @param {string} name
* @param {any} value * @param {any} value
*/ */
attribute(name, value) { attribute(name, value, converter = null) {
if (value instanceof IgniteProperty) { if (value instanceof IgniteProperty) {
this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name))); this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter)));
this.attributes[name] = value.value; this.attributes[name] = converter != null ? converter(value.value) : value.value;
} else { } else {
this.attributes[name] = value; this.attributes[name] = converter != null ? converter(value) : value;
} }
return this; return this;
@ -212,12 +210,12 @@ class IgniteTemplate {
* @param {String} value * @param {String} value
* @param {Boolean} priority * @param {Boolean} priority
*/ */
style(name, value, priority = null) { style(name, value, priority = null, converter = null) {
if (value instanceof IgniteProperty) { if (value instanceof IgniteProperty) {
this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name))); this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name, converter)));
this.styles[name] = { name: name, value: value.value, priority: priority }; this.styles[name] = { name: name, value: (converter != null ? converter(value.value) : value.value), priority: priority };
} else { } else {
this.styles[name] = { name: name, value: value, priority: priority }; this.styles[name] = { name: name, value: (converter != null ? converter(value) : value), priority: priority };
} }
return this; return this;
@ -257,7 +255,7 @@ class IgniteTemplate {
//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) { 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]);
} }
} }
@ -360,7 +358,12 @@ class IgniteTemplate {
* @param {any} oldValue * @param {any} oldValue
* @param {any} newValue * @param {any} newValue
*/ */
onClassChanged(oldValue, newValue) { onClassChanged(oldValue, newValue, converter) {
if (converter !== null) {
oldValue = converter(oldValue);
newValue = converter(newValue);
}
if (this.element) { if (this.element) {
if (oldValue !== null && oldValue !== undefined && oldValue !== "" && oldValue !== " ") { if (oldValue !== null && oldValue !== undefined && oldValue !== "" && oldValue !== " ") {
this.element.classList.remove(oldValue); this.element.classList.remove(oldValue);
@ -387,7 +390,11 @@ class IgniteTemplate {
* @param {any} newValue * @param {any} newValue
* @param {string} attributeName * @param {string} attributeName
*/ */
onAttributeChanged(oldValue, newValue, attributeName) { onAttributeChanged(oldValue, newValue, attributeName, converter) {
if (converter !== null) {
newValue = converter(newValue);
}
if (this.element) { if (this.element) {
if (newValue == null || newValue == undefined) { if (newValue == null || newValue == undefined) {
this.element.removeAttribute(attributeName); this.element.removeAttribute(attributeName);
@ -463,11 +470,12 @@ class IgniteTemplate {
* @param {any} newValue * @param {any} newValue
* @param {any} style * @param {any} style
*/ */
onCssValueChanged(oldValue, newValue, name) { onCssValueChanged(oldValue, newValue, name, converter) {
if (this.element) { if (this.element) {
this.element.style.setProperty(name, newValue, this.styles[name].priority); this.element.style.setProperty(name, (converter != null ? converter(newValue) : newValue), this.styles[name].priority);
this.styles[name].value = newValue;
} }
this.styles[name].value = (converter != null ? converter(newValue) : newValue);
} }
} }