108 lines
2.0 KiB
JavaScript
108 lines
2.0 KiB
JavaScript
const DEFAULT_RESOLUTIONS = [
|
|
640,
|
|
// older and lower-end phones
|
|
750,
|
|
// iPhone 6-8
|
|
828,
|
|
// iPhone XR/11
|
|
960,
|
|
// older horizontal phones
|
|
1080,
|
|
// iPhone 6-8 Plus
|
|
1280,
|
|
// 720p
|
|
1668,
|
|
// Various iPads
|
|
1920,
|
|
// 1080p
|
|
2048,
|
|
// QXGA
|
|
2560,
|
|
// WQXGA
|
|
3200,
|
|
// QHD+
|
|
3840,
|
|
// 4K
|
|
4480,
|
|
// 4.5K
|
|
5120,
|
|
// 5K
|
|
6016
|
|
// 6K
|
|
];
|
|
const LIMITED_RESOLUTIONS = [
|
|
640,
|
|
// older and lower-end phones
|
|
750,
|
|
// iPhone 6-8
|
|
828,
|
|
// iPhone XR/11
|
|
1080,
|
|
// iPhone 6-8 Plus
|
|
1280,
|
|
// 720p
|
|
1668,
|
|
// Various iPads
|
|
2048,
|
|
// QXGA
|
|
2560
|
|
// WQXGA
|
|
];
|
|
const getWidths = ({
|
|
width,
|
|
layout,
|
|
breakpoints = DEFAULT_RESOLUTIONS,
|
|
originalWidth
|
|
}) => {
|
|
const smallerThanOriginal = (w) => !originalWidth || w <= originalWidth;
|
|
if (layout === "full-width") {
|
|
return breakpoints.filter(smallerThanOriginal);
|
|
}
|
|
if (!width) {
|
|
return [];
|
|
}
|
|
const doubleWidth = width * 2;
|
|
const maxSize = originalWidth ? Math.min(doubleWidth, originalWidth) : doubleWidth;
|
|
if (layout === "fixed") {
|
|
return originalWidth && width > originalWidth ? [originalWidth] : [width, maxSize];
|
|
}
|
|
if (layout === "constrained") {
|
|
return [
|
|
// Always include the image at 1x and 2x the specified width
|
|
width,
|
|
doubleWidth,
|
|
...breakpoints
|
|
].filter((w) => w <= maxSize).sort((a, b) => a - b);
|
|
}
|
|
return [];
|
|
};
|
|
const getSizesAttribute = ({
|
|
width,
|
|
layout
|
|
}) => {
|
|
if (!width || !layout) {
|
|
return void 0;
|
|
}
|
|
switch (layout) {
|
|
// If screen is wider than the max size then image width is the max size,
|
|
// otherwise it's the width of the screen
|
|
case "constrained":
|
|
return `(min-width: ${width}px) ${width}px, 100vw`;
|
|
// Image is always the same width, whatever the size of the screen
|
|
case "fixed":
|
|
return `${width}px`;
|
|
// Image is always the width of the screen
|
|
case "full-width":
|
|
return `100vw`;
|
|
case "none":
|
|
default:
|
|
return void 0;
|
|
}
|
|
};
|
|
export {
|
|
DEFAULT_RESOLUTIONS,
|
|
LIMITED_RESOLUTIONS,
|
|
getSizesAttribute,
|
|
getWidths
|
|
};
|