| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { PanelBody } from "@wordpress/components"; |
| 3 |
import { |
| 4 |
NewsTickerContentArea, |
| 5 |
NewsTickerDateTab, |
| 6 |
NewsTickerGeneralPanel, |
| 7 |
NewsTickerHeadingTab, |
| 8 |
NewsTickerImageTab, |
| 9 |
NewsTickerNavigationGeneralTab, |
| 10 |
NewsTickerNavigationStyleTab, |
| 11 |
NewsTickerTitleTab, |
| 12 |
} from "./generalTab"; |
| 13 |
import TabControls from "../../components/tabControls/tabControls"; |
| 14 |
import { QueryBuilderGeneralTab } from "../shared/generalTab"; |
| 15 |
import { usePanelBodyContext } from "../../context"; |
| 16 |
import { useMemo, useState } from "@wordpress/element"; |
| 17 |
import useMetaData from "../../hooks/useMetaData"; |
| 18 |
import { AdvancedTab, VisibilityTab } from "../shared/advancedTab"; |
| 19 |
|
| 20 |
const Inspector = ({ attributes, setAttributes, isSelected }) => { |
| 21 |
const { displayStyle, tickerNavigation } = attributes; |
| 22 |
// const { togglePanelBody, openedAccordion } = manageOpenAccordion(); |
| 23 |
const { openPanel, togglePanelBody } = usePanelBodyContext(); |
| 24 |
const [readMoreButtonStyleType] = useState("color"); |
| 25 |
|
| 26 |
const [colorState, setColorState] = useState("normal"); |
| 27 |
const { imageSizes } = useMetaData(attributes); |
| 28 |
|
| 29 |
const imageSizesOption = useMemo(() => { |
| 30 |
if (!imageSizes || !Array.isArray(imageSizes)) return []; |
| 31 |
|
| 32 |
const options = imageSizes.map((size) => ({ |
| 33 |
label: size, |
| 34 |
value: size, |
| 35 |
})); |
| 36 |
|
| 37 |
options.unshift({ label: "Original Size", value: "" }); |
| 38 |
options.push({ label: "Custom Size", value: "custom" }); |
| 39 |
|
| 40 |
return options; |
| 41 |
}, [imageSizes]); |
| 42 |
|
| 43 |
return ( |
| 44 |
<> |
| 45 |
<PanelBody |
| 46 |
title={__("General", "post-carousel")} |
| 47 |
opened={openPanel === "general"} |
| 48 |
onToggle={() => togglePanelBody("general")} |
| 49 |
initialOpen={true} |
| 50 |
> |
| 51 |
{openPanel === "general" && ( |
| 52 |
<NewsTickerGeneralPanel attributes={attributes} setAttributes={setAttributes} /> |
| 53 |
)} |
| 54 |
</PanelBody> |
| 55 |
{/* query builder panel body */} |
| 56 |
<PanelBody |
| 57 |
title={__("Query Builder", "post-carousel")} |
| 58 |
opened={openPanel === "query_builder"} |
| 59 |
onToggle={() => togglePanelBody("query_builder")} |
| 60 |
> |
| 61 |
{openPanel === "query_builder" && ( |
| 62 |
<QueryBuilderGeneralTab attributes={attributes} setAttributes={setAttributes} /> |
| 63 |
)} |
| 64 |
</PanelBody> |
| 65 |
<PanelBody |
| 66 |
title={__("Content Area", "post-carousel")} |
| 67 |
opened={openPanel === "content_area"} |
| 68 |
onToggle={() => togglePanelBody("content_area")} |
| 69 |
> |
| 70 |
{openPanel === "content_area" && ( |
| 71 |
<NewsTickerContentArea attributes={attributes} setAttributes={setAttributes} /> |
| 72 |
)} |
| 73 |
</PanelBody> |
| 74 |
<PanelBody |
| 75 |
title={__("Ticker Heading", "post-carousel")} |
| 76 |
opened={openPanel === "tickerHeading"} |
| 77 |
onToggle={() => togglePanelBody("tickerHeading")} |
| 78 |
> |
| 79 |
{openPanel === "tickerHeading" && ( |
| 80 |
<NewsTickerHeadingTab attributes={attributes} setAttributes={setAttributes} /> |
| 81 |
)} |
| 82 |
</PanelBody> |
| 83 |
<PanelBody |
| 84 |
title={__("Title", "post-carousel")} |
| 85 |
opened={openPanel === "title"} |
| 86 |
onToggle={() => togglePanelBody("title")} |
| 87 |
> |
| 88 |
{openPanel === "title" && <NewsTickerTitleTab attributes={attributes} setAttributes={setAttributes} />} |
| 89 |
</PanelBody> |
| 90 |
{displayStyle !== "typewriter" && ( |
| 91 |
<PanelBody |
| 92 |
title={__("Date", "post-carousel")} |
| 93 |
opened={openPanel === "date"} |
| 94 |
onToggle={() => togglePanelBody("date")} |
| 95 |
> |
| 96 |
{openPanel === "date" && ( |
| 97 |
<NewsTickerDateTab attributes={attributes} setAttributes={setAttributes} /> |
| 98 |
)} |
| 99 |
</PanelBody> |
| 100 |
)} |
| 101 |
<PanelBody |
| 102 |
title={__("Image", "post-carousel")} |
| 103 |
className="sp-smart-post-image-panel-body" |
| 104 |
opened={openPanel === "image"} |
| 105 |
onToggle={() => togglePanelBody("image")} |
| 106 |
> |
| 107 |
{openPanel === "image" && <NewsTickerImageTab attributes={attributes} setAttributes={setAttributes} />} |
| 108 |
</PanelBody> |
| 109 |
|
| 110 |
{displayStyle === "slide" && ( |
| 111 |
<PanelBody |
| 112 |
title={__("Navigation", "post-carousel")} |
| 113 |
opened={openPanel === "navigation"} |
| 114 |
onToggle={() => togglePanelBody("navigation")} |
| 115 |
> |
| 116 |
{openPanel === "navigation" && ( |
| 117 |
<> |
| 118 |
{/* { ! tickerNavigation && ( |
| 119 |
<Toggle |
| 120 |
label={ __( |
| 121 |
'Navigation', |
| 122 |
'post-carousel' |
| 123 |
) } |
| 124 |
attributes={ tickerNavigation } |
| 125 |
attributesKey={ 'tickerNavigation' } |
| 126 |
setAttributes={ setAttributes } |
| 127 |
/> |
| 128 |
) } */} |
| 129 |
{/* { tickerNavigation && ( */} |
| 130 |
<TabControls |
| 131 |
attributes={attributes} |
| 132 |
setAttributes={setAttributes} |
| 133 |
GeneralTab={NewsTickerNavigationGeneralTab} |
| 134 |
StyleTab={NewsTickerNavigationStyleTab} |
| 135 |
/> |
| 136 |
{/* ) } */} |
| 137 |
</> |
| 138 |
)} |
| 139 |
</PanelBody> |
| 140 |
)} |
| 141 |
<PanelBody |
| 142 |
title={__("Advanced", "post-carousel")} |
| 143 |
opened={openPanel === "advanced"} |
| 144 |
onToggle={() => togglePanelBody("advanced")} |
| 145 |
> |
| 146 |
{openPanel === "advanced" && ( |
| 147 |
<TabControls |
| 148 |
attributes={attributes} |
| 149 |
setAttributes={setAttributes} |
| 150 |
AdvancedTab={AdvancedTab} |
| 151 |
VisibilityTab={VisibilityTab} |
| 152 |
displayIcon={false} |
| 153 |
initialTab={"visibility"} |
| 154 |
/> |
| 155 |
)} |
| 156 |
</PanelBody> |
| 157 |
</> |
| 158 |
); |
| 159 |
}; |
| 160 |
|
| 161 |
export default Inspector; |
| 162 |
|
