@microsoft/atlas-js - npm Package Compare versions

Comparing version 1.12.1 to 1.13.0

dist/behaviors/layout.js

 let frame;
 const root = document.documentElement;
 const setLayoutCssVariables = () => {
-    const headerHeight = document.querySelector('.layout-body-header')?.clientHeight;
+    const header = document.querySelector('.layout-body-header');
+    const headerHeight = header?.clientHeight || 0;
     const headerCssProp = headerHeight ? `${headerHeight}px` : '0px';
-    const footerHeight = document.querySelector('.layout-body-footer')?.clientHeight;
+    const headerY = header?.getBoundingClientRect().y || 0; // determine if header is visible, assign visible heights as well
+    const visibleHeaderHeight = Math.round(Math.max(0, headerY + headerHeight));
+    const visibleHeaderCssProp = `${visibleHeaderHeight}px`;
+    const footer = document.querySelector('.layout-body-footer');
+    const footerHeight = footer?.clientHeight || 0;
     const footerCssProp = footerHeight ? `${footerHeight}px` : '0px';
+    const footerY = footer?.getBoundingClientRect().y || 0; // determine if header and footer are visible, assign visible heights as well
+    const visibleFooterHeight = Math.round(Math.max(0, footerY + footerHeight));
+    const visibleFooterCssProp = `${visibleFooterHeight}px`;
     root.style.setProperty('--window-inner-height', `${window.innerHeight}px`, 'important');
     root.style.setProperty('--atlas-header-height', headerCssProp, 'important');
     root.style.setProperty('--atlas-footer-height', footerCssProp, 'important');
+    root.style.setProperty('--atlas-header-visible-height', visibleHeaderCssProp, 'important');
+    root.style.setProperty('--atlas-footer-visible-height', visibleFooterCssProp, 'important');
 };
@@ -19,5 +29,5 @@ export function initLayout() {
     });
-    window.addEventListener('resize', () => window.dispatchEvent(new CustomEvent('atlas-layout-change-event')));
+    window.addEventListener('resize', () => window.dispatchEvent(new CustomEvent('atlas-layout-change-event')), { passive: true });
     root.style.setProperty('--window-inner-height', `${window.innerHeight}px`);
-    window.addEventListener('DOMContentLoaded', setLayoutCssVariables);
+    window.addEventListener('DOMContentLoaded', setLayoutCssVariables, { passive: true });
 }

package.json

 {
 	"name": "@microsoft/atlas-js",
-	"version": "1.12.1",
+	"version": "1.13.0",
 	"public": true,
@@ -5,0 +5,0 @@ "description": "Scripts backing the Atlas Design System used by Microsoft's Developer Relations.",

src/behaviors/layout.ts

@@ -6,7 +6,15 @@ let frame: number;
 const setLayoutCssVariables = () => {
-	const headerHeight = document.querySelector('.layout-body-header')?.clientHeight;
+	const header = document.querySelector('.layout-body-header');
+	const headerHeight = header?.clientHeight || 0;
 	const headerCssProp = headerHeight ? `${headerHeight}px` : '0px';
+	const headerY = header?.getBoundingClientRect().y || 0; // determine if header is visible, assign visible heights as well
+	const visibleHeaderHeight = Math.round(Math.max(0, headerY + headerHeight));
+	const visibleHeaderCssProp = `${visibleHeaderHeight}px`;
 
-	const footerHeight = document.querySelector('.layout-body-footer')?.clientHeight;
+	const footer = document.querySelector('.layout-body-footer');
+	const footerHeight = footer?.clientHeight || 0;
 	const footerCssProp = footerHeight ? `${footerHeight}px` : '0px';
+	const footerY = footer?.getBoundingClientRect().y || 0; // determine if header and footer are visible, assign visible heights as well
+	const visibleFooterHeight = Math.round(Math.max(0, footerY + footerHeight));
+	const visibleFooterCssProp = `${visibleFooterHeight}px`;
 
@@ -16,2 +24,4 @@ root.style.setProperty('--window-inner-height', `${window.innerHeight}px`, 'important');
 	root.style.setProperty('--atlas-footer-height', footerCssProp, 'important');
+	root.style.setProperty('--atlas-header-visible-height', visibleHeaderCssProp, 'important');
+	root.style.setProperty('--atlas-footer-visible-height', visibleFooterCssProp, 'important');
 };
@@ -28,4 +38,6 @@
 
-	window.addEventListener('resize', () =>
-		window.dispatchEvent(new CustomEvent('atlas-layout-change-event'))
+	window.addEventListener(
+		'resize',
+		() => window.dispatchEvent(new CustomEvent('atlas-layout-change-event')),
+		{ passive: true }
 	);
@@ -35,3 +47,3 @@
 
-	window.addEventListener('DOMContentLoaded', setLayoutCssVariables);
+	window.addEventListener('DOMContentLoaded', setLayoutCssVariables, { passive: true });
 }

No alert changes

Improved metrics

Total package byte prevSize

116488

increased by1.46%

Lines of code

2859

increased by0.78%

No dependency changes