@widelab-nc/widelab 1.1.27 → 1.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widelab",
-  "version": "1.1.27",
+  "version": "1.1.28",
   "description": "Widelab starter template based on Finsweet template + add-ons.",
   "homepage": "https://widelab.co",
   "license": "ISC",

package/src/index.js

@@ -968,36 +968,250 @@ window.badgeColorChange = function(e) {
   }
 
 
+// Filtering logic on Client's page
+window.clientFilters = function() {
+  function updateCheckboxCounts(excludeField) {
 
-// GSAP Counter Up Animation
+    const fields = ['industry', 'country', 'services'];
+
+    fields.forEach(function(field) {
+      if (field === excludeField) return;
+
+      const checkboxes = document.querySelectorAll(`span[fs-cmsfilter-field="${field}"]`);
+
+      checkboxes.forEach(function(checkbox) {
+        const originalText = checkbox.dataset.originalText || checkbox.textContent.trim();
+        checkbox.dataset.originalText = originalText;
+
+        let matchedCount = 0;
+
+        document.querySelectorAll(`div[fs-cmsfilter-field="${field}"]`).forEach(function(div) {
+          if (div.textContent.trim() === originalText) {
+            matchedCount++;
+          }
+        });
+
+        let countSpan = checkbox.nextElementSibling;
+        if (!countSpan || !countSpan.classList.contains('count')) {
+          countSpan = document.createElement('span');
+          countSpan.className = 'count';
+          checkbox.insertAdjacentElement('afterend', countSpan);
+        }
+        countSpan.textContent = `(${matchedCount})`;
+
+        const parentDiv = checkbox.closest('div.w-dyn-item');
+        if (matchedCount === 0) {
+          parentDiv.classList.add('empty-category');
+        } else {
+          parentDiv.classList.remove('empty-category');
+        }
+      });
+
+      sortCheckboxes(field);
+    });
+  }
+
+  function sortCheckboxes(field) {
+
+    const parentList = document.querySelector(`span[fs-cmsfilter-field="${field}"]`).closest('.collection-list');
+    const items = Array.from(parentList.children);
+
+    items.sort(function(a, b) {
+      const countA = parseInt((a.querySelector('.count')?.textContent || '').replace(/[()]/g, '')) || 0;
+      const countB = parseInt((b.querySelector('.count')?.textContent || '').replace(/[()]/g, '')) || 0;
+      return countB - countA;
+    });
+
+    items.forEach(function(item) {
+      parentList.appendChild(item);
+    });
+  }
+
+  updateCheckboxCounts();
+
+  function delayedUpdate(excludeField) {
+    setTimeout(function() {
+      updateCheckboxCounts(excludeField);
+    }, 200);
+  }
+
+  document.querySelectorAll('.w-checkbox').forEach(function(checkbox) {
+    checkbox.addEventListener('click', function() {
+      const spanElement = checkbox.closest('label').querySelector('span[fs-cmsfilter-field]');
+      if (spanElement) {
+        const field = spanElement.getAttribute('fs-cmsfilter-field');
+        delayedUpdate(field);
+      }
+    });
+  });
+
+  document.querySelectorAll('.cross-icon').forEach(function(icon) {
+    icon.addEventListener('click', function() {
+      delayedUpdate(null); // Update all fields with 200ms delay
+    });
+  });
+
+  document.querySelectorAll('.filters-clients_dropdown-field').forEach(function(dropdownField) {
+    dropdownField.addEventListener('click', function() {
+      delayedUpdate(null); // Update all fields with 200ms delay
+    });
+  });
+
+  function toggleClearButton() {
+    if (document.querySelectorAll('.active-dropdown').length > 0) {
+      document.querySelector('.clear-button').style.display = 'block';
+    } else {
+      document.querySelector('.clear-button').style.display = 'none';
+    }
+  }
+  toggleClearButton();
+  const observer = new MutationObserver(toggleClearButton);
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['class']
+  });
+
+  document.querySelectorAll('[fs-cmsfilter-element="dropdown"]').forEach(function(dropdown) {
+    const originalText = dropdown.querySelector('[filters-clients_dropdown-field="tag-name-title"]').textContent;
+    let firstCheckedText = null;
+
+    dropdown.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
+      checkbox.addEventListener('change', function() {
+        const checkedBoxes = dropdown.querySelectorAll('input[type="checkbox"]:checked');
+        const titleField = dropdown.querySelector('[filters-clients_dropdown-field="tag-name-title"]');
+        const dropdownHolder = dropdown.closest('.dropdown-holder');
+        const tagNumber = dropdown.querySelector('[fs-cmsfilter-element="tag-number"]');
+
+        if (checkedBoxes.length > 0) {
+          // Check if firstCheckedText is still checked
+          if (![...checkedBoxes].some(cb => cb.nextElementSibling.textContent.split('(')[0].trim() === firstCheckedText)) {
+            // If not, set it to the current checkbox text without the count
+            firstCheckedText = checkedBoxes[0].nextElementSibling.textContent.split('(')[0].trim();
+          }
+          titleField.textContent = firstCheckedText;
+          dropdownHolder.classList.add('active-dropdown');
+        } else {
+          titleField.textContent = originalText;
+          dropdownHolder.classList.remove('active-dropdown');
+          firstCheckedText = null;
+        }
+
+        if (checkedBoxes.length > 1) {
+          const numberText = `+${checkedBoxes.length - 1}`;
+          tagNumber.textContent = numberText;
+        } else {
+          tagNumber.textContent = '';
+        }
+      });
+    });
+  });
+}
+
+// Filtering logic on Client's page
+window.formatCounter = function() {
+  function format_number(x) {
+    let parts = x.toFixed(1).split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+    let formattedNumber = parts.join(".");
+    let digits = formattedNumber.split('').map(char => {
+      if (char === '.') {
+        return char;
+      } else {
+        return `<span class="single-number">${char}</span>`;
+      }
+    }).join('');
+    return digits;
+  }
+
+  function easeOutQuad(t) {
+    return t * (2 - t);
+  }
+
+  function animateValue(start, end, duration) {
+    const counter = document.getElementById('counter');
+    let startTimestamp = null;
+    const step = (timestamp) => {
+      if (!startTimestamp) startTimestamp = timestamp;
+      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+      const easedProgress = easeOutQuad(progress);
+      const currentValue = start + (end - start) * easedProgress;
+      counter.innerHTML = format_number(currentValue);
+      if (progress < 1) {
+        window.requestAnimationFrame(step);
+      }
+    };
+    window.requestAnimationFrame(step);
+  }
+
+  animateValue(52.0, 56.2, 3500);
+}
+
+// GSAP Counter Up Animation onc Client's Page
 window.counterUpAnimation = function() {
+
+
+  function format_number(x) {
+    let parts = x.toFixed(1).split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+    let formattedNumber = parts.join(".");
+    let digits = formattedNumber.split('').map(char => {
+      if (char === '.') {
+        return char;
+      } else {
+        return `<span class="single-number">${char}</span>`;
+      }
+    }).join('');
+    return digits;
+  }
+
+  function easeOutQuad(t) {
+    return t * (2 - t);
+  }
+
+  function animateValue(start, end, duration) {
+    const counter = document.getElementById('counter');
+    let startTimestamp = null;
+    const step = (timestamp) => {
+      if (!startTimestamp) startTimestamp = timestamp;
+      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+      const easedProgress = easeOutQuad(progress);
+      const currentValue = start + (end - start) * easedProgress;
+      counter.innerHTML = format_number(currentValue);
+      if (progress < 1) {
+        window.requestAnimationFrame(step);
+      }
+    };
+    window.requestAnimationFrame(step);
+  }
+
+  animateValue(52.0, 56.2, 3500);
+
+
   const counters = document.querySelectorAll('#counter');
 
   counters.forEach(counter => {
-    // Get the final value from the element's text content and parse it as a float
     const finalValue = parseFloat(counter.textContent.replace(/,/g, '')); // Handle comma-separated numbers
 
-    // Create a GSAP animation for the counter
     gsap.fromTo(counter,
       { innerHTML: 0 },
       {
         innerHTML: finalValue,
-        duration: 2, // Animation duration in seconds
+        duration: 2,
         ease: 'power1.inOut',
-        snap: { innerHTML: 1 }, // Ensure whole numbers
+        snap: { innerHTML: 1 },
         onUpdate: function() {
-          // Update the element's text content with the current value
-          counter.textContent = this.targets()[0].innerHTML.toLocaleString(); // Format with commas if needed
+
+          counter.textContent = this.targets()[0].innerHTML.toLocaleString();
         }
       }
     );
   });
 }
 
-
-
-
-
+// Slider on Client's page
 window.heroSliders = function(e) {
   console.log("Initializing Splide on element:", e);
 
@@ -1023,7 +1237,6 @@ window.heroSliders = function(e) {
 
   const descriptions = e.querySelectorAll('.slider-description');
 
-  // Set the initial state: Hide descriptions except the one in the active slide
   descriptions.forEach(desc => {
     if (!desc.closest('.splide__slide').classList.contains('is-active')) {
       gsap.set(desc, { opacity: 0 });
@@ -1036,12 +1249,10 @@ window.heroSliders = function(e) {
     });
   }
 
-  // Hide descriptions instantly on slide change
   slider.on('move', function() {
     gsap.set(descriptions, { opacity: 0 });
   });
 
-  // Show description on new active slide
   slider.on('active', function (slide) {
     gsap.to(slide.slide.querySelectorAll('.slider-description'), { opacity: 1, duration: 0.15, ease: 'linear' });
   });