| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { useEffect, useState } from "@wordpress/element"; |
| 3 |
import DatePicker from "react-datepicker"; |
| 4 |
import "react-datepicker/dist/react-datepicker.css"; |
| 5 |
|
| 6 |
import { |
| 7 |
ChildPanelBody, |
| 8 |
SPRangeControl, |
| 9 |
SelectField, |
| 10 |
Divider, |
| 11 |
Background, |
| 12 |
Toggle, |
| 13 |
InputControl, |
| 14 |
MediaPicker, |
| 15 |
MultipleSelect, |
| 16 |
SelectDropdown, |
| 17 |
MultiSelectDndKit, |
| 18 |
Taxonomies, |
| 19 |
} from "../../components"; |
| 20 |
import { BgIcon, GradientIcon, TransparentIcon } from "../../components/background/svgIcon"; |
| 21 |
import { |
| 22 |
DotsPagination, |
| 23 |
DynamicPagination, |
| 24 |
StrokesPagination, |
| 25 |
ScrollbarPagination, |
| 26 |
FractionPagination, |
| 27 |
NumbersPagination, |
| 28 |
Outline, |
| 29 |
BasicOutline, |
| 30 |
UserSolid, |
| 31 |
Rounded, |
| 32 |
Female, |
| 33 |
Circle, |
| 34 |
Minimal, |
| 35 |
UserAuthor, |
| 36 |
AlignCenter, |
| 37 |
AlignLeft, |
| 38 |
AlignRight |
| 39 |
} from "../../icons/icons"; |
| 40 |
import { capitalizeString, filterSelectOptions, inArray, useDeviceType } from "../../controls/controls"; |
| 41 |
import { getObjectValuesToJsArray, rearrangeAboveTitle } from "./helpFn"; |
| 42 |
import useAllPosts from "../../hooks/useAllPosts"; |
| 43 |
import useMetaData from "../../hooks/useMetaData"; |
| 44 |
import { orderByOptions, paginationDotsStyle } from "../../controls/constants"; |
| 45 |
import useApiData from "../../hooks/useApiData"; |
| 46 |
import SPToggleGroupControl from "../../components/toggleGroupControl/toggleGroupControl"; |
| 47 |
import useDefaultValue from "../../hooks/useDefaultValue"; |
| 48 |
import DragAndDropDnd from "../../components/multipleSelect/dragAndDropDnd"; |
| 49 |
import { |
| 50 |
ArrowMinimal, |
| 51 |
ArrowOutline, |
| 52 |
ArrowSolid, |
| 53 |
ChevronBold, |
| 54 |
ChevronBorderLine, |
| 55 |
ChevronOutline, |
| 56 |
ChevronSolid, |
| 57 |
DoubleChevron, |
| 58 |
DoubleChevronBorderLine, |
| 59 |
DoubleChevronOutline, |
| 60 |
TriangleOutline, |
| 61 |
} from "../../icons/arrowIcons"; |
| 62 |
import ProInfo from "../../components/proInfo/proInfo"; |
| 63 |
|
| 64 |
export const QueryBuilderGeneralTab = ({ attributes, setAttributes }) => { |
| 65 |
const { |
| 66 |
postType, |
| 67 |
quickQuery, |
| 68 |
orderBy, |
| 69 |
filterByAuthor, |
| 70 |
filterByDate, |
| 71 |
specificDate, |
| 72 |
specificMonth, |
| 73 |
specificYear, |
| 74 |
specificPeriodAfter, |
| 75 |
specificPeriodBefore, |
| 76 |
specificDateBefore, |
| 77 |
specificDateAfter, |
| 78 |
filterByKeyword, |
| 79 |
orderDirection, |
| 80 |
includeOnlyPost, |
| 81 |
excludePost, |
| 82 |
excludeTerm, |
| 83 |
excludeAuthor, |
| 84 |
excludePostWithoutImagePosts, |
| 85 |
excludeChildrenPosts, |
| 86 |
excludeProtectedPosts, |
| 87 |
excludeCurrentPosts, |
| 88 |
excludeStickyPosts, |
| 89 |
noResultFoundResult, |
| 90 |
postLimit, |
| 91 |
offset, |
| 92 |
filterProduct, |
| 93 |
uniqueId, |
| 94 |
multiplePostType, |
| 95 |
excludeDateAfter, |
| 96 |
excludeDateBefore, |
| 97 |
contentPartArray, |
| 98 |
taxonomies, |
| 99 |
} = attributes; |
| 100 |
const { allPostTypes, allMetaKeys, authorList, allTaxonomies } = useMetaData(attributes, "editSite"); |
| 101 |
const { allPosts } = useAllPosts(attributes); |
| 102 |
const dateOptions = [ |
| 103 |
{ label: "Default", value: "" }, |
| 104 |
{ label: "Yesterday", value: "yesterday" }, |
| 105 |
{ label: "Today Only", value: "today_only" }, |
| 106 |
{ label: "Today and Onwards", value: "today_onwards" }, |
| 107 |
{ label: "This Week", value: "this_week" }, |
| 108 |
{ label: "This Month", value: "this_month" }, |
| 109 |
{ label: "This Year", value: "this_year" }, |
| 110 |
{ label: "Past Week", value: "week_ago" }, |
| 111 |
{ label: "Past Month", value: "month_ago" }, |
| 112 |
{ label: "Past Quarter", value: "past_quarter" }, |
| 113 |
{ label: "Past Year", value: "year_ago" }, |
| 114 |
{ label: "Specific Date & Before", value: "specific_date_before" }, |
| 115 |
{ label: "Specific Date & After", value: "specific_date_after" }, |
| 116 |
{ label: "Specific Date", value: "specific_date" }, |
| 117 |
{ label: "Specific Month", value: "specific_month" }, |
| 118 |
{ label: "Specific Year", value: "specific_year" }, |
| 119 |
{ label: "Specific Period (From & To)", value: "specific_period" }, |
| 120 |
{ label: "Exclude Specific Date", value: "exclude_specific_date" }, |
| 121 |
]; |
| 122 |
|
| 123 |
// this function create for convert allPostTypes to select control options. |
| 124 |
const postTypeValues = getObjectValuesToJsArray(allPostTypes); |
| 125 |
const postTypeOptions = postTypeValues?.map((singlePostType) => ({ |
| 126 |
label: `${capitalizeString(singlePostType)}s`, |
| 127 |
value: singlePostType, |
| 128 |
})); |
| 129 |
|
| 130 |
const updatePostTypeOptions = postTypeOptions?.map((item, index) => ({ |
| 131 |
id: index + 1, |
| 132 |
label: item.value === "attachment" ? "Media" : item.label, |
| 133 |
value: item.value, |
| 134 |
})); |
| 135 |
const multiSelectPostType = [ |
| 136 |
...updatePostTypeOptions, |
| 137 |
{ |
| 138 |
id: updatePostTypeOptions.length + 1, |
| 139 |
label: "Multiple Post Types", |
| 140 |
value: "multiple_post_type", |
| 141 |
}, |
| 142 |
]; |
| 143 |
|
| 144 |
const filterIncludesPost = (inputFieldData) => { |
| 145 |
const lowercaseInput = inputFieldData.toLowerCase(); |
| 146 |
setAttributes({ liveSearchText: lowercaseInput }); |
| 147 |
}; |
| 148 |
|
| 149 |
const includeExcludePostOptions = filterSelectOptions(allPosts, "post_title", "ID", "ID"); |
| 150 |
|
| 151 |
const defaultPostType = [ |
| 152 |
{ label: "Posts", value: "post" }, |
| 153 |
{ label: "Pages", value: "page" }, |
| 154 |
]; |
| 155 |
|
| 156 |
let allTerms = []; |
| 157 |
allTaxonomies?.forEach((taxonomy) => { |
| 158 |
allTerms = [...allTerms, ...taxonomy.terms_items]; |
| 159 |
}); |
| 160 |
|
| 161 |
const onPostTypeChange = (newValue) => { |
| 162 |
if (newValue === postType) { |
| 163 |
return; |
| 164 |
} |
| 165 |
|
| 166 |
// Add Product Template part value for Content Area Draggable |
| 167 |
const newContentPartArray = []; |
| 168 |
const productComponents = [ |
| 169 |
{ id: 7, label: "Star Rating", value: "starRating" }, |
| 170 |
{ id: 8, label: "Price", value: "price" }, |
| 171 |
{ id: 9, label: "Add To Cart", value: "addToCart" }, |
| 172 |
]; |
| 173 |
if (newValue === "product") { |
| 174 |
newContentPartArray.push(...contentPartArray, ...productComponents); |
| 175 |
} else { |
| 176 |
const newProductSet = new Set(productComponents.map((item) => JSON.stringify(item))); |
| 177 |
const filterContentArray = contentPartArray.filter((item) => !newProductSet.has(JSON.stringify(item))); |
| 178 |
newContentPartArray.push(...filterContentArray); |
| 179 |
} // It will add product relate object in array when postType is product and remove if not product. |
| 180 |
|
| 181 |
setAttributes({ |
| 182 |
postType: newValue, |
| 183 |
taxonomies: [ |
| 184 |
{ |
| 185 |
id: 1, |
| 186 |
type: "", |
| 187 |
value: [], |
| 188 |
operator: "IN", |
| 189 |
}, |
| 190 |
], |
| 191 |
includeOnlyPost: [], |
| 192 |
excludeTerm: [], |
| 193 |
excludeAuthor: [], |
| 194 |
excludePost: [], |
| 195 |
contentPartArray: newContentPartArray, |
| 196 |
}); |
| 197 |
}; |
| 198 |
|
| 199 |
const onDateChangeHandler = (newDate, attrKey) => { |
| 200 |
const d = new Date(newDate); |
| 201 |
|
| 202 |
const updatedDate = new Date( |
| 203 |
Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()) |
| 204 |
).toISOString(); |
| 205 |
|
| 206 |
setAttributes({ [attrKey]: updatedDate }); |
| 207 |
}; |
| 208 |
const toLocalDateWithoutShift = (isoString) => { |
| 209 |
const d = new Date(isoString); |
| 210 |
|
| 211 |
// Extract the stored UTC values as real values |
| 212 |
return new Date( |
| 213 |
d.getUTCFullYear(), |
| 214 |
d.getUTCMonth(), |
| 215 |
d.getUTCDate(), |
| 216 |
d.getUTCHours(), |
| 217 |
d.getUTCMinutes(), |
| 218 |
d.getUTCSeconds() |
| 219 |
); |
| 220 |
}; |
| 221 |
const onPostTypeChangeHandler = (e) => { |
| 222 |
setAttributes({ |
| 223 |
multiplePostType: e, |
| 224 |
taxonomies: [ |
| 225 |
{ |
| 226 |
id: 1, |
| 227 |
type: "", |
| 228 |
value: [], |
| 229 |
operator: "IN", |
| 230 |
initialOpen: true, |
| 231 |
}, |
| 232 |
], |
| 233 |
catTabCategoryType: "", |
| 234 |
}) |
| 235 |
} |
| 236 |
|
| 237 |
return ( |
| 238 |
<> |
| 239 |
{/* <SelectField |
| 240 |
label={ __( 'Post Type(s)', 'post-carousel' ) } |
| 241 |
attributes={ postType } |
| 242 |
onChange={ onPostTypeChange } |
| 243 |
attributesKey={ 'postType' } |
| 244 |
setAttributes={ setAttributes } |
| 245 |
flexStyle={ true } |
| 246 |
items={ |
| 247 |
multiSelectPostType.length > 1 |
| 248 |
? multiSelectPostType |
| 249 |
: defaultPostType |
| 250 |
} |
| 251 |
/> |
| 252 |
{ 'multiple_post_type' === postType && ( */} |
| 253 |
<MultipleSelect |
| 254 |
label={__("Post Types", "post-carousel")} |
| 255 |
value={multiplePostType} |
| 256 |
attributes={multiplePostType} |
| 257 |
onInputChange={() => { }} |
| 258 |
attributesKey={"multiplePostType"} |
| 259 |
setAttributes={setAttributes} |
| 260 |
onChange={(e) => onPostTypeChangeHandler(e)} |
| 261 |
items={updatePostTypeOptions.length > 0 ? updatePostTypeOptions : defaultPostType} |
| 262 |
/> |
| 263 |
{/* ) } */} |
| 264 |
<SelectField |
| 265 |
label={__("Quick Query", "post-carousel")} |
| 266 |
attributes={quickQuery} |
| 267 |
attributesKey={"quickQuery"} |
| 268 |
setAttributes={setAttributes} |
| 269 |
items={[ |
| 270 |
{ |
| 271 |
label: "Select Quick Query", |
| 272 |
value: "", |
| 273 |
}, |
| 274 |
{ |
| 275 |
label: "Popular Posts ( last 24-Hours Views )", |
| 276 |
value: "1 days", |
| 277 |
}, |
| 278 |
{ |
| 279 |
label: "Popular Posts ( last 3-Days Views ) (Pro)", |
| 280 |
value: "", |
| 281 |
disabled: true, |
| 282 |
}, |
| 283 |
{ |
| 284 |
label: "Popular Posts ( last 7-Days Views ) (Pro)", |
| 285 |
value: "", |
| 286 |
disabled: true, |
| 287 |
}, |
| 288 |
{ |
| 289 |
label: "Popular Posts ( last 14-Day Views ) (Pro)", |
| 290 |
value: "", |
| 291 |
disabled: true, |
| 292 |
}, |
| 293 |
{ |
| 294 |
label: "Popular Posts ( last 30-Day Views ) (Pro)", |
| 295 |
value: "", |
| 296 |
disabled: true, |
| 297 |
}, |
| 298 |
{ |
| 299 |
label: "Popular Posts ( last 3-Months Views ) (Pro)", |
| 300 |
value: "", |
| 301 |
disabled: true, |
| 302 |
}, |
| 303 |
{ |
| 304 |
label: "Popular Posts ( last 1-Year Views ) (Pro)", |
| 305 |
value: "", |
| 306 |
disabled: true, |
| 307 |
}, |
| 308 |
{ |
| 309 |
label: "Popular Posts ( All Times Views ) (Pro)", |
| 310 |
value: "", |
| 311 |
disabled: true, |
| 312 |
}, |
| 313 |
]} |
| 314 |
/> |
| 315 |
{/* advanced filtering */} |
| 316 |
<ChildPanelBody title={__("Advanced Filtering", "post-carousel")}> |
| 317 |
{/* taxonomy type */} |
| 318 |
<Taxonomies attributes={attributes} setAttributes={setAttributes} allTaxonomies={allTaxonomies} /> |
| 319 |
<Divider position="top-bottom" /> |
| 320 |
<MultipleSelect |
| 321 |
label={__("Filter By Author", "post-carousel")} |
| 322 |
value={filterByAuthor} |
| 323 |
attributes={filterByAuthor} |
| 324 |
onInputChange={() => { }} |
| 325 |
attributesKey={"multiplePostType"} |
| 326 |
setAttributes={setAttributes} |
| 327 |
onChange={(e) => setAttributes({ filterByAuthor: e })} |
| 328 |
items={authorList} |
| 329 |
/> |
| 330 |
<SelectField |
| 331 |
label={__("Filter By Date", "post-carousel")} |
| 332 |
attributes={filterByDate} |
| 333 |
attributesKey={"filterByDate"} |
| 334 |
setAttributes={setAttributes} |
| 335 |
items={dateOptions} |
| 336 |
/> |
| 337 |
{"specific_date" === filterByDate && ( |
| 338 |
<div className="sp-smart-specific-date-item s"> |
| 339 |
<span>Date</span> |
| 340 |
<DatePicker |
| 341 |
selected={specificDate} |
| 342 |
dateFormat="MMMM d, yyyy" |
| 343 |
onChange={(date) => setAttributes({ specificDate: date })} |
| 344 |
/> |
| 345 |
</div> |
| 346 |
)} |
| 347 |
{"specific_date_before" === filterByDate && ( |
| 348 |
<div className="sp-smart-specific-date-item s"> |
| 349 |
<span>Date Before</span> |
| 350 |
<DatePicker |
| 351 |
selected={toLocalDateWithoutShift(specificDateBefore)} |
| 352 |
dateFormat="MMMM d, yyyy" |
| 353 |
onChange={(date) => onDateChangeHandler(date, "specificDateBefore")} |
| 354 |
/> |
| 355 |
</div> |
| 356 |
)} |
| 357 |
|
| 358 |
{"specific_date_after" === filterByDate && ( |
| 359 |
<div className="sp-smart-specific-date-item s"> |
| 360 |
<span>Date From</span> |
| 361 |
<DatePicker |
| 362 |
selected={toLocalDateWithoutShift(specificDateAfter)} |
| 363 |
dateFormat="MMMM d, yyyy" |
| 364 |
onChange={(date) => onDateChangeHandler(date, "specificDateAfter")} |
| 365 |
/> |
| 366 |
</div> |
| 367 |
)} |
| 368 |
|
| 369 |
{"specific_period" === filterByDate && ( |
| 370 |
<div className="sp-smart-specific-date"> |
| 371 |
<div className="sp-smart-specific-date-item"> |
| 372 |
<span>From</span> |
| 373 |
<DatePicker |
| 374 |
selected={specificPeriodAfter} |
| 375 |
dateFormat="MMMM d, yyyy" |
| 376 |
onChange={(date) => |
| 377 |
setAttributes({ |
| 378 |
specificPeriodAfter: date, |
| 379 |
}) |
| 380 |
} |
| 381 |
startDate={specificPeriodAfter} |
| 382 |
endDate={specificPeriodBefore} |
| 383 |
/> |
| 384 |
</div> |
| 385 |
<div className="sp-smart-specific-date-item"> |
| 386 |
<span>To</span> |
| 387 |
<DatePicker |
| 388 |
className="sp-mt-10" |
| 389 |
selected={specificPeriodBefore} |
| 390 |
dateFormat="MMMM d, yyyy" |
| 391 |
onChange={(date) => |
| 392 |
setAttributes({ |
| 393 |
specificPeriodBefore: date, |
| 394 |
}) |
| 395 |
} |
| 396 |
startDate={specificPeriodAfter} |
| 397 |
endDate={specificPeriodBefore} |
| 398 |
/> |
| 399 |
</div> |
| 400 |
</div> |
| 401 |
)} |
| 402 |
|
| 403 |
{"exclude_specific_date" === filterByDate && ( |
| 404 |
<div className="sp-smart-specific-date"> |
| 405 |
<div className="sp-smart-specific-date-item"> |
| 406 |
<span>From</span> |
| 407 |
<DatePicker |
| 408 |
selected={excludeDateBefore} |
| 409 |
dateFormat="MMMM d, yyyy" |
| 410 |
onChange={(date) => setAttributes({ excludeDateBefore: date })} |
| 411 |
startDate={excludeDateAfter} |
| 412 |
endDate={excludeDateBefore} |
| 413 |
/> |
| 414 |
</div> |
| 415 |
<div className="sp-smart-specific-date-item"> |
| 416 |
<span>To</span> |
| 417 |
<DatePicker |
| 418 |
className="sp-mt-10" |
| 419 |
selected={excludeDateAfter} |
| 420 |
dateFormat="MMMM d, yyyy" |
| 421 |
onChange={(date) => setAttributes({ excludeDateAfter: date })} |
| 422 |
startDate={excludeDateAfter} |
| 423 |
endDate={excludeDateBefore} |
| 424 |
/> |
| 425 |
</div> |
| 426 |
</div> |
| 427 |
)} |
| 428 |
|
| 429 |
{"specific_month" === filterByDate && ( |
| 430 |
<SelectField |
| 431 |
label={__("Specific Month", "post-carousel")} |
| 432 |
attributes={specificMonth} |
| 433 |
attributesKey={"specificMonth"} |
| 434 |
setAttributes={setAttributes} |
| 435 |
items={[ |
| 436 |
{ |
| 437 |
label: __("January", "post-carousel"), |
| 438 |
value: "1", |
| 439 |
}, |
| 440 |
{ |
| 441 |
label: __("February", "post-carousel"), |
| 442 |
value: "2", |
| 443 |
}, |
| 444 |
{ |
| 445 |
label: __("March", "post-carousel"), |
| 446 |
value: "3", |
| 447 |
}, |
| 448 |
{ |
| 449 |
label: __("April", "post-carousel"), |
| 450 |
value: "4", |
| 451 |
}, |
| 452 |
{ |
| 453 |
label: __("May", "post-carousel"), |
| 454 |
value: "5", |
| 455 |
}, |
| 456 |
{ |
| 457 |
label: __("June", "post-carousel"), |
| 458 |
value: "6", |
| 459 |
}, |
| 460 |
{ |
| 461 |
label: __("July", "post-carousel"), |
| 462 |
value: "7", |
| 463 |
}, |
| 464 |
{ |
| 465 |
label: __("August", "post-carousel"), |
| 466 |
value: "8", |
| 467 |
}, |
| 468 |
{ |
| 469 |
label: __("September", "post-carousel"), |
| 470 |
value: "9", |
| 471 |
}, |
| 472 |
{ |
| 473 |
label: __("October", "post-carousel"), |
| 474 |
value: "10", |
| 475 |
}, |
| 476 |
{ |
| 477 |
label: __("November", "post-carousel"), |
| 478 |
value: "11", |
| 479 |
}, |
| 480 |
{ |
| 481 |
label: __("December", "post-carousel"), |
| 482 |
value: "12", |
| 483 |
}, |
| 484 |
]} |
| 485 |
/> |
| 486 |
)} |
| 487 |
|
| 488 |
{"specific_year" === filterByDate && ( |
| 489 |
<InputControl |
| 490 |
label={__("Specific Year", "post-carousel")} |
| 491 |
attributes={specificYear} |
| 492 |
attributesKey={"specificYear"} |
| 493 |
setAttributes={setAttributes} |
| 494 |
flex={true} |
| 495 |
inputType="number" |
| 496 |
/> |
| 497 |
)} |
| 498 |
{/* <InputControl |
| 499 |
label={__("Filter By Keyword", "post-carousel")} |
| 500 |
attributes={filterByKeyword} |
| 501 |
attributesKey={"filterByKeyword"} |
| 502 |
setAttributes={setAttributes} |
| 503 |
flex={false} |
| 504 |
inputType="text" |
| 505 |
/> */} |
| 506 |
<Divider position="top-bottom" /> |
| 507 |
{/* Filter by Custom Fields */} |
| 508 |
{/* <FilterByCustomFields attributes={attributes} setAttributes={setAttributes} metaKeys={allMetaKeys} /> */} |
| 509 |
<SelectField |
| 510 |
label={__("Order By", "post-carousel")} |
| 511 |
attributes={orderBy} |
| 512 |
attributesKey={"orderBy"} |
| 513 |
setAttributes={setAttributes} |
| 514 |
flexStyle={false} |
| 515 |
items={orderByOptions} |
| 516 |
/> |
| 517 |
{"rand" !== orderBy && ( |
| 518 |
<SPToggleGroupControl |
| 519 |
label={__("Order Direction", "post-carousel")} |
| 520 |
attributes={orderDirection} |
| 521 |
attributesKey={"orderDirection"} |
| 522 |
setAttributes={setAttributes} |
| 523 |
items={[ |
| 524 |
{ label: "Ascending", value: "ASC", type: "order" }, |
| 525 |
{ |
| 526 |
label: "Descending", |
| 527 |
value: "DESC", |
| 528 |
type: "order", |
| 529 |
}, |
| 530 |
]} |
| 531 |
/> |
| 532 |
)} |
| 533 |
</ChildPanelBody> |
| 534 |
{/* common filtering */} |
| 535 |
<ChildPanelBody title={__("Common Filtering", "post-carousel")}> |
| 536 |
<MultiSelectDndKit |
| 537 |
label={__("Include Only Post", "post-carousel")} |
| 538 |
items={includeExcludePostOptions} |
| 539 |
uniqueId={uniqueId} |
| 540 |
values={includeOnlyPost} |
| 541 |
searchable={true} |
| 542 |
onInputChange={(e) => filterIncludesPost(e)} |
| 543 |
onChange={(e) => setAttributes({ includeOnlyPost: e })} |
| 544 |
/> |
| 545 |
{includeOnlyPost?.length === 0 && ( |
| 546 |
<MultiSelectDndKit |
| 547 |
label={__("Exclude Post", "post-carousel")} |
| 548 |
// attributes={ excludePost } |
| 549 |
uniqueId={uniqueId} |
| 550 |
values={excludePost} |
| 551 |
searchable={true} |
| 552 |
onChange={(e) => setAttributes({ excludePost: e })} |
| 553 |
onInputChange={(e) => filterIncludesPost(e)} |
| 554 |
items={includeExcludePostOptions} |
| 555 |
/> |
| 556 |
)} |
| 557 |
{/* <MultipleSelect |
| 558 |
label={__("Exclude Term", "post-carousel")} |
| 559 |
attributes={excludeTerm} |
| 560 |
value={excludeTerm} |
| 561 |
objectData={true} |
| 562 |
attributesKey={"excludeTerm"} |
| 563 |
onChange={(val) => setAttributes({ excludeTerm: val })} |
| 564 |
onInputChange={() => {}} |
| 565 |
setAttributes={setAttributes} |
| 566 |
items={allTerms} |
| 567 |
/> */} |
| 568 |
{/* <MultipleSelect |
| 569 |
label={__("Exclude Author", "post-carousel")} |
| 570 |
attributes={excludeAuthor} |
| 571 |
attributesKey={"excludeAuthor"} |
| 572 |
onInputChange={() => {}} |
| 573 |
setAttributes={setAttributes} |
| 574 |
items={authorList} |
| 575 |
/> */} |
| 576 |
<Toggle |
| 577 |
label={__("Exclude Sticky Posts", "post-carousel")} |
| 578 |
attributes={excludeStickyPosts} |
| 579 |
attributesKey={"excludeStickyPosts"} |
| 580 |
setAttributes={setAttributes} |
| 581 |
/> |
| 582 |
{/* <Toggle |
| 583 |
label={__("Exclude Current Posts", "post-carousel")} |
| 584 |
attributes={excludeCurrentPosts} |
| 585 |
attributesKey={"excludeCurrentPosts"} |
| 586 |
setAttributes={setAttributes} |
| 587 |
/> */} |
| 588 |
{/* <Toggle |
| 589 |
label={__("Exclude Password Protect Posts", "post-carousel")} |
| 590 |
attributes={excludeProtectedPosts} |
| 591 |
attributesKey={"excludeProtectedPosts"} |
| 592 |
setAttributes={setAttributes} |
| 593 |
/> */} |
| 594 |
{/* <Toggle |
| 595 |
label={__("Exclude Children Posts", "post-carousel")} |
| 596 |
attributes={excludeChildrenPosts} |
| 597 |
attributesKey={"excludeChildrenPosts"} |
| 598 |
setAttributes={setAttributes} |
| 599 |
/> */} |
| 600 |
{/* <Toggle |
| 601 |
label={__("Exclude Posts without Image", "post-carousel")} |
| 602 |
attributes={excludePostWithoutImagePosts} |
| 603 |
attributesKey={"excludePostWithoutImagePosts"} |
| 604 |
setAttributes={setAttributes} |
| 605 |
/> */} |
| 606 |
</ChildPanelBody> |
| 607 |
<Divider position={"blue"} /> |
| 608 |
<span className="m-16"></span> |
| 609 |
{/* <InputControl |
| 610 |
label={ __( 'Posts Per Page', 'post-carousel' ) } |
| 611 |
className="sp-smart-limit-field" |
| 612 |
ajax={ true } |
| 613 |
attributes={ postLimit } |
| 614 |
min={ 1 } |
| 615 |
attributesKey={ 'postLimit' } |
| 616 |
setAttributes={ setAttributes } |
| 617 |
/> */} |
| 618 |
<SPRangeControl |
| 619 |
label={__("Offset", "post-carousel")} |
| 620 |
ajax={true} |
| 621 |
attributes={offset} |
| 622 |
attributesKey={"offset"} |
| 623 |
setAttributes={setAttributes} |
| 624 |
max={100} |
| 625 |
min={0} |
| 626 |
defaultValue={0} |
| 627 |
helpText={__("Use this option to skip over posts (e.g. 2 to skip over 2 posts)", "post-carousel")} |
| 628 |
/> |
| 629 |
<InputControl |
| 630 |
label={__("No Result Found Label", "post-carousel")} |
| 631 |
attributes={noResultFoundResult} |
| 632 |
flex={false} |
| 633 |
inputType="text" |
| 634 |
attributesKey={"noResultFoundResult"} |
| 635 |
setAttributes={setAttributes} |
| 636 |
placeholder={__("No post found", "post-carousel")} |
| 637 |
/> |
| 638 |
<ProInfo> |
| 639 |
<h3>Premium Only</h3> |
| 640 |
<h4>Unlock advanced query options, including:</h4> |
| 641 |
<ul> |
| 642 |
<li> |
| 643 |
— Popular Posts by views (3 days, 7 days, 14 days, 30 days, 3 months, 1 year, all time) |
| 644 |
</li> |
| 645 |
<li> |
| 646 |
— Filter by keyword & custom fields |
| 647 |
</li> |
| 648 |
<li> |
| 649 |
— Order by Most Liked and Most Viewed |
| 650 |
</li> |
| 651 |
<li> |
| 652 |
— Exclude by term, author, or current post |
| 653 |
</li> |
| 654 |
<li> |
| 655 |
— Exclude password-protected, child, or posts without thumb, etc... |
| 656 |
</li> |
| 657 |
</ul> |
| 658 |
<a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer" className="sp-smart-upgrade-btn">Upgrade to Pro</a> |
| 659 |
</ProInfo> |
| 660 |
</> |
| 661 |
); |
| 662 |
}; |
| 663 |
export const ImageGeneralTab = ({ attributes, setAttributes }) => { |
| 664 |
const { |
| 665 |
imageFeaturedImg, |
| 666 |
imageSize, |
| 667 |
imageWidth, |
| 668 |
imageHeight, |
| 669 |
imagePosition, |
| 670 |
imageOverlayColor, |
| 671 |
imageScale, |
| 672 |
imageFallbackReplace, |
| 673 |
imageSrcset, |
| 674 |
imageLazyLoad, |
| 675 |
imageReplaceWith, |
| 676 |
imageOverlayType, |
| 677 |
imageOverlayCustomColor, |
| 678 |
postSliderLayout, |
| 679 |
blockName, |
| 680 |
imageReplaceWithVideo, |
| 681 |
imageReplaceWithImage, |
| 682 |
toggleCustomFallbackBg, |
| 683 |
contentOrientation, |
| 684 |
thumbnailSliderLayout, |
| 685 |
blockLayoutName, |
| 686 |
largeImageSize, |
| 687 |
largeImageWidth, |
| 688 |
largeImageHeight, |
| 689 |
showImageGallery, |
| 690 |
imageGallerySource, |
| 691 |
showImageGalleryNavArrow, |
| 692 |
showImageGalleryNavArrowHover, |
| 693 |
imageGalleryNavArrowStyle, |
| 694 |
imageGalleryNavArrowSize, |
| 695 |
} = attributes; |
| 696 |
const { imageSizes } = useMetaData(attributes); |
| 697 |
const [contentAreaBgStyleType, setContentAreaBgStyleType] = useState("color"); |
| 698 |
|
| 699 |
const defaultValue = useDefaultValue(blockName); |
| 700 |
|
| 701 |
const imageSizesOption = imageSizes |
| 702 |
? imageSizes?.map((size) => { |
| 703 |
return { label: size, value: size }; |
| 704 |
}) |
| 705 |
: []; |
| 706 |
imageSizesOption.unshift({ label: "Original Size", value: "" }); |
| 707 |
|
| 708 |
if ( |
| 709 |
imagePosition !== "background" && |
| 710 |
!["post-thumbnail-slider", "thumbnail-slider-two"].includes(blockName) && |
| 711 |
![ |
| 712 |
"post-slider-layout-one", |
| 713 |
"post-slider-layout-two", |
| 714 |
// 'post-slider-layout-three', |
| 715 |
].includes(blockLayoutName) |
| 716 |
) { |
| 717 |
imageSizesOption.push({ |
| 718 |
label: __("Custom Size (Pro)", "post-carousel"), |
| 719 |
value: "custom", |
| 720 |
disabled: "disabled" |
| 721 |
}); |
| 722 |
} |
| 723 |
|
| 724 |
const imagePositionItems = []; |
| 725 |
if ( |
| 726 |
![ |
| 727 |
"post-slider", |
| 728 |
"post-slider-two", |
| 729 |
"post-thumbnail-slider", |
| 730 |
"thumbnail-slider-two", |
| 731 |
"post-grid-six", |
| 732 |
"post-list-two", |
| 733 |
"post-list-three", |
| 734 |
].includes(blockName) |
| 735 |
) { |
| 736 |
imagePositionItems.push( |
| 737 |
{ label: "Top", value: "top" }, |
| 738 |
{ label: "Left", value: "left" }, |
| 739 |
{ label: "Right", value: "right" } |
| 740 |
); |
| 741 |
} |
| 742 |
if (["post-slider-two-layout-three"].includes(blockLayoutName)) { |
| 743 |
imagePositionItems.push({ label: "Left", value: "left" }, { label: "Right", value: "right" }); |
| 744 |
} |
| 745 |
if ( |
| 746 |
![ |
| 747 |
"post-grid-one", |
| 748 |
"post-timeline-one", |
| 749 |
"post-slider", |
| 750 |
"post-slider-two", |
| 751 |
"post-thumbnail-slider", |
| 752 |
"timeline-one", |
| 753 |
"post-grid-six", |
| 754 |
"post-list-two", |
| 755 |
"post-list-three", |
| 756 |
].includes(blockName) |
| 757 |
) { |
| 758 |
imagePositionItems.push({ label: "Background", value: "background" }); |
| 759 |
} |
| 760 |
|
| 761 |
return ( |
| 762 |
<> |
| 763 |
{/* { ! [ |
| 764 |
'post-grid-three', |
| 765 |
'post-grid-four', |
| 766 |
'post-grid-five', |
| 767 |
'post-timeline-two', |
| 768 |
'post-slider', |
| 769 |
'post-slider-two', |
| 770 |
'post-thumbnail-slider', |
| 771 |
].includes(blockName) && ( |
| 772 |
<Toggle |
| 773 |
label={__('Show Featured Image', 'post-carousel')} |
| 774 |
attributes={imageFeaturedImg} |
| 775 |
attributesKey={'imageFeaturedImg'} |
| 776 |
setAttributes={setAttributes} |
| 777 |
/> |
| 778 |
) } */} |
| 779 |
{/* TODO: Need get image size for below select fields */} |
| 780 |
{imageFeaturedImg && ( |
| 781 |
<> |
| 782 |
{!inArray( |
| 783 |
[ |
| 784 |
"grid-six-layout-one", |
| 785 |
"sp-smart-post-list-two-layout-five", |
| 786 |
"sp-smart-post-list-two-layout-six", |
| 787 |
"sp-smart-post-list-two-layout-seven", |
| 788 |
"sp-smart-post-list-two-layout-eight", |
| 789 |
], |
| 790 |
blockLayoutName |
| 791 |
) && ( |
| 792 |
<> |
| 793 |
{!["post-timeline-one", "post-list-one", "post-list-two", "post-list-three"].includes( |
| 794 |
blockName |
| 795 |
) && ( |
| 796 |
<> |
| 797 |
<SelectField |
| 798 |
label={__("Size", "post-carousel")} |
| 799 |
attributes={imageSize} |
| 800 |
attributesKey={"imageSize"} |
| 801 |
setAttributes={setAttributes} |
| 802 |
items={[...imageSizesOption]} |
| 803 |
/> |
| 804 |
</> |
| 805 |
)} |
| 806 |
{"custom" === imageSize && imageSizesOption.find((v) => v.value === "custom") && ( |
| 807 |
<> |
| 808 |
<SPRangeControl |
| 809 |
label={__("Width", "post-carousel")} |
| 810 |
attributes={imageWidth} |
| 811 |
attributesKey={"imageWidth"} |
| 812 |
setAttributes={setAttributes} |
| 813 |
units={["px", "%", "Em"]} |
| 814 |
defaultValue={{ |
| 815 |
unit: "%", |
| 816 |
value: defaultValue.imageWidth, |
| 817 |
}} |
| 818 |
max={1200} |
| 819 |
/> |
| 820 |
{!inArray(["post-slider-layout-five"], blockLayoutName) && ( |
| 821 |
<SPRangeControl |
| 822 |
label={__("Height", "post-carousel")} |
| 823 |
attributes={imageHeight} |
| 824 |
attributesKey={"imageHeight"} |
| 825 |
setAttributes={setAttributes} |
| 826 |
units={["px", "%", "Em"]} |
| 827 |
defaultValue={{ |
| 828 |
unit: "px", |
| 829 |
value: "", |
| 830 |
}} |
| 831 |
max={500} |
| 832 |
/> |
| 833 |
)} |
| 834 |
</> |
| 835 |
)} |
| 836 |
</> |
| 837 |
)} |
| 838 |
{["post-grid-one", "post-grid-six"].includes(blockName) && |
| 839 |
!["grid-one-layout-one", "grid-one-layout-five", "grid-six-layout-four"].includes( |
| 840 |
blockLayoutName |
| 841 |
) && ( |
| 842 |
<> |
| 843 |
<SelectField |
| 844 |
label={__("Size (Large Items)", "post-carousel")} |
| 845 |
attributes={largeImageSize} |
| 846 |
attributesKey={"largeImageSize"} |
| 847 |
setAttributes={setAttributes} |
| 848 |
items={[...imageSizesOption]} |
| 849 |
/> |
| 850 |
{"custom" === largeImageSize && imageSizesOption.find((v) => v.value === "custom") && ( |
| 851 |
<> |
| 852 |
<SPRangeControl |
| 853 |
label={__("Width (Large Items)", "post-carousel")} |
| 854 |
attributes={largeImageWidth} |
| 855 |
attributesKey={"largeImageWidth"} |
| 856 |
setAttributes={setAttributes} |
| 857 |
units={["px", "%", "Em"]} |
| 858 |
defaultValue={{ |
| 859 |
unit: "%", |
| 860 |
value: "", |
| 861 |
}} |
| 862 |
max={1200} |
| 863 |
/> |
| 864 |
{!inArray( |
| 865 |
["post-slider-layout-five", "grid-six-layout-one", "grid-six-layout-two"], |
| 866 |
blockLayoutName |
| 867 |
) && ( |
| 868 |
<SPRangeControl |
| 869 |
label={__("Height (Large Items)", "post-carousel")} |
| 870 |
attributes={largeImageHeight} |
| 871 |
attributesKey={"largeImageHeight"} |
| 872 |
setAttributes={setAttributes} |
| 873 |
units={["px", "%", "Em"]} |
| 874 |
defaultValue={{ |
| 875 |
unit: "px", |
| 876 |
value: "", |
| 877 |
}} |
| 878 |
max={1000} |
| 879 |
/> |
| 880 |
)} |
| 881 |
</> |
| 882 |
)} |
| 883 |
</> |
| 884 |
)} |
| 885 |
{/* { ! [ |
| 886 |
// 'post-grid-two', |
| 887 |
'post-slider', |
| 888 |
'post-slider-two', |
| 889 |
'post-grid-three', |
| 890 |
'post-grid-four', |
| 891 |
'post-grid-five', |
| 892 |
'post-timeline-two', |
| 893 |
'post-list-one', |
| 894 |
'thumbnail-slider-two', |
| 895 |
].includes( blockName ) && |
| 896 |
imagePositionItems?.length > 0 && ( |
| 897 |
<> |
| 898 |
{ ! [ |
| 899 |
'post-slider-layout-four', |
| 900 |
'post-slider-layout-five', |
| 901 |
'thumbnail-slider-layout-six', |
| 902 |
].includes( blockLayoutName ) && |
| 903 |
! [ |
| 904 |
'post-grid-six', |
| 905 |
'post-slider-two', |
| 906 |
'post-grid-two', |
| 907 |
].includes( blockName ) && ( |
| 908 |
<SelectField |
| 909 |
label={ __( |
| 910 |
'Position', |
| 911 |
'post-carousel' |
| 912 |
) } |
| 913 |
attributes={ imagePosition } |
| 914 |
attributesKey={ 'imagePosition' } |
| 915 |
setAttributes={ setAttributes } |
| 916 |
items={ [ ...imagePositionItems ] } |
| 917 |
flexStyle={ true } |
| 918 |
/> |
| 919 |
) } |
| 920 |
{ blockLayoutName && |
| 921 |
[ |
| 922 |
'post-slider-layout-four', |
| 923 |
'post-slider-layout-five', |
| 924 |
'post-slider-two-layout-three', |
| 925 |
'thumbnail-slider-layout-six', |
| 926 |
'grid-six-layout-one', |
| 927 |
'grid-six-layout-two', |
| 928 |
].includes( blockLayoutName ) && ( |
| 929 |
<SPToggleGroupControl |
| 930 |
label={ __( |
| 931 |
'Position', |
| 932 |
'post-carousel' |
| 933 |
) } |
| 934 |
attributes={ imagePosition } |
| 935 |
attributesKey={ 'imagePosition' } |
| 936 |
setAttributes={ setAttributes } |
| 937 |
items={ [ ...imagePositionItems ] } |
| 938 |
/> |
| 939 |
) } |
| 940 |
{ imagePosition === 'background' && |
| 941 |
! [ |
| 942 |
'post-slider', |
| 943 |
'post-slider-two', |
| 944 |
].includes( blockName ) && ( |
| 945 |
<SPToggleGroupControl |
| 946 |
label={ __( |
| 947 |
'Overlay Type', |
| 948 |
'post-carousel' |
| 949 |
) } |
| 950 |
attributes={ imageOverlayType } |
| 951 |
attributesKey={ 'imageOverlayType' } |
| 952 |
setAttributes={ setAttributes } |
| 953 |
items={ [ |
| 954 |
{ |
| 955 |
label: 'Full', |
| 956 |
value: 'full', |
| 957 |
}, |
| 958 |
{ label: 'Box', value: 'box' }, |
| 959 |
] } |
| 960 |
/> |
| 961 |
) } |
| 962 |
</> |
| 963 |
) } */} |
| 964 |
{!inArray(["grid-six-layout-two", "grid-six-layout-three"], contentOrientation) && ( |
| 965 |
<SelectField |
| 966 |
label={__("Overlay Color", "post-carousel")} |
| 967 |
attributes={imageOverlayColor} |
| 968 |
attributesKey={"imageOverlayColor"} |
| 969 |
setAttributes={setAttributes} |
| 970 |
items={[ |
| 971 |
{ label: "Default", value: "default" }, |
| 972 |
{ label: "No Overlay", value: "no-overlay" }, |
| 973 |
{ label: "Warm Sunset", value: "warm-sunset" }, |
| 974 |
{ |
| 975 |
label: "Ocean Breeze", |
| 976 |
value: "ocean-breeze", |
| 977 |
}, |
| 978 |
{ label: "Royal Gold", value: "royal-gold" }, |
| 979 |
{ label: "Cool Blues", value: "cool-blues" }, |
| 980 |
{ label: "Soft Pastel", value: "soft-pastel" }, |
| 981 |
{ |
| 982 |
label: "Elegant Purple", |
| 983 |
value: "elegant-purple", |
| 984 |
}, |
| 985 |
{ |
| 986 |
label: "Energetic Orange", |
| 987 |
value: "energetic-orange", |
| 988 |
}, |
| 989 |
{ |
| 990 |
label: "Multi Color - Solid (Pro)", |
| 991 |
value: "multi-solid", |
| 992 |
disabled: "disabled" |
| 993 |
}, |
| 994 |
{ |
| 995 |
label: "Multi Color - Gradient (Pro)", |
| 996 |
value: "multi-gradient", |
| 997 |
disabled: "disabled" |
| 998 |
}, |
| 999 |
{ |
| 1000 |
label: "Custom (Pro)", |
| 1001 |
value: "custom", |
| 1002 |
disabled: "disabled" |
| 1003 |
}, |
| 1004 |
]} |
| 1005 |
/> |
| 1006 |
)} |
| 1007 |
{"custom" === imageOverlayColor && ( |
| 1008 |
<> |
| 1009 |
<SPToggleGroupControl |
| 1010 |
attributes={contentAreaBgStyleType} |
| 1011 |
items={[ |
| 1012 |
{ label: "Default", value: "color" }, |
| 1013 |
{ label: "Hover", value: "hover" }, |
| 1014 |
]} |
| 1015 |
onClick={(val) => setContentAreaBgStyleType(val)} |
| 1016 |
/> |
| 1017 |
<Background |
| 1018 |
label={__("Custom Color", "post-carousel")} |
| 1019 |
colorLabel="Solid Color" |
| 1020 |
defaultColor="#1E1E1E99" |
| 1021 |
attributes={imageOverlayCustomColor} |
| 1022 |
attributesKey={"imageOverlayCustomColor"} |
| 1023 |
setAttributes={setAttributes} |
| 1024 |
colorType={contentAreaBgStyleType} |
| 1025 |
items={[ |
| 1026 |
{ |
| 1027 |
label: <TransparentIcon />, |
| 1028 |
value: "transparent", |
| 1029 |
tooltip: "Transparent", |
| 1030 |
}, |
| 1031 |
{ |
| 1032 |
label: <BgIcon />, |
| 1033 |
value: "bgColor", |
| 1034 |
tooltip: "Solid", |
| 1035 |
}, |
| 1036 |
{ |
| 1037 |
label: <GradientIcon />, |
| 1038 |
value: "gradient", |
| 1039 |
tooltip: "Gradient", |
| 1040 |
}, |
| 1041 |
]} |
| 1042 |
/> |
| 1043 |
</> |
| 1044 |
)} |
| 1045 |
{!["post-grid-three"].includes(blockName) && ( |
| 1046 |
<SPToggleGroupControl |
| 1047 |
label={__("Image Scale", "post-carousel")} |
| 1048 |
attributes={imageScale} |
| 1049 |
attributesKey={"imageScale"} |
| 1050 |
setAttributes={setAttributes} |
| 1051 |
items={[ |
| 1052 |
{ label: "None", value: "none" }, |
| 1053 |
{ label: "Cover", value: "cover" }, |
| 1054 |
{ label: "Contain", value: "contain" }, |
| 1055 |
{ label: "Fill", value: "fill" }, |
| 1056 |
]} |
| 1057 |
/> |
| 1058 |
)} |
| 1059 |
<SPToggleGroupControl |
| 1060 |
label={__("Fallback Image Replace With", "post-carousel")} |
| 1061 |
attributes={imageFallbackReplace} |
| 1062 |
attributesKey={"imageFallbackReplace"} |
| 1063 |
setAttributes={setAttributes} |
| 1064 |
items={[ |
| 1065 |
{ label: "Post Source", value: "source" }, |
| 1066 |
{ label: "Custom", value: "custom" }, |
| 1067 |
]} |
| 1068 |
/> |
| 1069 |
{/* {imageFallbackReplace === "source" && ( |
| 1070 |
<MultipleSelect |
| 1071 |
label={__("Replace With", "post-carousel")} |
| 1072 |
attributes={imageReplaceWith} |
| 1073 |
attributesKey={"imageReplaceWith"} |
| 1074 |
setAttributes={setAttributes} |
| 1075 |
helpText={__("*If no featured image is found", "post-carousel")} |
| 1076 |
items={[ |
| 1077 |
{ label: "Audio", value: "audio" }, |
| 1078 |
{ label: "Video", value: "video" }, |
| 1079 |
{ label: "Image", value: "img" }, |
| 1080 |
]} |
| 1081 |
/> |
| 1082 |
)} */} |
| 1083 |
{imageFallbackReplace === "custom" && ( |
| 1084 |
<SPToggleGroupControl |
| 1085 |
items={[ |
| 1086 |
{ label: "Image", value: "img" }, |
| 1087 |
{ label: "Video", value: "video" }, |
| 1088 |
]} |
| 1089 |
attributes={toggleCustomFallbackBg} |
| 1090 |
attributesKey={"toggleCustomFallbackBg"} |
| 1091 |
setAttributes={setAttributes} |
| 1092 |
/> |
| 1093 |
)} |
| 1094 |
{imageFallbackReplace === "custom" && toggleCustomFallbackBg === "img" && ( |
| 1095 |
<MediaPicker |
| 1096 |
label={__("Image", "post-carousel")} |
| 1097 |
imageKey="imageReplaceWithImage" |
| 1098 |
enableImageSize={false} |
| 1099 |
setAttributes={setAttributes} |
| 1100 |
backgroundImage={imageReplaceWithImage} |
| 1101 |
/> |
| 1102 |
)} |
| 1103 |
{imageFallbackReplace === "custom" && toggleCustomFallbackBg === "video" && ( |
| 1104 |
<MediaPicker |
| 1105 |
label={__("Video", "post-carousel")} |
| 1106 |
imageKey="imageReplaceWithVideo" |
| 1107 |
mediaType="video" |
| 1108 |
slug="video" |
| 1109 |
enableImageSize={false} |
| 1110 |
setAttributes={setAttributes} |
| 1111 |
backgroundImage={imageReplaceWithVideo} |
| 1112 |
/> |
| 1113 |
)} |
| 1114 |
|
| 1115 |
<Toggle |
| 1116 |
label={__("lazy Loading", "post-carousel")} |
| 1117 |
attributes={imageLazyLoad} |
| 1118 |
attributesKey={"imageLazyLoad"} |
| 1119 |
setAttributes={setAttributes} |
| 1120 |
/> |
| 1121 |
|
| 1122 |
<Toggle |
| 1123 |
label={__("Show Image Gallery", "post-carousel")} |
| 1124 |
attributes={showImageGallery} |
| 1125 |
attributesKey={"showImageGallery"} |
| 1126 |
setAttributes={setAttributes} |
| 1127 |
pro={true} |
| 1128 |
/> |
| 1129 |
|
| 1130 |
<ProInfo> |
| 1131 |
<h3>Premium Only</h3> |
| 1132 |
<h4>Unlock advanced Image and video Options, including:</h4> |
| 1133 |
<ul> |
| 1134 |
<li> |
| 1135 |
— Image Custom Sizing |
| 1136 |
</li> |
| 1137 |
<li> |
| 1138 |
— Add and display featured video |
| 1139 |
</li> |
| 1140 |
<li> |
| 1141 |
— Replace Featured Image |
| 1142 |
</li> |
| 1143 |
<li> |
| 1144 |
— Display posts gallery images |
| 1145 |
</li> |
| 1146 |
<li> |
| 1147 |
— Boosts image performance by enabling Srcset |
| 1148 |
</li> |
| 1149 |
</ul> |
| 1150 |
<a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer" className="sp-smart-upgrade-btn">Upgrade to Pro</a> |
| 1151 |
</ProInfo> |
| 1152 |
</> |
| 1153 |
)} |
| 1154 |
</> |
| 1155 |
); |
| 1156 |
}; |
| 1157 |
export const ContentAreaGeneralTab = ({ attributes, setAttributes }) => { |
| 1158 |
const { contentPartArray, catTabCategoryPosition } = attributes; |
| 1159 |
|
| 1160 |
return (<> |
| 1161 |
<DragAndDropDnd |
| 1162 |
// key={ rendKey } |
| 1163 |
items={contentPartArray} |
| 1164 |
onChange={(e) => setAttributes({ contentPartArray: e })} |
| 1165 |
catTabCategoryPosition={catTabCategoryPosition} |
| 1166 |
setAttributes={setAttributes} |
| 1167 |
/> |
| 1168 |
<ProInfo> |
| 1169 |
<span>Rearrange content easily — Unlock Drag & Drop.</span> <a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer">Upgrade to Pro!</a> |
| 1170 |
</ProInfo> |
| 1171 |
</> |
| 1172 |
); |
| 1173 |
}; |
| 1174 |
export const TitleGeneralTab = ({ attributes, setAttributes }) => { |
| 1175 |
const { |
| 1176 |
titleShow, |
| 1177 |
titleHTMLTag, |
| 1178 |
titleLength, |
| 1179 |
postBadgesShow, |
| 1180 |
postBadgesPosition, |
| 1181 |
badgesGap, |
| 1182 |
contentOnHover, |
| 1183 |
blockName, |
| 1184 |
titleOnHover, |
| 1185 |
titleType, |
| 1186 |
} = attributes; |
| 1187 |
|
| 1188 |
return ( |
| 1189 |
<> |
| 1190 |
{titleShow && ( |
| 1191 |
<> |
| 1192 |
<SPToggleGroupControl |
| 1193 |
label={__("HTML Tag", "post-carousel")} |
| 1194 |
attributes={titleHTMLTag} |
| 1195 |
attributesKey={"titleHTMLTag"} |
| 1196 |
setAttributes={setAttributes} |
| 1197 |
items={[ |
| 1198 |
{ label: "H1", value: "h1" }, |
| 1199 |
{ label: "H2", value: "h2" }, |
| 1200 |
{ label: "H3", value: "h3" }, |
| 1201 |
{ label: "H4", value: "h4" }, |
| 1202 |
{ label: "H5", value: "h5" }, |
| 1203 |
{ label: "H6", value: "h6" }, |
| 1204 |
{ label: "P", value: "p" }, |
| 1205 |
]} |
| 1206 |
/> |
| 1207 |
<SPToggleGroupControl |
| 1208 |
label={__("Title Display Type", "post-carousel")} |
| 1209 |
attributes={titleType} |
| 1210 |
attributesKey={"titleType"} |
| 1211 |
setAttributes={setAttributes} |
| 1212 |
items={[ |
| 1213 |
{ label: "Full", value: "full" }, |
| 1214 |
{ label: "Limit (Pro)", value: "limit", disabled: "disabled" } |
| 1215 |
]} |
| 1216 |
/> |
| 1217 |
{titleType === "limit" && ( |
| 1218 |
<SPRangeControl |
| 1219 |
label={__("Length", "post-carousel")} |
| 1220 |
className="sp-smart-post-ranger-length" |
| 1221 |
attributes={titleLength} |
| 1222 |
attributesKey={"titleLength"} |
| 1223 |
setAttributes={setAttributes} |
| 1224 |
units={["Chars", "Words"]} |
| 1225 |
defaultValue={{ unit: "Words", value: 7 }} |
| 1226 |
min={1} |
| 1227 |
max={60} |
| 1228 |
/> |
| 1229 |
)} |
| 1230 |
<Divider position="sp-w-100pct" /> |
| 1231 |
|
| 1232 |
{!contentOnHover && ["post-carousel-two", "post-grid-two"].includes(blockName) && ( |
| 1233 |
<Toggle |
| 1234 |
label={__("Display on Hover", "post-carousel")} |
| 1235 |
attributes={titleOnHover} |
| 1236 |
attributesKey={"titleOnHover"} |
| 1237 |
setAttributes={setAttributes} |
| 1238 |
pro={true} |
| 1239 |
/> |
| 1240 |
)} |
| 1241 |
<Toggle |
| 1242 |
label={__("Post Badges", "post-carousel")} |
| 1243 |
attributes={postBadgesShow} |
| 1244 |
attributesKey={"postBadgesShow"} |
| 1245 |
setAttributes={setAttributes} |
| 1246 |
pro={true} |
| 1247 |
/> |
| 1248 |
{/* {!postBadgesModules && postBadgesShow && ( |
| 1249 |
<p className="sp-smart-post-modules-notes"> |
| 1250 |
<strong>Note: </strong> |
| 1251 |
<a href={modulesLink} target="_blank" rel="noreferrer"> |
| 1252 |
Post Badge Module |
| 1253 |
</a>{" "} |
| 1254 |
is disabled. Enable it to use Post Badges. |
| 1255 |
</p> |
| 1256 |
)} */} |
| 1257 |
{postBadgesShow && ( |
| 1258 |
<> |
| 1259 |
<SelectField |
| 1260 |
label={__("Badge Display Position", "post-carousel")} |
| 1261 |
attributes={postBadgesPosition} |
| 1262 |
attributesKey={"postBadgesPosition"} |
| 1263 |
setAttributes={setAttributes} |
| 1264 |
items={[ |
| 1265 |
{ |
| 1266 |
label: "Before Title", |
| 1267 |
value: "before-title", |
| 1268 |
}, |
| 1269 |
{ |
| 1270 |
label: "After Title", |
| 1271 |
value: "after-title", |
| 1272 |
}, |
| 1273 |
]} |
| 1274 |
/> |
| 1275 |
<SPRangeControl |
| 1276 |
label={__("Gap Between Badges", "post-carousel")} |
| 1277 |
attributes={badgesGap} |
| 1278 |
attributesKey={"badgesGap"} |
| 1279 |
setAttributes={setAttributes} |
| 1280 |
units={["px", "Em", "%"]} |
| 1281 |
defaultValue={{ unit: "px", value: 5 }} |
| 1282 |
min={0} |
| 1283 |
max={24} |
| 1284 |
/> |
| 1285 |
</> |
| 1286 |
)} |
| 1287 |
<ProInfo> |
| 1288 |
<span>Highlight important posts instantly with eye-catching badges. — Unlock Post Badges. </span> <a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer">Upgrade to Pro!</a> |
| 1289 |
</ProInfo> |
| 1290 |
</> |
| 1291 |
)} |
| 1292 |
</> |
| 1293 |
); |
| 1294 |
}; |
| 1295 |
export const MetaDataGeneralTab = ({ attributes, setAttributes }) => { |
| 1296 |
const { |
| 1297 |
metaAuthorStyle, |
| 1298 |
metaDateFormat, |
| 1299 |
metaPerMin, |
| 1300 |
metaReadingTimePostfix, |
| 1301 |
metaUserIcon, |
| 1302 |
metaDateCustomDateFormat, |
| 1303 |
metaDataArray, |
| 1304 |
catTabCategoryPosition, |
| 1305 |
metaDataAllContentArray, |
| 1306 |
metaDisplayType, |
| 1307 |
contentOnHover, |
| 1308 |
blockName, |
| 1309 |
metaOnHover, |
| 1310 |
contentOrientation, |
| 1311 |
} = attributes; |
| 1312 |
|
| 1313 |
const metaDataContentArray = metaDataAllContentArray.filter((item) => item.value !== ""); |
| 1314 |
|
| 1315 |
|
| 1316 |
const showAuthor = metaDataContentArray.some((item) => item.value === "author" && item.show); |
| 1317 |
const showDate = metaDataContentArray.some((item) => item.value === "date" && item.show); |
| 1318 |
const showReadingTime = metaDataContentArray.some((item) => item.value === "reading-time" && item.show); |
| 1319 |
|
| 1320 |
return ( |
| 1321 |
<> |
| 1322 |
<DragAndDropDnd |
| 1323 |
key={metaDataContentArray} |
| 1324 |
label={__("Meta Data", "post-carousel")} |
| 1325 |
items={metaDataContentArray} |
| 1326 |
toggleBtn={true} |
| 1327 |
onChange={(e) => { |
| 1328 |
setAttributes({ metaDataAllContentArray: e }); |
| 1329 |
}} |
| 1330 |
/> |
| 1331 |
|
| 1332 |
{!contentOnHover && ["post-carousel-two", "post-grid-two"].includes(blockName) && ( |
| 1333 |
<Toggle |
| 1334 |
label={__("Display on Hover", "post-carousel")} |
| 1335 |
attributes={metaOnHover} |
| 1336 |
attributesKey={"metaOnHover"} |
| 1337 |
setAttributes={setAttributes} |
| 1338 |
pro={true} |
| 1339 |
/> |
| 1340 |
)} |
| 1341 |
|
| 1342 |
<SPToggleGroupControl |
| 1343 |
label={__("Meta Display Type", "post-carousel")} |
| 1344 |
attributes={metaDisplayType} |
| 1345 |
attributesKey={"metaDisplayType"} |
| 1346 |
setAttributes={setAttributes} |
| 1347 |
items={[ |
| 1348 |
{ label: "Inline", value: "inline" }, |
| 1349 |
{ label: "Split Left-Right", value: "split-left-right", disabled: "disabled" }, |
| 1350 |
]} |
| 1351 |
/> |
| 1352 |
{showAuthor && ( |
| 1353 |
<> |
| 1354 |
<SelectField |
| 1355 |
label={__("Author Display Style", "post-carousel")} |
| 1356 |
attributes={metaAuthorStyle} |
| 1357 |
attributesKey={"metaAuthorStyle"} |
| 1358 |
setAttributes={setAttributes} |
| 1359 |
items={[ |
| 1360 |
{ |
| 1361 |
label: "Select Author Style", |
| 1362 |
value: "", |
| 1363 |
disabled: "disabled", |
| 1364 |
}, |
| 1365 |
{ label: "Show Name", value: "show_name" }, |
| 1366 |
{ label: "Show Gravatar", value: "show_gravatar" }, |
| 1367 |
{ |
| 1368 |
label: "Author Name with Icon", |
| 1369 |
value: "name_with_icon", |
| 1370 |
}, |
| 1371 |
{ |
| 1372 |
label: "Show Name with Gravatar (Pro)", |
| 1373 |
value: "name_with_gravatar", |
| 1374 |
disabled: "disabled" |
| 1375 |
}, |
| 1376 |
]} |
| 1377 |
/> |
| 1378 |
{"name_with_icon" === metaAuthorStyle && ( |
| 1379 |
<div className={"sp-smart-post-metadata-user-icon sp-smart-post-component-mb"}> |
| 1380 |
<SelectDropdown |
| 1381 |
label={__("Author Icon Style", "post-carousel")} |
| 1382 |
attributes={metaUserIcon} |
| 1383 |
attributesKey={"metaUserIcon"} |
| 1384 |
setAttributes={setAttributes} |
| 1385 |
options={[ |
| 1386 |
{ |
| 1387 |
label: "Outline", |
| 1388 |
value: "outline", |
| 1389 |
icon: <Outline />, |
| 1390 |
}, |
| 1391 |
{ |
| 1392 |
label: "Basic Outline", |
| 1393 |
value: "basic-outline", |
| 1394 |
icon: <BasicOutline />, |
| 1395 |
}, |
| 1396 |
{ |
| 1397 |
label: "Solid", |
| 1398 |
value: "user-solid", |
| 1399 |
icon: <UserSolid />, |
| 1400 |
}, |
| 1401 |
{ |
| 1402 |
label: "Profile Rounded", |
| 1403 |
value: "rounded", |
| 1404 |
icon: <Rounded />, |
| 1405 |
}, |
| 1406 |
{ |
| 1407 |
label: "Profile Circle", |
| 1408 |
value: "circle", |
| 1409 |
icon: <Circle />, |
| 1410 |
}, |
| 1411 |
{ |
| 1412 |
label: "Female", |
| 1413 |
value: "female", |
| 1414 |
icon: <Female />, |
| 1415 |
}, |
| 1416 |
{ |
| 1417 |
label: "Author", |
| 1418 |
value: "author", |
| 1419 |
icon: <UserAuthor />, |
| 1420 |
}, |
| 1421 |
{ |
| 1422 |
label: "Minimal", |
| 1423 |
value: "minimal", |
| 1424 |
icon: <Minimal />, |
| 1425 |
}, |
| 1426 |
]} |
| 1427 |
/> |
| 1428 |
</div> |
| 1429 |
)} |
| 1430 |
</> |
| 1431 |
)} |
| 1432 |
{/* <Toggle |
| 1433 |
label={ __( 'Date', 'post-carousel' ) } |
| 1434 |
attributes={ metaDateShow ) } |
| 1435 |
attributesKey={ 'metaDateShow' } |
| 1436 |
setAttributes={ setAttributes } |
| 1437 |
/> */} |
| 1438 |
{showDate && "orientation_two" !== contentOrientation && ( |
| 1439 |
<> |
| 1440 |
<SelectField |
| 1441 |
label={__("Date Format", "post-carousel")} |
| 1442 |
attributes={metaDateFormat} |
| 1443 |
attributesKey={"metaDateFormat"} |
| 1444 |
setAttributes={setAttributes} |
| 1445 |
items={[ |
| 1446 |
{ |
| 1447 |
label: "Default", |
| 1448 |
value: "default" |
| 1449 |
}, |
| 1450 |
{ |
| 1451 |
label: "Oct 7, 2025", |
| 1452 |
value: "M j, Y", |
| 1453 |
}, |
| 1454 |
{ |
| 1455 |
label: "October 7, 2025", |
| 1456 |
value: "F j, Y", |
| 1457 |
}, |
| 1458 |
{ |
| 1459 |
label: "Time Ago (Human Time) (Pro)", |
| 1460 |
value: "time_ago", |
| 1461 |
disabled: "disabled", |
| 1462 |
}, |
| 1463 |
{ |
| 1464 |
label: "Custom (Pro)", |
| 1465 |
value: "custom", |
| 1466 |
disabled: "disabled", |
| 1467 |
}, |
| 1468 |
]} |
| 1469 |
/> |
| 1470 |
{metaDateFormat === "custom" && ( |
| 1471 |
<> |
| 1472 |
<InputControl |
| 1473 |
help={ |
| 1474 |
<> |
| 1475 |
<span>{__("To define format, check", "post-carousel")}</span> |
| 1476 |
<a |
| 1477 |
href="https://wordpress.org/support/article/formatting-date-and-time/" |
| 1478 |
target="_blank" |
| 1479 |
rel="noreferrer" |
| 1480 |
> |
| 1481 |
{" "} |
| 1482 |
this doc. |
| 1483 |
</a> |
| 1484 |
</> |
| 1485 |
} |
| 1486 |
attributes={metaDateCustomDateFormat} |
| 1487 |
attributesKey={"metaDateCustomDateFormat"} |
| 1488 |
setAttributes={setAttributes} |
| 1489 |
inputType={"string"} |
| 1490 |
flex={false} |
| 1491 |
placeholder={"F j, Y"} |
| 1492 |
/> |
| 1493 |
</> |
| 1494 |
)} |
| 1495 |
</> |
| 1496 |
)} |
| 1497 |
{showReadingTime && ( |
| 1498 |
<> |
| 1499 |
<SPRangeControl |
| 1500 |
label={__("Per Min", "post-carousel")} |
| 1501 |
className="sp-smart-post-ranger-length" |
| 1502 |
attributes={metaPerMin} |
| 1503 |
attributesKey={"metaPerMin"} |
| 1504 |
setAttributes={setAttributes} |
| 1505 |
units={["Words"]} |
| 1506 |
defaultValue={{ unit: "words", value: 100 }} |
| 1507 |
max={200} |
| 1508 |
/> |
| 1509 |
<InputControl |
| 1510 |
label={__("Reading Time Postfix", "post-carousel")} |
| 1511 |
attributes={metaReadingTimePostfix} |
| 1512 |
attributesKey={"metaReadingTimePostfix"} |
| 1513 |
setAttributes={setAttributes} |
| 1514 |
flex={false} |
| 1515 |
inputType="text" |
| 1516 |
/> |
| 1517 |
</> |
| 1518 |
)} |
| 1519 |
<ProInfo> |
| 1520 |
<h4>Take control of your meta styling:</h4> |
| 1521 |
<ul> |
| 1522 |
<li> |
| 1523 |
— Drag & Drop meta items |
| 1524 |
</li> |
| 1525 |
<li> |
| 1526 |
— flexible Left-Right splits |
| 1527 |
</li> |
| 1528 |
</ul> |
| 1529 |
<a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer" className="sp-smart-upgrade-btn">Upgrade to Pro</a> |
| 1530 |
</ProInfo> |
| 1531 |
</> |
| 1532 |
); |
| 1533 |
}; |
| 1534 |
export const CategoryGeneralTab = ({ attributes, setAttributes }) => { |
| 1535 |
const { |
| 1536 |
catTabCategoryEnable, |
| 1537 |
catTabCategoryPosition, |
| 1538 |
catTabCategoryType, |
| 1539 |
metaDataAllContentArray, |
| 1540 |
contentPartArray, |
| 1541 |
contentOnHover, |
| 1542 |
blockName, |
| 1543 |
taxonomyOnHover, |
| 1544 |
allTaxonomy, |
| 1545 |
} = attributes; |
| 1546 |
|
| 1547 |
useEffect(() => { |
| 1548 |
const hasCategory = metaDataAllContentArray.some((t) => t.value === "taxonomy"); |
| 1549 |
let besideMetaArray; |
| 1550 |
// let updatedContentArray; |
| 1551 |
const updatedContentArray = contentPartArray; |
| 1552 |
|
| 1553 |
if (catTabCategoryPosition === "beside-other-meta") { |
| 1554 |
besideMetaArray = hasCategory |
| 1555 |
? [...metaDataAllContentArray] |
| 1556 |
: [ |
| 1557 |
...metaDataAllContentArray, |
| 1558 |
{ |
| 1559 |
label: "Taxonomy", |
| 1560 |
value: "taxonomy", |
| 1561 |
id: 7, |
| 1562 |
show: true, |
| 1563 |
}, |
| 1564 |
]; |
| 1565 |
} else { |
| 1566 |
besideMetaArray = metaDataAllContentArray.filter((t) => t.value !== "taxonomy"); |
| 1567 |
} |
| 1568 |
if (catTabCategoryPosition === "above-title") { |
| 1569 |
rearrangeAboveTitle(updatedContentArray); |
| 1570 |
} |
| 1571 |
setAttributes({ |
| 1572 |
metaDataAllContentArray: besideMetaArray, |
| 1573 |
contentPartArray: updatedContentArray, |
| 1574 |
}); |
| 1575 |
}, [catTabCategoryPosition]); |
| 1576 |
|
| 1577 |
const { allTaxonomies } = useMetaData(attributes, "editSite"); |
| 1578 |
|
| 1579 |
useEffect(() => { |
| 1580 |
if (allTaxonomies?.length > 0) { |
| 1581 |
setAttributes({ allTaxonomy: allTaxonomies }); |
| 1582 |
} |
| 1583 |
}, [allTaxonomies]); |
| 1584 |
|
| 1585 |
return ( |
| 1586 |
<> |
| 1587 |
{!contentOnHover && ["post-carousel-two", "post-grid-two"].includes(blockName) && ( |
| 1588 |
<Toggle |
| 1589 |
label={__("Display on Hover", "post-carousel")} |
| 1590 |
attributes={taxonomyOnHover} |
| 1591 |
attributesKey={"taxonomyOnHover"} |
| 1592 |
setAttributes={setAttributes} |
| 1593 |
pro={true} |
| 1594 |
/> |
| 1595 |
)} |
| 1596 |
{catTabCategoryEnable && ( |
| 1597 |
<> |
| 1598 |
<SelectField |
| 1599 |
label={__("Position", "post-carousel")} |
| 1600 |
attributes={catTabCategoryPosition} |
| 1601 |
attributesKey={"catTabCategoryPosition"} |
| 1602 |
setAttributes={setAttributes} |
| 1603 |
items={[ |
| 1604 |
{ |
| 1605 |
label: "Default Position", |
| 1606 |
value: "", |
| 1607 |
}, |
| 1608 |
{ |
| 1609 |
label: "Above Title", |
| 1610 |
value: "above-title", |
| 1611 |
}, |
| 1612 |
{ |
| 1613 |
label: "Over Thumbnail - Bottom Right", |
| 1614 |
value: "bottom-right", |
| 1615 |
}, |
| 1616 |
{ |
| 1617 |
label: "Over Thumbnail - Center Center", |
| 1618 |
value: "center-center", |
| 1619 |
}, |
| 1620 |
{ |
| 1621 |
label: "Over Thumbnail - Center Top", |
| 1622 |
value: "center-top", |
| 1623 |
}, |
| 1624 |
{ |
| 1625 |
label: "Beside Other Meta (Pro)", |
| 1626 |
value: "beside-other-meta", |
| 1627 |
disabled: "disabled" |
| 1628 |
}, |
| 1629 |
{ |
| 1630 |
label: "Over Thumbnail - Top Left (Pro)", |
| 1631 |
value: "top-left", |
| 1632 |
disabled: "disabled" |
| 1633 |
}, |
| 1634 |
{ |
| 1635 |
label: "Over Thumbnail - Top Right (Pro)", |
| 1636 |
value: "top-right", |
| 1637 |
disabled: "disabled" |
| 1638 |
}, |
| 1639 |
{ |
| 1640 |
label: "Over Thumbnail - Bottom Left (Pro)", |
| 1641 |
value: "bottom-left", |
| 1642 |
disabled: "disabled" |
| 1643 |
}, |
| 1644 |
{ |
| 1645 |
label: "Over Thumbnail - Center Bottom (Pro)", |
| 1646 |
value: "center-bottom", |
| 1647 |
disabled: "disabled" |
| 1648 |
}, |
| 1649 |
]} |
| 1650 |
/> |
| 1651 |
<ProInfo> |
| 1652 |
<span>Enhance post discovery by displaying categories or tags — Unlock Taxonomy Type. </span> |
| 1653 |
<a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer" >Upgrade to Pro</a> |
| 1654 |
</ProInfo> |
| 1655 |
</> |
| 1656 |
)} |
| 1657 |
</> |
| 1658 |
); |
| 1659 |
}; |
| 1660 |
export const ExcerptGeneralTab = ({ attributes, setAttributes }) => { |
| 1661 |
const { |
| 1662 |
excerptShow, |
| 1663 |
seoMetaShow, |
| 1664 |
excerptType, |
| 1665 |
excerptLength, |
| 1666 |
ellipsisPointsEndingExcerpt, |
| 1667 |
contentOnHover, |
| 1668 |
blockName, |
| 1669 |
excerptOnHover, |
| 1670 |
} = attributes; |
| 1671 |
|
| 1672 |
const excerptMax = excerptLength?.unit === "words" ? 100 : 200; |
| 1673 |
|
| 1674 |
return ( |
| 1675 |
<> |
| 1676 |
{!contentOnHover && ["post-carousel-two", "post-grid-two"].includes(blockName) && excerptShow && ( |
| 1677 |
<Toggle |
| 1678 |
label={__("Display on Hover", "post-carousel")} |
| 1679 |
attributes={excerptOnHover} |
| 1680 |
attributesKey={"excerptOnHover"} |
| 1681 |
setAttributes={setAttributes} |
| 1682 |
pro={true} |
| 1683 |
/> |
| 1684 |
)} |
| 1685 |
{excerptShow && ( |
| 1686 |
<> |
| 1687 |
<SPToggleGroupControl |
| 1688 |
label={__("Excerpt Type", "post-carousel")} |
| 1689 |
attributes={excerptType} |
| 1690 |
attributesKey={"excerptType"} |
| 1691 |
setAttributes={setAttributes} |
| 1692 |
items={[ |
| 1693 |
{ label: "Full", value: "full" }, |
| 1694 |
{ label: "Limited", value: "limited" }, |
| 1695 |
]} |
| 1696 |
/> |
| 1697 |
{excerptType && excerptType === "limited" && ( |
| 1698 |
<> |
| 1699 |
<SPRangeControl |
| 1700 |
label={__("Length", "post-carousel")} |
| 1701 |
setAttributes={setAttributes} |
| 1702 |
attributes={excerptLength} |
| 1703 |
units={["words", "chars"]} |
| 1704 |
className={"sp-smart-post-ranger-length"} |
| 1705 |
attributesKey={"excerptLength"} |
| 1706 |
defaultValue={{ unit: "words", value: 14 }} |
| 1707 |
min={1} |
| 1708 |
max={excerptMax} |
| 1709 |
pro={true} |
| 1710 |
/> |
| 1711 |
<InputControl |
| 1712 |
label={__("Ellipsis Points Ending Excerpt", "post-carousel")} |
| 1713 |
attributes={ellipsisPointsEndingExcerpt} |
| 1714 |
attributesKey={"ellipsisPointsEndingExcerpt"} |
| 1715 |
setAttributes={setAttributes} |
| 1716 |
flex={false} |
| 1717 |
inputType="string" |
| 1718 |
placeholder={__("…", "post-carousel")} |
| 1719 |
/> |
| 1720 |
</> |
| 1721 |
)} |
| 1722 |
<Toggle |
| 1723 |
label={__("SEO Meta", "post-carousel")} |
| 1724 |
attributes={seoMetaShow} |
| 1725 |
setAttributes={setAttributes} |
| 1726 |
attributesKey={"seoMetaShow"} |
| 1727 |
pro={true} |
| 1728 |
helpText={__( |
| 1729 |
"Show Meta from SEO Framework, Yoast, RankMath, AIO, SEOPress and Squirrly. Make sure one of this SEO Plugin is active.", |
| 1730 |
"post-carousel" |
| 1731 |
)} |
| 1732 |
/> |
| 1733 |
<ProInfo> |
| 1734 |
<span>Show SEO meta from Yoast, RankMath, AIO, SEOPress & more. </span> |
| 1735 |
<a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer" >Upgrade to Pro</a> |
| 1736 |
</ProInfo> |
| 1737 |
</> |
| 1738 |
)} |
| 1739 |
</> |
| 1740 |
); |
| 1741 |
}; |
| 1742 |
export const ReadMoreGeneralTab = ({ attributes, setAttributes }) => { |
| 1743 |
const { showReadMoreButton, readMoreButtonLabel, readMoreButtonType, contentOnHover, blockName, readMoreOnHover } = |
| 1744 |
attributes; |
| 1745 |
return ( |
| 1746 |
<> |
| 1747 |
{!contentOnHover && ["post-carousel-two", "post-grid-two"].includes(blockName) && showReadMoreButton && ( |
| 1748 |
<Toggle |
| 1749 |
label={__("Display on Hover", "post-carousel")} |
| 1750 |
attributes={readMoreOnHover} |
| 1751 |
attributesKey={"readMoreOnHover"} |
| 1752 |
setAttributes={setAttributes} |
| 1753 |
pro={true} |
| 1754 |
/> |
| 1755 |
)} |
| 1756 |
{showReadMoreButton && ( |
| 1757 |
<> |
| 1758 |
<SPToggleGroupControl |
| 1759 |
label={__("Read More Type", "post-carousel")} |
| 1760 |
attributes={readMoreButtonType} |
| 1761 |
attributesKey={"readMoreButtonType"} |
| 1762 |
setAttributes={setAttributes} |
| 1763 |
items={[ |
| 1764 |
{ label: "Button", value: "button" }, |
| 1765 |
{ label: "Text Link", value: "link" }, |
| 1766 |
]} |
| 1767 |
/> |
| 1768 |
<InputControl |
| 1769 |
label={__("Button Label", "post-carousel")} |
| 1770 |
attributes={readMoreButtonLabel} |
| 1771 |
attributesKey={"readMoreButtonLabel"} |
| 1772 |
setAttributes={setAttributes} |
| 1773 |
flex={false} |
| 1774 |
inputType="text" |
| 1775 |
/> |
| 1776 |
</> |
| 1777 |
)} |
| 1778 |
</> |
| 1779 |
); |
| 1780 |
}; |
| 1781 |
export const SocialShareGeneralTab = ({ attributes, setAttributes }) => { |
| 1782 |
const { |
| 1783 |
socialShareEnableSocial, |
| 1784 |
socialSharingMedia, |
| 1785 |
uniqueId, |
| 1786 |
socialIconDisplayType, |
| 1787 |
socialShareDisplayOnHover, |
| 1788 |
socialShareIconPosition, |
| 1789 |
metaDisplayType, |
| 1790 |
contentOnHover, |
| 1791 |
blockName, |
| 1792 |
socialShareOnHover, |
| 1793 |
} = attributes; |
| 1794 |
|
| 1795 |
return ( |
| 1796 |
<> |
| 1797 |
{!contentOnHover && |
| 1798 |
["post-carousel-two", "post-grid-two"].includes(blockName) && |
| 1799 |
socialShareEnableSocial && ( |
| 1800 |
<Toggle |
| 1801 |
label={__("Display on Hover", "post-carousel")} |
| 1802 |
attributes={socialShareOnHover} |
| 1803 |
attributesKey={"socialShareOnHover"} |
| 1804 |
setAttributes={setAttributes} |
| 1805 |
pro={true} |
| 1806 |
/> |
| 1807 |
)} |
| 1808 |
{socialShareEnableSocial && ( |
| 1809 |
<> |
| 1810 |
<MultiSelectDndKit |
| 1811 |
label={__("Sharing Media", "post-carousel")} |
| 1812 |
items={[ |
| 1813 |
{ label: "Facebook", value: "facebook", id: 1 }, |
| 1814 |
{ label: "X", value: "x", id: 2 }, |
| 1815 |
{ label: "LinkedIn", value: "linkedin", id: 3 }, |
| 1816 |
{ label: "Pinterest", value: "pinterest", id: 4 }, |
| 1817 |
{ label: "Email", value: "mail", id: 5 }, |
| 1818 |
{ label: "Instagram", value: "instagram", id: 6 }, |
| 1819 |
{ label: "VK", value: "vkontakte", id: 7 }, |
| 1820 |
{ label: "digg", value: "digg", id: 8 }, |
| 1821 |
{ label: "Tumblr", value: "tumblr", id: 9 }, |
| 1822 |
{ label: "Reddit", value: "reddit", id: 10 }, |
| 1823 |
{ label: "WhatsApp", value: "whatsapp", id: 11 }, |
| 1824 |
{ label: "Pocket", value: "pocket", id: 12 }, |
| 1825 |
{ label: "Xing", value: "xing", id: 13 }, |
| 1826 |
{ label: "Copy Post URL (Pro)", value: "clone", id: 14, disabled: "disabled" }, |
| 1827 |
]} |
| 1828 |
uniqueId={uniqueId} |
| 1829 |
values={socialSharingMedia} |
| 1830 |
searchable={true} |
| 1831 |
onChange={(e) => setAttributes({ socialSharingMedia: e })} |
| 1832 |
/> |
| 1833 |
<SPToggleGroupControl |
| 1834 |
label={__("Icon Display Type", "post-carousel")} |
| 1835 |
attributes={socialIconDisplayType} |
| 1836 |
attributesKey={"socialIconDisplayType"} |
| 1837 |
setAttributes={setAttributes} |
| 1838 |
items={[ |
| 1839 |
{ label: "Inline", value: "inline-icon" }, |
| 1840 |
{ |
| 1841 |
label: "Popup Share", value: "popup-share", |
| 1842 |
disabled: "disabled" |
| 1843 |
}, |
| 1844 |
]} |
| 1845 |
/> |
| 1846 |
{"popup-share" === socialIconDisplayType && ( |
| 1847 |
<> |
| 1848 |
<Toggle |
| 1849 |
label={__("Display on Hover", "post-carousel")} |
| 1850 |
attributes={socialShareDisplayOnHover} |
| 1851 |
attributesKey={"socialShareDisplayOnHover"} |
| 1852 |
setAttributes={setAttributes} |
| 1853 |
pro={true} |
| 1854 |
/> |
| 1855 |
</> |
| 1856 |
)} |
| 1857 |
{"popup-share" === socialIconDisplayType && ( |
| 1858 |
<> |
| 1859 |
<SelectField |
| 1860 |
label={__("Share Icon Position", "post-carousel")} |
| 1861 |
attributes={socialShareIconPosition} |
| 1862 |
attributesKey={"socialShareIconPosition"} |
| 1863 |
setAttributes={setAttributes} |
| 1864 |
items={ |
| 1865 |
metaDisplayType === "inline" |
| 1866 |
? [ |
| 1867 |
{ |
| 1868 |
label: "Select a Position", |
| 1869 |
value: "", |
| 1870 |
}, |
| 1871 |
{ |
| 1872 |
label: "Beside Taxonomy", |
| 1873 |
value: "beside-taxonomy", |
| 1874 |
}, |
| 1875 |
{ |
| 1876 |
label: "Space Between Taxonomy", |
| 1877 |
value: "space-between-taxonomy", |
| 1878 |
}, |
| 1879 |
{ |
| 1880 |
label: "Beside Meta", |
| 1881 |
value: "beside-meta", |
| 1882 |
}, |
| 1883 |
{ |
| 1884 |
label: "Space Between Meta", |
| 1885 |
value: "space-between-meta", |
| 1886 |
}, |
| 1887 |
] |
| 1888 |
: [ |
| 1889 |
{ |
| 1890 |
label: "Select a Position", |
| 1891 |
value: "", |
| 1892 |
}, |
| 1893 |
{ |
| 1894 |
label: "Beside Taxonomy", |
| 1895 |
value: "beside-taxonomy", |
| 1896 |
}, |
| 1897 |
{ |
| 1898 |
label: "Space Between Taxonomy", |
| 1899 |
value: "space-between-taxonomy", |
| 1900 |
}, |
| 1901 |
{ |
| 1902 |
label: "Beside Meta", |
| 1903 |
value: "beside-meta", |
| 1904 |
}, |
| 1905 |
] |
| 1906 |
} |
| 1907 |
/> |
| 1908 |
</> |
| 1909 |
)} |
| 1910 |
<ProInfo> |
| 1911 |
<span>Display social share icons in a popup for a smarter, cleaner, and minimal showcase.</span> <a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer">Upgrade to Pro!</a> |
| 1912 |
</ProInfo> |
| 1913 |
</> |
| 1914 |
)} |
| 1915 |
</> |
| 1916 |
); |
| 1917 |
}; |
| 1918 |
|
| 1919 |
export const PopupDetailsGeneralTab = ({ attributes, setAttributes }) => { |
| 1920 |
const { |
| 1921 |
popupImageSize, |
| 1922 |
popupCloseBtnEnable, |
| 1923 |
popupCloseBtnSize, |
| 1924 |
popupMaxWidth, |
| 1925 |
popupMaxHeight, |
| 1926 |
popupImageHeight, |
| 1927 |
popupImageWidth, |
| 1928 |
} = attributes; |
| 1929 |
|
| 1930 |
const { imageSizes } = useMetaData(attributes); |
| 1931 |
|
| 1932 |
const imageSizesOption = imageSizes |
| 1933 |
? imageSizes?.map((size) => { |
| 1934 |
return { label: size, value: size }; |
| 1935 |
}) |
| 1936 |
: []; |
| 1937 |
|
| 1938 |
return ( |
| 1939 |
<> |
| 1940 |
<SelectField |
| 1941 |
label={__("Image Size", "post-carousel")} |
| 1942 |
attributes={popupImageSize} |
| 1943 |
attributesKey={"popupImageSize"} |
| 1944 |
setAttributes={setAttributes} |
| 1945 |
items={[ |
| 1946 |
...imageSizesOption, |
| 1947 |
{ |
| 1948 |
label: __("Custom Size", "post-carousel"), |
| 1949 |
value: "custom", |
| 1950 |
}, |
| 1951 |
]} |
| 1952 |
/> |
| 1953 |
{"custom" === popupImageSize && ( |
| 1954 |
<> |
| 1955 |
<SPRangeControl |
| 1956 |
label={__("Width", "post-carousel")} |
| 1957 |
attributes={popupImageWidth} |
| 1958 |
attributesKey={"popupImageWidth"} |
| 1959 |
setAttributes={setAttributes} |
| 1960 |
units={["px", "%", "Em"]} |
| 1961 |
defaultValue={{ unit: "%", value: 500 }} |
| 1962 |
max={1200} |
| 1963 |
/> |
| 1964 |
<SPRangeControl |
| 1965 |
label={__("Height", "post-carousel")} |
| 1966 |
attributes={popupImageHeight} |
| 1967 |
attributesKey={"popupImageHeight"} |
| 1968 |
setAttributes={setAttributes} |
| 1969 |
units={["px", "%", "Em"]} |
| 1970 |
defaultValue={{ unit: "px", value: 500 }} |
| 1971 |
max={700} |
| 1972 |
/> |
| 1973 |
</> |
| 1974 |
)} |
| 1975 |
<Toggle |
| 1976 |
label={__("Close Button", "post-carousel")} |
| 1977 |
attributes={popupCloseBtnEnable} |
| 1978 |
attributesKey={"popupCloseBtnEnable"} |
| 1979 |
setAttributes={setAttributes} |
| 1980 |
/> |
| 1981 |
{popupCloseBtnEnable && ( |
| 1982 |
<SPRangeControl |
| 1983 |
label={__("Size", "post-carousel")} |
| 1984 |
setAttributes={setAttributes} |
| 1985 |
attributes={popupCloseBtnSize} |
| 1986 |
units={["px", "%", "Em"]} |
| 1987 |
max={65} |
| 1988 |
attributesKey={"popupCloseBtnSize"} |
| 1989 |
defaultValue={{ value: 32, unit: "px" }} |
| 1990 |
/> |
| 1991 |
)} |
| 1992 |
<SPRangeControl |
| 1993 |
label={__("Max Width", "post-carousel")} |
| 1994 |
setAttributes={setAttributes} |
| 1995 |
attributes={popupMaxWidth} |
| 1996 |
units={["px", "%", "Em"]} |
| 1997 |
max={1400} |
| 1998 |
attributesKey={"popupMaxWidth"} |
| 1999 |
defaultValue={{ value: 1050, unit: "px" }} |
| 2000 |
/> |
| 2001 |
<SPRangeControl |
| 2002 |
label={__("Max Height", "post-carousel")} |
| 2003 |
setAttributes={setAttributes} |
| 2004 |
attributes={popupMaxHeight} |
| 2005 |
units={["px", "%", "Em"]} |
| 2006 |
max={1400} |
| 2007 |
attributesKey={"popupMaxHeight"} |
| 2008 |
defaultValue={{ value: 700, unit: "px" }} |
| 2009 |
/> |
| 2010 |
</> |
| 2011 |
); |
| 2012 |
}; |
| 2013 |
|
| 2014 |
export const PaginationGeneralTab = ({ attributes, setAttributes }) => { |
| 2015 |
const { |
| 2016 |
paginationType, |
| 2017 |
loadMoreInfiniteScroll, |
| 2018 |
loadMoreBtnLabel, |
| 2019 |
loadMoreEndMessage, |
| 2020 |
paginationAlign, |
| 2021 |
paginationStyle, |
| 2022 |
paginationPrevLabel, |
| 2023 |
paginationNextLabel, |
| 2024 |
paginationSpaceBetween, |
| 2025 |
navigationArrowStyle, |
| 2026 |
navigationArrowSize, |
| 2027 |
navigationArrowWidth, |
| 2028 |
navigationArrowHeight, |
| 2029 |
navigationArrowPosition, |
| 2030 |
} = attributes; |
| 2031 |
|
| 2032 |
const togglePaginationType = (newValue) => { |
| 2033 |
if (newValue !== "load-more") { |
| 2034 |
setAttributes({ |
| 2035 |
paginationType: newValue, |
| 2036 |
loadMoreInfiniteScroll: false, |
| 2037 |
}); |
| 2038 |
} |
| 2039 |
setAttributes({ paginationType: newValue }); |
| 2040 |
}; |
| 2041 |
|
| 2042 |
return ( |
| 2043 |
<> |
| 2044 |
<SPToggleGroupControl |
| 2045 |
label={__("Pagination Type", "post-carousel")} |
| 2046 |
attributes={paginationType} |
| 2047 |
onClick={(e) => togglePaginationType(e)} |
| 2048 |
items={[ |
| 2049 |
{ label: "Load More", value: "load-more" }, |
| 2050 |
{ label: "Navigation", value: "navigation" }, |
| 2051 |
{ label: "Number", value: "pagination" }, |
| 2052 |
]} |
| 2053 |
/> |
| 2054 |
{paginationType === "load-more" && ( |
| 2055 |
<> |
| 2056 |
<Toggle |
| 2057 |
label={__("Infinite Scroll", "post-carousel")} |
| 2058 |
attributes={loadMoreInfiniteScroll} |
| 2059 |
attributesKey={"loadMoreInfiniteScroll"} |
| 2060 |
setAttributes={setAttributes} |
| 2061 |
pro={true} |
| 2062 |
/> |
| 2063 |
{!loadMoreInfiniteScroll && ( |
| 2064 |
<InputControl |
| 2065 |
label={__("Button Label", "post-carousel")} |
| 2066 |
attributes={loadMoreBtnLabel} |
| 2067 |
attributesKey={"loadMoreBtnLabel"} |
| 2068 |
setAttributes={setAttributes} |
| 2069 |
flex={false} |
| 2070 |
inputType="string" |
| 2071 |
placeholder={__("Load More", "post-carousel")} |
| 2072 |
/> |
| 2073 |
)} |
| 2074 |
<InputControl |
| 2075 |
label={__("Ending Message", "post-carousel")} |
| 2076 |
attributes={loadMoreEndMessage} |
| 2077 |
attributesKey={"loadMoreEndMessage"} |
| 2078 |
setAttributes={setAttributes} |
| 2079 |
flex={false} |
| 2080 |
inputType="string" |
| 2081 |
placeholder={__("No more posts available", "post-carousel")} |
| 2082 |
/> |
| 2083 |
</> |
| 2084 |
)} |
| 2085 |
{paginationType === "navigation" && ( |
| 2086 |
<> |
| 2087 |
<SelectDropdown |
| 2088 |
label={__("Arrow Icon Style", "post-carousel")} |
| 2089 |
attributes={navigationArrowStyle} |
| 2090 |
attributesKey={"navigationArrowStyle"} |
| 2091 |
setAttributes={setAttributes} |
| 2092 |
options={[ |
| 2093 |
{ |
| 2094 |
label: __("Chevron Solid", "post-carousel"), |
| 2095 |
value: "chevron-solid", |
| 2096 |
icon: <ChevronSolid />, |
| 2097 |
}, |
| 2098 |
{ |
| 2099 |
label: __("Chevron Outline", "post-carousel"), |
| 2100 |
value: "chevron-outline", |
| 2101 |
icon: <ChevronOutline />, |
| 2102 |
}, |
| 2103 |
{ |
| 2104 |
label: __("Chevron Bold", "post-carousel"), |
| 2105 |
value: "chevron-bold", |
| 2106 |
icon: <ChevronBold />, |
| 2107 |
}, |
| 2108 |
{ |
| 2109 |
label: __("Double Chevron", "post-carousel"), |
| 2110 |
value: "double-chevron", |
| 2111 |
icon: <DoubleChevron />, |
| 2112 |
}, |
| 2113 |
{ |
| 2114 |
label: __("Arrow Solid", "post-carousel"), |
| 2115 |
value: "arrow-solid", |
| 2116 |
icon: <ArrowSolid />, |
| 2117 |
}, |
| 2118 |
{ |
| 2119 |
label: __("Arrow Outline", "post-carousel"), |
| 2120 |
value: "arrow-outline", |
| 2121 |
icon: <ArrowOutline />, |
| 2122 |
}, |
| 2123 |
{ |
| 2124 |
label: __("Arrow Minimal", "post-carousel"), |
| 2125 |
value: "arrow-minimal", |
| 2126 |
icon: <ArrowMinimal />, |
| 2127 |
}, |
| 2128 |
{ |
| 2129 |
label: __("Chevron Border Line", "post-carousel"), |
| 2130 |
value: "chevron-border-line", |
| 2131 |
icon: <ChevronBorderLine />, |
| 2132 |
}, |
| 2133 |
{ |
| 2134 |
label: __("Double Chevron Outline", "post-carousel"), |
| 2135 |
value: "double-chevron-outline", |
| 2136 |
icon: <DoubleChevronOutline />, |
| 2137 |
}, |
| 2138 |
{ |
| 2139 |
label: __("Triangle Outline", "post-carousel"), |
| 2140 |
value: "triangle-outline", |
| 2141 |
icon: <TriangleOutline />, |
| 2142 |
}, |
| 2143 |
]} |
| 2144 |
/> |
| 2145 |
<SPRangeControl |
| 2146 |
label={__("Size", "post-carousel")} |
| 2147 |
attributes={navigationArrowSize} |
| 2148 |
attributesKey={"navigationArrowSize"} |
| 2149 |
setAttributes={setAttributes} |
| 2150 |
units={["px", "%", "em"]} |
| 2151 |
defaultValue={{ unit: "px", value: 20 }} |
| 2152 |
/> |
| 2153 |
<SPRangeControl |
| 2154 |
label={__("Width", "post-carousel")} |
| 2155 |
attributes={navigationArrowWidth} |
| 2156 |
attributesKey={"navigationArrowWidth"} |
| 2157 |
setAttributes={setAttributes} |
| 2158 |
units={["px", "%", "em"]} |
| 2159 |
defaultValue={{ unit: "px", value: 40 }} |
| 2160 |
/> |
| 2161 |
<SPRangeControl |
| 2162 |
label={__("Height", "post-carousel")} |
| 2163 |
attributes={navigationArrowHeight} |
| 2164 |
attributesKey={"navigationArrowHeight"} |
| 2165 |
setAttributes={setAttributes} |
| 2166 |
units={["px", "%", "em"]} |
| 2167 |
defaultValue={{ unit: "px", value: 40 }} |
| 2168 |
/> |
| 2169 |
<SPRangeControl |
| 2170 |
label={__("Gap", "post-carousel")} |
| 2171 |
attributes={paginationSpaceBetween} |
| 2172 |
attributesKey={"paginationSpaceBetween"} |
| 2173 |
setAttributes={setAttributes} |
| 2174 |
max={1400} |
| 2175 |
defaultValue={{ unit: "px", value: 4 }} |
| 2176 |
units={["px", "%", "em"]} |
| 2177 |
/> |
| 2178 |
<SPToggleGroupControl |
| 2179 |
label={__("Arrow Position", "post-carousel")} |
| 2180 |
attributes={navigationArrowPosition} |
| 2181 |
attributesKey={"navigationArrowPosition"} |
| 2182 |
setAttributes={setAttributes} |
| 2183 |
items={[ |
| 2184 |
{ label: "Top", value: "top" }, |
| 2185 |
{ label: "Bottom", value: "bottom" }, |
| 2186 |
]} |
| 2187 |
/> |
| 2188 |
</> |
| 2189 |
)} |
| 2190 |
{paginationType === "pagination" && ( |
| 2191 |
<> |
| 2192 |
<SelectField |
| 2193 |
label={__("Number Type", "post-carousel")} |
| 2194 |
attributes={paginationStyle} |
| 2195 |
attributesKey={"paginationStyle"} |
| 2196 |
setAttributes={setAttributes} |
| 2197 |
items={[ |
| 2198 |
{ |
| 2199 |
label: "Select a Pagination Type", |
| 2200 |
value: "", |
| 2201 |
disabled: "disabled", |
| 2202 |
}, |
| 2203 |
{ label: "Number", value: "number" }, |
| 2204 |
{ |
| 2205 |
label: "Number + Arrow", |
| 2206 |
value: "number-arrow", |
| 2207 |
}, |
| 2208 |
{ |
| 2209 |
label: "Number + Previous/Next with Arrow (Pro)", |
| 2210 |
value: "number-prev-next-arrow", |
| 2211 |
disabled: true, |
| 2212 |
}, |
| 2213 |
{ |
| 2214 |
label: "Previous/Next", |
| 2215 |
value: "prev-next", |
| 2216 |
}, |
| 2217 |
]} |
| 2218 |
/> |
| 2219 |
<SPRangeControl |
| 2220 |
label={__("Gap", "post-carousel")} |
| 2221 |
attributes={paginationSpaceBetween} |
| 2222 |
attributesKey={"paginationSpaceBetween"} |
| 2223 |
setAttributes={setAttributes} |
| 2224 |
max={1400} |
| 2225 |
defaultValue={{ unit: "px", value: 4 }} |
| 2226 |
units={["px", "%", "em"]} |
| 2227 |
/> |
| 2228 |
{["number+prev/next+arrow", "prev/next"].includes(paginationStyle) && ( |
| 2229 |
<> |
| 2230 |
<InputControl |
| 2231 |
label={__("Previous Label", "post-carousel")} |
| 2232 |
attributes={paginationPrevLabel} |
| 2233 |
attributesKey={"paginationPrevLabel"} |
| 2234 |
setAttributes={setAttributes} |
| 2235 |
flex={false} |
| 2236 |
inputType="string" |
| 2237 |
/> |
| 2238 |
<InputControl |
| 2239 |
label={__("Next Label", "post-carousel")} |
| 2240 |
attributes={paginationNextLabel} |
| 2241 |
attributesKey={"paginationNextLabel"} |
| 2242 |
setAttributes={setAttributes} |
| 2243 |
flex={false} |
| 2244 |
inputType="string" |
| 2245 |
/> |
| 2246 |
</> |
| 2247 |
)} |
| 2248 |
</> |
| 2249 |
)} |
| 2250 |
<SPToggleGroupControl |
| 2251 |
label={__("Alignment", "post-carousel")} |
| 2252 |
attributes={paginationAlign} |
| 2253 |
attributesKey={"paginationAlign"} |
| 2254 |
setAttributes={setAttributes} |
| 2255 |
items={[ |
| 2256 |
{ label: <AlignLeft />, value: "left" }, |
| 2257 |
{ label: <AlignCenter />, value: "center" }, |
| 2258 |
{ label: <AlignRight />, value: "right" }, |
| 2259 |
]} |
| 2260 |
/> |
| 2261 |
</> |
| 2262 |
); |
| 2263 |
}; |
| 2264 |
|
| 2265 |
export const CarouselNavArrowGeneralTab = ({ attributes, setAttributes, verticalPosition = true }) => { |
| 2266 |
const { |
| 2267 |
carouselArrowStyle, |
| 2268 |
carouselArrowSize, |
| 2269 |
carouselArrowWidth, |
| 2270 |
carouselArrowHeight, |
| 2271 |
carouselArrowSpaceBetween, |
| 2272 |
carouselArrowHorizontal, |
| 2273 |
carouselArrowVertical, |
| 2274 |
blockName, |
| 2275 |
navArrowVisibilityOnHover, |
| 2276 |
} = attributes; |
| 2277 |
|
| 2278 |
const defaultData = useDefaultValue(blockName); |
| 2279 |
return ( |
| 2280 |
<> |
| 2281 |
<SelectDropdown |
| 2282 |
label={__("Arrow Icon Style", "post-carousel")} |
| 2283 |
attributes={carouselArrowStyle} |
| 2284 |
attributesKey={"carouselArrowStyle"} |
| 2285 |
setAttributes={setAttributes} |
| 2286 |
options={[ |
| 2287 |
{ |
| 2288 |
label: __("Chevron Solid", "post-carousel"), |
| 2289 |
value: "chevron-solid", |
| 2290 |
icon: <ChevronSolid />, |
| 2291 |
}, |
| 2292 |
{ |
| 2293 |
label: __("Chevron Outline", "post-carousel"), |
| 2294 |
value: "chevron-outline", |
| 2295 |
icon: <ChevronOutline />, |
| 2296 |
}, |
| 2297 |
{ |
| 2298 |
label: __("Chevron Bold", "post-carousel"), |
| 2299 |
value: "chevron-bold", |
| 2300 |
icon: <ChevronBold />, |
| 2301 |
}, |
| 2302 |
{ |
| 2303 |
label: __("Double Chevron", "post-carousel"), |
| 2304 |
value: "double-chevron", |
| 2305 |
icon: <DoubleChevron />, |
| 2306 |
}, |
| 2307 |
{ |
| 2308 |
label: __("Arrow Solid", "post-carousel"), |
| 2309 |
value: "arrow-solid", |
| 2310 |
icon: <ArrowSolid />, |
| 2311 |
}, |
| 2312 |
{ |
| 2313 |
label: __("Arrow Outline", "post-carousel"), |
| 2314 |
value: "arrow-outline", |
| 2315 |
icon: <ArrowOutline />, |
| 2316 |
}, |
| 2317 |
{ |
| 2318 |
label: __("Arrow Minimal", "post-carousel"), |
| 2319 |
value: "arrow-minimal", |
| 2320 |
icon: <ArrowMinimal />, |
| 2321 |
}, |
| 2322 |
{ |
| 2323 |
label: __("Chevron Border Line", "post-carousel"), |
| 2324 |
value: "chevron-border-line", |
| 2325 |
icon: <ChevronBorderLine />, |
| 2326 |
}, |
| 2327 |
{ |
| 2328 |
label: __("Double Chevron Outline", "post-carousel"), |
| 2329 |
value: "double-chevron-outline", |
| 2330 |
icon: <DoubleChevronOutline />, |
| 2331 |
}, |
| 2332 |
{ |
| 2333 |
label: __("Triangle Outline", "post-carousel"), |
| 2334 |
value: "triangle-outline", |
| 2335 |
icon: <TriangleOutline />, |
| 2336 |
}, |
| 2337 |
]} |
| 2338 |
/> |
| 2339 |
<SPRangeControl |
| 2340 |
label={__("Size", "post-carousel")} |
| 2341 |
attributes={carouselArrowSize} |
| 2342 |
attributesKey={"carouselArrowSize"} |
| 2343 |
setAttributes={setAttributes} |
| 2344 |
units={["px", "%", "Em"]} |
| 2345 |
defaultValue={{ unit: "px", value: 16 }} |
| 2346 |
/> |
| 2347 |
<SPRangeControl |
| 2348 |
label={__("Width", "post-carousel")} |
| 2349 |
attributes={carouselArrowWidth} |
| 2350 |
attributesKey={"carouselArrowWidth"} |
| 2351 |
setAttributes={setAttributes} |
| 2352 |
units={["px", "%", "Em"]} |
| 2353 |
defaultValue={{ unit: "px", value: 40 }} |
| 2354 |
/> |
| 2355 |
<SPRangeControl |
| 2356 |
label={__("Height", "post-carousel")} |
| 2357 |
attributes={carouselArrowHeight} |
| 2358 |
attributesKey={"carouselArrowHeight"} |
| 2359 |
setAttributes={setAttributes} |
| 2360 |
units={["px", "%", "Em"]} |
| 2361 |
defaultValue={{ unit: "px", value: 40 }} |
| 2362 |
/> |
| 2363 |
<SPRangeControl |
| 2364 |
label={__("Space Between Arrows", "post-carousel")} |
| 2365 |
attributes={carouselArrowSpaceBetween} |
| 2366 |
attributesKey={"carouselArrowSpaceBetween"} |
| 2367 |
setAttributes={setAttributes} |
| 2368 |
units={["px", "%", "Em"]} |
| 2369 |
max={1600} |
| 2370 |
defaultValue={{ unit: "%", value: 100 }} |
| 2371 |
typoLineHeight={true} |
| 2372 |
/> |
| 2373 |
<SPRangeControl |
| 2374 |
label={__("Horizontal Position", "post-carousel")} |
| 2375 |
attributes={carouselArrowHorizontal} |
| 2376 |
attributesKey={"carouselArrowHorizontal"} |
| 2377 |
setAttributes={setAttributes} |
| 2378 |
units={["%", "px"]} |
| 2379 |
max={2000} |
| 2380 |
min={-100} |
| 2381 |
defaultValue={{ |
| 2382 |
unit: "px", |
| 2383 |
value: defaultData?.carouselArrowHorizontal, |
| 2384 |
}} |
| 2385 |
// defaultValue={horizontalDefaultValue()} |
| 2386 |
/> |
| 2387 |
{verticalPosition && ( |
| 2388 |
<SPRangeControl |
| 2389 |
label={__("Vertical Position", "post-carousel")} |
| 2390 |
attributes={carouselArrowVertical} |
| 2391 |
attributesKey={"carouselArrowVertical"} |
| 2392 |
setAttributes={setAttributes} |
| 2393 |
units={["%", "px"]} |
| 2394 |
max={2000} |
| 2395 |
min={-100} |
| 2396 |
defaultValue={{ unit: "%", value: 50 }} |
| 2397 |
/> |
| 2398 |
)} |
| 2399 |
<Toggle |
| 2400 |
label={__("Visibility on Hover", "post-carousel")} |
| 2401 |
attributes={navArrowVisibilityOnHover} |
| 2402 |
attributesKey={"navArrowVisibilityOnHover"} |
| 2403 |
setAttributes={setAttributes} |
| 2404 |
pro={true} |
| 2405 |
/> |
| 2406 |
</> |
| 2407 |
); |
| 2408 |
}; |
| 2409 |
|
| 2410 |
export const CarouselPaginationGeneralTab = ({ attributes, setAttributes }) => { |
| 2411 |
const { |
| 2412 |
carouselPaginationStyle, |
| 2413 |
carouselPaginationWidth, |
| 2414 |
carouselPaginationHeight, |
| 2415 |
carouselPaginationSpaceBetween, |
| 2416 |
carouselPaginationHorizontal, |
| 2417 |
carouselPaginationVertical, |
| 2418 |
blockName, |
| 2419 |
} = attributes; |
| 2420 |
const device = useDeviceType(); |
| 2421 |
|
| 2422 |
const paginationDotChangeHandler = (value) => { |
| 2423 |
setAttributes({ |
| 2424 |
carouselPaginationStyle: value, |
| 2425 |
carouselPaginationWidth: { |
| 2426 |
...carouselPaginationWidth, |
| 2427 |
device: { |
| 2428 |
...carouselPaginationWidth.device, |
| 2429 |
[device]: paginationDotsStyle[value].width, |
| 2430 |
}, |
| 2431 |
}, |
| 2432 |
carouselPaginationHeight: { |
| 2433 |
...carouselPaginationHeight, |
| 2434 |
device: { |
| 2435 |
...carouselPaginationHeight.device, |
| 2436 |
[device]: paginationDotsStyle[value].height, |
| 2437 |
}, |
| 2438 |
}, |
| 2439 |
}); |
| 2440 |
}; |
| 2441 |
|
| 2442 |
return ( |
| 2443 |
<> |
| 2444 |
<SelectDropdown |
| 2445 |
label={__("Pagination Style", "post-carousel")} |
| 2446 |
setAttributes={setAttributes} |
| 2447 |
attributesKey={"carouselPaginationStyle"} |
| 2448 |
attributes={carouselPaginationStyle} |
| 2449 |
onClick={paginationDotChangeHandler} |
| 2450 |
options={[ |
| 2451 |
{ label: "Dots", value: "dots", icon: <DotsPagination /> }, |
| 2452 |
{ |
| 2453 |
label: "Scrollbar", |
| 2454 |
value: "scrollbar", |
| 2455 |
icon: <ScrollbarPagination />, |
| 2456 |
}, |
| 2457 |
{ |
| 2458 |
label: "Numbers", |
| 2459 |
value: "numbers", |
| 2460 |
icon: <NumbersPagination />, |
| 2461 |
}, |
| 2462 |
{ |
| 2463 |
label: "Dynamic", |
| 2464 |
value: "dynamic", |
| 2465 |
icon: <DynamicPagination />, |
| 2466 |
disabled: "disabled", |
| 2467 |
type: "pro", |
| 2468 |
}, |
| 2469 |
{ |
| 2470 |
label: "Strokes", |
| 2471 |
value: "strokes", |
| 2472 |
icon: <StrokesPagination />, |
| 2473 |
type: "pro", |
| 2474 |
disabled: "disabled", |
| 2475 |
}, |
| 2476 |
{ |
| 2477 |
label: "Fraction", |
| 2478 |
value: "fraction", |
| 2479 |
icon: <FractionPagination />, |
| 2480 |
type: "pro", |
| 2481 |
disabled: "disabled", |
| 2482 |
}, |
| 2483 |
]} |
| 2484 |
/> |
| 2485 |
{carouselPaginationStyle !== "scrollbar" && ( |
| 2486 |
<> |
| 2487 |
<SPRangeControl |
| 2488 |
label={__("Width", "post-carousel")} |
| 2489 |
attributes={carouselPaginationWidth} |
| 2490 |
attributesKey={"carouselPaginationWidth"} |
| 2491 |
setAttributes={setAttributes} |
| 2492 |
units={["px", "%", "Em"]} |
| 2493 |
min={8} |
| 2494 |
max={60} |
| 2495 |
defaultValue={{ unit: "px", value: 12 }} |
| 2496 |
/> |
| 2497 |
</> |
| 2498 |
)} |
| 2499 |
{carouselPaginationStyle !== "fraction" && ( |
| 2500 |
<> |
| 2501 |
<SPRangeControl |
| 2502 |
label={__("Height", "post-carousel")} |
| 2503 |
attributes={carouselPaginationHeight} |
| 2504 |
attributesKey={"carouselPaginationHeight"} |
| 2505 |
setAttributes={setAttributes} |
| 2506 |
units={["px", "%", "Em"]} |
| 2507 |
max={60} |
| 2508 |
min={4} |
| 2509 |
defaultValue={{ unit: "px", value: 12 }} |
| 2510 |
/> |
| 2511 |
</> |
| 2512 |
)} |
| 2513 |
{carouselPaginationStyle !== "scrollbar" && ( |
| 2514 |
<> |
| 2515 |
{carouselPaginationStyle !== "fraction" && ( |
| 2516 |
<SPRangeControl |
| 2517 |
label={__("Space Between Dots", "post-carousel")} |
| 2518 |
attributes={carouselPaginationSpaceBetween} |
| 2519 |
attributesKey={"carouselPaginationSpaceBetween"} |
| 2520 |
setAttributes={setAttributes} |
| 2521 |
units={["px", "%", "Em"]} |
| 2522 |
max={40} |
| 2523 |
defaultValue={{ unit: "px", value: 6 }} |
| 2524 |
/> |
| 2525 |
)} |
| 2526 |
<SPRangeControl |
| 2527 |
label={__("Horizontal Position", "post-carousel")} |
| 2528 |
attributes={carouselPaginationHorizontal} |
| 2529 |
attributesKey={"carouselPaginationHorizontal"} |
| 2530 |
setAttributes={setAttributes} |
| 2531 |
units={["%", "px"]} |
| 2532 |
max={1400} |
| 2533 |
defaultValue={{ unit: "%", value: "" }} |
| 2534 |
/> |
| 2535 |
</> |
| 2536 |
)} |
| 2537 |
<SPRangeControl |
| 2538 |
label={__("Vertical Position", "post-carousel")} |
| 2539 |
attributes={carouselPaginationVertical} |
| 2540 |
attributesKey={"carouselPaginationVertical"} |
| 2541 |
setAttributes={setAttributes} |
| 2542 |
units={["%", "px"]} |
| 2543 |
max={1400} |
| 2544 |
min={-50} |
| 2545 |
defaultValue={{ |
| 2546 |
unit: "px", |
| 2547 |
value: ["post-carousel", "post-carousel-two"].includes(blockName) ? -36 : 30, |
| 2548 |
}} |
| 2549 |
/> |
| 2550 |
</> |
| 2551 |
); |
| 2552 |
}; |
| 2553 |
|
