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

Fixed a few bugs and added a init method to ignite elements that can be used to setup stuff before the element is created.

Browse Source
This commit is contained in:
Matt Mo
2020-11-09 09:38:00 -08:00
parent 3bee5614ab
commit 00cd30eb54
2 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/ignite-element.js
View File

@@ -56,6 +56,9 @@ class IgniteElement extends HTMLElement {
this.elements = []; this.elements = [];
this.createProperties(); this.createProperties();
this.readyCallback = new IgniteCallback(() => this.ready()); this.readyCallback = new IgniteCallback(() => this.ready());
//Init the element before connected callback is fired.
this.init();
} }
/** /**
@@ -275,6 +278,14 @@ class IgniteElement extends HTMLElement {
return null; return null;
} }
/**
* Called wehn this ignite element is being initialized. When this is called
* the element has not been created. This is good for login checking code or special setup code.
*/
init() {
}
/** /**
* Called when this ignite element is ready. This will invoke once all * Called when this ignite element is ready. This will invoke once all
* ignite elements on the current page have been rendered and setup. You can safely know * ignite elements on the current page have been rendered and setup. You can safely know

25
src/ignite-template.js
View File

@@ -1291,14 +1291,14 @@ class html extends IgniteTemplate {
//Create a template to hold the elements that will be created from the //Create a template to hold the elements that will be created from the
//properties value and then add them to the DOM and store their pointer. //properties value and then add them to the DOM and store their pointer.
if (this.elements.length == 0 && this.code) { if (this.elements.length == 0 && this.code !== null && this.code !== undefined) {
//If the code is an ignite template then reder that template. //If the code is an ignite template then reder that template.
if (this.code instanceof IgniteTemplate) { if (this.code instanceof IgniteTemplate) {
this.code.construct(parent, this.element); this.code.construct(parent, this.element);
this.elements.push(this.code.element); this.elements.push(this.code.element);
} else { } else {
var template = window.document.createElement("template"); var template = window.document.createElement("template");
template.innerHTML = this.code; template.innerHTML = this.code.toString();
while (template.content.childNodes.length > 0) { while (template.content.childNodes.length > 0) {
var item = template.content.childNodes[0]; var item = template.content.childNodes[0];
this.element.parentElement.insertBefore(item, this.element); this.element.parentElement.insertBefore(item, this.element);
@@ -1583,9 +1583,11 @@ class slot extends IgniteTemplate {
this.element.parentElement.insertBefore(item, this.element); this.element.parentElement.insertBefore(item, this.element);
//Set the classes on the item //Set the classes on the item
for (var i = 0; i < this._classes.length; i++) { if (item.classList) {
if (this._classes[i] !== null && this._classes[i] !== undefined && this._classes[i] !== "") { for (var i = 0; i < this._classes.length; i++) {
item.classList.add(this._classes[i]); if (this._classes[i] !== null && this._classes[i] !== undefined && this._classes[i] !== "") {
item.classList.add(this._classes[i]);
}
} }
} }
@@ -1598,10 +1600,12 @@ class slot extends IgniteTemplate {
} }
//Set the styles on the item //Set the styles on the item
var keys = Object.keys(this._styles); if (item.style) {
for (var i = 0; i < keys.length; i++) { var keys = Object.keys(this._styles);
var style = this._styles[keys[i]]; for (var i = 0; i < keys.length; i++) {
item.style.setProperty(style.name, style.value, style.priority); var style = this._styles[keys[i]];
item.style.setProperty(style.name, style.value, style.priority);
}
} }
}); });
} }
@@ -1627,6 +1631,9 @@ class slot extends IgniteTemplate {
//Add the classes to the elements //Add the classes to the elements
this.parent.elements.forEach((element) => { this.parent.elements.forEach((element) => {
//Only do this if the element has a class list.
if (!element.classList) { return; }
//Remove the old ones first. //Remove the old ones first.
oldClasses.forEach((cl) => element.classList.remove(cl)); oldClasses.forEach((cl) => element.classList.remove(cl));