107 lines
2.5 KiB
JavaScript
107 lines
2.5 KiB
JavaScript
// @ts-check
|
|
import getImage from "./utils/getImage.js"
|
|
import getImgElement from "./utils/getImgElement.js"
|
|
import getLinkElement from "./utils/getLinkElement.js"
|
|
import getStyleElement from "./utils/getStyleElement.js"
|
|
import getLayoutStyles from "./utils/getLayoutStyles.js"
|
|
import getFilteredProps from "./utils/getFilteredProps.js"
|
|
import getPictureElement from "./utils/getPictureElement.js"
|
|
import getBackgroundStyles from "./utils/getBackgroundStyles.js"
|
|
|
|
export default async function renderPicture(props) {
|
|
const type = "Picture"
|
|
const { filteredProps, transformConfigs } = getFilteredProps(type, props)
|
|
const {
|
|
src,
|
|
alt,
|
|
sizes,
|
|
preload,
|
|
loading,
|
|
decoding,
|
|
attributes,
|
|
layout,
|
|
placeholder,
|
|
breakpoints,
|
|
objectFit,
|
|
objectPosition,
|
|
format,
|
|
fallbackFormat,
|
|
includeSourceFormat,
|
|
formatOptions,
|
|
fadeInTransition,
|
|
artDirectives,
|
|
} = filteredProps;
|
|
|
|
const {
|
|
img: imgAttributes = {},
|
|
link: linkAttributes = {},
|
|
style: styleAttributes = {},
|
|
picture: pictureAttributes = {},
|
|
} = attributes;
|
|
|
|
const { uuid, images } = await getImage({
|
|
src,
|
|
type,
|
|
sizes,
|
|
format,
|
|
breakpoints,
|
|
placeholder,
|
|
fallbackFormat,
|
|
includeSourceFormat,
|
|
formatOptions,
|
|
artDirectives,
|
|
transformConfigs,
|
|
})
|
|
|
|
const className = `imagetools-picture-${uuid}`
|
|
|
|
const { imagesizes } = images[images.length - 1]
|
|
|
|
const backgroundStyles = getBackgroundStyles(
|
|
images,
|
|
className,
|
|
objectFit,
|
|
objectPosition,
|
|
fadeInTransition
|
|
)
|
|
|
|
const style = getStyleElement({ styleAttributes, backgroundStyles })
|
|
const link = getLinkElement({ images, preload, imagesizes, linkAttributes })
|
|
const layoutStyles = getLayoutStyles({ layout })
|
|
const sources = images.flatMap(({ media, sources, sizes, imagesizes }) =>
|
|
sources.map(({ format, src, srcset }) =>
|
|
src
|
|
? getImgElement({
|
|
src,
|
|
alt,
|
|
sizes,
|
|
style,
|
|
srcset,
|
|
loading,
|
|
decoding,
|
|
imagesizes,
|
|
fadeInTransition,
|
|
layoutStyles,
|
|
imgAttributes,
|
|
})
|
|
: `<source
|
|
srcset="${srcset}"
|
|
sizes="${imagesizes}"
|
|
width="${sizes.width}"
|
|
height="${sizes.height}"
|
|
type="${`image/${format}`}"
|
|
${media ? `media="${media}"` : ""}
|
|
/>`
|
|
)
|
|
)
|
|
|
|
const picture = getPictureElement({
|
|
sources,
|
|
className,
|
|
layoutStyles,
|
|
pictureAttributes,
|
|
})
|
|
|
|
return { link, style, picture }
|
|
}
|