Sha256: 23609bf8d6a977abe63722267bb8d10e169a7de705dc2ae2ad94ed77a67cfa64
Contents?: true
Size: 1.06 KB
Versions: 17
Compression:
Stored size: 1.06 KB
Contents
// Adapted from: https://github.com/alpine-collective/toolkit
export default function (Alpine) {
// Create reactive data context
let data = Alpine.reactive({ screensize: window.innerWidth });
// Configuration
const defaultBreakpoints = {
xs: 0,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
"2xl": 1536,
};
const breakpoints =
window.AlpineMagicHelpersConfig &&
window.AlpineMagicHelpersConfig.breakpoints
? window.AlpineMagicHelpersConfig.breakpoints
: defaultBreakpoints;
window.addEventListener("resize", () => {
data.screensize = window.innerWidth;
});
Alpine.magic("screen", () => (breakpoint) => {
let width = data.screensize;
if (Number.isInteger(breakpoint)) return breakpoint <= width;
// Check if breakpoint exists
if (breakpoints[breakpoint] === undefined) {
throw Error(
"Undefined $screen property: " +
breakpoint +
". Supported properties: " +
Object.keys(breakpoints).join(", ")
);
}
return breakpoints[breakpoint] <= width;
});
}
Version data entries
17 entries across 17 versions & 1 rubygems