From 0b8ecf28e54995167276d9e9339faaa8c40d5a95 Mon Sep 17 00:00:00 2001 From: Matt Mo Date: Sun, 23 Aug 2020 22:28:18 -0700 Subject: [PATCH] Row accordian now uses new converter to simplify css classes and make everything more readable. --- src/components/main-app.js | 1 + src/components/row-accordian.js | 8 ++--- src/ignite-html/ignite-element.js | 46 +++++++++++++------------ src/ignite-html/ignite-template.js | 54 +++++++++++++++++------------- 4 files changed, 61 insertions(+), 48 deletions(-) diff --git a/src/components/main-app.js b/src/components/main-app.js index 7a3d979..64e6c9e 100644 --- a/src/components/main-app.js +++ b/src/components/main-app.js @@ -17,6 +17,7 @@ class MainApp extends IgniteElement { new div( new RowAccordian() .property("title", "Defining a new component/element") + .property("show", true) .child("

This is the content

hopefully a lot of it

this should give an idea

"), new RowAccordian() .property("title", "Defining a new component/element") diff --git a/src/components/row-accordian.js b/src/components/row-accordian.js index 99f699d..df3eb95 100644 --- a/src/components/row-accordian.js +++ b/src/components/row-accordian.js @@ -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" }) ); } } diff --git a/src/ignite-html/ignite-element.js b/src/ignite-html/ignite-element.js index 2f3ed58..5abb61e 100644 --- a/src/ignite-html/ignite-element.js +++ b/src/ignite-html/ignite-element.js @@ -36,26 +36,28 @@ class IgniteElement extends HTMLElement { createProperties() { var props = this.properties; - var keys = Object.keys(props); - for (var i = 0; i < keys.length; i++) { - let prop = new IgniteProperty(props[keys[i]]); - this[`_${keys[i]}`] = prop; + if (props != null) { + var keys = Object.keys(props); + for (var i = 0; i < keys.length; i++) { + let prop = new IgniteProperty(props[keys[i]]); + this[`_${keys[i]}`] = prop; - ((propName) => { - Object.defineProperty(this, propName, { - get: function () { - if (IgniteRenderingContext.rendering == false) { - return this[`_${propName}`].value; - } else { - return this[`_${propName}`]; + ((propName) => { + Object.defineProperty(this, propName, { + get: function () { + if (IgniteRenderingContext.rendering == false) { + return this[`_${propName}`].value; + } else { + return this[`_${propName}`]; + } + }, + + set: function (value) { + this[`_${propName}`].value = value; } - }, - - set: function (value) { - this[`_${propName}`].value = value; - } - }); - })(keys[i]); + }); + })(keys[i]); + } } } @@ -66,9 +68,11 @@ class IgniteElement extends HTMLElement { resetProperties() { var props = this.properties; - var keys = Object.keys(props); - for (var i = 0; i < keys.length; i++) { - this[keys[i]] = props[keys[i]]; + if (props != null) { + var keys = Object.keys(props); + for (var i = 0; i < keys.length; i++) { + this[keys[i]] = props[keys[i]]; + } } } diff --git a/src/ignite-html/ignite-template.js b/src/ignite-html/ignite-template.js index 9d0c9a9..4884092 100644 --- a/src/ignite-html/ignite-template.js +++ b/src/ignite-html/ignite-template.js @@ -35,16 +35,14 @@ class IgniteTemplate { /** * Adds a single or series of classes to this template * to be added once this template is constructed. - * @param {...any} items + * @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); - } else { - this.classes.push(items[i]); - } + 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(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); } }