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

Cleaned up code and improved documentation. Added new OnSeen event that fires the first time the element is seen and stops firing after that.

Browse Source
This commit is contained in:
MattMo 2023-02-05 19:04:08 -08:00
parent 7ba146443f
commit 485f8ae2bd
1 changed files with 57 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
ignite-template.js
View File

@ -711,16 +711,16 @@ class IgniteTemplate {
/** /**
* Adds a special on resize event handler to this template that will * Adds a special on resize event handler to this template that will
* fire anytime the element is resized by using a resize observer. You can call this more than once to attach more than one callback. * 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. * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns {IgniteTemplate} This ignite template so function calls can be chained. * @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/ */
onResize(callback) { onResize(eventCallback) {
IgniteRendering.push(); IgniteRendering.push();
if (callback instanceof IgniteProperty) { if (eventCallback instanceof IgniteProperty) {
this._resizeObserverCallback.push(callback.value); this._resizeObserverCallback.push(eventCallback.value);
} else if (callback instanceof Function) { } else if (eventCallback instanceof Function) {
this._resizeObserverCallback.push(callback); this._resizeObserverCallback.push(eventCallback);
} }
IgniteRendering.pop(); IgniteRendering.pop();
@ -730,22 +730,54 @@ class IgniteTemplate {
/** /**
* Adds a special on intersect event handler to this template that will fire * 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. * 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. * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
* @returns {IgniteTemplate} This ignite template so function calls can be chained. * @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/ */
onIntersect(callback) { onIntersect(eventCallback) {
IgniteRendering.push(); IgniteRendering.push();
if (callback instanceof IgniteProperty) { if (eventCallback instanceof IgniteProperty) {
this._intersectObserverCallback.push(callback.value); this._intersectObserverCallback.push(eventCallback.value);
} else if (callback instanceof Function) { } else if (eventCallback instanceof Function) {
this._intersectObserverCallback.push(callback); this._intersectObserverCallback.push(eventCallback);
} }
IgniteRendering.pop(); IgniteRendering.pop();
return this; return this;
} }
/**
* Adds a special event handler for this template that will fire the first time the element is seen and does not repeat.
* @param {Function|IgniteProperty} eventCallback The callback function to be invoked once this element becomes visible.
* @returns {IgniteTemplate} This ignite template so function calls can be chained.
*/
onSeen(eventCallback) {
IgniteRendering.push();
var wrapped = () => {
if (eventCallback instanceof IgniteProperty) {
eventCallback.value();
} else if (eventCallback instanceof Function) {
eventCallback();
}
//Set our callback to null so that we stop being called.
if (this._intersectObserverCallback) {
for (var i = 0; i < this._intersectObserverCallback.length; i++) {
if (this._intersectObserverCallback[i] == wrapped) {
this._intersectObserverCallback[i] = null;
break;
}
}
}
};
this._intersectObserverCallback.push(wrapped);
IgniteRendering.pop();
return this;
}
/** /**
* Adds a CSS property to this template with a value and priority. * Adds a CSS property to this template with a value and priority.
* @param {String} name The name of the CSS property to set. * @param {String} name The name of the CSS property to set.
@ -1210,8 +1242,13 @@ class IgniteTemplate {
//Setup a resize observer if needed //Setup a resize observer if needed
if (this._resizeObserverCallback && this._resizeObserverCallback.length > 0) { if (this._resizeObserverCallback && this._resizeObserverCallback.length > 0) {
this._resizeObserver = new ResizeObserver(e => { this._resizeObserver = new ResizeObserver(e => {
this._resizeObserverCallback.forEach(callback => callback(e)); for (var i = 0; i < this._resizeObserverCallback.length; i++) {
if (this._resizeObserverCallback[i]) {
this._resizeObserverCallback[i](e);
}
}
}); });
this._resizeObserver.observe(this.element); this._resizeObserver.observe(this.element);
} }
@ -1219,9 +1256,14 @@ class IgniteTemplate {
if (this._intersectObserverCallback && this._intersectObserverCallback.length > 0) { if (this._intersectObserverCallback && this._intersectObserverCallback.length > 0) {
this._intersectObserver = new IntersectionObserver(results => { this._intersectObserver = new IntersectionObserver(results => {
if (results[0].isIntersecting) { if (results[0].isIntersecting) {
this._intersectObserverCallback.forEach(callback => callback(results[0])); for (var i = 0; i < this._intersectObserverCallback.length; i++) {
if (this._intersectObserverCallback[i]) {
this._intersectObserverCallback[i](results[0]);
}
}
} }
}, { root: null, trackVisibility: true, delay: 1000 }); }, { root: null, threshold: 0.25 });
this._intersectObserver.observe(this.element); this._intersectObserver.observe(this.element);
} }