From a1d4fd9f7c1861a4ef32701c3210fe77c03dd9c2 Mon Sep 17 00:00:00 2001 From: Schlauer-Hax Date: Thu, 6 Feb 2025 07:11:12 +0100 Subject: [PATCH 1/4] ContentComponent: Keep correct order of passed elements --- core/layout/content.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/layout/content.ts b/core/layout/content.ts index 1df2d45..23d47e9 100644 --- a/core/layout/content.ts +++ b/core/layout/content.ts @@ -49,10 +49,10 @@ export class ContentComponent extends HTMLComponent { for (const iterator of Array.isArray(current) ? current : [ current ]) { const item = iterator.draw(); if (item instanceof FullWidthSectionComponent) { - this.shadowRoot!.prepend(...Array.from(item.children)); + this.shadowRoot!.append(...Array.from(item.children)); } else { item.style.gridColumn = "content"; - this.shadowRoot!.prepend(item); + this.shadowRoot!.append(item); } } }); From e872db825fada794e141b4be2e27cc1acf4cf0e9 Mon Sep 17 00:00:00 2001 From: Schlauer-Hax Date: Thu, 6 Feb 2025 09:55:54 +0100 Subject: [PATCH 2/4] fix incorrect ordering of elements --- core/layout/content.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/layout/content.ts b/core/layout/content.ts index 23d47e9..b2834ad 100644 --- a/core/layout/content.ts +++ b/core/layout/content.ts @@ -46,13 +46,13 @@ export class ContentComponent extends HTMLComponent { item.remove(); } } - for (const iterator of Array.isArray(current) ? current : [ current ]) { + for (const iterator of Array.isArray(current) ? current.reverse() : [ current ]) { const item = iterator.draw(); if (item instanceof FullWidthSectionComponent) { - this.shadowRoot!.append(...Array.from(item.children)); + this.shadowRoot!.prepend(...Array.from(item.children)); } else { item.style.gridColumn = "content"; - this.shadowRoot!.append(item); + this.shadowRoot!.prepend(item); } } }); From b20cce2a9559c7171077611405711150bd379a94 Mon Sep 17 00:00:00 2001 From: Schlauer-Hax Date: Thu, 13 Feb 2025 12:14:58 +0100 Subject: [PATCH 3/4] dont reverse the original array --- core/layout/content.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/layout/content.ts b/core/layout/content.ts index b2834ad..ae5228e 100644 --- a/core/layout/content.ts +++ b/core/layout/content.ts @@ -46,7 +46,7 @@ export class ContentComponent extends HTMLComponent { item.remove(); } } - for (const iterator of Array.isArray(current) ? current.reverse() : [ current ]) { + for (const iterator of Array.isArray(current) ? current.toReversed() : [ current ]) { const item = iterator.draw(); if (item instanceof FullWidthSectionComponent) { this.shadowRoot!.prepend(...Array.from(item.children)); From 5d58cbacfc246b981c599e1d9f572e448b73d9ce Mon Sep 17 00:00:00 2001 From: Schlauer-Hax Date: Tue, 25 Mar 2025 20:08:00 +0100 Subject: [PATCH 4/4] replaceChildren --- core/layout/content.ts | 64 +++++++++++++++++++++++++----------------- 1 file changed, 38 insertions(+), 26 deletions(-) diff --git a/core/layout/content.ts b/core/layout/content.ts index ae5228e..478e2a8 100644 --- a/core/layout/content.ts +++ b/core/layout/content.ts @@ -39,33 +39,45 @@ export class ContentComponent extends HTMLComponent { ].join(" "); this.style.alignContent = "start"; - this.useListener(alwaysRef(component), (current, oldValue) => { - if (oldValue) { - for (const iterator of Array.isArray(oldValue) ? oldValue : [ oldValue ]) { - const item = iterator.draw(); - item.remove(); - } - } - for (const iterator of Array.isArray(current) ? current.toReversed() : [ current ]) { - const item = iterator.draw(); - if (item instanceof FullWidthSectionComponent) { - this.shadowRoot!.prepend(...Array.from(item.children)); - } else { - item.style.gridColumn = "content"; - this.shadowRoot!.prepend(item); - } - } - }); + const dynamicElement = document.createElement("slot"); + dynamicElement.name = "dynamic"; + const staticElements = document.createElement("slot"); + staticElements.name = "static"; + this.shadowRoot!.append(dynamicElement, staticElements); - for (const iterator of components) { - const item = iterator.draw(); - if (item instanceof FullWidthSectionComponent) { - this.shadowRoot!.append(...Array.from(item.children)); - } else { - item.style.gridColumn = "content"; - this.shadowRoot!.append(item); - } - } + this.addListen(() => { + const current = alwaysRef(component).value; + const alwaysList = Array.isArray(current) ? current : [ current ]; + + this.replaceChildren( + ...alwaysList + .map(component => component.draw()) + .map(element => { + if (element instanceof FullWidthSectionComponent) { + return Array.from(element.children) + } else { + element.style.gridColumn = "content"; + return [element]; + } + }).flat().map(element => { + element.slot = "dynamic"; + return element; + }), + ...components + .map(component => component.draw()) + .map(element => { + if (element instanceof FullWidthSectionComponent) { + return Array.from(element.children) + } else { + element.style.gridColumn = "content"; + return [element]; + } + }).flat().map(element => { + element.slot = "static"; + return element; + }) + ); + }); } override make() {