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

Added uuid function to element class to easily allow generating uuid's. May move this later. Added reflect() option to reflect properties once changed via a function or another property. Added onResize function that adds a resize observer to the element constructed by a template and cleans it up nicely. Added onTouch event helper function. Modified reflect callback to allow calling functions or setting the value of a property.

Browse Source
This commit is contained in:
Matt Mo 2021-01-09 16:24:24 -08:00
parent e58e6e58e4
commit e398b61c08
3 changed files with 88 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ignite-element.js
View File

@ -299,6 +299,15 @@ class IgniteElement extends HTMLElement {
cleanup() {
}
/**
* Generates a uuid and returns it.
*/
uuid() {
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
);
}
}
export {

2
ignite-html.js
View File

@ -63,7 +63,7 @@ class IgniteProperty {
//If we want to reflect the value then bubble it up.
if (reflect) {
this.ignoreValueChange = true; //Ignore changes incase we are connected to any reflected properties.
this.reflected.forEach(reflect => reflect.value = val);
this.reflected.forEach(reflect => reflect instanceof Function ? reflect(val) : (reflect.value = val));
this.ignoreValueChange = false;
}

80
ignite-template.js
View File

@ -30,12 +30,15 @@ class IgniteTemplate {
this._attributes = {};
this._classes = [];
this._properties = {};
this._reflecting = {};
this._refs = [];
this._callbacks = [];
this._events = {};
this._styles = {};
this._elementValue = null;
this._elementInnerHTML = null;
this._resizeObserverCallback = null;
this._resizeObserver = null;
if (children) {
for (var i = 0; i < children.length; i++) {
@ -218,6 +221,29 @@ class IgniteTemplate {
return this;
}
/**
* Makes a property on this template reflect its value back to the given target.
* (You can reflect a property more than once if it's needed.)
* @param {String} name Name of the property to reflect.
* @param {IgniteProperty|Function} target The target for the value to be reflected to.
*/
reflect(name, target) {
IgniteRenderingContext.push();
if (this._reflecting[name] == undefined || this._reflecting[name] == null) {
this._reflecting[name] = [];
}
if (target instanceof IgniteProperty) {
this._reflecting[name].push(target);
} else if (target instanceof Function) {
this._reflecting[name].push(target);
}
IgniteRenderingContext.pop();
return this;
}
/**
* Adds a set of properties from an object to be added to this template once it's constructed.
* @param {Object} props The object value that property names/values will be pulled from.
@ -303,7 +329,7 @@ class IgniteTemplate {
ref(refCallback) {
if (refCallback instanceof IgniteProperty) {
this._callbacks.push(refCallback.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, refCallback)));
this._refs.push((element) => refCallback.value = element);
this._refs.push(element => refCallback.value = element);
} else {
this._refs.push(refCallback);
}
@ -319,6 +345,8 @@ class IgniteTemplate {
* @returns This ignite template so function calls can be chained.
*/
on(eventName, eventCallback) {
IgniteRenderingContext.push();
if (!this._events[eventName]) {
this._events[eventName] = [];
}
@ -330,11 +358,12 @@ class IgniteTemplate {
this._events[eventName].push(eventCallback);
}
IgniteRenderingContext.pop();
return this;
}
/**
* Adds an onclick event handler to this template.
* Adds a click event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
*/
@ -342,6 +371,15 @@ class IgniteTemplate {
return this.on("click", eventCallback);
}
/**
* Adds a touch event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
*/
onTouch(eventCallback) {
return this.on("touch", eventCallback);
}
/**
* Adds a onblur event handler to this template.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
@ -465,6 +503,25 @@ class IgniteTemplate {
return this;
}
/**
* Adds a special on resize event handler to this template that will
* fire anytime the element is resized by using a resize observer.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
*/
onResize(eventCallback) {
IgniteRenderingContext.push();
if (eventCallback instanceof IgniteProperty) {
this._resizeObserverCallback = eventCallback.value;
} else if (eventCallback instanceof Function) {
this._resizeObserverCallback = eventCallback;
}
IgniteRenderingContext.pop();
return this;
}
/**
* Adds a CSS property to this template with a value and priority.
* @param {String} name The name of the CSS property to set.
@ -713,6 +770,12 @@ class IgniteTemplate {
}
}
//Setup any reflecting properties on this element
var keys = Object.keys(this._reflecting);
for (var i = 0; i < keys.length; i++) {
this._reflecting[keys[i]].forEach(value => this.element[keys[i]].reflected.push(value));
}
//Set the elements inner html if it was set
if (this._elementInnerHTML != null) {
this.element.innerHTML = this._elementInnerHTML;
@ -734,6 +797,12 @@ class IgniteTemplate {
}
}
//Setup a resize observer if needed
if (this._resizeObserverCallback !== null) {
this._resizeObserver = new ResizeObserver(e => this._resizeObserverCallback(e));
this._resizeObserver.observe(this.element);
}
//If our element has not been added to the dom yet, then add it.
if (this.element.isConnected == false && this.element.parentElement == null) {
if (sibling) {
@ -780,6 +849,13 @@ class IgniteTemplate {
this._callbacks = null;
}
//Stop observing resize events if we need to.
if (this._resizeObserver != null) {
this._resizeObserver.disconnect();
this._resizeObserver = null;
this._resizeObserverCallback = null;
}
//Remove any refs
if (this._refs) {
//Pass null to our refs so that the reference is updated.