@widelab-nc/widelab 1.1.34 → 1.1.36

package/package.json

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

package/src/index.js

@@ -260,6 +260,39 @@ if (infoBar) {
     });
   }
 
+
+
+// Safe new version that uses the same classes and structure
+window.customCursorTextUpdate = function(el) {
+  const cursorEl = document.querySelector('.custom_cursor_text');
+  if (!cursorEl) return;
+
+  const defaultText = cursorEl.dataset.default || '';
+
+  const getText = (node) =>
+    node.getAttribute('widecursortext') || node.getAttribute('wideCursorText') || '';
+
+  const activate = () => {
+    cursorEl.textContent = getText(el);
+    document.documentElement.classList.add('has-custom-cursor');
+  };
+
+  const maybeDeactivate = (ev) => {
+    const to = ev.relatedTarget;
+    // Don't deactivate if moving between elements that also use the custom cursor
+    if (to && to.closest && to.closest('[wide="customCursor"]')) return;
+
+    cursorEl.textContent = defaultText;
+    document.documentElement.classList.remove('has-custom-cursor');
+  };
+
+  el.addEventListener('pointerenter', activate);
+  el.addEventListener('pointerleave', maybeDeactivate);
+};
+
+
+
+
   // Hero animation on load
   window.heroAnimationOnLoad = function(e) {
     const videoMask = e.querySelector('.hero_headline_ract-mask');
@@ -627,6 +660,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: '31.5%',
+    padding: { left: '2.5rem', right: 0 },
+    focus: 0,
+    gap: 0,
+    pagination: false,
+    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, {
@@ -967,149 +1046,251 @@ window.badgeColorChange = function(e) {
     });
   }
 
