@widelab-nc/widelab 1.1.31 → 1.1.33

package/package.json

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

package/src/index.js

@@ -1149,6 +1149,58 @@ window.formatCounter = function() {
   animateValue(88.0, 110.85, 3500);
 }
 
+// Filtering logic on Client's page - scroll trigger version
+window.formatCounterOnScroll = 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);
+  }
+
+  // Scroll trigger
+  const counterEl = document.getElementById('counter');
+  if (!counterEl) return;
+
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        animateValue(88.0, 110.85, 3500);
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.5 });
+
+  observer.observe(counterEl);
+};
+
 // GSAP Counter Up Animation onc Client's Page
 window.counterUpAnimation = function() {
 
@@ -1272,6 +1324,73 @@ window.heroSliders = function(e) {
 }
 
 
+// Splide without GSAP; pagination inserted as first child INSIDE .splide
+window.awwwardsSliders = function (el) {
+  if (el.dataset.splideInitialized === '1') return;
+
+  // 1) Find or create Splide root
+  let root = el.classList?.contains('splide') ? el : el.closest?.('.splide');
+  const track = el.querySelector?.('.splide__track') || el.closest?.('.splide__track');
+
+  if (!root && track) {
+    root = document.createElement('div');
+    root.className = 'splide testimonial';
+    track.parentNode.insertBefore(root, track);
+    root.appendChild(track);
+  }
+
+  // 2) Validate structure
+  if (!root || !root.querySelector('.splide__track') || !root.querySelector('.splide__list')) {
+    console.warn('[awwwardsSliders] Missing required Splide structure.');
+    return;
+  }
+
+  // 3) Splide config
+  const config = {
+    type: 'loop',
+    perPage: 1,
+    perMove: 1,
+    gap: '0px',
+    arrows: false,
+    pagination: true,
+    drag: false,
+    speed: 300,
+    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+    classes: {
+      pagination: 'splide__pagination awwwards-pagination',
+      page: 'splide__pagination__page awwwards-page',
+    },
+    breakpoints: {
+      992: { drag: true },
+    },
+  };
+
+  const splide = new Splide(root, config).mount();
+
+  // 4) Move pagination INSIDE .splide as FIRST child
+  splide.on('pagination:mounted', (data) => {
+    const list = data.list;
+    if (list && root.firstChild) {
+      root.insertBefore(list, root.firstChild);
+    }
+  });
+
+  // Fallback if pagination already exists
+  queueMicrotask(() => {
+    const list = root.querySelector('.splide__pagination');
+    const track = root.querySelector('.splide__track');
+    if (list && track && list.nextSibling !== track) {
+      root.insertBefore(list, track);
+    }
+  });
+
+  // 5) Click-to-next on desktop
+  if (window.innerWidth > 992) {
+    root.addEventListener('click', () => splide.go('+1'));
+  }
+
+  el.dataset.splideInitialized = '1';
+};
 
 // Sliders on Services page
 window.servicesSliders = function(e) {
@@ -1566,6 +1685,8 @@ window.closeInfoBar = function() {
 }
 
 
+
+
   // !!!!!!!!! Keep this Alpine init at the end !!!!!!!!!
   window.Webflow ||= [];
   window.Webflow.push(() => {