You've already forked obsidian-visualiser
35 lines
790 B
TypeScript
35 lines
790 B
TypeScript
import { reactive } from '#shared/reactive';
|
|
|
|
export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
|
|
const BREAKPOINT_WIDTHS: [Breakpoint, number][] = [
|
|
['sm', 640],
|
|
['md', 768],
|
|
['lg', 1024],
|
|
['xl', 1280],
|
|
['2xl', 1536],
|
|
];
|
|
|
|
export const breakpoint = reactive({ container: 'lg' as Breakpoint, viewport: 'lg' as Breakpoint });
|
|
|
|
function updateBreakpoint()
|
|
{
|
|
for (let i = BREAKPOINT_WIDTHS.length - 1; i >= 0; i--)
|
|
{
|
|
if (window.innerWidth >= BREAKPOINT_WIDTHS[i]![1])
|
|
{
|
|
const bp = BREAKPOINT_WIDTHS[i]![0];
|
|
breakpoint.viewport = bp;
|
|
breakpoint.container = bp;
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (typeof window !== 'undefined')
|
|
{
|
|
updateBreakpoint();
|
|
|
|
BREAKPOINT_WIDTHS.forEach(e => window.matchMedia(`(min-width: ${e[1]}px)`).addEventListener('change', updateBreakpoint));
|
|
}
|