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

Row accordian now uses new converter to simplify css classes and make everything more readable.

Browse Source
This commit is contained in:
Matt Mo 2020-08-23 22:28:18 -07:00
parent 3bcc12d560
commit 0b8ecf28e5
4 changed files with 61 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/main-app.js
View File

@ -17,6 +17,7 @@ class MainApp extends IgniteElement {
new div(
new RowAccordian()
.property("title", "Defining a new component/element")
.property("show", true)
.child("<h1>This is the content</h1><h2>hopefully a lot of it</h2><h2>this should give an idea</h2>"),
new RowAccordian()
.property("title", "Defining a new component/element")

8
src/components/row-accordian.js
View File

@ -9,7 +9,7 @@ class RowAccordian extends IgniteElement {
get properties() {
return {
title: "Title of this row",
show: false
show: false,
};
}
@ -35,13 +35,13 @@ class RowAccordian extends IgniteElement {
overflow: hidden;
}
row-accordian > div.false > div {
row-accordian > div.hide > div {
transition: 1.5s;
margin-top: -100vh;
opacity: 0;
}
row-accordian > div.true > div {
row-accordian > div > div {
margin-top: 0;
opacity: 1;
}
@ -57,7 +57,7 @@ class RowAccordian extends IgniteElement {
new div(
new slot(this)
)
).class(this.show)
).class(this.show, (value) => { return value ? null : "hide" })
);
}
}

4
src/ignite-html/ignite-element.js
View File

@ -36,6 +36,7 @@ class IgniteElement extends HTMLElement {
createProperties() {
var props = this.properties;
if (props != null) {
var keys = Object.keys(props);
for (var i = 0; i < keys.length; i++) {
let prop = new IgniteProperty(props[keys[i]]);
@ -58,6 +59,7 @@ class IgniteElement extends HTMLElement {
})(keys[i]);
}
}
}
/**
* Resets the properties for this element back to their original default
@ -66,11 +68,13 @@ class IgniteElement extends HTMLElement {
resetProperties() {
var props = this.properties;
if (props != null) {
var keys = Object.keys(props);
for (var i = 0; i < keys.length; i++) {
this[keys[i]] = props[keys[i]];
}
}
}
/**
* Setups this ignite element and constructs it's template when

50
src/ignite-html/ignite-template.js
View File

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