generated from polymech/site-template
Synced from site
This commit is contained in:
@@ -1,159 +1,159 @@
|
||||
// @ts-check
|
||||
import crypto from "node:crypto";
|
||||
import getImage from "./utils/getImage.js";
|
||||
import getLinkElement from "./utils/getLinkElement.js";
|
||||
import getStyleElement from "./utils/getStyleElement.js";
|
||||
import getFilteredProps from "./utils/getFilteredProps.js";
|
||||
import getContainerElement from "./utils/getContainerElement.js";
|
||||
|
||||
export default async function renderBackgroundImage(props) {
|
||||
const type = "BackgroundImage";
|
||||
|
||||
const { filteredProps, transformConfigs } = getFilteredProps(type, props);
|
||||
|
||||
const {
|
||||
src,
|
||||
tag,
|
||||
content,
|
||||
preload,
|
||||
attributes,
|
||||
placeholder,
|
||||
breakpoints,
|
||||
backgroundSize,
|
||||
backgroundPosition,
|
||||
format,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
formatOptions,
|
||||
artDirectives,
|
||||
} = filteredProps;
|
||||
|
||||
const {
|
||||
link: linkAttributes = {},
|
||||
style: styleAttributes = {},
|
||||
container: containerAttributes = {},
|
||||
} = attributes;
|
||||
|
||||
const sizes = "";
|
||||
|
||||
const { uuid, images } = await getImage({
|
||||
src,
|
||||
type,
|
||||
sizes,
|
||||
format,
|
||||
breakpoints,
|
||||
placeholder,
|
||||
artDirectives,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
formatOptions,
|
||||
transformConfigs,
|
||||
});
|
||||
|
||||
const className = `astro-imagetools-background-image-${uuid}`;
|
||||
|
||||
const { imagesizes } = images[images.length - 1];
|
||||
|
||||
const link = getLinkElement({ images, preload, imagesizes, linkAttributes });
|
||||
|
||||
const backgroundImageStylesArray = images.map(({ media, sources }) => {
|
||||
const uuid = crypto.randomBytes(4).toString("hex").toUpperCase();
|
||||
|
||||
const fallbackUrlCustomVariable = `--astro-imagetools-background-image-fallback-url${uuid}`;
|
||||
|
||||
const newSources = {};
|
||||
|
||||
sources.forEach(({ src, format, srcset }) => {
|
||||
const sources = srcset
|
||||
.split(", ")
|
||||
.map((source) => [
|
||||
source.slice(0, source.lastIndexOf(" ")),
|
||||
source.slice(source.lastIndexOf(" ") + 1, -1),
|
||||
]);
|
||||
|
||||
sources.forEach(([path, width]) => {
|
||||
if (!newSources[width]) {
|
||||
newSources[width] = [];
|
||||
}
|
||||
|
||||
newSources[width].push({ src, format, path });
|
||||
});
|
||||
});
|
||||
|
||||
const widths = Object.keys(newSources)
|
||||
.map((width) => parseInt(width))
|
||||
.reverse();
|
||||
|
||||
const maxWidth = Math.max(...widths);
|
||||
|
||||
const styles = widths
|
||||
.map((width) => {
|
||||
const sources = newSources[width];
|
||||
|
||||
const styles = sources
|
||||
.map(
|
||||
({ format, path }, i) =>
|
||||
`
|
||||
${i !== sources.length - 1 ? `.${format} ` : ""}.${className} {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(${path}),
|
||||
var(${fallbackUrlCustomVariable});
|
||||
background-size: ${backgroundSize};
|
||||
background-position: ${backgroundPosition};
|
||||
}
|
||||
`
|
||||
)
|
||||
.reverse()
|
||||
.join("");
|
||||
|
||||
return width === maxWidth
|
||||
? styles
|
||||
: `
|
||||
@media screen and (max-width: ${width}px) {
|
||||
${styles}
|
||||
}
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
return {
|
||||
fallbackUrlCustomVariable,
|
||||
styles: media
|
||||
? `
|
||||
@media ${media} {
|
||||
${styles}
|
||||
}
|
||||
`
|
||||
: styles,
|
||||
};
|
||||
});
|
||||
|
||||
const containerStyles = `
|
||||
.${className} {
|
||||
position: relative;
|
||||
${images
|
||||
.map(({ fallback }, i) => {
|
||||
const fallbackUrlCustomVariable =
|
||||
backgroundImageStylesArray[i].fallbackUrlCustomVariable;
|
||||
|
||||
return `${fallbackUrlCustomVariable}: url("${encodeURI(fallback)}");`;
|
||||
})
|
||||
.join("\n")}
|
||||
}
|
||||
`;
|
||||
|
||||
const backgroundStyles =
|
||||
backgroundImageStylesArray.map(({ styles }) => styles).join("\n") +
|
||||
containerStyles;
|
||||
|
||||
const style = getStyleElement({ styleAttributes, backgroundStyles });
|
||||
|
||||
const htmlElement = getContainerElement({
|
||||
tag,
|
||||
content,
|
||||
className,
|
||||
containerAttributes,
|
||||
});
|
||||
|
||||
return { link, style, htmlElement };
|
||||
}
|
||||
// @ts-check
|
||||
import crypto from "node:crypto";
|
||||
import getImage from "./utils/getImage.js";
|
||||
import getLinkElement from "./utils/getLinkElement.js";
|
||||
import getStyleElement from "./utils/getStyleElement.js";
|
||||
import getFilteredProps from "./utils/getFilteredProps.js";
|
||||
import getContainerElement from "./utils/getContainerElement.js";
|
||||
|
||||
export default async function renderBackgroundImage(props) {
|
||||
const type = "BackgroundImage";
|
||||
|
||||
const { filteredProps, transformConfigs } = getFilteredProps(type, props);
|
||||
|
||||
const {
|
||||
src,
|
||||
tag,
|
||||
content,
|
||||
preload,
|
||||
attributes,
|
||||
placeholder,
|
||||
breakpoints,
|
||||
backgroundSize,
|
||||
backgroundPosition,
|
||||
format,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
formatOptions,
|
||||
artDirectives,
|
||||
} = filteredProps;
|
||||
|
||||
const {
|
||||
link: linkAttributes = {},
|
||||
style: styleAttributes = {},
|
||||
container: containerAttributes = {},
|
||||
} = attributes;
|
||||
|
||||
const sizes = "";
|
||||
|
||||
const { uuid, images } = await getImage({
|
||||
src,
|
||||
type,
|
||||
sizes,
|
||||
format,
|
||||
breakpoints,
|
||||
placeholder,
|
||||
artDirectives,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
formatOptions,
|
||||
transformConfigs,
|
||||
});
|
||||
|
||||
const className = `astro-imagetools-background-image-${uuid}`;
|
||||
|
||||
const { imagesizes } = images[images.length - 1];
|
||||
|
||||
const link = getLinkElement({ images, preload, imagesizes, linkAttributes });
|
||||
|
||||
const backgroundImageStylesArray = images.map(({ media, sources }) => {
|
||||
const uuid = crypto.randomBytes(4).toString("hex").toUpperCase();
|
||||
|
||||
const fallbackUrlCustomVariable = `--astro-imagetools-background-image-fallback-url${uuid}`;
|
||||
|
||||
const newSources = {};
|
||||
|
||||
sources.forEach(({ src, format, srcset }) => {
|
||||
const sources = srcset
|
||||
.split(", ")
|
||||
.map((source) => [
|
||||
source.slice(0, source.lastIndexOf(" ")),
|
||||
source.slice(source.lastIndexOf(" ") + 1, -1),
|
||||
]);
|
||||
|
||||
sources.forEach(([path, width]) => {
|
||||
if (!newSources[width]) {
|
||||
newSources[width] = [];
|
||||
}
|
||||
|
||||
newSources[width].push({ src, format, path });
|
||||
});
|
||||
});
|
||||
|
||||
const widths = Object.keys(newSources)
|
||||
.map((width) => parseInt(width))
|
||||
.reverse();
|
||||
|
||||
const maxWidth = Math.max(...widths);
|
||||
|
||||
const styles = widths
|
||||
.map((width) => {
|
||||
const sources = newSources[width];
|
||||
|
||||
const styles = sources
|
||||
.map(
|
||||
({ format, path }, i) =>
|
||||
`
|
||||
${i !== sources.length - 1 ? `.${format} ` : ""}.${className} {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(${path}),
|
||||
var(${fallbackUrlCustomVariable});
|
||||
background-size: ${backgroundSize};
|
||||
background-position: ${backgroundPosition};
|
||||
}
|
||||
`
|
||||
)
|
||||
.reverse()
|
||||
.join("");
|
||||
|
||||
return width === maxWidth
|
||||
? styles
|
||||
: `
|
||||
@media screen and (max-width: ${width}px) {
|
||||
${styles}
|
||||
}
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
return {
|
||||
fallbackUrlCustomVariable,
|
||||
styles: media
|
||||
? `
|
||||
@media ${media} {
|
||||
${styles}
|
||||
}
|
||||
`
|
||||
: styles,
|
||||
};
|
||||
});
|
||||
|
||||
const containerStyles = `
|
||||
.${className} {
|
||||
position: relative;
|
||||
${images
|
||||
.map(({ fallback }, i) => {
|
||||
const fallbackUrlCustomVariable =
|
||||
backgroundImageStylesArray[i].fallbackUrlCustomVariable;
|
||||
|
||||
return `${fallbackUrlCustomVariable}: url("${encodeURI(fallback)}");`;
|
||||
})
|
||||
.join("\n")}
|
||||
}
|
||||
`;
|
||||
|
||||
const backgroundStyles =
|
||||
backgroundImageStylesArray.map(({ styles }) => styles).join("\n") +
|
||||
containerStyles;
|
||||
|
||||
const style = getStyleElement({ styleAttributes, backgroundStyles });
|
||||
|
||||
const htmlElement = getContainerElement({
|
||||
tag,
|
||||
content,
|
||||
className,
|
||||
containerAttributes,
|
||||
});
|
||||
|
||||
return { link, style, htmlElement };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user