/**
* WordPress dependencies
*/
import { __ } from "@wordpress/i18n";
import { useEffect } from "@wordpress/element";
import { InspectorControls } from "@wordpress/block-editor";
import {
PanelBody,
PanelRow,
ToggleControl,
Button,
ButtonGroup,
TabPanel,
RangeControl,
TextControl,
} from "@wordpress/components";
import { select } from "@wordpress/data";
/**
* Internal dependencies
*/
import {
WRAPPER_BG,
WRAPPER_MARGIN,
WRAPPER_PADDING,
WRAPPER_BORDER_SHADOW,
TITLE_MARGIN,
BUTTON_MARGIN,
BUTTON_PADDING,
BUTTON_BORDER_SHADOW,
CUSTOM_HEIGHT,
SLIDES_GAP,
CONTENTS_PADDING,
SLIDE_BORDER_RADIUS,
NORMAL_HOVER,
HORIZONTAL_ALIGN,
VERTICAL_ALIGN,
UNIT_TYPES,
GAP_UNIT_TYPES,
COLORS,
} from "./constants/constants";
import { TITLE_TYPOGRAPHY, BUTTON_TYPOGRAPHY } from "./constants/typography-constant";
import objAttributes from "./attributes";
const {
ResponsiveDimensionsControl,
TypographyDropdown,
BorderShadowControl,
ResponsiveRangeController,
BackgroundControl,
ColorControl,
AdvancedControls,
} = window.EBControls;
const Inspector = ({ attributes, setAttributes }) => {
const {
resOption,
sliderData,
current,
intensity,
isCustomHeight,
titleColor,
titleBackgroundColor,
buttonColorType,
buttonColor,
buttonHoverColor,
buttonBackgroundColor,
buttonHoverBackgroundColor,
horizontalAlign,
verticalAlign,
} = attributes;
const resRequiredProps = {
setAttributes,
resOption,
attributes,
objAttributes,
};
const validUrl = (type, value, index) => {
let updatedData = [...sliderData];
if ('link' === type) {
value = value.toLowerCase().replace('javascript:', '');
}
updatedData[index][type] = value;
setAttributes({ sliderData: updatedData });
}
const handleTextChange = (type, value, index) => {
let updatedData = [...sliderData];
updatedData[index][type] = value;
setAttributes({ sliderData: updatedData });
};
const handlePanelClick = (index) => {
let updatedIndex = index !== current ? index : 1;
setAttributes({ current: updatedIndex });
};
return (
<InspectorControls key="controls">
<div className="eb-panel-control">
<TabPanel
className="eb-parent-tab-panel"
activeClass="active-tab"
// onSelect={onSelect}
tabs={[
{
name: "general",
title: "General",
className: "eb-tab general",
},
{
name: "styles",
title: "Style",
className: "eb-tab styles",
},
{
name: "advance",
title: "Advanced",
className: "eb-tab advance",
},
]}
>
{(tab) => (
<div className={"eb-tab-controls" + tab.name}>
{tab.name === "general" && (
<>
<PanelBody title={__("General", "essential-blocks")}>
<RangeControl
label={__("Parallax Softness", "essential-blocks")}
value={intensity}
allowReset
onChange={(intensity) => setAttributes({ intensity })}
min={0}
max={100}
/>
<ToggleControl
label={__("Custom Height", "essential-blocks")}
checked={isCustomHeight}
onChange={() =>
setAttributes({
isCustomHeight: !isCustomHeight,
})
}
/>
{isCustomHeight && (
<ResponsiveRangeController
baseLabel={__("Slider Size", "essential-blocks")}
controlName={CUSTOM_HEIGHT}
resRequiredProps={resRequiredProps}
units={UNIT_TYPES}
min={1}
max={500}
step={1}
/>
)}
<ResponsiveRangeController
baseLabel={__("Slides Gap", "essential-blocks")}
controlName={SLIDES_GAP}
resRequiredProps={resRequiredProps}
units={GAP_UNIT_TYPES}
min={0}
max={200}
step={1}
/>
</PanelBody>
<PanelBody title={__("Slides", "essential-blocks")} initialOpen={false}>
{sliderData.map((slide, index) => (
<PanelBody
key={index}
title={
slide.title && slide.title.length > 0
? slide.title
: "Slide " + (index + 1) + " Settings"
}
initialOpen={false}
onToggle={() => handlePanelClick(index)}
className="eb-slider-item-single-panel"
>
<TextControl
label={__("Title Text", "essential-blocks")}
value={slide.title}
onChange={(title) => handleTextChange("title", title, index)}
/>
<TextControl
label={__("Button Text", "essential-blocks")}
value={slide.btnText}
onChange={(btnText) => handleTextChange("btnText", btnText, index)}
/>
<TextControl
label={__("Button Link", "essential-blocks")}
value={slide.link}
onChange={(link) => handleTextChange("link", link, index)}
onBlur={(val) => validUrl('link', val.target.value, index)}
/>
<ToggleControl
label={__("Open in New Tab", "essential-blocks")}
checked={slide.openNewTab}
onChange={() =>
handleTextChange("openNewTab", !slide.openNewTab, index)
}
/>
</PanelBody>
))}
</PanelBody>
</>
)}
{tab.name === "styles" && (
<>
<PanelBody title={__("Slides Style", "essential-blocks")} initialOpen={true}>
<PanelRow>Content Horizontal Align</PanelRow>
<ButtonGroup>
{HORIZONTAL_ALIGN.map((item, index) => (
<Button
key={index}
isPrimary={horizontalAlign === item.value}
isSecondary={horizontalAlign !== item.value}
onClick={() =>
setAttributes({
horizontalAlign: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
<PanelRow>Content Vertical Align</PanelRow>
<ButtonGroup className="eb-margin-bottom-20">
{VERTICAL_ALIGN.map((item, index) => (
<Button
key={index}
isPrimary={verticalAlign === item.value}
isSecondary={verticalAlign !== item.value}
onClick={() =>
setAttributes({
verticalAlign: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={CONTENTS_PADDING}
baseLabel="Content Padding"
/>
<ResponsiveRangeController
baseLabel={__("Slide Border Radius", "essential-blocks")}
controlName={SLIDE_BORDER_RADIUS}
resRequiredProps={resRequiredProps}
units={GAP_UNIT_TYPES}
min={1}
max={50}
step={1}
/>
</PanelBody>
<PanelBody title={__("Title Style", "essential-blocks")} initialOpen={false}>
<ColorControl
label={__("Color", "essential-blocks")}
color={titleColor}
onChange={(color) =>
setAttributes({
titleColor: color,
})
}
/>
<ColorControl
label={__("Background Color", "essential-blocks")}
color={titleBackgroundColor}
onChange={(color) =>
setAttributes({
titleBackgroundColor: color,
})
}
/>
<TypographyDropdown
baseLabel={__("Typography", "essential-blocks")}
typographyPrefixConstant={TITLE_TYPOGRAPHY}
resRequiredProps={resRequiredProps}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={TITLE_MARGIN}
baseLabel="Margin"
/>
</PanelBody>
<PanelBody title={__("Button Styles", "essential-blocks")} initialOpen={false}>
<ButtonGroup className="eb-inspector-btn-group">
{NORMAL_HOVER.map((item, index) => (
<Button
key={index}
isPrimary={buttonColorType === item.value}
isSecondary={buttonColorType !== item.value}
onClick={() =>
setAttributes({
buttonColorType: item.value,
})
}
>
{item.label}
</Button>
))}
</ButtonGroup>
{buttonColorType === "normal" && (
<>
<ColorControl
label={__("Color", "essential-blocks")}
color={buttonColor}
onChange={(color) =>
setAttributes({
buttonColor: color,
})
}
/>
<ColorControl
label={__("Background Color", "essential-blocks")}
color={buttonBackgroundColor}
onChange={(color) =>
setAttributes({
buttonBackgroundColor: color,
})
}
/>
</>
)}
{buttonColorType === "hover" && (
<>
<ColorControl
label={__("Hover Color", "essential-blocks")}
color={buttonHoverColor}
onChange={(color) =>
setAttributes({
buttonHoverColor: color,
})
}
/>
<ColorControl
label={__("Hover Background Color", "essential-blocks")}
color={buttonHoverBackgroundColor}
onChange={(color) =>
setAttributes({
buttonHoverBackgroundColor: color,
})
}
/>
</>
)}
<PanelRow>Button Border & Shadow</PanelRow>
<BorderShadowControl
controlName={BUTTON_BORDER_SHADOW}
resRequiredProps={resRequiredProps}
// noShadow
// noBorder
/>
<TypographyDropdown
baseLabel={__("Typography", "essential-blocks")}
typographyPrefixConstant={BUTTON_TYPOGRAPHY}
resRequiredProps={resRequiredProps}
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={BUTTON_MARGIN}
baseLabel="Margin"
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={BUTTON_PADDING}
baseLabel="Padding"
/>
</PanelBody>
</>
)}
{tab.name === "advance" && (
<>
<PanelBody>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={WRAPPER_MARGIN}
baseLabel="Margin"
/>
<ResponsiveDimensionsControl
resRequiredProps={resRequiredProps}
controlName={WRAPPER_PADDING}
baseLabel="Padding"
/>
</PanelBody>
<PanelBody title={__("Background", "essential-blocks")} initialOpen={false}>
<BackgroundControl
controlName={WRAPPER_BG}
resRequiredProps={resRequiredProps}
noOverlay
/>
</PanelBody>
<PanelBody title={__("Border & Shadow")} initialOpen={false}>
<BorderShadowControl
controlName={WRAPPER_BORDER_SHADOW}
resRequiredProps={resRequiredProps}
// noShadow
// noBorder
/>
</PanelBody>
<AdvancedControls attributes={attributes} setAttributes={setAttributes} />
</>
)}
</div>
)}
</TabPanel>
</div>
</InspectorControls>
);
};
export default Inspector;