@widelab-nc/widelab 1.1.34 → 1.1.35

package/package.json

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

package/src/index.js

@@ -627,6 +627,52 @@ window.reviewsSlider = function(e) {
     });
   }
 
+// Partner slider
+window.partnerSlider = function (e) {
+  // Keep the same querySelector for consistency with teamSlider
+  const teamList = e.querySelector('.team_collection_list');
+
+  // Initialize Splide with drag restored
+  const splide = new Splide(e, {
+    type: 'slide',
+    fixedWidth: '20%',
+    padding: { left: '2.5rem', right: 0 },
+    focus: 0,
+    gap: 0,
+    pagination: true,
+    omitEnd: true,
+    arrows: false,
+    drag: true, // restored dragging
+    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+    snap: true,
+    classes: {
+      pagination: 'splide__pagination facts-pagination partner-bullets',
+      page: 'splide__pagination__page facts-page',
+    },
+    breakpoints: {
+      992: { fixedWidth: '40%', padding: { left: '1.75rem' }, drag: 'free', snap: false },
+      560: { fixedWidth: '75%', padding: { left: '1.375rem' }, drag: 'free', snap: false },
+    },
+  });
+
+  splide.mount();
+
+  // Removed: click-to-next handler
+
+  // GSAP in-view animation
+  gsap.from(e, {
+    scrollTrigger: {
+      trigger: e,
+      start: 'top bottom',
+      end: 'bottom bottom',
+      scrub: 1,
+      once: true,
+    },
+    x: '10%',
+    opacity: 0,
+    ease: 'linear',
+  });
+};
   // Element padding change on scroll
   window.elementPaddingChange = function(e) {
     gsap.to(e, {
@@ -1503,20 +1549,35 @@ window.initBentoRevealScrub = function (container) {
     }
   );
 };
-
 window.initPartnerVideos = function (container) {
   const items = Array.from(container.querySelectorAll('.partner_item'));
   const vids = items.map(i => i.querySelector('video')).filter(Boolean);
 
+  // Helper: pause all other videos
   const pauseAll = (except) => {
     vids.forEach(v => {
       if (v !== except) {
         v.pause();
         v.muted = true;
+        const parent = v.closest('.partner_item');
+        if (parent) toggleIcons(parent, false);
       }
     });
   };
 
+  // Helper: toggle play/pause icons
+  function toggleIcons(item, isPlaying) {
+    const playIcon = item.querySelector('.is-play');
+    const pauseIcon = item.querySelector('.is-pause');
+    if (isPlaying) {
+      if (playIcon) playIcon.style.display = 'none';
+      if (pauseIcon) pauseIcon.style.display = 'block';
+    } else {
+      if (playIcon) playIcon.style.display = 'block';
+      if (pauseIcon) pauseIcon.style.display = 'none';
+    }
+  }
+
   items.forEach((item) => {
     const v = item.querySelector('video');
     if (!v) return;
@@ -1527,17 +1588,29 @@ window.initPartnerVideos = function (container) {
     v.setAttribute('playsinline', '');
     v.playsInline = true;
 
+    // Default state on init (show play icon)
+    toggleIcons(item, false);
+
+    // Handle click (play/pause toggle)
     item.addEventListener('click', () => {
       if (v.paused) {
         pauseAll(v);
         v.muted = false;
         v.play();
+        toggleIcons(item, true);
       } else {
         v.pause();
+        toggleIcons(item, false);
       }
     });
+
+    // Handle pause and ended (ensure icons reset)
+    v.addEventListener('pause', () => toggleIcons(item, false));
+    v.addEventListener('ended', () => toggleIcons(item, false));
+    v.addEventListener('play', () => toggleIcons(item, true));
   });
 
+  // Pause videos when out of viewport
   const rootEl =
     document.querySelector('[data-scroll-root]') ||
     document.querySelector('[data-smooth-scroll-root]') ||
@@ -1548,7 +1621,10 @@ window.initPartnerVideos = function (container) {
       entries.forEach(({ isIntersecting, target }) => {
         const v = target.querySelector('video');
         if (!v) return;
-        if (!isIntersecting) v.pause();
+        if (!isIntersecting) {
+          v.pause();
+          toggleIcons(target, false);
+        }
       });
     },
     { root: rootEl, threshold: 0.25 }
@@ -1558,7 +1634,6 @@ window.initPartnerVideos = function (container) {
 };
 
 
-
   // Case study - What's next interaction
   window.whatsNext = function() {
     const caseItem = document.querySelectorAll('.whats-next_links_item.is-case');