mirror of
https://github.com/EFForg/rayhunter.git
synced 2026-05-30 12:49:26 -07:00
2bd6efa503
It's more common to write functions in camelCase in JS, so some people started doing it, including me. But the majority of the codebase is snake_case, so let's enforce that.
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
// stores/breakpoint.ts
|
|
import { readable, type Readable } from 'svelte/store';
|
|
import { breakpoints } from '../../theme';
|
|
|
|
type Breakpoint = keyof typeof breakpoints;
|
|
|
|
// Store that tracks if a specific breakpoint matches
|
|
export function create_breakpoint_store(breakpoint: Breakpoint): Readable<boolean> {
|
|
return readable<boolean>(false, (set) => {
|
|
const width = breakpoints[breakpoint];
|
|
const mediaQuery = window.matchMedia(`(min-width: ${width})`);
|
|
|
|
// Set initial value
|
|
set(mediaQuery.matches);
|
|
|
|
// Update on change
|
|
const handler = (e: MediaQueryListEvent) => set(e.matches);
|
|
mediaQuery.addEventListener('change', handler);
|
|
|
|
// Cleanup
|
|
return () => mediaQuery.removeEventListener('change', handler);
|
|
});
|
|
}
|
|
|
|
// Create stores for each breakpoint
|
|
export const screenIsSmUp: Readable<boolean> = create_breakpoint_store('sm');
|
|
export const screenIsMdUp: Readable<boolean> = create_breakpoint_store('md');
|
|
export const screenIsLgUp: Readable<boolean> = create_breakpoint_store('lg');
|
|
export const screenIsXlUp: Readable<boolean> = create_breakpoint_store('xl');
|