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 div(
new RowAccordian() new RowAccordian()
.property("title", "Defining a new component/element") .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>"), .child("<h1>This is the content</h1><h2>hopefully a lot of it</h2><h2>this should give an idea</h2>"),
new RowAccordian() new RowAccordian()
.property("title", "Defining a new component/element") .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() { get properties() {
return { return {
title: "Title of this row", title: "Title of this row",
show: false show: false,
}; };
} }
@ -35,13 +35,13 @@ class RowAccordian extends IgniteElement {
overflow: hidden; overflow: hidden;
} }
row-accordian > div.false > div { row-accordian > div.hide > div {
transition: 1.5s; transition: 1.5s;
margin-top: -100vh; margin-top: -100vh;
opacity: 0; opacity: 0;
} }
row-accordian > div.true > div { row-accordian > div > div {
margin-top: 0; margin-top: 0;
opacity: 1; opacity: 1;
} }
@ -57,7 +57,7 @@ class RowAccordian extends IgniteElement {
new div( new div(
new slot(this) new slot(this)
) )
).class(this.show) ).class(this.show, (value) => { return value ? null : "hide" })
); );
} }
} }

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

@ -36,26 +36,28 @@ class IgniteElement extends HTMLElement {
createProperties() { createProperties() {
var props = this.properties; var props = this.properties;
var keys = Object.keys(props); if (props != null) {
for (var i = 0; i < keys.length; i++) { var keys = Object.keys(props);
let prop = new IgniteProperty(props[keys[i]]); for (var i = 0; i < keys.length; i++) {
this[`_${keys[i]}`] = prop; let prop = new IgniteProperty(props[keys[i]]);
this[`_${keys[i]}`] = prop;
((propName) => { ((propName) => {
Object.defineProperty(this, propName, { Object.defineProperty(this, propName, {
get: function () { get: function () {
if (IgniteRenderingContext.rendering == false) { if (IgniteRenderingContext.rendering == false) {
return this[`_${propName}`].value; return this[`_${propName}`].value;
} else { } else {
return this[`_${propName}`]; return this[`_${propName}`];
}
},
set: function (value) {
this[`_${propName}`].value = value;
} }
}, });
})(keys[i]);
set: function (value) { }
this[`_${propName}`].value = value;
}
});
})(keys[i]);
} }
} }
@ -66,9 +68,11 @@ class IgniteElement extends HTMLElement {
resetProperties() { resetProperties() {
var props = this.properties; var props = this.properties;
var keys = Object.keys(props); if (props != null) {
for (var i = 0; i < keys.length; i++) { var keys = Object.keys(props);
this[keys[i]] = props[keys[i]]; for (var i = 0; i < keys.length; i++) {
this[keys[i]] = props[keys[i]];
}
} }
} }

54
src/ignite-html/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);
} }
} }