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

Rolled back change to IgniteObject. Added ability to use a function for the class name and simplified the code.

Browse Source
This commit is contained in:
MattMo 2023-04-27 10:54:01 -07:00
parent a171b3da4d
commit 4f215dd375
2 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ignite-html.js
View File

@ -463,7 +463,21 @@ Array.prototype.getOldPropertyValues = function (property, oldValue) {
* The outline of an IgniteObject which contains IgniteProperties. * The outline of an IgniteObject which contains IgniteProperties.
*/ */
class IgniteObject { class IgniteObject {
constructor() { /**
* Creates a new ignite object with an optional object to create from.
* @param {Any} obj
*/
constructor(obj = null) {
//Only do this if the object is not an ignite object already.
if (obj && !(obj instanceof IgniteObject)) {
Object.keys(obj).forEach(name => {
var prop = new IgniteProperty(obj[name]);
Object.defineProperty(this, name, {
get: () => { return (IgniteRendering.rendering ? prop : prop.value); },
set: (value) => { prop.value = value; }
});
});
}
} }
/** /**

33
ignite-template.js
View File

@ -76,7 +76,7 @@ class IgniteTemplate {
/** /**
* Adds a CSS class to be added once this template is constructed. * Adds a CSS class to be added once this template is constructed.
* @param {String|IgniteProperty} name Name of the CSS class to add. Multiple CSS classes are supported if they are separated by a space. * @param {String|IgniteProperty|Function} name Name of the CSS class to add. Multiple CSS classes are supported if they are separated by a space.
* @param {Function} converter Optional function that can convert the class name into a different one. * @param {Function} converter Optional function that can convert the class name into a different one.
* @example * @example
* .class("row justify-content-center") * .class("row justify-content-center")
@ -85,6 +85,8 @@ class IgniteTemplate {
class(name, converter = null) { class(name, converter = null) {
IgniteRendering.push(); IgniteRendering.push();
var value = null;
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))));
this._callbacks.push(name.attachOnPush((list, items) => this.onClassChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); this._callbacks.push(name.attachOnPush((list, items) => this.onClassChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null))));
@ -93,12 +95,7 @@ class IgniteTemplate {
this._callbacks.push(name.attachOnShift((list) => this.onClassChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); this._callbacks.push(name.attachOnShift((list) => this.onClassChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null))));
this._callbacks.push(name.attachOnSplice((list, start, deleteCount, items) => this.onClassChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null)))); this._callbacks.push(name.attachOnSplice((list, start, deleteCount, items) => this.onClassChanged((converter != null ? converter(list) : list), (converter != null ? converter(list) : null))));
var value = (converter != null ? converter(name.value) : name.value); value = (converter != null ? converter(name.value) : name.value);
(value != null ? value.toString().split(" ") : []).forEach(cl => {
if (cl.length > 0) {
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) {
//There must be a converter for this to work correctly //There must be a converter for this to work correctly
if (!converter) { if (!converter) {
@ -117,21 +114,19 @@ class IgniteTemplate {
} }
}); });
var value = converter(...name.getPropertyValues()); value = converter(...name.getPropertyValues());
(value != null ? value.toString().split(" ") : []).forEach(cl => { } else if (name instanceof Function) {
if (cl.length > 0) { value = (converter != null ? converter(name()) : name());
this._classes.push(cl);
}
});
} else { } else {
var value = (converter != null ? converter(name) : name); value = (converter != null ? converter(name) : name);
(value != null ? value.toString().split(" ") : []).forEach(cl => {
if (cl.length > 0) {
this._classes.push(cl);
}
});
} }
(value != null ? value.toString().split(" ") : []).forEach(cl => {
if (cl.length > 0) {
this._classes.push(cl);
}
});
IgniteRendering.pop(); IgniteRendering.pop();
return this; return this;
} }