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

Added dynamic styling to templates via a style function, with this properties can be used to create styles that automatically update. Or you can use static style values.

Browse Source
This commit is contained in:
Matt Mo 2020-08-11 12:53:57 -07:00
parent 4e53913331
commit 1d13c50711
2 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/ignite-template.js
View File

@ -13,6 +13,7 @@ class IgniteTemplate {
this.refs = [];
this.callbacks = [];
this.events = {};
this.styles = {};
if (items) {
for (var i = 0; i < items.length; i++) {
@ -139,6 +140,24 @@ class IgniteTemplate {
return this;
}
/**
* Sets a css style on this template and adds it to the element
* once it's constructed.
* @param {String} name
* @param {String} value
* @param {Boolean} priority
*/
style(name, value, priority = null) {
if (value instanceof IgniteProperty) {
this.callbacks.push(value.attach((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name)));
this.styles[name] = { name: name, value: value.value, priority: priority };
} else {
this.styles[name] = { name: name, value: value, priority: priority };
}
return this;
}
/**
* Constructs this template and adds it to the DOM if this template
* has not already been constructed.
@ -193,6 +212,13 @@ class IgniteTemplate {
});
}
//Set the styles on this element.
var keys = Object.keys(this.styles);
for (var i = 0; i < keys.length; 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);
for (var i = 0; i < keys.length; i++) {
@ -265,7 +291,6 @@ class IgniteTemplate {
* @param {any} newValue
*/
onClassChanged(oldValue, newValue) {
console.log(`Class changed, oldValue: ${oldValue} newValue: ${newValue}`);
if (this.element) {
if (oldValue !== null && oldValue !== undefined && oldValue !== "" && oldValue !== " ") {
this.element.classList.remove(oldValue);
@ -293,7 +318,6 @@ class IgniteTemplate {
* @param {string} attributeName
*/
onAttributeChanged(oldValue, newValue, attributeName) {
console.log(`Attribute changed, oldValue: ${oldValue} newValue: ${newValue} attribute: ${attributeName}`);
if (this.element) {
if (newValue == null || newValue == undefined) {
this.element.removeAttribute(attributeName);
@ -313,7 +337,6 @@ class IgniteTemplate {
* @param {string} propertyName
*/
onPropertyChanged(oldValue, newValue, propertyName) {
console.log(`Property changed, oldValue: ${oldValue} newValue: ${newValue} property: ${propertyName}`);
if (this.element) {
this.element[propertyName] = newValue;
}
@ -329,8 +352,6 @@ class IgniteTemplate {
* @param {any} ref
*/
onRefChanged(oldValue, newValue, ref) {
console.log(`Ref changed, oldValue: ${oldValue} newValue: ${newValue}`);
//Only set the reference value to ourself if it's not our element.
//Otherwise we will get a never ending loop.
if (this.element != newValue) {
@ -345,8 +366,6 @@ class IgniteTemplate {
* @param {any} eventName
*/
onEventChanged(oldValue, newValue, eventName) {
console.log(`Event changed: ${eventName}`);
if (this.element) {
if (oldValue !== null && oldValue !== undefined) {
this.element.removeEventListener(eventName, oldValue);
@ -365,6 +384,19 @@ class IgniteTemplate {
}
}
}
/**
* Called when a css value was changed and we need to update the styling.
* @param {any} oldValue
* @param {any} newValue
* @param {any} style
*/
onCssValueChanged(oldValue, newValue, name) {
if (this.element) {
this.element.style.setProperty(name, newValue, this.styles[name].priority);
this.styles[name].value = newValue;
}
}
}
class div extends IgniteTemplate {

5
src/sheet.js
View File

@ -12,6 +12,7 @@ class Sheet extends IgniteElement {
items: ["1", "2"],
href: "www.google.com",
name: "default content",
color: "red",
linkClick: this.onClick1,
linkClick2: this.onClick2
};
@ -30,7 +31,9 @@ class Sheet extends IgniteElement {
new html("<h3>---- begin sheet's slot ----<h3>"),
new slot(this),
new html("<h3>---- end of slot ----</h3>"),
new a("I go nowhere, but you can click me ;)").on("click", this.linkClick).on("click", this.linkClick2)
new a("I go nowhere, but you can click me ;)")
.on("click", this.linkClick).on("click", this.linkClick2)
.style("color", this.color, "important")
)
);
}