113 lines
3.2 KiB
TypeScript
113 lines
3.2 KiB
TypeScript
type InternalBreakpoint = {
|
|
beforeBreakpoint: InternalBreakpoint | undefined;
|
|
nextBreakpoint: InternalBreakpoint | undefined;
|
|
pixels: number;
|
|
};
|
|
|
|
function generateBreakpointsMap(): Map<string, InternalBreakpoint> {
|
|
// If is changed don't forget to also change it on SASS.
|
|
const breakpoints: { [key: string]: number } = {
|
|
xs: 0,
|
|
sm: 576,
|
|
md: 768,
|
|
lg: 992,
|
|
xl: 1200,
|
|
xxl: 1400,
|
|
};
|
|
|
|
let beforeBreakpoint: InternalBreakpoint | undefined;
|
|
let beforeBreakpointTag: string | undefined;
|
|
const mapRender = new Map<string, InternalBreakpoint>();
|
|
|
|
for (const breakpoint in breakpoints) {
|
|
const newBreakpoint = {
|
|
beforeBreakpoint: beforeBreakpoint,
|
|
nextBreakpoint: undefined,
|
|
pixels: breakpoints[breakpoint],
|
|
};
|
|
|
|
if (beforeBreakpointTag && beforeBreakpoint) {
|
|
beforeBreakpoint.nextBreakpoint = newBreakpoint;
|
|
mapRender.set(beforeBreakpointTag, beforeBreakpoint);
|
|
}
|
|
|
|
mapRender.set(breakpoint, {
|
|
beforeBreakpoint: beforeBreakpoint,
|
|
nextBreakpoint: undefined,
|
|
pixels: breakpoints[breakpoint],
|
|
});
|
|
|
|
beforeBreakpointTag = breakpoint;
|
|
beforeBreakpoint = newBreakpoint;
|
|
}
|
|
|
|
return mapRender;
|
|
}
|
|
|
|
const breakpoints = generateBreakpointsMap();
|
|
|
|
export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
|
|
|
|
export function isMediaBreakpointUp(breakpoint: Breakpoint): boolean {
|
|
if (breakpoint === "xxl") {
|
|
return true;
|
|
}
|
|
|
|
const breakpointObject = breakpoints.get(breakpoint);
|
|
|
|
if (!breakpointObject) {
|
|
throw new Error(`Unknown breakpoint: ${breakpoint}`);
|
|
}
|
|
|
|
if (!breakpointObject.nextBreakpoint) {
|
|
return false;
|
|
}
|
|
|
|
return breakpointObject.nextBreakpoint.pixels - 1 >= window.innerWidth;
|
|
}
|
|
|
|
export function isMediaBreakpointDown(breakpoint: Breakpoint): boolean {
|
|
if (breakpoint === "xs") {
|
|
return true;
|
|
}
|
|
|
|
const breakpointObject = breakpoints.get(breakpoint);
|
|
|
|
if (!breakpointObject) {
|
|
throw new Error(`Unknown breakpoint: ${breakpoint}`);
|
|
}
|
|
|
|
return breakpointObject.pixels <= window.innerWidth;
|
|
}
|
|
|
|
export function isMediaBreakpointOnly(breakpoint: Breakpoint): boolean {
|
|
const breakpointObject = breakpoints.get(breakpoint);
|
|
|
|
if (!breakpointObject) {
|
|
throw new Error(`Unknown breakpoint: ${breakpoint}`);
|
|
}
|
|
|
|
return (
|
|
breakpointObject.pixels <= window.innerWidth &&
|
|
(!breakpointObject.nextBreakpoint || breakpointObject.nextBreakpoint.pixels - 1 >= window.innerWidth)
|
|
);
|
|
}
|
|
|
|
export function isMediaBreakpointBetween(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean {
|
|
const startBreakpointObject = breakpoints.get(startBreakpoint);
|
|
const endBreakpointObject = breakpoints.get(endBreakpoint);
|
|
|
|
if (!startBreakpointObject) {
|
|
throw new Error(`Unknown start breakpoint: ${startBreakpointObject}`);
|
|
}
|
|
|
|
if (!endBreakpointObject) {
|
|
throw new Error(`Unknown end breakpoint: ${endBreakpointObject}`);
|
|
}
|
|
|
|
return (
|
|
startBreakpointObject.pixels <= innerWidth &&
|
|
(!endBreakpointObject.nextBreakpoint || endBreakpointObject.nextBreakpoint.pixels - 1 >= window.innerWidth)
|
|
);
|
|
}
|