✏️ Editing: regularAccordionDynamicCss.js Writable

import {
	unit,
	inArray,
	boxShadowCss,
	cssDataCheck,
	filterResponsiveDynamicCss,
	spEabBackGroundControl,
	generateTypographyCss,
	generateTypoResponsive,
	generateBorderStyles,
	spEabBackgroundImageCss,
} from "@easy-accordion/controls";
import sharedDynamicCss from "./dynamicCss";

const responsiveCssFn = (attributes, deviceType = "Desktop") => {
	const {
		uniqueId,
		parentId,
		blockName,
		template,
		accordionTitlePadding,
		enableExpandAndCollapseIcon,
		toggleIconSize,
		toggleIconPadding,
		toggleIconMargin,
		accordionContentPadding,
		itemsWidth,
		itemsVerticalGap,
		itemsHeight,
		titleMinWidth,
		titleToContentGap,
	} = attributes;

// max width selector.
	const isMultipleBlockEnabled = false;
	const maxWidthSelector = isMultipleBlockEnabled
		? `.sp-eab-parent-block:has(.${uniqueId}) :is(.sp-eab-faq-search-block, .sp-eab-toggle-all-block, .sp-eab-ajax-pagination-block, .${uniqueId})`
		: `.sp-easy-accordion-block>.${uniqueId}`;

let responsiveCss = [
		// template css.
		{
			selector: maxWidthSelector,
			styles: {
				"max-width": cssDataCheck(itemsWidth.device[deviceType], unit(itemsWidth, deviceType)),
			},
		},
		{
			selector: `.${uniqueId}>.sp-eab-accordion>.block-editor-inner-blocks>.block-editor-block-list__layout`,
			styles: {
				gap: cssDataCheck(itemsVerticalGap.device[deviceType], unit(itemsVerticalGap, deviceType)),
			},
		},
		// accordion title css.
		{
			selector: `.eab-heading-${parentId} .${template === "vertical-six" ? "sp-eab-accordion-header-start" : "sp-eab-accordion-header-wrapper"}`,
			styles: {
				padding: cssDataCheck(
					accordionTitlePadding.device[deviceType],
					unit(accordionTitlePadding, deviceType)
				),
			},
		},
		{
			selector: `.eab-heading-${parentId} .sp-eab-accordion-title-text`,
			styles: {
				...generateTypoResponsive(attributes, deviceType, "accordionTitle"),
			},
		},
		// content css.
		{
			selector: `.eab-content-${parentId}>.${template === "vertical-three" ? "sp-eab-accordion-content-wrapper>.sp-eab-accordion-body" : "sp-eab-accordion-content-wrapper"}`,
			styles: {
				padding: cssDataCheck(
					accordionContentPadding.device[deviceType],
					unit(accordionContentPadding, deviceType)
				),
				...generateTypoResponsive(attributes, deviceType, "accordionContent"),
			},
		},
	];

if (blockName === "horizontal-accordion") {
		responsiveCss = [
			...responsiveCss,
			{
				selector: `.eab-item-${parentId}`,
				styles: {
					height: cssDataCheck(itemsHeight.device[deviceType], unit(itemsHeight, deviceType)),
				},
			},
			{
				selector: `.eab-heading-${parentId}`,
				styles: {
					width: cssDataCheck(titleMinWidth.device[deviceType], unit(titleMinWidth, deviceType)),
				},
			},
		];
	}

// toggle icon css.
	if (enableExpandAndCollapseIcon) {
		responsiveCss = [
			...responsiveCss,
			{
				selector: `.eab-heading-${parentId} .sp-eab-expand-collapse-icon`,
				styles: {
					"font-size": cssDataCheck(toggleIconSize.device[deviceType], unit(toggleIconSize, deviceType)),
					padding: cssDataCheck(toggleIconPadding.device[deviceType], unit(toggleIconPadding, deviceType)),
					margin: cssDataCheck(toggleIconMargin.device[deviceType], unit(toggleIconMargin, deviceType)),
				},
			},
		];
	}

if ("sidebar-tab-accordion" === blockName) {
		responsiveCss = [
			...responsiveCss,
			{
				selector: `.${uniqueId}>.sp-eab-sidebar-tabs>.sp-eab-sidebar-tabs-nav-wrapper`,
				styles: {
					width: "40%",
				},
			},
			{
				selector: `.${uniqueId}>.sp-eab-sidebar-tabs>.sp-eab-sidebar-tabs-content`,
				styles: {
					width: `calc(100% - 40%)`,
				},
			},
			{
				selector: `.${uniqueId}>.sp-eab-sidebar-tabs`,
				styles: {
					gap: cssDataCheck(titleToContentGap.device[deviceType], unit(titleToContentGap, deviceType)),
				},
			},
			{
				selector: `.${uniqueId} .sp-eab-sidebar-tabs-nav`,
				styles: {
					gap: cssDataCheck(itemsVerticalGap.device[deviceType], unit(itemsVerticalGap, deviceType)),
				},
			},
		];
	}

return responsiveCss;
};

