@widelab-nc/widelab 1.1.35 → 1.1.37

package/package.json

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

package/src/index.js

@@ -16,6 +16,23 @@ function customGsapEasing() {
   CustomEase.create('loader2', '0.77, 0, 0.175, 1');
 }
 
+// Smoothly scrolls to section if current URL contains a hash
+function scrollToHashOnLoad(offsetY = 0) {
+  window.addEventListener('load', () => {
+    const hash = window.location.hash;
+    if (!hash) return;
+
+    const target = document.querySelector(hash);
+    if (!target) return;
+
+    gsap.to(window, {
+      scrollTo: { y: target, offsetY: offsetY },
+      duration: 1,
+      ease: 'power2.out'
+    });
+  });
+}
+
 // Functions definitions
 
 // Contact form open animation
@@ -260,6 +277,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');
@@ -310,53 +360,75 @@ if (infoBar) {
     );
   }
 
-  // Case study mask animation
-  window.caseStudyInteraction = function(e) {
-    // Video mask animation
-      const mask = e.querySelector('.portfolio_item_image-mask');
-      const maskAnimation = gsap.from(mask, {
-        width: '100%',
-        duration: 0.35,
-        ease: 'loader2',
-        paused: true,
-      });
-      ScrollTrigger.create({
-        animation: maskAnimation,
-        trigger: mask,
-        start: 'top 80%',
-        onEnter: () => maskAnimation.play(),
-      });
+// Case study mask animation + pill fade-in (last step)
+window.caseStudyInteraction = function (e) {
+  // Video mask + pill timeline
+  const mask = e.querySelector('.portfolio_item_image-mask');
+  const pill = e.querySelector('.cs_pill');
 
-      // Video on hover actions
-      const videoElements = e.getElementsByTagName('video');
-      if (window.innerWidth > 992) {
-        const videoElement = videoElements.length > 0 ? videoElements[0] : null;
-        if (!videoElement) return;
+  // Build a single timeline so the pill fades in AFTER the mask animation
+  const tl = gsap.timeline({
+    paused: true,
+    defaults: { ease: 'loader2' }
+  });
 
-        videoElement.addEventListener('loadeddata', () => {
-            videoElement.pause();
-        });
-        e.addEventListener('mouseenter', hoverIN, false);
-        e.addEventListener('mouseleave', hoverOUT, false);
+  // Ensure pill starts hidden
+  if (pill) gsap.set(pill, { autoAlpha: 0 }); // autoAlpha controls visibility + opacity
 
-        function hoverIN() {
-          videoElement.play();
-        }
+  // Mask reveals first...
+  tl.from(mask, {
+    width: '100%',
+    duration: 0.35
+  });
 
-        function hoverOUT() {
-            videoElement.pause();
-            //videoElement.currentTime = 0;
-        }
-    } else {
-        videoElements.forEach((videoElem) => {
-        const poster = videoElem.getAttribute('poster');
-        videoElem.innerHTML = '';
-        videoElem.setAttribute('poster', poster);
-        videoElem.load();
-        videoElem.pause();
-      });
+  // ...then pill fades in as the last step
+  if (pill) {
+    tl.to(pill, {
+      autoAlpha: 1,
+      duration: 0.25
+    });
+  }
+
+  // Trigger on scroll
+  ScrollTrigger.create({
+    animation: tl,
+    trigger: mask,
+    start: 'top 80%',
+    onEnter: () => tl.play()
+  });
+
+  // Video on hover actions
+  const videoElements = e.getElementsByTagName('video');
+  if (window.innerWidth > 992) {
+    const videoElement = videoElements.length > 0 ? videoElements[0] : null;
+    if (!videoElement) return;
+
+    videoElement.addEventListener('loadeddata', () => {
+      videoElement.pause();
+    });
+
+    e.addEventListener('mouseenter', hoverIN, false);
+    e.addEventListener('mouseleave', hoverOUT, false);
+
+    function hoverIN() {
+      videoElement.play();
+    }
+
+    function hoverOUT() {
+      videoElement.pause();
+      // videoElement.currentTime = 0;
     }
+  } else {
+    // Mobile: keep poster only
+    Array.from(videoElements).forEach((videoElem) => {
+      const poster = videoElem.getAttribute('poster');
+      videoElem.innerHTML = '';
+      videoElem.setAttribute('poster', poster);
+      videoElem.load();
+      videoElem.pause();
+    });
   }
+};
 
   // Reviews slider
   window.reviewsSlider = function(e) {
@@ -413,61 +485,6 @@ if (infoBar) {
     });
   }
 
-// Reviews slider
-window.reviewsSlider = function(e) {
-  // Put content of static slide into list
-  const staticContent = e.querySelector(
-    '.splide__slide.reviews_collection_item.is-static'
-  ).innerHTML;
-  const dynamicElement = e.querySelector('.reviews_collection_item');
-  dynamicElement.innerHTML = staticContent;
-  dynamicElement.classList.add('is-static');
-
-  // Init reviews splide
-  const reviewsSplide = new Splide(e, {
-    type: 'slide',
-    fixedWidth: '24.5rem',
-    rewind: true,
-    focus: 0,
-    padding: { left: '2.5rem', right: 0 },
-    gap: 0,
-    omitEnd: true,
-    arrows: false,
-    drag: false,
-    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
-    snap: true,
-    classes: {
-      pagination: 'splide__pagination reviews-pagination',
-      page: 'splide__pagination__page reviews-page',
-    },
-    breakpoints: {
-      992: { fixedWidth: '17.438rem', padding: { left: '1.75rem' }, drag: 'free', snap: false },
-      480: { fixedWidth: '16.25rem', padding: { left: '1.375rem' }},
-    },
-  }).mount();
-
-  // Next slide on click
-  if (window.innerWidth > 992) {
-    reviewsSplide.on('click', function () {
-      reviewsSplide.go('+1');
-    });
-  }
-
-  // Animation in
-  gsap.from(e, {
-    scrollTrigger: {
-      trigger: e,
-      start: 'top bottom',
-      end: 'bottom bottom-=15%',
-      scrub: 1,
-      once: true,
-    },
-    x: '10%',
-    opacity: 0,
-    ease: 'linear',
-  });
-}
-
   // Facts slider
   window.factsSlider = function(e) {
     // Facts slider splide initialize
@@ -635,11 +652,11 @@ window.partnerSlider = function (e) {
   // Initialize Splide with drag restored
   const splide = new Splide(e, {
     type: 'slide',
-    fixedWidth: '20%',
+    fixedWidth: '31.5%',
     padding: { left: '2.5rem', right: 0 },
     focus: 0,
     gap: 0,
-    pagination: true,
+    pagination: false,
     omitEnd: true,
     arrows: false,
     drag: true, // restored dragging
@@ -1013,149 +1030,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);
+  }
 
-    const parentList = document.querySelector(`span[fs-cmsfilter-field="${field}"]`).closest('.collection-list');
-    const items = Array.from(parentList.children);
+  // 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 = "";
+    }
 
-    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;
-    });
+    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.forEach(function(item) {
-      parentList.appendChild(item);
-    });
+    holder.classList.toggle(SEL.activeDropdown, names.length > 0);
+    toggle.classList.toggle(SEL.activeDropdown, names.length > 0);
+
+    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;
       }
-    });
-  });
 
-  document.querySelectorAll('.cross-icon').forEach(function(icon) {
-    icon.addEventListener('click', function() {
-      delayedUpdate(null); // Update all fields with 200ms delay
+      const toggle = e.target.closest(SEL.dropdownTitle);
+      if (toggle) {
+        // After opening/closing or instant selections
+        setTimeout(() => refreshUI(null), 120);
+        return;
+      }
+
+      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) {
@@ -1549,6 +1668,7 @@ 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);
@@ -1910,4 +2030,5 @@ window.closeInfoBar = function() {
     customCursorOnClick();
     contactFormOpenAnimation();
     disableScrollMenu();
+    scrollToHashOnLoad();
   });