import { __ } from "@wordpress/i18n";
import {
ButtonGroup,
InputControl,
SelectControl,
ToggleControl,
SPRangeControl,
Border,
Spacing,
MediaPicker,
Divider,
PresetPicker,
SpProNotice,
LayoutsToggle,
} from "@easy-accordion/components";
import { inArray, stripScriptsAndSanitizeText } from "@easy-accordion/controls";
import { animationEffectOptions, layoutTemplateIcon, expandCollapseIconSets } from "@easy-accordion/constants";
import { useMetaData, useTogglePanelBody } from "@easy-accordion/hooks";
import { AlignCenter, AlignLeft, AlignRight } from "../../icons";
import { dispatch } from "@wordpress/data";
export const AccordionTemplateTabs = ({ attributes, setAttributes }) => {
const {
blockName,
template,
itemsWidth,
itemsHeight,
schemaMarkup,
itemsExpandWidth,
itemsVerticalGap,
templateOrientation,
titleMinWidth,
preloader,
titleToContentGap,
} = attributes;
const PRO_OPTIONS_MAP = {
"vertical-accordion": [
"4 Stunning Templates",
"FAQ Search",
"Toggle All Button",
"Ajax Pagination",
"Item Line Indicator Styling",
],
"horizontal-accordion": [
"1 Stunning Template",
"Control Expanded Area Width",
"Control Collapse title Width",
"FAQ Search",
],
"image-accordion": [
"Horizontal Image Accordion",
"3 Stunning Templates",
"Control Expanded Area Width & Height",
],
"post-accordion": [
"Horizontal Post Accordion",
"3 Stunning Templates",
"Meta Display Position",
"FAQ Search",
"Toggle All Button",
"Ajax Pagination",
],
"product-accordion": ["3 Stunning Templates", "FAQ Search", "Toggle All Button", "Ajax Pagination"],
"sidebar-tab-accordion": ["1 Stunning Templates", "Control Title Area Width"],
};
return (
<>
{blockName === "sidebar-tab-accordion" && (
<>
)}
{inArray(["accordion-slider", "horizontal-accordion"], blockName) && (
<>
)}
);
};
export const AccordionInteractionsTabs = ({ attributes, setAttributes }) => {
const {
blockName,
template,
openMultiItemAtaTime,
activeEvent,
defaultAccordionOpen,
scrollActiveItemTopOnToggle,
accordionItemToUrl,
scrollToActiveItem,
openSelectedItem,
accordionAutoplayDelayTime,
} = attributes;
let initialOpenOptions = [];
switch (blockName) {
case "vertical-accordion":
initialOpenOptions = [
{ label: "Open First Item", value: "first-item" },
{ label: "Close All Items", value: "close-all" },
{ label: "Open All Items", value: "open-all" },
];
break;
case "horizontal-accordion":
case "accordion-slider":
case "sidebar-tab-accordion":
initialOpenOptions = [
{ label: "Open First Item", value: "first-item" },
{ label: "Open Selected Items", value: "open-selected-item" },
];
break;
case "image-accordion":
initialOpenOptions = [
{ label: "Open First Item", value: "first-item" },
{ label: "Close All Items", value: "close-all" },
{ label: "Open Selected Items", value: "open-selected-item" },
];
break;
default:
initialOpenOptions = [
{ label: "Open First Item", value: "first-item" },
{ label: "Close All Items", value: "close-all" },
{ label: "Open All Items", value: "open-all" },
{ label: "Open Selected Items", value: "open-selected-item" },
];
break;
}
if (blockName === "product-accordion" && template !== "product-accordion-one") {
initialOpenOptions = [
{ label: "Open First Item", value: "first-item" },
{ label: "Open Selected Items", value: "open-selected-item" },
];
}
const isSlider =
inArray(["accordion-slider", "sidebar-tab-accordion"], blockName) ||
(blockName === "product-accordion" && template !== "product-accordion-one");
return (
<>
{
setAttributes({ activeEvent: val });
}}
/>
{activeEvent === "auto" ? (
) : (
{
setAttributes({ defaultAccordionOpen: value });
if (value === "open-all") {
setAttributes({ openMultiItemAtaTime: true });
}
}}
/>
)}
{defaultAccordionOpen === "open-selected-item" && (
)}
{(blockName === "vertical-accordion" ||
blockName === "post-accordion" ||
blockName === "product-accordion") &&
activeEvent !== "auto" &&
defaultAccordionOpen !== "open-all" &&
!isSlider && (
)}
{!isSlider && activeEvent !== "auto" && (
<>
)}
{blockName === "vertical-accordion" && (
)}
);
};
export const ImageGeneralTabs = ({ attributes, setAttributes }) => {
const { imageEffects, imageLightbox } = attributes;
return (
<>
);
};
export const ImageContentGeneralTab = ({ attributes, setAttributes }) => {
const {
showContentIcon,
showTitle,
accordionTitleTag,
showDescription,
showReadMoreButton,
contentAlignment,
contentAnimationEffect,
contentTransitionTime,
} = attributes;
return (
<>
{showTitle && (
<>
)}
, value: "left" },
{ label: , value: "center" },
{ label: , value: "right" },
]}
/>
{contentAnimationEffect !== "none" && (
)}
);
};
export const VerticalContentGeneralTab = ({ attributes, setAttributes }) => {
const {
blockName,
contentHeight,
contentMaxHeight,
contentAnimationEffect,
contentTransitionTime,
contentShowCloseButton,
} = attributes;
return (
<>
{blockName !== "horizontal-accordion" && (
)}
{contentAnimationEffect !== "none" && (
)}
{blockName === "vertical-accordion" && (
<>
{/* */}
)}
);
};
export const TitleGeneralTab = ({ attributes, setAttributes }) => {
const {
blockName,
template,
accordionTitleTag,
showSubtitle,
enableTitleFeaturedIcon,
titleAlignment,
linkPostTitle,
postTitleLenght,
postTitleLenghtNumber,
showFeaturedImage,
featuredImageSize,
featuredImageWidth,
featuredImageHeight,
} = attributes;
const { imageSizes } = useMetaData(attributes);
const imageSizesOption = imageSizes
? imageSizes?.map((size) => {
return { label: size, value: size };
})
: [];
const verticalAlignOptions = [
{ label: , value: "left" },
{ label: , value: "center" },
{ label: , value: "right" },
];
const horizontalAlignOptions = [
{ label: "Top", value: "end" },
{ label: "Center", value: "center" },
{ label: "Bottom", value: "start" },
];
let titleAlignmentOptions = [];
switch (blockName) {
case "vertical-accordion":
titleAlignmentOptions = verticalAlignOptions;
break;
case "horizontal-accordion":
titleAlignmentOptions = horizontalAlignOptions;
break;
default:
titleAlignmentOptions = verticalAlignOptions;
break;
}
return (
<>
{template === "post-accordion-two" && (
<>
{showFeaturedImage && (
<>
{"custom" === featuredImageSize && (
<>
)}
)}
)}
{!(blockName === "post-accordion" || blockName === "product-accordion") && (
<>
{blockName !== "sidebar-tab-accordion" && (
)}
)}
{(blockName === "post-accordion" || blockName === "product-accordion") && (
<>
)}
);
};
export const IconGeneralTab = ({ attributes, setAttributes }) => {
const { blockName, toggleIconsSet, toggleIconPosition, rotate90deg, toggleIconSize, templateOrientation } =
attributes;
const verticalAlignItems = [
{ label: "Start", value: "start" },
{ label: "End", value: "end" },
];
const horizontalAlignItems = [
{ label: "Top", value: "end" },
{ label: "Bottom", value: "start" },
];
const iconPositionOptions = inArray(["vertical-accordion", "sidebar-tab-accordion", "post-accordion"], blockName)
? verticalAlignItems
: horizontalAlignItems;
return (
<>
setAttributes({ toggleIconsSet: iconSet })}
/>
{inArray([1, 4, 5, 6, 9, 10, 12], toggleIconsSet.set) && (
)}
);
};
export const FeatureImageGeneralTab = ({ attributes, setAttributes }) => {
const { imageSizes } = useMetaData(attributes);
const {
showThumbnailImage,
thumbnailImageSize,
thumbnailImageBorder,
thumbnailImageBorderWidth,
thumbnailImageBorderRadius,
thumbnailImageWidth,
thumbnailImageHeight,
} = attributes;
const imageSizesOption = imageSizes
? imageSizes?.map((size) => {
return { label: size, value: size };
})
: [];
return (
<>
{showThumbnailImage && (
<>
{thumbnailImageSize === "custom" && (
<>
)}
)}
);
};
export const SingleImageGeneralTab = ({ attributes, setAttributes }) => {
const { clientId, singleImgData, singleImgDesc, singleImgTitle, singleImgFlipEnable } = attributes;
const { togglePanelBody, toggleActiveTab } = useTogglePanelBody();
const handleStyleTabClick = () => {
const { getBlockParents } = wp.data.select("core/block-editor");
const parents = getBlockParents(clientId);
if (!parents?.length) {
return;
}
const parentClientId = parents[parents?.length - 1];
dispatch("core/block-editor").selectBlock(parentClientId);
togglePanelBody("content");
toggleActiveTab("style");
};
const singleItemTitle = () => {
return (
{__("Image Title", "easy-accordion-free")}
handleStyleTabClick()}
title={__("Style", "easy-accordion-free")}
className="dashicons dashicons-admin-generic sp-d-flex sp-align-center"
>
);
};
return (
<>
setAttributes({ singleImgData: value })}
/>
{
const sanitizeValue = stripScriptsAndSanitizeText(value);
setAttributes({ singleImgTitle: sanitizeValue });
}}
/>
{
const sanitizeValue = stripScriptsAndSanitizeText(value);
setAttributes({ singleImgDesc: sanitizeValue });
}}
/>
);
};