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

Merge branch 'HEAD'

Browse Source
This commit is contained in:
MattMo 2021-05-04 14:14:33 -07:00
commit 8b5a4b91ae
1 changed files with 81 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
ignite-template.js
View File

@ -13,6 +13,15 @@ import { IgniteElement } from './ignite-element.js';
* super("div", items);
* }
* }
*
* @example
* IgniteTemplate's construct method can be extended by adding a callback function to _constructors under a template:
* template._constructors.push(() => console.log('constructed'));
*
*
* @example
* IgniteTemplate's deconstruct method can be extended by adding a callback function to _destructors under a template:
* template._destructors.push(() => console.log('destructed'));
*/
class IgniteTemplate {
@ -36,10 +45,14 @@ class IgniteTemplate {
this._callbacks = [];
this._events = {};
this._styles = {};
this._constructors = [];
this._destructors = [];
this._elementValue = null;
this._elementInnerHTML = null;
this._resizeObserverCallback = null;
this._resizeObserverCallback = [];
this._resizeObserver = null;
this._intersectObserverCallback = [];
this._intersectObserver = null;
if (children) {
for (var i = 0; i < children.length; i++) {
@ -163,7 +176,9 @@ class IgniteTemplate {
this._callbacks.push(value.attachOnSplice((list, start, deleteCount, items) => this.onValueChanged((converter != null ? converter(list) : null))));
if (reflect != null && ((typeof (reflect) == "boolean" && reflect == true) || reflect instanceof Function)) {
var valueChanged = e => {
var keyUpDelay = null;
var valueChanged = () => {
keyUpDelay = null;
var newValue = null;
var type = this.element.hasAttribute("type") ? this.element.getAttribute("type").toLowerCase().trim() : null;
@ -185,10 +200,16 @@ class IgniteTemplate {
} else {
value.setValue(newValue, true);
}
this._elementValue = newValue;
};
this.on("change", valueChanged);
this.on("keyup", valueChanged);
this.on("keyup", () => {
if (!keyUpDelay) {
keyUpDelay = setTimeout(valueChanged, 300);
}
});
}
this._elementValue = (converter != null ? converter(value.value) : value.value);
@ -568,17 +589,36 @@ class IgniteTemplate {
/**
* 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.
* fire anytime the element is resized by using a resize observer. You can call this more than once to attach more than one callback.
* @param {Function|IgniteProperty} callback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
*/
onResize(eventCallback) {
onResize(callback) {
IgniteRenderingContext.push();
if (eventCallback instanceof IgniteProperty) {
this._resizeObserverCallback = eventCallback.value;
} else if (eventCallback instanceof Function) {
this._resizeObserverCallback = eventCallback;
if (callback instanceof IgniteProperty) {
this._resizeObserverCallback.push(callback.value);
} else if (callback instanceof Function) {
this._resizeObserverCallback.push(callback);
}
IgniteRenderingContext.pop();
return this;
}
/**
* Adds a special on intersect event handler to this template that will fire
* once the element is in view. You can call this more than once to attach more than one callback.
* @param {Function|IgniteProperty} callback The callback function to be invoked by the event once it fires.
* @returns This ignite template so function calls can be chained.
*/
onIntersect(callback) {
IgniteRenderingContext.push();
if (callback instanceof IgniteProperty) {
this._intersectObserverCallback.push(callback.value);
} else if (callback instanceof Function) {
this._intersectObserverCallback.push(callback);
}
IgniteRenderingContext.pop();
@ -912,11 +952,26 @@ class IgniteTemplate {
}
//Setup a resize observer if needed
if (this._resizeObserverCallback !== null) {
this._resizeObserver = new ResizeObserver(e => this._resizeObserverCallback(e));
if (this._resizeObserverCallback && this._resizeObserverCallback.length > 0) {
this._resizeObserver = new ResizeObserver(e => {
this._resizeObserverCallback.forEach(callback => callback(e));
});
this._resizeObserver.observe(this.element);
}
//Setup a intersect observer if needed
if (this._intersectObserverCallback && this._intersectObserverCallback.length > 0) {
this._intersectObserver = new IntersectionObserver(results => {
if (results[0].isIntersecting) {
this._intersectObserverCallback.forEach(callback => callback(results[0]));
}
}, { root: null});
this._intersectObserver.observe(this.element);
}
//Invoke any custom constructors.
this._constructors.forEach(c => c(parent, sibling));
//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) {
@ -964,18 +1019,31 @@ class IgniteTemplate {
}
//Stop observing resize events if we need to.
if (this._resizeObserver != null) {
if (this._resizeObserver) {
this._resizeObserver.disconnect();
this._resizeObserver = null;
this._resizeObserverCallback = null;
}
//Stop observing intersects if we need to.
if (this._intersectObserver) {
this._intersectObserver.disconnect();
this._intersectObserver = null;
this._intersectObserverCallback = null;
}
//Remove any refs
if (this._refs) {
//Pass null to our refs so that the reference is updated.
this._refs.forEach(ref => ref(null));
this._refs = null;
}
//Invoke any custom destructors
if (this._destructors) {
this._destructors.forEach(d => d());
this._destructors = null;
}
}
/**