PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.7
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.7
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / src / blocks / table-of-content / generalTabs.js

generalTabs.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.7, at src/blocks/table-of-content/generalTabs.js

633 lines 15.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import { __ } from "@wordpress/i18n";
2 import Layouts from "../../components/layouts/layouts";
3 import {
4 TocOneIcon,
5 TocTwoIcon,
6 TocThreeIcon,
7 TocFourIcon,
8 TocFiveIcon,
9 AlignLeft,
10 AlignCenter,
11 AlignRight,
12 } from "../../icons/icons";
13 import {
14 InputControl,
15 MultipleSelect,
16 SelectDropdown,
17 SelectField,
18 SPRangeControl,
19 SPToggleGroupControl,
20 } from "../../components";
21 import Toggle from "../../components/toggle/toggle";
22 import {
23 Icon1,
24 Icon10,
25 Icon11,
26 Icon13,
27 Icon14,
28 Icon15,
29 Icon3,
30 Icon2,
31 Icon4,
32 Icon5,
33 Icon7,
34 Icon8,
35 Icon9,
36 Icon6,
37 Icon12,
38 Icon16,
39 } from "../../icons/collapsibleIcons";
40 import ProInfo from "../../components/proInfo/proInfo";
41
42 export function PresetToc({ attributes, setAttributes }) {
43 const { preset, listStyle, supportedHeadingTag, displayControl, stickyOffsetTop, floatingPosition, tocWidth } = attributes;
44 const layoutChange = (newValue) => {
45 if (newValue === preset) {
46 return;
47 }
48 setAttributes({ preset: newValue });
49 };
50
51 const listStylesOptions = [
52 {
53 label: "None",
54 value: "none",
55 // disabled: true,
56 },
57 { label: "Bullet(.)", value: "bullet" },
58 {
59 label: "Multi level Decimal(1. 1.1. 1.2. 1.2.1.)",
60 value: "decimal",
61 },
62 { label: "Numeric Outline (1. a. b. i.)", value: "numericOutline" },
63 {
64 label: "Roman - Alphabetic Mix (I. a. 1.)",
65 value: "romanAlphabeticMix",
66 },
67 { label: "Padded Numbers (01. a. b. i.)", value: "paddedNumbers" },
68 ];
69
70 return (
71 <>
72 <Layouts
73 attributes={preset}
74 setAttributes={setAttributes}
75 attributesKey="preset"
76 displayActive={true}
77 showDemoTitle={true}
78 grid={3}
79 onChange={layoutChange}
80 label={__("TOC Preset", "post-carousel")}
81 items={[
82 {
83 icon: <TocOneIcon value={preset} />,
84 value: "presetOne"
85 },
86 {
87 icon: <TocTwoIcon value={preset} />,
88 value: "presetTwo",
89 type: "pro",
90 demoLink: "https://wpsmartpost.com/blocks/#demoId3602"
91 },
92 {
93 icon: <TocThreeIcon value={preset} />,
94 value: "presetThree",
95 type: "pro",
96 demoLink: "https://wpsmartpost.com/blocks/#demoId3602"
97 },
98 {
99 icon: <TocFourIcon value={preset} />,
100 value: "presetFour",
101 type: "pro",
102 demoLink: "https://wpsmartpost.com/blocks/#demoId3602"
103 },
104 {
105 icon: <TocFiveIcon value={preset} />,
106 value: "presetFive",
107 type: "pro",
108 demoLink: "https://wpsmartpost.com/blocks/#demoId3602"
109 },
110 ]}
111 />
112
113 <SelectField
114 label={__("List Style", "post-carousel")}
115 attributes={listStyle}
116 attributesKey="listStyle"
117 setAttributes={setAttributes}
118 items={listStylesOptions}
119 />
120 <MultipleSelect
121 label={__("Headings to Index", "post-carousel")}
122 value={supportedHeadingTag}
123 attributes={supportedHeadingTag}
124 attributesKey={"supportedHeadingTag"}
125 setAttributes={setAttributes}
126 onChange={(e) => setAttributes({ supportedHeadingTag: e })}
127 items={[
128 { label: "H1", value: "h1" },
129 { label: "H2", value: "h2" },
130 { label: "H3", value: "h3" },
131 { label: "H4", value: "h4" },
132 { label: "H5", value: "h5" },
133 { label: "H6", value: "h6" },
134 ]}
135 />
136 <SPRangeControl
137 label={__("Width", "post-carousel")}
138 attributes={tocWidth}
139 attributesKey={"tocWidth"}
140 setAttributes={setAttributes}
141 max={1000}
142 min={0}
143 units={["px", "%", "em"]}
144 defaultValue={{ unit: "px", value: "" }}
145 />
146 <SelectField
147 label={__("Display Control", "post-carousel")}
148 attributes={displayControl}
149 attributesKey="displayControl"
150 setAttributes={setAttributes}
151 items={[
152 { label: "Static", value: "static" },
153 { label: "Sticky", value: "sticky", disabled: true },
154 { label: "Floating", value: "floating", disabled: true },
155 ]}
156 />
157 {displayControl === "floating" && (
158 <SelectField
159 label={__("Floating Position", "post-carousel")}
160 attributes={floatingPosition}
161 attributesKey="floatingPosition"
162 setAttributes={setAttributes}
163 items={[
164 { label: "Top Left", value: "top-left" },
165 { label: "Top Center", value: "top-center" },
166 { label: "Top Right", value: "top-right" },
167 { label: "Middle Left", value: "middle-left" },
168 { label: "Middle Right", value: "middle-right" },
169 ]}
170 />
171 )}
172 {(displayControl === "sticky" || displayControl === "floating") && (
173 <SPRangeControl
174 label={__("Offset Top", "post-carousel")}
175 setAttributes={setAttributes}
176 attributes={stickyOffsetTop}
177 max={500}
178 units={["px", "%", "em"]}
179 min={1}
180 attributesKey={"stickyOffsetTop"}
181 defaultValue={{ unit: "px", value: 50 }}
182 pro={true}
183 />
184 )}
185
186 {/* <SPToggleGroupControl
187 label={__("Content Alignment", "post-carousel")}
188 items={[
189 { label: <AlignLeft />, value: "left" },
190 { label: <AlignCenter />, value: "center" },
191 { label: <AlignRight />, value: "right" },
192 ]}
193 attributes={tocAlignment}
194 attributesKey={"tocAlignment"}
195 setAttributes={setAttributes}
196 /> */}
197 <ProInfo>
198 <span>Unlock exclusive layouts and advanced display controls.</span> <a href="https://wpsmartpost.com/pricing/?ref=1" target="_blank" rel="noopener noreferrer">Upgrade to Pro!</a>
199 </ProInfo>
200 </>
201 );
202 }
203
204 export function TocHeading({ attributes, setAttributes }) {
205 const { tocHeading, bottomGap, headingHashUrl, headingAlignment } = attributes;
206
207 return (
208 <>
209 <InputControl
210 attributes={tocHeading}
211 attributesKey={"tocHeading"}
212 setAttributes={setAttributes}
213 label={__("Heading Label", "post-carousel")}
214 flex={false}
215 inputType="string"
216 />
217
218 <SPRangeControl
219 label={__("Bottom Gap", "post-carousel")}
220 setAttributes={setAttributes}
221 attributes={bottomGap}
222 max={200}
223 units={["px", "%", "em"]}
224 min={1}
225 attributesKey={"bottomGap"}
226 defaultValue={{ unit: "px", value: 16 }}
227 />
228
229 <Toggle
230 label={__("Heading Hash Url", "post-carousel")}
231 attributes={headingHashUrl}
232 setAttributes={setAttributes}
233 attributesKey={"headingHashUrl"}
234 pro={true}
235 />
236
237 <SPToggleGroupControl
238 label={__("Alignment", "post-carousel")}
239 items={[
240 { label: <AlignLeft />, value: "left" },
241 { label: <AlignCenter />, value: "center" },
242 { label: <AlignRight />, value: "right" },
243 ]}
244 attributes={headingAlignment}
245 attributesKey={"headingAlignment"}
246 setAttributes={setAttributes}
247 />
248 </>
249 );
250 }
251
252 export function TocListBodyGeneral({ attributes, setAttributes }) {
253 const {
254 listHierarchy,
255 hierarchyDistance,
256 copyLink,
257 childItemGap,
258 gapBetweenListItems,
259 separator,
260 separatorStyle,
261 separatorThickness,
262 } = attributes;
263
264 return (
265 <>
266 <Toggle
267 label={__("List Hierarchy", "post-carousel")}
268 attributes={listHierarchy}
269 attributesKey={"listHierarchy"}
270 setAttributes={setAttributes}
271 />
272
273 {listHierarchy && (
274 <SPRangeControl
275 label={__("Hierarchy Distance", "post-carousel")}
276 setAttributes={setAttributes}
277 attributes={hierarchyDistance}
278 max={50}
279 units={["px", "%", "em"]}
280 min={1}
281 attributesKey={"hierarchyDistance"}
282 defaultValue={{ unit: "px", value: 16 }}
283 />
284 )}
285
286 <Toggle
287 label={__("Copy Link (Frontend)", "post-carousel")}
288 attributes={copyLink}
289 setAttributes={setAttributes}
290 attributesKey={"copyLink"}
291 pro={true}
292 />
293
294 <SPRangeControl
295 label={__("Gap Between List Items", "post-carousel")}
296 setAttributes={setAttributes}
297 attributes={gapBetweenListItems}
298 max={50}
299 units={["px", "%", "em"]}
300 min={1}
301 attributesKey={"gapBetweenListItems"}
302 defaultValue={{ unit: "px", value: 16 }}
303 />
304
305 {listHierarchy && (
306 <SPRangeControl
307 label={__("Child Item Gap", "post-carousel")}
308 setAttributes={setAttributes}
309 attributes={childItemGap}
310 max={50}
311 units={["px", "%", "em"]}
312 min={1}
313 attributesKey={"childItemGap"}
314 defaultValue={{ unit: "px", value: 16 }}
315 />
316 )}
317
318 <Toggle
319 label={__("Separator", "post-carousel")}
320 attributes={separator}
321 attributesKey={"separator"}
322 setAttributes={setAttributes}
323 />
324
325 {separator && (
326 <>
327 <SelectField
328 label={__("Separator Style", "post-carousel")}
329 attributes={separatorStyle}
330 attributesKey="separatorStyle"
331 setAttributes={setAttributes}
332 items={[
333 { label: "Solid", value: "solid" },
334 { label: "Dashed", value: "dashed" },
335 { label: "Dotted", value: "dotted" },
336 { label: "Double", value: "double" },
337 ]}
338 />
339
340 <SPRangeControl
341 label={__("Thickness", "post-carousel")}
342 setAttributes={setAttributes}
343 attributes={separatorThickness}
344 max={10}
345 min={1}
346 attributesKey={"separatorThickness"}
347 defaultValue={{ unit: "px", value: 16 }}
348 />
349 </>
350 )}
351 </>
352 );
353 }
354
355 export function TocCollapsibleGeneral({ attributes, setAttributes }) {
356 const {
357 collapsedInitially,
358 childItemCollapsible,
359 CollapsibleButtonType,
360 CollapsibleIconSource,
361 collapsibleIconPosition,
362 tocCollapsed,
363 expandText,
364 collapseText,
365 childCollapsibleIconSource,
366 } = attributes;
367
368 return (
369 <>
370 <Toggle
371 label={__("Toc Collapsible", "post-carousel")}
372 attributes={tocCollapsed}
373 attributesKey={"tocCollapsed"}
374 setAttributes={setAttributes}
375 pro={true}
376 />
377 {tocCollapsed && (
378 <Toggle
379 label={__("Collapsed Initially", "post-carousel")}
380 attributes={collapsedInitially}
381 attributesKey={"collapsedInitially"}
382 setAttributes={setAttributes}
383 />
384 )}
385
386 <Toggle
387 label={__("Child Item Collapsible", "post-carousel")}
388 attributes={childItemCollapsible}
389 attributesKey={"childItemCollapsible"}
390 setAttributes={setAttributes}
391 pro={true}
392 />
393
394 {tocCollapsed && (
395 <SPToggleGroupControl
396 label={__("Collapsible Button Type", "post-carousel")}
397 items={[
398 { label: "Icon", value: "icon" },
399 { label: "Text", value: "text" },
400 ]}
401 attributes={CollapsibleButtonType}
402 attributesKey={"CollapsibleButtonType"}
403 setAttributes={setAttributes}
404 />
405 )}
406
407 <>
408 {childItemCollapsible && (
409 <SelectDropdown
410 label={__("Child Collapsible Icon Style", "post-carousel")}
411 attributes={childCollapsibleIconSource}
412 attributesKey={"childCollapsibleIconSource"}
413 setAttributes={setAttributes}
414 options={[
415 {
416 label: "Style One",
417 value: "one",
418 icon: (
419 <span className="sp-smart-post-select-nav-icon">
420 <Icon1 />
421 <Icon2 />
422 </span>
423 ),
424 },
425 {
426 label: "Style Two",
427 value: "two",
428 icon: (
429 <span className="sp-smart-post-select-nav-icon">
430 <Icon3 />
431 <Icon4 />
432 </span>
433 ),
434 },
435 {
436 label: "Style Three",
437 value: "three",
438 icon: (
439 <span className="sp-smart-post-select-nav-icon">
440 <Icon5 />
441 <Icon6 />
442 </span>
443 ),
444 },
445 {
446 label: "Style Four",
447 value: "four",
448 icon: (
449 <span className="sp-smart-post-select-nav-icon">
450 <Icon7 />
451 <Icon8 />
452 </span>
453 ),
454 },
455 {
456 label: "Style Five",
457 value: "five",
458 icon: (
459 <span className="sp-smart-post-select-nav-icon">
460 <Icon9 />
461 <Icon10 />
462 </span>
463 ),
464 },
465 {
466 label: "Style Six",
467 value: "six",
468 icon: (
469 <span className="sp-smart-post-select-nav-icon">
470 <Icon11 />
471 <Icon12 />
472 </span>
473 ),
474 },
475 {
476 label: "Style Seven",
477 value: "seven",
478 icon: (
479 <span className="sp-smart-post-select-nav-icon">
480 <Icon13 />
481 <Icon14 />
482 </span>
483 ),
484 },
485 {
486 label: "Style Eight",
487 value: "eight",
488 icon: (
489 <span className="sp-smart-post-select-nav-icon">
490 <Icon15 />
491 <Icon16 />
492 </span>
493 ),
494 },
495 ]}
496 />
497 )}
498
499 {CollapsibleButtonType === "icon" ? (
500 <>
501 {tocCollapsed && (
502 <>
503 <SelectDropdown
504 label={__("Collapsible Icon Style", "post-carousel")}
505 attributes={CollapsibleIconSource}
506 attributesKey={"CollapsibleIconSource"}
507 setAttributes={setAttributes}
508 options={[
509 {
510 label: "Style One",
511 value: "one",
512 icon: (
513 <span className="sp-smart-post-select-nav-icon">
514 <Icon1 />
515 <Icon2 />
516 </span>
517 ),
518 },
519 {
520 label: "Style Two",
521 value: "two",
522 icon: (
523 <span className="sp-smart-post-select-nav-icon">
524 <Icon3 />
525 <Icon4 />
526 </span>
527 ),
528 },
529 {
530 label: "Style Three",
531 value: "three",
532 icon: (
533 <span className="sp-smart-post-select-nav-icon">
534 <Icon5 />
535 <Icon6 />
536 </span>
537 ),
538 },
539 {
540 label: "Style Four",
541 value: "four",
542 icon: (
543 <span className="sp-smart-post-select-nav-icon">
544 <Icon7 />
545 <Icon8 />
546 </span>
547 ),
548 },
549 {
550 label: "Style Five",
551 value: "five",
552 icon: (
553 <span className="sp-smart-post-select-nav-icon">
554 <Icon9 />
555 <Icon10 />
556 </span>
557 ),
558 },
559 {
560 label: "Style Six",
561 value: "six",
562 icon: (
563 <span className="sp-smart-post-select-nav-icon">
564 <Icon11 />
565 <Icon12 />
566 </span>
567 ),
568 },
569 {
570 label: "Style Seven",
571 value: "seven",
572 icon: (
573 <span className="sp-smart-post-select-nav-icon">
574 <Icon13 />
575 <Icon14 />
576 </span>
577 ),
578 },
579 {
580 label: "Style Eight",
581 value: "eight",
582 icon: (
583 <span className="sp-smart-post-select-nav-icon">
584 <Icon15 />
585 <Icon16 />
586 </span>
587 ),
588 },
589 ]}
590 />
591
592 <SPToggleGroupControl
593 label={__("Collapsible Icon Position", "post-carousel")}
594 items={[
595 {
596 label: "Beside Title",
597 value: "besideTitle",
598 },
599 { label: "Right", value: "right" },
600 ]}
601 attributes={collapsibleIconPosition}
602 attributesKey={"collapsibleIconPosition"}
603 setAttributes={setAttributes}
604 />
605 </>
606 )}
607 </>
608 ) : (
609 <>
610 <InputControl
611 attributes={expandText}
612 attributesKey={"expandText"}
613 setAttributes={setAttributes}
614 label={__("Expand Label", "post-carousel")}
615 flex={false}
616 inputType="string"
617 />
618
619 <InputControl
620 attributes={collapseText}
621 attributesKey={"collapseText"}
622 setAttributes={setAttributes}
623 label={__("Collapse Label", "post-carousel")}
624 flex={false}
625 inputType="string"
626 />
627 </>
628 )}
629 </>
630 </>
631 );
632 }
633