+// Single entry you call from x-init
+window.clientFilters = function () {
+  // Prevent double initialization if Alpine re-mounts
+  if (window.__clientFiltersInitialized) return;
+  window.__clientFiltersInitialized = true;
+
+  // --- Config ---
+  const FIELDS = ["industry", "country", "services"];
+  const SEL = {
+    dropdown: '[fs-cmsfilter-element="dropdown"]',
+    dropdownHolder: ".dropdown-holder",
+    dropdownTitle: '[filters-clients_dropdown-field="tag-name-title"], .filters-clients_dropdown-field',
+    tagNumber: '[fs-cmsfilter-element="tag-number"]',
+    dynItem: ".w-dyn-item",
+    checkboxWrap: ".w-checkbox",
+    checkboxInput: 'input[type="checkbox"]',
+    webflowChecked: "w--redirected-checked",
+    fsActive: "fs-cmsfilter_active",
+    listContainer: ".collection-list",
+    count: ".count",
+    crossIcon: ".cross-icon",
+    clearButton: ".clear-button",
+    activeDropdown: "active-dropdown",
+  };
 
-// Filtering logic on Client's page
-window.clientFilters = function() {
-  function updateCheckboxCounts(excludeField) {
+  // --- Utils ---
+  function $(s, ctx = document) { return ctx.querySelector(s); }
+  function $all(s, ctx = document) { return Array.from(ctx.querySelectorAll(s)); }
+  function debounce(fn, ms) { let t; return (...a)=>{clearTimeout(t); t=setTimeout(()=>fn(...a), ms);} }
+  function textClean(el){ return (el?.textContent || "").trim(); }
+
+  // Wait until Finsweet cmsfilter is ready (query params applied, classes toggled)
+  function waitForCmsFilter() {
+    return new Promise((resolve) => {
+      const w = window;
+      w.fsAttributes = w.fsAttributes || [];
+      // already initialized?
+      try {
+        const exists = (w.fsAttributes.instances || []).some(i => i.name === "cmsfilter");
+        if (exists) return resolve();
+      } catch(e){}
+      w.fsAttributes.push(["cmsfilter", function(){ resolve(); }]);
+    });
+  }
 
-    const fields = ['industry', 'country', 'services'];
+  // Remember original texts for labels and toggles
+  function hydrateOriginalTexts() {
+    FIELDS.forEach((field) => {
+      $all(`span[fs-cmsfilter-field="${field}"]`).forEach((span) => {
+        if (!span.dataset.originalText) {
+          span.dataset.originalText = textClean(span);
+        }
+      });
+    });
+    $all(SEL.dropdownHolder).forEach((holder) => {
+      const toggle = $(SEL.dropdownTitle, holder);
+      if (toggle && !toggle.dataset.defaultText) {
+        toggle.dataset.defaultText = textClean(toggle);
+      }
+    });
+  }
 
-    fields.forEach(function(field) {
+  // Count matching results per value and sort UI items by count
+  function updateCheckboxCounts(excludeField = null) {
+    FIELDS.forEach((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;
+      const spans = $all(`span[fs-cmsfilter-field="${field}"]`);
+      spans.forEach((span) => {
+        const originalText = span.dataset.originalText || textClean(span);
+        span.dataset.originalText = originalText;
 
-        let matchedCount = 0;
-
-        document.querySelectorAll(`div[fs-cmsfilter-field="${field}"]`).forEach(function(div) {
-          if (div.textContent.trim() === originalText) {
-            matchedCount++;
-          }
+        // Count visible matches in results
+        let matched = 0;
+        $all(`div[fs-cmsfilter-field="${field}"]`).forEach((div) => {
+          if (textClean(div) === originalText) matched++;
         });
 
-        let countSpan = checkbox.nextElementSibling;
-        if (!countSpan || !countSpan.classList.contains('count')) {
-          countSpan = document.createElement('span');
-          countSpan.className = 'count';
-          checkbox.insertAdjacentElement('afterend', countSpan);
+        // Ensure "(n)" bubble
+        let countSpan = span.nextElementSibling;
+        if (!countSpan || !countSpan.classList.contains("count")) {
+          countSpan = document.createElement("span");
+          countSpan.className = "count";
+          span.insertAdjacentElement("afterend", countSpan);
         }
-        countSpan.textContent = `(${matchedCount})`;
+        countSpan.textContent = `(${matched})`;
 
-        const parentDiv = checkbox.closest('div.w-dyn-item');
-        if (matchedCount === 0) {
-          parentDiv.classList.add('empty-category');
-        } else {
-          parentDiv.classList.remove('empty-category');
-        }
+        // Toggle empty-category on dyn item
+        const dyn = span.closest(SEL.dynItem);
+        if (dyn) dyn.classList.toggle("empty-category", matched === 0);
       });
 
-      sortCheckboxes(field);
+      // Sort items in this field's collection-list by count desc
+      const anySpan = document.querySelector(`span[fs-cmsfilter-field="${field}"]`);
+      if (anySpan) {
+        const list = anySpan.closest(SEL.listContainer);
+        if (list) {
+          const items = Array.from(list.children);
+          items.sort((a, b) => {
+            const ca = parseInt((a.querySelector(SEL.count)?.textContent || "").replace(/[()]/g, "")) || 0;
+            const cb = parseInt((b.querySelector(SEL.count)?.textContent || "").replace(/[()]/g, "")) || 0;
+            return cb - ca;
+          });
+          items.forEach((it) => list.appendChild(it));
+        }
+      }
     });
   }
 
-  function sortCheckboxes(field) {
+  // Collect selected label names within a dropdown holder
+  function getSelectedNames(holder) {
+    const labels = $all(`${SEL.dynItem} ${SEL.checkboxWrap}, ${SEL.checkboxWrap}`, holder);
+    return labels
+      .filter((label) => {
+        if (label.classList.contains(SEL.fsActive)) return true; // Finsweet
+        const wbox = label.querySelector(".w-checkbox-input");
+        if (wbox && wbox.classList.contains(SEL.webflowChecked)) return true; // Webflow styled
+        const input = label.querySelector(SEL.checkboxInput);
+        return !!(input && input.checked); // Native
+      })
+      .map((label) => {
+        const span = label.querySelector('[fs-cmsfilter-field]');
+        return (span && (span.getAttribute('data-original-text') || textClean(span))) || "";
+      })
+      .filter(Boolean);
+  }
+
+  // Update dropdown button label (first selected + +N), class states and numeric tag
+  function updateDropdownTitle(holder) {
+    const toggle = $(SEL.dropdownTitle, holder);
+    if (!toggle) return;
+
+    const defaults = toggle.dataset.defaultText || textClean(toggle);
+    const names = getSelectedNames(holder);
+
+    // Persist "first selected" per dropdown (dataset)
+    if (!holder.dataset.firstSelected) {
+      holder.dataset.firstSelected = names[0] || "";
+    } else if (names.length && !names.includes(holder.dataset.firstSelected)) {
+      holder.dataset.firstSelected = names[0];
+    } else if (!names.length) {
+      holder.dataset.firstSelected = "";
+    }
 
-    const parentList = document.querySelector(`span[fs-cmsfilter-field="${field}"]`).closest('.collection-list');
-    const items = Array.from(parentList.children);
+    let display = defaults;
+    if (names.length === 1) {
+      display = names[0];
+    } else if (names.length > 1) {
+      display = `${holder.dataset.firstSelected || names[0]} +${names.length - 1}`;
+    }
+    toggle.textContent = display;
 
-    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;
-    });
+    holder.classList.toggle(SEL.activeDropdown, names.length > 0);
+    toggle.classList.toggle(SEL.activeDropdown, names.length > 0);
 
-    items.forEach(function(item) {
-      parentList.appendChild(item);
-    });
+    const tagNum = $(SEL.tagNumber, holder);
+    if (tagNum) {
+      tagNum.textContent = names.length > 1 ? `+${names.length - 1}` : "";
+    }
   }
 
-  updateCheckboxCounts();
+  function updateAllDropdownTitles() {
+    $all(SEL.dropdownHolder).forEach(updateDropdownTitle);
+  }
 
-  function delayedUpdate(excludeField) {
-    setTimeout(function() {
-      updateCheckboxCounts(excludeField);
-    }, 200);
+  function toggleClearButton() {
+    const anyActive = !!$(`.${SEL.activeDropdown}`);
+    const btn = $(SEL.clearButton);
+    if (btn) btn.style.display = anyActive ? "block" : "none";
   }
 
-  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);
+  // Unified UI refresh
+  const refreshUI = debounce(function (excludeField = null) {
+    updateCheckboxCounts(excludeField);
+    updateAllDropdownTitles();
+    toggleClearButton();
+  }, 60);
+
+  // --- Event wiring (delegated & once) ---
+  function bindEventsOnce() {
+    // Clicks: checkbox labels, dropdown toggles, cross icons, clear button
+    document.addEventListener("click", (e) => {
+      const label = e.target.closest(SEL.checkboxWrap);
+      if (label) {
+        // Let Finsweet/Webflow toggle classes first
+        setTimeout(() => {
+          const span = label.querySelector('[fs-cmsfilter-field]');
+          const field = span?.getAttribute('fs-cmsfilter-field') || null;
+          refreshUI(field);
+        }, 0);
+        return;
+      }
+
+      const toggle = e.target.closest(SEL.dropdownTitle);
+      if (toggle) {
+        // After opening/closing or instant selections
+        setTimeout(() => refreshUI(null), 120);
+        return;
       }
-    });
-  });
 
-  document.querySelectorAll('.cross-icon').forEach(function(icon) {
-    icon.addEventListener('click', function() {
-      delayedUpdate(null); // Update all fields with 200ms delay
+      const cross = e.target.closest(SEL.crossIcon);
+      if (cross) {
+        setTimeout(() => refreshUI(null), 80);
+        return;
+      }
+
+      const clear = e.target.closest(SEL.clearButton);
+      if (clear) {
+        setTimeout(() => refreshUI(null), 120);
+        return;
+      }
     });
-  });
 
-  document.querySelectorAll('.filters-clients_dropdown-field').forEach(function(dropdownField) {
-    dropdownField.addEventListener('click', function() {
-      delayedUpdate(null); // Update all fields with 200ms delay
+    // Any checkbox state change (keyboard/tap)
+    document.addEventListener("change", (e) => {
+      if (e.target && e.target.matches(SEL.checkboxInput)) {
+        const span = e.target.closest('label')?.querySelector('[fs-cmsfilter-field]') ||
+          e.target.closest(SEL.checkboxWrap)?.querySelector('[fs-cmsfilter-field]');
+        const field = span?.getAttribute('fs-cmsfilter-field') || null;
+        const holder = e.target.closest(SEL.dropdownHolder);
+        if (holder) updateDropdownTitle(holder);
+        refreshUI(field);
+      }
     });
-  });
 
-  function toggleClearButton() {
-    if (document.querySelectorAll('.active-dropdown').length > 0) {
-      document.querySelector('.clear-button').style.display = 'block';
-    } else {
-      document.querySelector('.clear-button').style.display = 'none';
-    }
+    // Observe class mutations that might come from Finsweet
+    const mo = new MutationObserver((muts) => {
+      // If any class changed, softly refresh
+      if (muts.some(m => m.type === "attributes" && m.attributeName === "class")) {
+        refreshUI(null);
+      }
+    });
+    mo.observe(document.body, { subtree: true, attributes: true, attributeFilter: ["class"] });
   }
-  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 = '';
-        }
-      });
-    });
+  // --- Boot ---
+  waitForCmsFilter().then(() => {
+    // Allow Finsweet to finish applying query param checks/classes
+    setTimeout(() => {
+      hydrateOriginalTexts();
+      bindEventsOnce();
+      refreshUI(null);
+    }, 120);
   });
-}
-
+};
 // Filtering logic on Client's page
 window.formatCounter = function() {
   function format_number(x) {
@@ -1503,20 +1684,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 +1723,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 +1756,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 +1769,6 @@ window.initPartnerVideos = function (container) {
 };
 
 
-
   // Case study - What's next interaction
   window.whatsNext = function() {
     const caseItem = document.querySelectorAll('.whats-next_links_item.is-case');