const regularAccordionDynamicCss = (attributes) => {
	const { sharedDesktopCss, sharedTabletCss, sharedMobileCss } = sharedDynamicCss(attributes);
	const {
		uniqueId,
		parentId,
		template,
		enableExpandAndCollapseIcon,
		toggleIconColors,
		toggleIconBackground,
		accordionContentTypography,
		rotate90deg,
		toggleIconsSet,
		toggleIconBorder,
		toggleIconBorderWidth,
		toggleIconBorderRadius,
		contentAnimationEffect,
		contentTransitionTime,
		accordionTitleColors,
		accordionTitleBackground,
		accordionContentColor,
		accordionContentBackground,
		contentHeight,
		contentMaxHeight,
		// sidebar tab options.
		itemContentBorder,
		itemContentBorderWidth,
		itemContentBorderRadius,
		blockName,
		accordionTitleBorder,
		accordionTitleTypography,
		accordionTitleNormalBoxShadow,
		accordionTitleBorderWidth,
		accordionTitleBorderRadius,
	} = attributes;

const isRegularAccordion = inArray(["vertical-accordion", "horizontal-accordion"], blockName);

let desktopCss = [
		...sharedDesktopCss,
		...responsiveCssFn(attributes, "Desktop"),
		// title background css.
		{
			selector: `.${uniqueId}.sp-eab-wrapper .eab-heading-${parentId}`,
			styles: {
				color: accordionTitleColors,
				background: accordionTitleBackground,
				...generateTypographyCss(accordionTitleTypography),
			},
		},
		// content background css.
		{
			selector: `.${uniqueId}.sp-eab-wrapper .eab-content-${parentId}>.sp-eab-accordion-content-wrapper`,
			styles: {
				color: accordionContentColor,
				background: accordionContentBackground,
				...generateTypographyCss(accordionContentTypography),
				// ...spEabBackgroundImageCss(accordionContentBackground),
				// ...(contentHeight === "limit" && { height: `${contentMaxHeight?.value}${contentMaxHeight?.unit}` }),
			},
		},
		// content css.
		contentAnimationEffect !== "none" && {
			selector: `.eab-content-${parentId}>.sp-eab-accordion-content-wrapper`,
			styles: {
				"animation-duration": `${contentTransitionTime?.value || ""}${contentTransitionTime?.unit || ""}`,
			},
		},
	];
	// toggle icon css.
	if (enableExpandAndCollapseIcon) {
		desktopCss = [
			...desktopCss,
			{
				selector: `.eab-heading-${parentId} .sp-eab-expand-collapse-icon`,
				styles: {
					color: toggleIconColors,
					background: toggleIconBackground,
					"border-radius": cssDataCheck(toggleIconBorderRadius.value, unit(toggleIconBorderRadius)),
					...(rotate90deg &&
						inArray([1, 4, 5, 6, 9, 10, 12], toggleIconsSet.set) && {
							display: "block",
							transform: "rotate(-90deg)",
						}),
					...generateBorderStyles(toggleIconBorder, toggleIconBorderWidth),
				},
			},
		];
	}

// block specific css.
	if (isRegularAccordion) {
		desktopCss = [
			...desktopCss,
			// accordion item border css.
			{
				selector: `.eab-item-${parentId}`,
				styles: {
					...generateBorderStyles(accordionTitleBorder, accordionTitleBorderWidth),
					"border-radius": cssDataCheck(accordionTitleBorderRadius.value, unit(accordionTitleBorderRadius)),
					"box-shadow": boxShadowCss(accordionTitleNormalBoxShadow),
				},
			},
		];
	}

if (blockName === "sidebar-tab-accordion") {
		desktopCss = [
			...desktopCss,
			{
				selector: `.${uniqueId} .${template === "sidebar-tab-accordion-one" ? "sp-eab-sidebar-tabs-nav" : "sp-eab-accordion-heading"}`,
				styles: {
					...generateBorderStyles(accordionTitleBorder, accordionTitleBorderWidth),
					"border-radius": cssDataCheck(accordionTitleBorderRadius.value, accordionTitleBorderRadius?.unit),
					...(template === "sidebar-tab-accordion-one" && {
						"margin-right": `-${accordionTitleBorderWidth?.value?.right}${accordionTitleBorderWidth.unit}`,
						overflow: "hidden",
						"border-top-right-radius": 0,
						"border-bottom-right-radius": 0,
					}),
				},
			},
			{
				selector: `.${uniqueId} .sp-eab-sidebar-tabs-content`,
				styles: {
					...generateBorderStyles(itemContentBorder, itemContentBorderWidth),
					"border-radius": cssDataCheck(itemContentBorderRadius.value, itemContentBorderRadius?.unit),
					...(template === "sidebar-tab-accordion-one" && {
						"border-top-left-radius": 0,
					}),
				},
			},
		];
	}

const tabletCss = [...sharedTabletCss, ...responsiveCssFn(attributes, "Tablet")];
	const mobileCss = [...sharedMobileCss, ...responsiveCssFn(attributes, "Mobile")];

const cssObj = {
		desktopCss,
		tabletCss,
		mobileCss,
	};

const css = filterResponsiveDynamicCss(cssObj);
	return css;
};

export default regularAccordionDynamicCss;

🔐 Sid Gifari File Manager Pro