@widelab-nc/widelab 1.1.41 → 1.1.43

package/package.json

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

package/src/index.js

@@ -448,7 +448,42 @@ if (infoBar) {
     });
   }
 
+let articleModalOpen;
+function articleModalOpenAnimation() {
+  const articleModalWrapper = document.querySelector('.article-modal_main-wrapper');
+  const articleModalContent = document.querySelector('.article-modal_content-wrapper');
+  articleModalOpen = gsap.timeline({paused: true});
+  articleModalOpen.to(articleModalWrapper, {
+    autoAlpha: 1,
+    duration: 0.3,
+    ease: 'loader2',
+  })
+  articleModalOpen.from(articleModalContent, {
+    x: '100%',
+    duration: 0.4,
+    ease: 'loader2',
+  }, '-=0.2')
+}
+
+window.openArticleModal = function() {
+  articleModalOpen.play();
+  document.body.classList.add('is-scroll-off');
+  lenis.stop();
+}
+
+window.closeArticleModal = function() {
+  articleModalOpen.timeScale(1).reverse();
+  document.body.classList.remove('is-scroll-off');
+  lenis.start();
+}
 
+window.closeArticleModalOnEsc = function(e) {
+  document.addEventListener('keydown', function(event) {
+    if (event.key === "Escape") {
+      window.closeArticleModal();
+    }
+  });
+}
 
 // Safe new version that uses the same classes and structure
 window.customCursorTextUpdate = function(el) {
@@ -478,7 +513,63 @@ window.customCursorTextUpdate = function(el) {
   el.addEventListener('pointerleave', maybeDeactivate);
 };
 
+window.stickyServices = function (e) {
+  var wrapper = e;
+  if (!wrapper || wrapper.dataset.stickyServicesInit === 'true') return;
+  wrapper.dataset.stickyServicesInit = 'true';
+
+  var navItems = wrapper.querySelectorAll('.services_item-wrapper.is-animated');
+  var stackItems = wrapper.querySelectorAll('.services-stack-img');
+
+  var count = Math.min(navItems.length, stackItems.length);
+  if (count === 0) return;
 
+  var currentActive = -1;
+  var ticking = false;
+
+  function setActive(index) {
+    if (index === currentActive) return;
+    currentActive = index;
+
+    for (var i = 0; i < navItems.length; i++) {
+      navItems[i].classList.toggle('is-active', i === index);
+    }
+    for (var j = 0; j < stackItems.length; j++) {
+      stackItems[j].classList.toggle('is-active', j === index);
+    }
+  }
+
+  function update() {
+    ticking = false;
+
+    var rect = wrapper.getBoundingClientRect();
+    var total = wrapper.offsetHeight - window.innerHeight;
+
+    // Wrapper not tall enough to scroll through (e.g. very tall viewport) — keep first item active.
+    if (total <= 0) {
+      setActive(0);
+      return;
+    }
+
+    var scrolled = -rect.top;
+    var progress = Math.min(1, Math.max(0, scrolled / total));
+    var activeIndex = Math.min(count - 1, Math.floor(progress * count));
+
+    setActive(activeIndex);
+  }
+
+  function onScrollOrResize() {
+    if (!ticking) {
+      requestAnimationFrame(update);
+      ticking = true;
+    }
+  }
+
+  window.addEventListener('scroll', onScrollOrResize, { passive: true });
+  window.addEventListener('resize', onScrollOrResize);
+
+  update(); // set correct state immediately on load (handles page-load mid-scroll / refresh position)
+};
 
 
 window.heroAnimationOnLoad = function(e) {
@@ -2216,6 +2307,59 @@ window.contactUsHide = function(e) {
   }));
 }
 
+
+
+window.expandablePadSticky = function (e) {
+  var wrapper = e;
+  if (!wrapper || wrapper.dataset.expandablePadStickyInit === 'true') return;
+  wrapper.dataset.expandablePadStickyInit = 'true';
+
+  var items = wrapper.querySelectorAll('.service_expanded');
+  var count = items.length;
+  if (count === 0) return;
+
+  var currentActive = -1;
+  var ticking = false;
+
+  function setActive(index) {
+    if (index === currentActive) return;
+    currentActive = index;
+    for (var i = 0; i < items.length; i++) {
+      var isTarget = i === index;
+      items[i].classList.toggle('is-active', isTarget);
+      items[i].style.height = isTarget ? items[i].scrollHeight + 'px' : '0px';
+    }
+  }
+
+  function update() {
+    ticking = false;
+    var rect = wrapper.getBoundingClientRect();
+    var total = wrapper.offsetHeight - window.innerHeight;
+    if (total <= 0) { setActive(0); return; }
+    var scrolled = -rect.top;
+    var progress = Math.min(1, Math.max(0, scrolled / total));
+    var activeIndex = Math.min(count - 1, Math.floor(progress * (count + 1)));
+    setActive(activeIndex);
+  }
+
+  function onScrollOrResize() {
+    if (!ticking) { requestAnimationFrame(update); ticking = true; }
+  }
+
+  function onResize() {
+    onScrollOrResize();
+    if (currentActive !== -1) {
+      items[currentActive].style.height = items[currentActive].scrollHeight + 'px';
+    }
+  }
+
+  window.addEventListener('scroll', onScrollOrResize, { passive: true });
+  window.addEventListener('resize', onResize);
+  update();
+};
+
+
+
 // Refresh Gsap scrollTriggers
 window.scrollTriggerRefresh = function() {
   function refreshScrollTrigger() {
@@ -2267,7 +2411,6 @@ window.closeInfoBar = function() {
       lenis.destroy();
     }
     customGsapEasing();
-
     reloadOnBack();
     revealFooter();
     pageLoadAnimation();
@@ -2277,4 +2420,5 @@ window.closeInfoBar = function() {
     disableScrollMenu();
     scrollToHashOnLoad();
     initClientLogosAnimation();
-  });
+    articleModalOpenAnimation();
+  });