| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { |
| 3 |
Background, |
| 4 |
Border, |
| 5 |
Divider, |
| 6 |
InputControl, |
| 7 |
MediaPicker, |
| 8 |
SelectField, |
| 9 |
Spacing, |
| 10 |
SPToggleGroupControl, |
| 11 |
} from "../../components"; |
| 12 |
import { useState } from "@wordpress/element"; |
| 13 |
import { BgIcon, GradientIcon, TransparentIcon } from "../../components/background/svgIcon"; |
| 14 |
|
| 15 |
export const SocialSingleGeneralTab = ({ attributes, setAttributes }) => { |
| 16 |
const { socialSingleProfile, socialSingleLink, socialSingleLinkOpen, socialSingleLinkRelation, socialSingleIcon } = |
| 17 |
attributes; |
| 18 |
|
| 19 |
return ( |
| 20 |
<> |
| 21 |
<SelectField |
| 22 |
label={__("Select Social Profile", "post-carousel")} |
| 23 |
attributes={socialSingleProfile} |
| 24 |
attributesKey={"socialSingleProfile"} |
| 25 |
setAttributes={setAttributes} |
| 26 |
items={[ |
| 27 |
{ label: "Facebook", value: "facebook" }, |
| 28 |
{ label: "X", value: "x (twitter)" }, |
| 29 |
{ label: "LinkedIn", value: "linkedin" }, |
| 30 |
{ label: "Pinterest", value: "pinterest" }, |
| 31 |
{ label: "Email", value: "mail" }, |
| 32 |
{ label: "Instagram", value: "instagram" }, |
| 33 |
{ label: "VK", value: "vkontakte" }, |
| 34 |
{ label: "digg", value: "digg" }, |
| 35 |
{ label: "Tumblr", value: "tumblr" }, |
| 36 |
{ label: "Reddit", value: "reddit" }, |
| 37 |
{ label: "WhatsApp", value: "whatsapp" }, |
| 38 |
{ label: "Pocket", value: "pocket" }, |
| 39 |
{ label: "Xing", value: "xing" }, |
| 40 |
]} |
| 41 |
onChange={(newValue) => |
| 42 |
setAttributes({ |
| 43 |
socialSingleProfile: newValue, |
| 44 |
socialSingleIcon: newValue, |
| 45 |
}) |
| 46 |
} |
| 47 |
/> |
| 48 |
<InputControl |
| 49 |
label={__("Social Link", "post-carousel")} |
| 50 |
attributes={socialSingleLink} |
| 51 |
attributesKey={"socialSingleLink"} |
| 52 |
setAttributes={setAttributes} |
| 53 |
inputType={"url"} |
| 54 |
flex={false} |
| 55 |
placeholder={"#"} |
| 56 |
/> |
| 57 |
<SelectField |
| 58 |
label={__("Link Open In", "post-carousel")} |
| 59 |
attributes={socialSingleLinkOpen} |
| 60 |
attributesKey={"socialSingleLinkOpen"} |
| 61 |
setAttributes={setAttributes} |
| 62 |
items={[ |
| 63 |
{ label: "New Tab", value: "_blank" }, |
| 64 |
{ label: "Current Tab", value: "_self" }, |
| 65 |
]} |
| 66 |
/> |
| 67 |
<SelectField |
| 68 |
label={__("Link Relation", "post-carousel")} |
| 69 |
attributes={socialSingleLinkRelation} |
| 70 |
attributesKey={"socialSingleLinkRelation"} |
| 71 |
setAttributes={setAttributes} |
| 72 |
items={[ |
| 73 |
{ label: "None", value: "none" }, |
| 74 |
{ label: "No Follow", value: "nofollow" }, |
| 75 |
{ label: "No Opener", value: "noopener" }, |
| 76 |
{ label: "Sponsored", value: "sponsored" }, |
| 77 |
]} |
| 78 |
/> |
| 79 |
</> |
| 80 |
); |
| 81 |
}; |
| 82 |
|
| 83 |
export const SocialSingleIconGeneralTab = ({ attributes, setAttributes }) => { |
| 84 |
const { socialSingleIconType, socialSingleIcon, socialSingleImage } = attributes; |
| 85 |
|
| 86 |
return ( |
| 87 |
<> |
| 88 |
<SPToggleGroupControl |
| 89 |
label={__("Icon Type", "post-carousel")} |
| 90 |
attributes={socialSingleIconType} |
| 91 |
attributesKey={"socialSingleIconType"} |
| 92 |
setAttributes={setAttributes} |
| 93 |
items={[ |
| 94 |
{ label: "Original", value: "icon" }, |
| 95 |
{ label: "Image", value: "image", disabled: true }, |
| 96 |
{ label: "None", value: "none" }, |
| 97 |
]} |
| 98 |
/> |
| 99 |
{/* { 'icon' === socialSingleIconType && ( |
| 100 |
<SPIconPicker |
| 101 |
label={ __( 'Icon Source', 'post-carousel' ) } |
| 102 |
attributes={ socialSingleIcon } |
| 103 |
attributesKey={ 'socialSingleIcon' } |
| 104 |
setAttributes={ setAttributes } |
| 105 |
closeBtn={ true } |
| 106 |
/> |
| 107 |
) } */} |
| 108 |
{"image" === socialSingleIconType && ( |
| 109 |
<MediaPicker |
| 110 |
label={__("Image", "post-carousel")} |
| 111 |
imageKey={"socialSingleImage"} |
| 112 |
enableImageSize={false} |
| 113 |
setAttributes={setAttributes} |
| 114 |
backgroundImage={socialSingleImage} |
| 115 |
/> |
| 116 |
)} |
| 117 |
</> |
| 118 |
); |
| 119 |
}; |
| 120 |
|
| 121 |
export const SocialSingleLabelGeneralTab = ({ attributes, setAttributes }) => { |
| 122 |
const { socialSingleLabel, socialSingleSubText, socialSingleProfile, labelEnableParent, subTextEnableParent } = |
| 123 |
attributes; |
| 124 |
|
| 125 |
return ( |
| 126 |
<> |
| 127 |
{labelEnableParent && ( |
| 128 |
<InputControl |
| 129 |
label={__("Social Label", "post-carousel")} |
| 130 |
attributes={socialSingleLabel} |
| 131 |
attributesKey={"socialSingleLabel"} |
| 132 |
setAttributes={setAttributes} |
| 133 |
inputType={"text"} |
| 134 |
placeholder={socialSingleProfile} |
| 135 |
flex={false} |
| 136 |
/> |
| 137 |
)} |
| 138 |
{subTextEnableParent && ( |
| 139 |
<InputControl |
| 140 |
label={__("Social Sub Text Label", "post-carousel")} |
| 141 |
attributes={socialSingleSubText} |
| 142 |
attributesKey={"socialSingleSubText"} |
| 143 |
setAttributes={setAttributes} |
| 144 |
inputType={"text"} |
| 145 |
flex={false} |
| 146 |
/> |
| 147 |
)} |
| 148 |
</> |
| 149 |
); |
| 150 |
}; |
| 151 |
|
| 152 |
export const SocialSingleContentAreaTab = ({ attributes, setAttributes }) => { |
| 153 |
const { |
| 154 |
socialSingleAreaBG, |
| 155 |
socialSingleAreaBorder, |
| 156 |
socialSingleAreaBorderWidth, |
| 157 |
socialSingleAreaBorderRadius, |
| 158 |
socialSingleAreaBorderHover, |
| 159 |
socialSingleAreaBorderWidthHover, |
| 160 |
socialSingleAreaBorderRadiusHover, |
| 161 |
socialSinglePadding, |
| 162 |
socialSingleMargin, |
| 163 |
socialSingleContentAreaBgBlur, |
| 164 |
} = attributes; |
| 165 |
const [bgState, setBgState] = useState("color"); |
| 166 |
|
| 167 |
return ( |
| 168 |
<> |
| 169 |
<SPToggleGroupControl |
| 170 |
attributes={bgState} |
| 171 |
onClick={(newValue) => setBgState(newValue)} |
| 172 |
items={[ |
| 173 |
{ label: "Normal", value: "color" }, |
| 174 |
{ label: "Hover", value: "hover" }, |
| 175 |
]} |
| 176 |
/> |
| 177 |
<Background |
| 178 |
label={__("Background Type", "post-carousel")} |
| 179 |
attributes={socialSingleAreaBG} |
| 180 |
attributesKey={"socialSingleAreaBG"} |
| 181 |
setAttributes={setAttributes} |
| 182 |
colorType={bgState} |
| 183 |
items={[ |
| 184 |
{ |
| 185 |
label: <TransparentIcon />, |
| 186 |
value: "transparent", |
| 187 |
tooltip: "Transparent", |
| 188 |
}, |
| 189 |
{ |
| 190 |
label: <BgIcon />, |
| 191 |
value: "bgColor", |
| 192 |
tooltip: "Solid", |
| 193 |
}, |
| 194 |
{ |
| 195 |
label: <GradientIcon />, |
| 196 |
value: "gradient", |
| 197 |
tooltip: "Gradient", |
| 198 |
}, |
| 199 |
]} |
| 200 |
/> |
| 201 |
{/* <SPRangeControl |
| 202 |
label={ __( 'Background Blur', 'post-carousel' ) } |
| 203 |
attributes={ socialSingleContentAreaBgBlur } |
| 204 |
attributesKey={ 'socialSingleContentAreaBgBlur' } |
| 205 |
setAttributes={ setAttributes } |
| 206 |
units={ [ '%' ] } |
| 207 |
min={ 0 } |
| 208 |
max={ 100 } |
| 209 |
defaultValue={ { unit: '%', value: 0 } } |
| 210 |
/> */} |
| 211 |
{"color" === bgState ? ( |
| 212 |
<> |
| 213 |
<Border |
| 214 |
attributes={{ |
| 215 |
border: socialSingleAreaBorder, |
| 216 |
borderWidth: socialSingleAreaBorderWidth, |
| 217 |
}} |
| 218 |
attributesKey={{ |
| 219 |
border: "socialSingleAreaBorder", |
| 220 |
borderWidth: "socialSingleAreaBorderWidth", |
| 221 |
}} |
| 222 |
setAttributes={setAttributes} |
| 223 |
btnType={"normal"} |
| 224 |
/> |
| 225 |
<Spacing |
| 226 |
label={__("Border Radius", "post-carousel")} |
| 227 |
attributes={socialSingleAreaBorderRadius} |
| 228 |
attributesKey={"socialSingleAreaBorderRadius"} |
| 229 |
setAttributes={setAttributes} |
| 230 |
units={["px", "%", "em"]} |
| 231 |
defaultValue={{ |
| 232 |
unit: "px", |
| 233 |
value: { top: 0, right: 0, bottom: 0, left: 0 }, |
| 234 |
}} |
| 235 |
indicator={"radius"} |
| 236 |
/> |
| 237 |
</> |
| 238 |
) : ( |
| 239 |
<> |
| 240 |
<Border |
| 241 |
label={__("Border Hover", "post-carousel")} |
| 242 |
attributes={{ |
| 243 |
border: socialSingleAreaBorderHover, |
| 244 |
borderWidth: socialSingleAreaBorderWidthHover, |
| 245 |
}} |
| 246 |
attributesKey={{ |
| 247 |
border: "socialSingleAreaBorderHover", |
| 248 |
borderWidth: "socialSingleAreaBorderWidthHover", |
| 249 |
}} |
| 250 |
setAttributes={setAttributes} |
| 251 |
btnType={"normal"} |
| 252 |
/> |
| 253 |
<Spacing |
| 254 |
label={__("Border Radius Hover", "post-carousel")} |
| 255 |
attributes={socialSingleAreaBorderRadiusHover} |
| 256 |
attributesKey={"socialSingleAreaBorderRadiusHover"} |
| 257 |
setAttributes={setAttributes} |
| 258 |
units={["px", "%", "em"]} |
| 259 |
defaultValue={{ |
| 260 |
unit: "px", |
| 261 |
value: { top: 0, right: 0, bottom: 0, left: 0 }, |
| 262 |
}} |
| 263 |
indicator={"radius"} |
| 264 |
/> |
| 265 |
</> |
| 266 |
)} |
| 267 |
<Divider position="bottom sp-w-100pct" /> |
| 268 |
<Spacing |
| 269 |
label={__("Padding", "post-carousel")} |
| 270 |
attributes={socialSinglePadding} |
| 271 |
attributesKey={"socialSinglePadding"} |
| 272 |
setAttributes={setAttributes} |
| 273 |
units={["px", "%", "em"]} |
| 274 |
defaultValue={{ |
| 275 |
unit: "px", |
| 276 |
value: { top: 0, right: 0, bottom: 0, left: 0 }, |
| 277 |
}} |
| 278 |
/> |
| 279 |
<Spacing |
| 280 |
label={__("Margin", "post-carousel")} |
| 281 |
attributes={socialSingleMargin} |
| 282 |
attributesKey={"socialSingleMargin"} |
| 283 |
setAttributes={setAttributes} |
| 284 |
units={["px", "%", "em"]} |
| 285 |
defaultValue={{ |
| 286 |
unit: "px", |
| 287 |
value: { top: 0, right: 0, bottom: 0, left: 0 }, |
| 288 |
}} |
| 289 |
/> |
| 290 |
</> |
| 291 |
); |
| 292 |
}; |
| 293 |
|
