📂 / (Root) / home / eliteewa / public_html / wp-content / plugins / easy-accordion-free / src / blocks / shared

📍 /home/eliteewa/public_html/wp-content/plugins/easy-accordion-free/src/blocks/shared

✏️ Editing: dynamicCss.js Writable

import {
	boxShadowCss,
	cssDataCheck,
	unit,
	spEabBackGroundControl,
	generateBorderStyles,
	spEabBackgroundImageCss,
	inArray,
	getVisibilityCss,
} from "@easy-accordion/controls";

const responsiveCss = (attributes, device = "Desktop") => {
	const { uniqueId, blockName, template, itemsExpandWidth, eabPadding, eabMargin } = attributes;

const style = [
		{
			selector: `.${uniqueId} .${inArray(["vertical-accordion", "horizontal-accordion", "post-accordion", "product-accordion", "sidebar-tab-accordion"], blockName) ? `sp-eab-${template}` : "sp-eab-image-accordion-container"}`,
			styles: {
				padding: cssDataCheck(eabPadding?.device[device], unit(eabPadding, device)),
			},
		},
		{
			selector: `.${uniqueId}${inArray(["vertical-accordion", "horizontal-accordion", "sidebar-tab-accordion", "post-accordion", "product-accordion"], blockName) ? ` .sp-eab-${template}` : `.eab-${template}`}`,
			styles: {
				margin: cssDataCheck(eabMargin?.device[device], unit(eabMargin, device)),
			},
		},
		{
			selector: `.${uniqueId} .sp-eab-image-accordion-item.active`,
			styles: {
				"flex-basis": "50%",
			},
		},
	];
	return style;
};

const sharedDynamicCss = (attributes) => {
	const { uniqueId, blockName, template, eabBackground, eabBorder, eabBorderWidth, eabBorderRadius, eabBoxShadow } =
		attributes;

const visibility = getVisibilityCss(attributes);

let overlaySelector = "";
	let radiusSelector = "";
	if (eabBackground?.style === "image") {
		switch (blockName) {
			case "vertical-accordion":
			case "horizontal-accordion":
				overlaySelector = "sp-eab-accordion::after";
				break;
			case "image-accordion":
			case "accordion-slider":
				overlaySelector = "sp-eab-image-accordion-container::after";
				break;
			case "sidebar-tab-accordion":
				overlaySelector = "sp-eab-sidebar-tabs::after";
				break;
			default:
				overlaySelector = "sp-eab-accordion::after";
				break;
		}
		radiusSelector = overlaySelector;
	} else if (eabBackground?.style === "video") {
		overlaySelector = "sp-eab-video-player::after";
		radiusSelector = "sp-eab-video-player";
	}

const sharedDesktopCss = [
		...visibility?.Desktop,
		...responsiveCss(attributes, "Desktop"),
		{
			selector: `.${uniqueId} .${inArray(["vertical-accordion", "horizontal-accordion", "post-accordion", "product-accordion", "sidebar-tab-accordion"], blockName) ? `sp-eab-${template}` : "sp-eab-image-accordion-container"}`,
			styles: {
				background: spEabBackGroundControl(eabBackground),
				...(eabBackground?.style === "image" && spEabBackgroundImageCss(eabBackground)),
				...generateBorderStyles(eabBorder, eabBorderWidth),
				"border-radius": cssDataCheck(eabBorderRadius.value, eabBorderRadius.unit),
				"box-shadow": boxShadowCss(eabBoxShadow),
			},
		},
		// bg overlay for image and video background.
		...(inArray(["image", "video"], eabBackground?.style)
			? [
					{
						selector: `.${uniqueId} .${overlaySelector}`,
						styles: {
							content: "''",
							"background-color": eabBackground?.bgOverlay,
						},
					},
					{
						selector: `.${uniqueId} .${radiusSelector}`,
						styles: {
							"border-radius": cssDataCheck(eabBorderRadius.value, eabBorderRadius.unit),
						},
					},
				]
			: []),
	];
	const sharedTabletCss = [...visibility?.Tablet, ...responsiveCss(attributes, "Tablet")];
	const sharedMobileCss = [...visibility?.Mobile, ...responsiveCss(attributes, "Mobile")];

const cssObject = {
		sharedDesktopCss,
		sharedTabletCss,
		sharedMobileCss,
	};
	return cssObject;
};

export default sharedDynamicCss;