generated from polymech/site-template
49 lines
1.1 KiB
JavaScript
49 lines
1.1 KiB
JavaScript
// @ts-check
|
|
import getAttributesString from "./getAttributesString.js";
|
|
|
|
export default function getContainerElement({
|
|
tag,
|
|
content,
|
|
className = "",
|
|
containerAttributes,
|
|
isBackgroundPicture = false,
|
|
containerClassName = "",
|
|
}) {
|
|
const {
|
|
class: customClasses = "",
|
|
style: customInlineStyles = "",
|
|
...restContainerAttributes
|
|
} = containerAttributes;
|
|
|
|
const attributesString = getAttributesString({
|
|
attributes: restContainerAttributes,
|
|
});
|
|
|
|
const classAttribute = [
|
|
isBackgroundPicture
|
|
? "astro-imagetools-background-picture"
|
|
: "astro-imagetools-background-image",
|
|
isBackgroundPicture ? containerClassName : className,
|
|
customClasses,
|
|
]
|
|
.join(" ")
|
|
.trim();
|
|
|
|
const styleAttribute = [
|
|
isBackgroundPicture ? "position: relative;" : "",
|
|
customInlineStyles + (customInlineStyles.endsWith(";") ? "" : ";"),
|
|
]
|
|
.join(" ")
|
|
.trim();
|
|
|
|
const containerElement = `<${tag}
|
|
${attributesString}
|
|
class="${classAttribute}"
|
|
style="${styleAttribute}"
|
|
>
|
|
${content}
|
|
</${tag}>`;
|
|
|
|
return containerElement;
|
|
}
|