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

Fixed some major issues with list splice construction and other templates incorrectly constructing an element after a specified sibling. Improved documentation as well.

Browse Source
This commit is contained in:
MattMo 2023-11-07 08:25:54 -08:00
parent f1b1ae5c13
commit 3eadebec0c
1 changed files with 79 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
ignite-template.js
View File

@ -1415,8 +1415,8 @@ class IgniteTemplate {
//If our element has not been added to the dom yet, then add it. //If our element has not been added to the dom yet, then add it.
if (this.element.isConnected == false && this.element.parentElement == null) { if (this.element.isConnected == false && this.element.parentElement == null) {
if (sibling) { if (sibling && sibling.nextSibling) {
parent.insertBefore(this.element, sibling); sibling.parentElement.insertBefore(this.element, sibling.nextSibling);
} else { } else {
parent.appendChild(this.element); parent.appendChild(this.element);
} }
@ -2302,6 +2302,12 @@ class text extends IgniteTemplate {
IgniteRendering.pop(); IgniteRendering.pop();
} }
/**
* Constructs this template and adds it to the DOM if this template
* has not already been constructed.
* @param {HTMLElement} parent Parent element that will contain the constructed element.
* @param {HTMLElement} sibling Optional sibling element that can be used to add the element adjacantly.
*/
construct(parent, sibling) { construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element. //Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) { if (!parent && !sibling && !this.element) {
@ -2311,8 +2317,8 @@ class text extends IgniteTemplate {
if (!this.element) { if (!this.element) {
this.element = window.document.createTextNode(""); this.element = window.document.createTextNode("");
if (sibling) { if (sibling && sibling.nextSibling) {
sibling.parentElement.insertBefore(this.element, sibling); sibling.parentElement.insertBefore(this.element, sibling.nextSibling);
} else { } else {
parent.appendChild(this.element); parent.appendChild(this.element);
} }
@ -2355,6 +2361,12 @@ class html extends IgniteTemplate {
this.elements = []; this.elements = [];
} }
/**
* Constructs this template and adds it to the DOM if this template
* has not already been constructed.
* @param {HTMLElement} parent Parent element that will contain the constructed element.
* @param {HTMLElement} sibling Optional sibling element that can be used to add the element adjacantly.
*/
construct(parent, sibling) { construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element. //Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) { if (!parent && !sibling && !this.element) {
@ -2364,8 +2376,8 @@ class html extends IgniteTemplate {
if (!this.element) { if (!this.element) {
this.element = window.document.createTextNode(""); this.element = window.document.createTextNode("");
if (sibling) { if (sibling && sibling.nextSibling) {
sibling.parentElement.insertBefore(this.element, sibling); sibling.parentElement.insertBefore(this.element, sibling.nextSibling);
} else { } else {
parent.appendChild(this.element); parent.appendChild(this.element);
} }
@ -2453,6 +2465,12 @@ class list extends IgniteTemplate {
this.tagName = "shadow list"; this.tagName = "shadow list";
} }
/**
* Constructs this template and adds it to the DOM if this template
* has not already been constructed.
* @param {HTMLElement} parent Parent element that will contain the constructed element.
* @param {HTMLElement} sibling Optional sibling element that can be used to add the element adjacantly.
*/
construct(parent, sibling) { construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element. //Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) { if (!parent && !sibling && !this.element) {
@ -2462,8 +2480,8 @@ class list extends IgniteTemplate {
if (!this.element) { if (!this.element) {
this.element = window.document.createTextNode(""); //Use a textnode as our placeholder this.element = window.document.createTextNode(""); //Use a textnode as our placeholder
if (sibling) { if (sibling && sibling.nextSibling) {
sibling.parentElement.insertBefore(this.element, sibling); sibling.parentElement.insertBefore(this.element, sibling.nextSibling);
} else { } else {
parent.appendChild(this.element); parent.appendChild(this.element);
} }
@ -2503,7 +2521,11 @@ class list extends IgniteTemplate {
var template = this.forEachCallback(this.list[i], i, this.list.length); var template = this.forEachCallback(this.list[i], i, this.list.length);
if (template) { if (template) {
template.construct(parent, this.element); if (this.elements.length > 0) {
template.construct(parent, this.elements[this.elements.length - 1]);
} else {
template.construct(parent, this.element);
}
//If we are reflecting, attach to the elements disconnect event. //If we are reflecting, attach to the elements disconnect event.
if (this.reflecting) { if (this.reflecting) {
@ -2544,7 +2566,11 @@ class list extends IgniteTemplate {
items.forEach(item => { items.forEach(item => {
var template = this.forEachCallback(item, this.children.length); var template = this.forEachCallback(item, this.children.length);
template.construct(this.element.parentElement, this.element); if (this.elements.length > 0) {
template.construct(this.element.parentElement, this.elements[this.elements.length - 1]);
} else {
template.construct(this.element.parentElement, this.element);
}
//If we are reflecting, attach to the elements disconnect event. //If we are reflecting, attach to the elements disconnect event.
if (this.reflecting) { if (this.reflecting) {
@ -2569,11 +2595,7 @@ class list extends IgniteTemplate {
items.forEach(item => { items.forEach(item => {
var template = this.forEachCallback(item, 0); var template = this.forEachCallback(item, 0);
if (this.elements.length > 0) { template.construct(this.element.parentElement, this.element);
template.construct(this.element.parentElement, this.elements[0]);
} else {
template.construct(this.element.parentElement, this.element);
}
if (this.reflecting) { if (this.reflecting) {
this.reflectCallbacks.unshift(template.element.attachOnDisconnect(disconnect => this.onItemRemove(item))); this.reflectCallbacks.unshift(template.element.attachOnDisconnect(disconnect => this.onItemRemove(item)));
@ -2646,11 +2668,12 @@ class list extends IgniteTemplate {
items.forEach(item => { items.forEach(item => {
var template = this.forEachCallback(item, start); var template = this.forEachCallback(item, start);
//If we have elements already, construct this item after the element at the current start. Otherwise use the placeholder element. if (start == 0) {
if (this.elements.length > 0) {
template.construct(this.element.parentElement, this.elements[start]);
} else {
template.construct(this.element.parentElement, this.element); template.construct(this.element.parentElement, this.element);
} else if (start <= this.elements.length) {
template.construct(this.element.parentElement, this.elements[start - 1]);
} else {
template.construct(this.element.parentElement, this.elements[this.elements.length - 1]);
} }
if (this.reflecting) { if (this.reflecting) {
@ -2730,6 +2753,12 @@ class converter extends IgniteTemplate {
this.tagName = "converter"; this.tagName = "converter";
} }
/**
* Constructs this template and adds it to the DOM if this template
* has not already been constructed.
* @param {HTMLElement} parent Parent element that will contain the constructed element.
* @param {HTMLElement} sibling Optional sibling element that can be used to add the element adjacantly.
*/
construct(parent, sibling) { construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element. //Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) { if (!parent && !sibling && !this.element) {
@ -2739,8 +2768,8 @@ class converter extends IgniteTemplate {
if (!this.element) { if (!this.element) {
this.element = window.document.createTextNode(""); //Use a textnode as our placeholder this.element = window.document.createTextNode(""); //Use a textnode as our placeholder
if (sibling) { if (sibling && sibling.nextSibling) {
sibling.parentElement.insertBefore(this.element, sibling); sibling.parentElement.insertBefore(this.element, sibling.nextSibling);
} else { } else {
parent.appendChild(this.element); parent.appendChild(this.element);
} }
@ -2846,8 +2875,8 @@ class slot extends IgniteTemplate {
if (!this.element) { if (!this.element) {
this.element = window.document.createTextNode(""); this.element = window.document.createTextNode("");
if (sibling) { if (sibling && sibling.nextSibling) {
sibling.parentElement.insertBefore(this.element, sibling); sibling.parentElement.insertBefore(this.element, sibling.nextSibling);
} else { } else {
parent.appendChild(this.element); parent.appendChild(this.element);
} }
@ -3039,6 +3068,13 @@ class pagination extends IgniteTemplate {
} }
} }
/**
* Constructs this template and adds it to the DOM if this template
* has not already been constructed.
* @param {HTMLElement} parent Parent element that will contain the constructed element.
* @param {HTMLElement} sibling Optional sibling element that can be used to add the element adjacantly.
* @ignore
*/
construct(parent, sibling) { construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element. //Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) { if (!parent && !sibling && !this.element) {
@ -3048,8 +3084,8 @@ class pagination extends IgniteTemplate {
if (!this.element) { if (!this.element) {
this.element = window.document.createTextNode(""); //Use a textnode as our placeholder this.element = window.document.createTextNode(""); //Use a textnode as our placeholder
if (sibling) { if (sibling && sibling.nextSibling) {
sibling.parentElement.insertBefore(this.element, sibling); sibling.parentElement.insertBefore(this.element, sibling.nextSibling);
} else { } else {
parent.appendChild(this.element); parent.appendChild(this.element);
} }
@ -3379,6 +3415,13 @@ class pager extends IgniteTemplate {
this.recalculate(); this.recalculate();
} }
/**
* Constructs this template and adds it to the DOM if this template
* has not already been constructed.
* @param {HTMLElement} parent Parent element that will contain the constructed element.
* @param {HTMLElement} sibling Optional sibling element that can be used to add the element adjacantly.
* @ignore
*/
construct(parent, sibling) { construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element. //Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) { if (!parent && !sibling && !this.element) {
@ -3388,8 +3431,8 @@ class pager extends IgniteTemplate {
if (!this.element) { if (!this.element) {
this.element = window.document.createTextNode(""); //Use a textnode as our placeholder this.element = window.document.createTextNode(""); //Use a textnode as our placeholder
if (sibling) { if (sibling && sibling.nextSibling) {
sibling.parentElement.insertBefore(this.element, sibling); sibling.parentElement.insertBefore(this.element, sibling.nextSibling);
} else { } else {
parent.appendChild(this.element); parent.appendChild(this.element);
} }
@ -3618,6 +3661,13 @@ class population extends IgniteTemplate {
this.tagName = "shadow population"; this.tagName = "shadow population";
} }
/**
* Constructs this template and adds it to the DOM if this template
* has not already been constructed.
* @param {HTMLElement} parent Parent element that will contain the constructed element.
* @param {HTMLElement} sibling Optional sibling element that can be used to add the element adjacantly.
* @ignore
*/
construct(parent, sibling) { construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element. //Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) { if (!parent && !sibling && !this.element) {
@ -3627,8 +3677,8 @@ class population extends IgniteTemplate {
if (!this.element) { if (!this.element) {
this.element = window.document.createTextNode(""); //Use a textnode as our placeholder this.element = window.document.createTextNode(""); //Use a textnode as our placeholder
if (sibling) { if (sibling && sibling.nextSibling) {
sibling.parentElement.insertBefore(this.element, sibling); sibling.parentElement.insertBefore(this.element, sibling.nextSibling);
} else { } else {
parent.appendChild(this.element); parent.appendChild(this.element);
} }