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

Added Variables to ignite element. Added ability to create an IgniteProperty with a set of optional callbacks to create advanced components.

Browse Source
This commit is contained in:
Matt Mo 2021-03-28 20:34:35 -07:00
parent 92a5eb3384
commit f49aad478c
2 changed files with 83 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
ignite-element.js
View File

@ -50,13 +50,18 @@ class IgniteElement extends HTMLElement {
constructor() {
super();
this.elementConnected = false;
this.elementConnected = false; //Used to know if the connectedCallback was already called.
this.template = null;
this.elements = [];
this.createProperties();
this.readyCallback = new IgniteCallback(() => this.ready());
this.onDisconnectCallbacks = [];
//Create the variables for this element.
this.createVariables();
//Create the properties for this element.
this.createProperties();
//Init the element before connected callback is fired
//Create a new rendering context so the init method can access properties correctly.
IgniteRenderingContext.push();
@ -64,6 +69,24 @@ class IgniteElement extends HTMLElement {
IgniteRenderingContext.pop();
}
/**
* Returns an object with all the variables for this ignite element. Variables
* unlike properties have no callbacks or events, they are just data.
*
* @returns An object with properties that will be assigned to this ignite element as variables.
*
* @example
* get variables() {
* return {
* dialog: null,
* clickCallback: null
* };
* }
*/
get variables() {
return {};
}
/**
* Returns an object with all the properties for this ignite element. If null or empty
* then no properties will be created. To change a property and read it's current value see below.
@ -110,6 +133,36 @@ class IgniteElement extends HTMLElement {
return null;
}
/**
* Creates the variables for this ignite element and initializes them.
* @ignore
*/
createVariables() {
var vars = this.variables;
if (vars != null) {
var keys = Object.keys(vars);
for (var i = 0; i < keys.length; i++) {
this[keys[i]] = vars[keys[i]];
}
}
}
/**
* Resets the variables for this element back to their original default
* values.
*/
resetVariables() {
var vars = this.variables;
if (vars != null) {
var keys = Object.keys(vars);
for (var i = 0; i < keys.length; i++) {
this[keys[i]] = vars[keys[i]];
}
}
}
/**
* Creates the getters/setters for properties in this
* ignite element and initializes everything.
@ -153,7 +206,7 @@ class IgniteElement extends HTMLElement {
/**
* Resets the properties for this element back to their original default
* value.
* values.
*/
resetProperties() {
var props = this.properties;

30
ignite-html.js
View File

@ -4,7 +4,7 @@
* @ignore
*/
class IgniteProperty {
constructor(val, onChange = null) {
constructor(val, options = null) {
this.onChangeCallbacks = [];
this.onPushCallbacks = [];
this.onPopCallbacks = [];
@ -17,9 +17,31 @@ class IgniteProperty {
this._value = val;
this.ignoreValueChange = false;
//If we were passed an onchange function attach it.
if (onChange) {
this.attachOnChange(onChange);
//If we were passed options, add any callbacks needed.
if (options) {
if (options.onChange) {
this.attachOnChange(options.onChange);
}
if (options.onPush) {
this.attachOnPush(options.onPush);
}
if (options.onPop) {
this.attachOnPop(options.onPop);
}
if (options.onShift) {
this.attachOnShift(options.onShift);
}
if (options.onUnshift) {
this.attachOnUnshift(options.onUnshift);
}
if (options.onSplice) {
this.attachOnSplice(options.onSplice);
}
}
//Attempt to patch the value if it's a list.