Merge pull request #45 from TheCodeRaccoons/Develop

Develop

Author: JorchCortez

Dist/WebflowOnly/CMSFilter.js

@@ -7,8 +7,8 @@ class CMSFilter {
         this.filterForm = document.querySelector('[wt-cmsfilter-element="filter-form"]');
         this.listElement = document.querySelector('[wt-cmsfilter-element="list"]');
         this.filterElements = this.filterForm.querySelectorAll('[wt-cmsfilter-category]');
-        this.currentPage = 1;   // default value
-        this.itemsPerPage = 0;  // gets updated during init
+        this.currentPage = 1;
+        this.itemsPerPage = 0;
 
         //TAG elements
         this.tagTemplate = document.querySelector('[wt-cmsfilter-element="tag-template"]');
@@ -18,31 +18,26 @@ class CMSFilter {
         //Pagination wrapper is a MUST for the full functionality of the filter to work properly, 
         //if not added the filter will only work with whatever is loaded by default.
         this.paginationWrapper = document.querySelector('[wt-cmsfilter-element="pagination-wrapper"]') || null;
-        this.loadMode = this.listElement.getAttribute('wt-cmsfilter-loadmode') || 'load-all'; //Currently only paginate and load-all
+        this.loadMode = this.listElement.getAttribute('wt-cmsfilter-loadmode') || 'load-all';
         this.previousButton = document.querySelector('[wt-cmsfilter-pagination="prev"]');
         this.nextButton = document.querySelector('[wt-cmsfilter-pagination="next"]');
         this.customNextButton = document.querySelector('[wt-cmsfilter-element="custom-next"]');
         this.customPrevButton = document.querySelector('[wt-cmsfilter-element="custom-prev"]');
 
-        //pagination opt
         this.paginationcounter = document.querySelector('[wt-cmsfilter-element="page-count"]');
-
-        //OPT
         this.activeFilterClass = this.filterForm.getAttribute('wt-cmsfilter-class');
         this.clearAll = document.querySelector('[wt-cmsfilter-element="clear-all"]');
         this.sortOptions = document.querySelector('[wt-cmsfilter-element="sort-options"]');
         this.resultCount = document.querySelector('[wt-cmsfilter-element="results-count"]');
         this.emptyElement = document.querySelector('[wt-cmsfilter-element="empty"]');
         this.resetIx2 = this.listElement.getAttribute('wt-cmsfilter-resetix2') || false;
 
-        //Data Tracking Values
         this.allItems = [];
         this.filteredItems = [];
         this.totalPages = 1;
         this.activeFilters = {};
         this.availableFilters = {};
 
-        //Script Init
         this.init();
     }
 
@@ -51,6 +46,11 @@ class CMSFilter {
         this.itemsPerPage = this.allItems.length;
         if (this.paginationWrapper) {
             await this.LoadAllItems();
+            if (this.paginationcounter && this.paginationcounter != this.paginationWrapper.querySelector('.w-page-count')) {
+                this.paginationWrapper.querySelector('.w-page-count').remove();
+            } else {
+                this.paginationcounter = this.paginationWrapper.querySelector('.w-page-count');
+            }
         }
         this.SetupEventListeners();
         this.RenderItems();
@@ -213,6 +213,7 @@ class CMSFilter {
         } else {
             this.filteredItems.forEach(item => {
                 this.listElement.appendChild(item);
+                if(this.resetIx2) this.ResetInteraction(item);
             });
         }
 
@@ -221,52 +222,63 @@ class CMSFilter {
     }
 
     SortItems() {
-        if(!this.sortOptions) return;
+        if (!this.sortOptions) return;
 
         let [key, order] = this.sortOptions.value.split('-');
+        this.filteredItems = this.filteredItems.filter(item => !item.hasAttribute('wt-renderstatic-element'));
         this.filteredItems.sort((a, b) => {
             let aValue = a.dataset[key];
             let bValue = b.dataset[key];
 
+            // Handle null or undefined values
+            if (aValue === undefined || aValue === null) aValue = '';
+            if (bValue === undefined || bValue === null) bValue = '';
+    
+            // Handle numeric values
             if (!isNaN(aValue) && !isNaN(bValue)) {
                 aValue = parseFloat(aValue);
                 bValue = parseFloat(bValue);
             }
-            else if (Date.parse(aValue) && Date.parse(bValue)) {
+            // Handle date values
+            else if (!isNaN(Date.parse(aValue)) && !isNaN(Date.parse(bValue))) {
                 aValue = new Date(aValue);
                 bValue = new Date(bValue);
             }
+            // Handle text values
+            else {
+                aValue = aValue.toString().toLowerCase();
+                bValue = bValue.toString().toLowerCase();
+            }
 
             if (order === 'asc') {
-                return aValue > bValue ? 1 : -1;
+                return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
             } else {
-                return aValue < bValue ? 1 : -1;
+                return aValue < bValue ? 1 : aValue > bValue ? -1 : 0;
             }
         });
-    }   
+    }
 
     ApplyFilters() {
         const filters = this.GetFilters();
-        this.currentPage = 1; //Reset pagination to first page
+        this.currentPage = 1; // Reset pagination to first page
         this.filteredItems = this.allItems.filter(item => {
             return Object.keys(filters).every(category => {
                 const values = [...filters[category]];
-                if(values.length === 0) return values.length === 0;
+                if (values.length === 0) return true;
 
                 let matchingText = item.querySelector(`[wt-cmsfilter-category="${category}"]`)?.innerText.toLowerCase() || '';
                 matchingText = matchingText.replace(/(?:&nbsp;|\s)+/gi, ' ');
 
                 if (category === '*') {
-                    return values.length === 0 || 
-                        values.some(value => matchingText.includes(value.toLowerCase())) ||
+                    return values.some(value => matchingText.includes(value.toLowerCase())) ||
                         Object.values(item.dataset).some(dataValue => 
                             values.some(value => dataValue.toLowerCase().includes(value.toLowerCase()))
                         );
                 } else {
-                    return values.length === 0 || values.some(value => {
+                    return values.some(value => {
                         if (typeof value === 'object') {
                             const itemValue = parseFloat(item.dataset[category]);
-                            if(value.from !== null && value.to !== null) {
+                            if (value.from !== null && value.to !== null) {
                                 return itemValue >= value.from && itemValue <= value.to;
                             } else if (value.from !== null && value.to == null) {
                                 return itemValue >= value.from;
@@ -492,7 +504,6 @@ class CMSFilter {
     UpdatePaginationDisplay() {
         if(!this.paginationWrapper) return;
 
-        this.paginationcounter = this.paginationcounter ? this.paginationcounter : this.paginationWrapper.querySelector('.w-page-count');
         if (this.paginationcounter) {
             this.paginationcounter.innerText = `${this.currentPage} / ${this.totalPages}`;
         }
@@ -562,7 +573,7 @@ class CMSFilter {
 
         this.ApplyFilters();
     }
-    
+
     ResetInteraction(element) {
         if (!element) {
             console.error('Element not found');

Dist/WebflowOnly/RenderStatic.js

@@ -4,6 +4,8 @@ class RenderStatic {
     constructor(_container) {
         this.container = _container;
         this.cloneables = document.querySelectorAll("[wt-renderstatic-element='cloneable']");
+        this.resetIx2 = this.container.getAttribute('wt-renderstatic-resetix2') || false;
+
         this.gap = 0;
         this.observer = null;
 
@@ -49,6 +51,7 @@ class RenderStatic {
         let childClone = child.cloneNode(true);
         if (parent) {
             parent.insertBefore(childClone, parent.children[index]);
+            if(this.resetIx2) this.ResetInteraction(childClone);
         }
     }
 
@@ -68,6 +71,38 @@ class RenderStatic {
 
         this.observer.observe(this.container, { childList: true });
     }
+    
+    ResetInteraction(element) {
+        if (!element) {
+            console.error('Element not found');
+            return;
+        }
+
+        const WebflowIX2 = window.Webflow && Webflow.require('ix2');
+        if (!WebflowIX2) {
+            console.error('Webflow IX2 engine not found.');
+            return;
+        }
+
+        const targetElement = element.hasAttribute('data-w-id') 
+            ? element 
+            : element.querySelector('[data-w-id]');
+        
+        if (!targetElement) {
+            console.warn('No IX2 interaction found on the element or its children.');
+            return;
+        }
+
+        const dataWId = targetElement.getAttribute('data-w-id');
+        if (dataWId) {
+            targetElement.removeAttribute('data-w-id');
+            targetElement.setAttribute('data-w-id', dataWId);
+
+            WebflowIX2.init();
+        } else {
+            console.warn('No valid data-w-id attribute found.');
+        }
+    }
 }
 
 const initializeRenderStatic = () => {