New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@microsoft/atlas-js

Package Overview
Dependencies
Maintainers
0
Versions
28
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@microsoft/atlas-js - npm Package Compare versions

Comparing version

1.13.1
to
1.14.0

1

dist/behaviors/layout.d.ts

@@ -0,2 +1,3 @@

export declare const dispatchAtlasLayoutUpdateEvent: () => void;
export declare function initLayout(): void;
//# sourceMappingURL=layout.d.ts.map

26

dist/behaviors/layout.js

@@ -1,2 +0,1 @@

let frame;
const root = document.documentElement;

@@ -8,3 +7,3 @@ const setLayoutCssVariables = () => {

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 visibleHeaderHeight = Math.max(0, headerY + headerHeight);
const visibleHeaderCssProp = `${visibleHeaderHeight}px`;

@@ -15,3 +14,3 @@ const footer = document.querySelector('.layout-body-footer');

const footerY = footer?.getBoundingClientRect().y || 0; // determine if header and footer are visible, assign visible heights as well
const visibleFooterHeight = Math.round(footerY < window.innerHeight ? Math.min(window.innerHeight - footerY, footerHeight) : 0);
const visibleFooterHeight = footerY < window.innerHeight ? Math.min(window.innerHeight - footerY, footerHeight) : 0;
const visibleFooterCssProp = `${visibleFooterHeight}px`;

@@ -24,16 +23,21 @@ root.style.setProperty('--window-inner-height', `${window.innerHeight}px`, 'important');

};
let animationFrame = 0;
function scheduleUpdate(update) {
cancelAnimationFrame(animationFrame);
animationFrame = requestAnimationFrame(update);
}
export const dispatchAtlasLayoutUpdateEvent = () => {
window.dispatchEvent(new CustomEvent('atlas-layout-change-event'));
};
export function initLayout() {
window.addEventListener('atlas-layout-change-event', () => {
if (frame) {
cancelAnimationFrame(frame);
}
frame = requestAnimationFrame(setLayoutCssVariables);
scheduleUpdate(setLayoutCssVariables);
});
window.addEventListener('resize', () => window.dispatchEvent(new CustomEvent('atlas-layout-change-event')), { passive: true });
window.addEventListener('resize', dispatchAtlasLayoutUpdateEvent, { passive: true });
root.style.setProperty('--window-inner-height', `${window.innerHeight}px`);
window.addEventListener('DOMContentLoaded', setLayoutCssVariables, { passive: true });
// determine if header/footer are visible below the top of the viewport
window.addEventListener('scroll', () => window.dispatchEvent(new CustomEvent('atlas-layout-change-event')), {
window.addEventListener('DOMContentLoaded', dispatchAtlasLayoutUpdateEvent);
// determine if header/footer are visible below the top of the viewport - remove with atlas-js 1.13.1
window.addEventListener('scroll', dispatchAtlasLayoutUpdateEvent, {
passive: true
});
}

2

package.json
{
"name": "@microsoft/atlas-js",
"version": "1.13.1",
"version": "1.14.0",
"public": true,

@@ -5,0 +5,0 @@ "description": "Scripts backing the Atlas Design System used by Microsoft's Developer Relations.",

47

src/behaviors/layout.ts

@@ -1,3 +0,1 @@

let frame: number;
const root = document.documentElement;

@@ -10,3 +8,3 @@

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 visibleHeaderHeight = Math.max(0, headerY + headerHeight);
const visibleHeaderCssProp = `${visibleHeaderHeight}px`;

@@ -19,5 +17,4 @@

const visibleFooterHeight = Math.round(
footerY < window.innerHeight ? Math.min(window.innerHeight - footerY, footerHeight) : 0
);
const visibleFooterHeight =
footerY < window.innerHeight ? Math.min(window.innerHeight - footerY, footerHeight) : 0;
const visibleFooterCssProp = `${visibleFooterHeight}px`;

@@ -32,30 +29,28 @@

let animationFrame = 0;
function scheduleUpdate(update: typeof setLayoutCssVariables) {
cancelAnimationFrame(animationFrame);
animationFrame = requestAnimationFrame(update);
}
export const dispatchAtlasLayoutUpdateEvent = () => {
window.dispatchEvent(new CustomEvent('atlas-layout-change-event'));
};
export function initLayout() {
window.addEventListener('atlas-layout-change-event', () => {
if (frame) {
cancelAnimationFrame(frame);
}
frame = requestAnimationFrame(setLayoutCssVariables);
scheduleUpdate(setLayoutCssVariables);
});
window.addEventListener(
'resize',
() => window.dispatchEvent(new CustomEvent('atlas-layout-change-event')),
{ passive: true }
);
window.addEventListener('resize', dispatchAtlasLayoutUpdateEvent, { passive: true });
root.style.setProperty('--window-inner-height', `${window.innerHeight}px`);
window.addEventListener('DOMContentLoaded', setLayoutCssVariables, { passive: true });
window.addEventListener('DOMContentLoaded', dispatchAtlasLayoutUpdateEvent);
// determine if header/footer are visible below the top of the viewport
window.addEventListener(
'scroll',
() => window.dispatchEvent(new CustomEvent('atlas-layout-change-event')),
{
passive: true
}
);
// determine if header/footer are visible below the top of the viewport - remove with atlas-js 1.13.1
window.addEventListener('scroll', dispatchAtlasLayoutUpdateEvent, {
passive: true
});
}
dist/behaviors/layout.d.ts.map

Sorry, the diff of this file is not supported yet