@widelab-nc/widelab 1.1.48 → 1.1.49

package/package.json

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

package/src/index.js

@@ -550,6 +550,7 @@ window.hueAwardsAnimation = function(e) {
 };
 
 
+
 window.expandableProcessSticky = function (e) {
   var wrapper = e;
   if (!wrapper || wrapper.dataset.expandableProcessStickyInit === 'true') return;
@@ -559,8 +560,10 @@ window.expandableProcessSticky = function (e) {
   var count = items.length;
   if (count === 0) return;
 
+  var mq = window.matchMedia('(max-width: 991px)');
   var currentActive = -1;
   var ticking = false;
+  var isEnabled = false;
 
   function setActive(index) {
     if (index === currentActive) return;
@@ -611,23 +614,75 @@ window.expandableProcessSticky = function (e) {
     });
   }
 
-  for (var i = 0; i < items.length; i++) {
-    (function (index) {
-      var tab = items[index].closest('.process-wrapper');
-      if (!tab) return;
-      tab.addEventListener('click', function (event) {
-        if (event.target.closest('.process-item')) return;
-        scrollToIndex(index);
-      });
-    })(i);
+  function onTabClick(event, index) {
+    if (event.target.closest('.process-item')) return;
+    scrollToIndex(index);
   }
 
-  window.addEventListener('scroll', onScrollOrResize, { passive: true });
-  window.addEventListener('resize', onResize);
-  update();
+  var tabClickHandlers = [];
+
+  function enable() {
+    if (isEnabled) return;
+    isEnabled = true;
+
+    for (var i = 0; i < items.length; i++) {
+      (function (index) {
+        var tab = items[index].closest('.process-wrapper');
+        if (!tab) return;
+        var handler = function (event) { onTabClick(event, index); };
+        tabClickHandlers[index] = { tab: tab, handler: handler };
+        tab.addEventListener('click', handler);
+      })(i);
+    }
+
+    window.addEventListener('scroll', onScrollOrResize, { passive: true });
+    window.addEventListener('resize', onResize);
+    update();
+  }
+
+  function disable() {
+    if (!isEnabled) return;
+    isEnabled = false;
+
+    window.removeEventListener('scroll', onScrollOrResize);
+    window.removeEventListener('resize', onResize);
+
+    for (var i = 0; i < tabClickHandlers.length; i++) {
+      var entry = tabClickHandlers[i];
+      if (entry) entry.tab.removeEventListener('click', entry.handler);
+    }
+    tabClickHandlers = [];
+
+    // Reset inline styles so mobile falls back to default CSS state.
+    for (var j = 0; j < items.length; j++) {
+      items[j].classList.remove('is-active');
+      items[j].style.height = '';
+    }
+    currentActive = -1;
+  }
+
+  function handleBreakpointChange(mql) {
+    if (mql.matches) {
+      // Mobile (<=991px): fully disabled.
+      disable();
+    } else {
+      enable();
+    }
+  }
+
+  handleBreakpointChange(mq);
+
+  if (mq.addEventListener) {
+    mq.addEventListener('change', handleBreakpointChange);
+  } else if (mq.addListener) {
+    // Safari fallback
+    mq.addListener(handleBreakpointChange);
+  }
 };
 
 
+
+
 window.faqDropdowns = function (e) {
   var wrapper = e;
   if (!wrapper || wrapper.dataset.faqDropdownsInit === 'true') return;
@@ -703,6 +758,7 @@ window.navbarThemeWatcher = function () {
 };
 
 
+
 window.stickyServices = function (e) {
   var wrapper = e;
   if (!wrapper || wrapper.dataset.stickyServicesInit === 'true') return;
@@ -710,10 +766,22 @@ window.stickyServices = function (e) {
 
   var navItems = wrapper.querySelectorAll('.services_item-wrapper.is-animated');
   var stackItems = wrapper.querySelectorAll('.services-stack-img');
+  var mobileHandlers = wrapper.querySelectorAll('.mobile-handler');
 
   var count = Math.min(navItems.length, stackItems.length);
   if (count === 0) return;
 
+  // Copy each desktop .service-desc block into its matching .mobile-handler once,
+  // so editors only maintain the desktop copy and mobile text stays in sync.
+  for (var m = 0; m < count; m++) {
+    var sourceDesc = stackItems[m].querySelector('.service-desc');
+    var mobileContent = mobileHandlers[m] ? mobileHandlers[m].querySelector('.mobile-content-wrapper') : null;
+    if (sourceDesc && mobileContent && !mobileContent.querySelector('.service-desc')) {
+      var clonedDesc = sourceDesc.cloneNode(true);
+      mobileContent.insertBefore(clonedDesc, mobileContent.firstChild);
+    }
+  }
+
   var currentActive = -1;
   var displayedProgress = 0;
   var pendingIndex = -1; // set while a click-triggered scroll is animating
@@ -727,6 +795,12 @@ window.stickyServices = function (e) {
     for (var j = 0; j < stackItems.length; j++) {
       stackItems[j].classList.toggle('is-active', j === index);
     }
+    // Mirror the same active state on the mobile accordion panels
+    for (var k = 0; k < mobileHandlers.length; k++) {
+      var isTarget = k === index;
+      mobileHandlers[k].classList.toggle('is-active', isTarget);
+      mobileHandlers[k].style.height = isTarget ? mobileHandlers[k].scrollHeight + 'px' : '0px';
+    }
   }
 
   function getTargetProgress() {
@@ -746,7 +820,7 @@ window.stickyServices = function (e) {
     if (pendingIndex !== -1) {
       var pendingProgress = (pendingIndex + 0.5) / count;
       if (Math.abs(target - pendingProgress) < 0.02) {
-        pendingIndex = -1; // real scroll has caught up, resume normal driving
+        pendingIndex = -1;
       } else {
         setActive(pendingIndex);
         requestAnimationFrame(loop);
@@ -783,18 +857,28 @@ window.stickyServices = function (e) {
     });
   }
 
-  for (var k = 0; k < navItems.length; k++) {
+  for (var n = 0; n < navItems.length; n++) {
     (function (index) {
       navItems[index].addEventListener('click', function () {
         scrollToIndex(index);
       });
-    })(k);
+    })(n);
   }
 
+  // Keep the open mobile panel's height correct if its content reflows on resize
+  function onResize() {
+    if (currentActive === -1) return;
+    var openHandler = mobileHandlers[currentActive];
+    if (openHandler) openHandler.style.height = openHandler.scrollHeight + 'px';
+  }
+  window.addEventListener('resize', onResize);
+
   loop();
 };
 
 
+
+
 window.heroAnimationOnLoad = function(e) {
   const videoMask = e.querySelector('.hero_headline_ract-mask');
   const heroAnimation = gsap.timeline({}),