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

Renamed IgniteRenderingContext to IgniteRendering. Added a new IgniteHtml class which contains function to register elements for rendering and a global render function to start the rendering process. Changed elements css style class name to be more meaningful.

Browse Source
This commit is contained in:
MattMo
2022-08-26 08:34:20 -07:00
parent 9af84da6a0
commit fca9af5f73
3 changed files with 135 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ignite-element.js
View File

@ -1,4 +1,4 @@
import { IgniteProperty, IgniteCallback, IgniteRenderingContext } from './ignite-html.js';
import { IgniteProperty, IgniteCallback, IgniteRendering } from './ignite-html.js';
import { IgniteTemplate } from './ignite-template.js';
/**
@ -73,9 +73,9 @@ class IgniteElement extends HTMLElement {
//Init the element before connected callback is fired
//Create a new rendering context so the init method can access properties correctly.
IgniteRenderingContext.push();
IgniteRendering.push();
this.init();
IgniteRenderingContext.pop();
IgniteRendering.pop();
}
/**
@ -170,9 +170,9 @@ class IgniteElement extends HTMLElement {
getProperties() {
var ret = {};
var props = this.properties;
IgniteRenderingContext.push();
IgniteRendering.push();
Object.keys(props).forEach(name => ret[name] = this[name]);
IgniteRenderingContext.pop();
IgniteRendering.pop();
return ret;
}
@ -204,7 +204,7 @@ class IgniteElement extends HTMLElement {
Object.keys(props).forEach(name => {
var prop = (props[name] instanceof IgniteProperty ? props[name] : new IgniteProperty(props[name]));
Object.defineProperty(this, name, {
get: () => { return (IgniteRenderingContext.rendering ? prop : prop.value); },
get: () => { return (IgniteRendering.rendering ? prop : prop.value); },
set: (value) => { prop.value = value; }
});
});
@ -239,9 +239,9 @@ class IgniteElement extends HTMLElement {
//See if a styling sheet has been created for this element if it's needed.
if (this.styles !== null && this.styles !== "") {
if (document.getElementsByClassName(`_${this.tagName}_styling_`).length == 0) {
if (document.getElementsByClassName(`ignite-html-${this.tagName.toLowerCase()}-css`).length == 0) {
var styleEl = document.createElement("style");
styleEl.classList.add(`_${this.tagName}_styling_`);
styleEl.classList.add(`ignite-html-${this.tagName.toLowerCase()}-css`);
styleEl.innerHTML = this.styles;
document.body.prepend(styleEl);
}
@ -259,7 +259,7 @@ class IgniteElement extends HTMLElement {
this.childNodes.forEach((item) => this.elements.push(item));
//Enter a rendering context so properties don't expose their values until we are done.
IgniteRenderingContext.enter();
IgniteRendering.enter();
//Make sure the render template is our template, if not, add it as a child.
var renderTemplate = this.render();
@ -277,10 +277,10 @@ class IgniteElement extends HTMLElement {
}
//Leave the rendering context.
IgniteRenderingContext.leave();
IgniteRendering.leave();
//Let the rendering context know this element is ready.
IgniteRenderingContext.ready(this.readyCallback);
IgniteRendering.ready(this.readyCallback);
}
/**