@cocreate/render 1.41.5 → 1.42.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.42.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.41.5...v1.42.0) (2024-09-21)
+
+
+### Features
+
+* render-reverse attribute to trigger reverse rendering for chats , etc ([f688f61](https://github.com/CoCreate-app/CoCreate-render/commit/f688f61ae4446a18356515c6d88d6bd8cc0be142))
+
 ## [1.41.5](https://github.com/CoCreate-app/CoCreate-render/compare/v1.41.4...v1.41.5) (2024-08-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/render",
-  "version": "1.41.5",
+  "version": "1.42.0",
   "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "render",

package/src/index.js

@@ -283,6 +283,13 @@ async function renderTemplate(template, data, key, index, keyPath) {
     if (templateData.source && templateData.source.element)
         renderType = templateData.source.element.getAttribute('render-type');
 
+    let renderReverse
+    if (templateData.source && templateData.source.element) {
+        renderReverse = templateData.source.element.getAttribute('render-reverse');
+        if (!renderReverse)
+            renderReverse = template.element.getAttribute('render-reverse');
+    }
+
     if (key && !Array.isArray(renderData) || renderType === "object") {
         if (renderType && Array.isArray(renderData) && renderData.length === 1)
             renderData = renderData[0]
@@ -356,7 +363,7 @@ async function renderTemplate(template, data, key, index, keyPath) {
                 if (key !== 'data')
                     index = i
                 await renderValues(clone.element, object, key, renderAs, null, null, index);
-                insertElement(template, clone.element, index);
+                insertElement(template, clone.element, index, '', data, renderReverse);
             }
         }
     }
@@ -400,7 +407,7 @@ function cloneTemplate(template) {
     return renderedNode;
 }
 
-function insertElement(template, element, index, currentIndex) {
+function insertElement(template, element, index, currentIndex, data, renderReverse) {
     let eid = element.getAttribute('eid')
     if (!eid) {
         eid = uuid.generate(6)
@@ -410,22 +417,54 @@ function insertElement(template, element, index, currentIndex) {
     if (index !== null && index >= 0) {
         if (!template.clones)
             template = template.template
-        const clones = Array.from(template.clones);
+        // const clones = Array.from(template.clones);
 
         let item
-        if (currentIndex) {
+        if (!currentIndex && currentIndex !== 0) {
+            if (template.clones.has(eid))
+                return
+            item = [eid, element];
+        }
+
+        const clones = Array.from(template.clones);
+
+        if (currentIndex || currentIndex === 0) {
             item = clones.splice(currentIndex, 1)[0];
+        }
+
+        if (data.$filter && data.$filter.startingIndex)
+            index += data.$filter.startingIndex
+        clones.splice(index, 0, item);  // Insert item into clones at the specified index
+
+        if (renderReverse) {
+            // Chat-specific logic: reverse rendering but still inserting based on sorting
+
+            // If we're rendering in reverse order, we want to respect the insertion index
+            if (clones[index + 1] && clones[index + 1][1] !== element) {
+                // Insert before the next element (reverse order means newer items come before older ones)
+                clones[index + 1][1].insertAdjacentElement('afterend', element);
+            } else if (clones[index] && clones[index][1] !== element) {
+                // Insert after the current element if there's no next element
+                clones[index][1].insertAdjacentElement('beforeend', element);
+            } else {
+                // Fallback: insert before the template if clones are empty or undefined
+                template.element.insertAdjacentElement('afterend', element);
+            }
+
         } else {
-            item = [eid, element];
+            // Non-chat logic: handle ascending or descending order as usual
+            if (clones[index + 1] && clones[index + 1][1] !== element) {
+                // Insert before the next element
+                clones[index + 1][1].insertAdjacentElement('beforebegin', element);
+            } else if (clones[index] && clones[index][1] !== element) {
+                // Insert after the current element if there's no next element
+                clones[index][1].insertAdjacentElement('afterend', element);
+            } else {
+                // Fallback: insert before the template if clones are empty or undefined
+                template.element.insertAdjacentElement('beforebegin', element);
+            }
         }
 
-        clones.splice(index, 0, item);
-        if (clones[index + 1] && clones[index][1] !== element)
-            clones[index][1].insertAdjacentElement('beforebegin', element);
-        else if (clones[index] && clones[index][1] !== element)
-            clones[index][1].insertAdjacentElement('afterend', element);
-        else
-            template.element.insertAdjacentElement('beforebegin', element);
         template.clones = new Map(clones);
     } else {
         template.clones.set(eid, element)