@widelab-nc/widelab 1.1.35 → 1.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widelab",
-  "version": "1.1.35",
+  "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');
@@ -635,11 +668,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 +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;
-
-        let matchedCount = 0;
+      const spans = $all(`span[fs-cmsfilter-field="${field}"]`);
+      spans.forEach((span) => {
+        const originalText = span.dataset.originalText || textClean(span);
+        span.dataset.originalText = originalText;
 
-        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) {