New Pages Updates

-- Dynamic navbar color based on the scroll
-- Dynamic height change when tab is changed

Author: tomasmrazek92

dist/blog.js

@@ -12,6 +12,7 @@ import { initTabs } from './tabs.js';
 import { initAmplitude } from './tracking/amplitude.js';
 import { initCookie } from './tracking/cookie.js';
 import { initExperiment } from './tracking/experiment.js';
+import { initCheckSectionThemeScroll } from './scroll-themes.js';
 
 $(document).ready(function () {
   initScrollToggle();
@@ -27,6 +28,7 @@ $(document).ready(function () {
   setupHookForFormSubmission();
   initExperiment();
   installAndScrollAnchorTags();
+  initCheckSectionThemeScroll();
 });
 
 $(document).ready(function () {

dist/index.js

@@ -0,0 +1,46 @@
+export function initCheckSectionThemeScroll() {
+  const navBarHeight = document.querySelector('[data-nav-bar-height]');
+  const themeObserverOffset = navBarHeight ? navBarHeight.offsetHeight / 2 : 0;
+
+  function initializeAttributes() {
+    const body = document.body;
+
+    if (!body.hasAttribute('data-theme-nav')) {
+      body.setAttribute('data-theme-nav', 'light');
+    }
+
+    const sections = document.querySelectorAll('section');
+    sections.forEach(function (section) {
+      if (!section.hasAttribute('data-theme-section')) {
+        section.setAttribute('data-theme-section', 'light');
+      }
+    });
+  }
+
+  function checkThemeSection() {
+    const themeSections = document.querySelectorAll('[data-theme-section]');
+
+    themeSections.forEach(function (themeSection) {
+      const rect = themeSection.getBoundingClientRect();
+      const themeSectionTop = rect.top;
+      const themeSectionBottom = rect.bottom;
+
+      if (themeSectionTop <= themeObserverOffset && themeSectionBottom >= themeObserverOffset) {
+        const themeSectionActive = themeSection.getAttribute('data-theme-section');
+        document.querySelectorAll('[data-theme-nav]').forEach(function (elem) {
+          if (elem.getAttribute('data-theme-nav') !== themeSectionActive) {
+            elem.setAttribute('data-theme-nav', themeSectionActive);
+          }
+        });
+      }
+    });
+  }
+
+  function startThemeCheck() {
+    document.addEventListener('scroll', checkThemeSection);
+  }
+
+  initializeAttributes();
+  checkThemeSection();
+  startThemeCheck();
+}

dist/index.js.map

@@ -163,29 +163,40 @@ export function initTabs() {
       $(this).addClass('is-active');
 
       const index = $(this).closest('li').index();
+      const currentHeight = $wrap.height();
 
       $contents.each(function () {
-        const $content = $(this);
-        $content.hide();
+        $(this).hide();
       });
-
       $codes.hide();
 
       const $targetContent = $contents.eq(index);
       const $targetCode = $codes.eq(index);
+
       $targetContent.css('display', 'flex');
+      $targetCode.css('display', 'flex');
+
+      const newHeight = $wrap.height();
+
+      $wrap.css('height', currentHeight);
+      gsap.to($wrap, {
+        height: newHeight,
+        duration: 0.4,
+        ease: 'power2.out',
+        onComplete: () => {
+          $wrap.css('height', 'auto');
+        },
+      });
 
       if ($targetContent.is('ul, ol, li')) {
         const $items = $targetContent.find('li').add('[data-tabs="content-item"]');
         gsap.fromTo(
           $items,
           { opacity: 0, y: 20 },
-          { opacity: 1, y: 0, duration: 0.4, stagger: 0.08, ease: 'power2.out' }
+          { opacity: 1, y: 0, duration: 0.4, stagger: 0.08, ease: 'power2.out', delay: 0.2 }
         );
       }
 
-      $targetCode.css('display', 'flex');
-
       wrapTimeline = animateCode($targetCode);
     });
   });