PluginProbe
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5
4.9.5 4.9.4 4.9.3 4.9.2 4.9.1 4.9.0 4.8.2 4.8.1 4.8.0 4.7.0 4.6.2 4.6.1 4.6.0 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 4.5.1 4.5.0 4.4.1 4.4.0 3.3.4 3.4.0 3.4.1 All 203 releases
betterdocs / react-src / gutenberg / blocks / sidebar / src / inspector.js

inspector.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/sidebar/src/inspector.js

1,773 lines 105.7 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 { decodeEntities } from "@wordpress/html-entities";
3 import { InspectorControls } from "@wordpress/block-editor";
4 import Select from "react-select";
5 import {
6 PanelBody,
7 BaseControl,
8 ToggleControl,
9 SelectControl,
10 TabPanel,
11 TextControl,
12 Button,
13 Notice
14 } from "@wordpress/components";
15 import { applyFilters } from "@wordpress/hooks";
16 import { withSelect } from "@wordpress/data";
17
18 import ResponsiveDimensionsControl from "../../../util/dimensions-control-v2";
19 import ResponsiveRangeController from "../../../util/responsive-range-control";
20 import BorderShadowControl from "../../../util/border-shadow-control";
21 import ColorControl from "../../../util/color-control";
22 import TypographyDropdown from "../../../util/typography-control-v2";
23 import { MediaPlaceholder } from '@wordpress/block-editor';
24 import upload from '../../../util/upload';
25 import cross from '../../../util/cross';
26 import {
27 CONTAINER_PADDING,
28 CONTAINER_MARGIN,
29 CONTAINER_BACKGROUND,
30 CONTAINER_HEIGHT,
31 CONTAINER_WIDTH,
32 BETTERDOCS_SIDEBAR_TERMS_ORDERBY,
33 BETTERDOCS_SIDEBAR_TERMS_ORDER,
34 BOX_PADDING_LAYOUT_1,
35 BOX_MARGIN_LAYOUT_1,
36 BOX_HEIGHT_LAYOUT_1,
37 BOX_WIDTH_LAYOUT_1,
38 BOX_TITLE_BACKGROUND_LAYOUT_1,
39 BOX_TITLE_BACKGROUND,
40 BOX_ACTIVE_TITLE_BACKGROUND,
41 BOX_SHADOW_LAYOUT_1,
42 BOX_IMG_SIZE_LAYOUT_1,
43 BOX_TITLE_PADDING_LAYOUT_1,
44 BOX_TITLE_MARGIN_LAYOUT_1,
45 BOX_TITLE_BORDER_LAYOUT_1,
46 BOX_COUNT_BORDER_LAYOUT_1,
47 BOX_COUNT_BORDER_LAYOUT_6,
48 BOX_COUNT_BACKGROUND_LAYOUT_1,
49 BOX_DOC_LIST_PADDING_LAYOUT_1,
50 BOX_DOC_LIST_MARGIN_LAYOUT_1,
51 BOX_DOC_LIST_ICON_SIZE_LAYOUT_1,
52 BOX_DOC_LIST_ICON_SPACING_LAYOUT_1,
53 BOX_DOC_LIST_SUB_ICON_SIZE_LAYOUT_1,
54 BETTERDOCS_SIDEBAR_LAYOUTS,
55 BOX_COUNT_BACKGROUND_LAYOUT_6,
56 BOX_COUNT_ACTIVE_BACKGROUND_COLOR_LAYOUT_6,
57 BOX_ACTIVE_TITLE_BORDER_WIDTH_LAYOUT_6,
58 BOX_ACTIVE_LIST_BORDER_WIDTH_LAYOUT_6,
59 STICKY_TOC_WIDTH,
60 BOX_PADDING_LAYOUT_7,
61 BOX_MARGIN_LAYOUT_7,
62 BOX_WIDTH_LAYOUT_7,
63 BOX_IMG_SIZE_LAYOUT_7,
64 BOX_TITLE_BACKGROUND_LAYOUT_7,
65 BOX_SHADOW_LAYOUT_7,
66 BOX_TITLE_BACKGROUND_7,
67 TITLE_BACKGROUND_LAYOUT_8,
68 BOX_TITLE_PADDING_LAYOUT_7,
69 BOX_TITLE_MARGIN_LAYOUT_7,
70 BOX_TITLE_BORDER_LAYOUT_7,
71 BOX_DOC_LIST_PADDING_LAYOUT_7,
72 BOX_DOC_LIST_MARGIN_LAYOUT_7,
73 BOX_DOC_LIST_SUB_ICON_SIZE_LAYOUT_7,
74 BOX_COUNT_BACKGROUND_LAYOUT_7,
75 BOX_COUNT_BORDER_LAYOUT_7,
76 SIDEBAR_SEARCH_BACKGROUND_LAYOUT_7,
77 SIDEBAR_SEARCH_MAGNIFIER_SEARCH_LAYOUT_7_HEIGHT,
78 SIDEBAR_SEARCH_MAGNIFIER_SEARCH_LAYOUT_7_WIDTH,
79 SEARCH_MODAL_FIELD_BACKGROUND,
80 SEARCH_MODAL_CONTENT_TABS_ICON_SIZE_HEIGHT,
81 SEARCH_MODAL_CONTENT_TABS_BORDER,
82 SEARCH_MODAL_CONTENT_TABS_LIST_ICON_SIZE,
83 SEARCH_MODAL_CONTENT_TABS_LIST_BORDER,
84 SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_ICON_SIZE,
85 SIDEBAR_SEARCH_IMAGE_SIZE_WIDTH_LAYOUT_7,
86 SIDEBAR_SEARCH_IMAGE_SIZE_HEIGHT_LAYOUT_7,
87 BOX_IMG_SIZE_LAYOUT_7_HEIGHT,
88 BOX_DOC_LIST_ICON_SIZE_LAYOUT_7,
89 SEARCH_MODAL_CONTENT_TABS_ICON_SIZE_WIDTH,
90 BOX_PADDING_LAYOUT_8,
91 BOX_MARGIN_LAYOUT_8,
92 BOX_WIDTH_LAYOUT_8,
93 BOX_IMG_SIZE_LAYOUT_8,
94 BOX_TITLE_BACKGROUND_LAYOUT_8,
95 BOX_SHADOW_LAYOUT_8,
96 BOX_TITLE_PADDING_LAYOUT_8,
97 BOX_TITLE_MARGIN_LAYOUT_8,
98 BOX_DOC_LIST_PADDING_LAYOUT_8,
99 BOX_DOC_LIST_MARGIN_LAYOUT_8,
100 BOX_DOC_LIST_ICON_SIZE_LAYOUT_8,
101 BOX_DOC_LIST_SUB_ICON_SIZE_LAYOUT_8,
102 BOX_COUNT_BACKGROUND_LAYOUT_8,
103 TITLE_ARROW_ICON_SIZE_LAYOUT_2,
104 TITLE_ARROW_ICON_SIZE_LAYOUT_3,
105 TITLE_ARROW_ICON_SIZE_LAYOUT_8,
106 DOC_SUB_LIST_ARROW_ICON_SIZE,
107 POSTS_ORDER_BY,
108 POSTS_ORDER,
109 BOX_DOC_LIST_BACKGROUND_COLOR
110 } from "./constants";
111
112 import {
113 BOX_TITLE_TYPO_LAYOUT_1,
114 BOX_COUNT_TYPO_LAYOUT_1,
115 BOX_DOC_LIST_TYPO_LAYOUT_1,
116 BOX_DOC_SUB_LIST_TITLE_TYPO_LAYOUT_1,
117 BOX_DOC_SUB_LIST_TYPO_LAYOUT_1,
118 BOX_TITLE_TYPO_LAYOUT_7,
119 BOX_DOC_LIST_TYPO_LAYOUT_7,
120 BOX_DOC_SUB_LIST_TITLE_TYPO_LAYOUT_7,
121 BOX_DOC_SUB_LIST_TYPO_LAYOUT_7,
122 BOX_COUNT_TYPO_LAYOUT_7,
123 BOX_TITLE_TYPO_LAYOUT_8,
124 BOX_DOC_LIST_TYPO_LAYOUT_8,
125 BOX_DOC_SUB_LIST_TITLE_TYPO_LAYOUT_8,
126 BOX_DOC_SUB_LIST_TYPO_LAYOUT_8,
127 BOX_COUNT_TYPO_LAYOUT_8,
128 SIDEBAR_SEARCH_LAYOUT_7_TYPO,
129 SEARCH_MODAL_FIELD_TYPO,
130 SEARCH_MODAL_CATEGORY_FIELD_TYPO,
131 SEARCH_MODAL_CONTENT_TABS_TYPO,
132 SEARCH_MODAL_CONTENT_TABS_LIST_TYPO,
133 SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_TYPO,
134 } from "./typographyPrefixConstants";
135 import BackgroundControl from "../../../util/background-control";
136 import objAttributes from "./attributes";
137
138 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
139 import faIcons from "../../../util/faIcons";
140
141 const Inspector = ({ docCategories, attributes, setAttributes }) => {
142 const {
143 enableNestedSubcategory,
144 enableLazyLoad,
145 enableStickyTOC,
146 includeCategories,
147 excludeCategories,
148 titleTag,
149 terms_order,
150 terms_orderby,
151 postsOrderBy,
152 postsOrder,
153 sidebar_layout,
154 resOption,
155 stickyTOCZIndex,
156 box_title_color_layout_1,
157 box_title_active_color_layout_1,
158 box_title_active_border_color_layout_1,
159 box_layout_1_count_color,
160 box_layout_6_count_color,
161 box_layout_7_count_color,
162 box_layout_8_count_color,
163 box_layout_6_count_active_color,
164 box_title_color_layout_7,
165 box_title_color_layout_8,
166 box_doc_List_color_layout_1,
167 box_doc_List_color_layout_7,
168 box_doc_List_color_layout_8,
169 box_doc_List_hover_color_layout_1,
170 box_doc_List_hover_color_layout_7,
171 box_doc_List_hover_color_layout_8,
172 box_doc_List_icon_color_layout_1,
173 box_doc_sub_List_title_color_layout_1,
174 box_doc_sub_List_title_color_layout_7,
175 box_doc_sub_List_title_color_layout_8,
176 box_doc_sub_List_title_hover_color_layout_1,
177 box_doc_sub_List_title_hover_color_layout_7,
178 box_doc_sub_List_title_hover_color_layout_8,
179 box_doc_sub_List_color_layout_1,
180 box_doc_sub_List_color_layout_7,
181 box_doc_sub_List_color_layout_8,
182 box_doc_sub_List_hover_color_layout_1,
183 box_doc_sub_List_hover_color_layout_7,
184 box_doc_sub_List_hover_color_layout_8,
185 box_doc_List_hover_bg_color_layout_8,
186 title_arrow_color_layout_2,
187 title_arrow_hover_color_layout_2,
188 title_arrow_color_layout_3,
189 title_arrow_hover_color_layout_3,
190 title_arrow_color_layout_8,
191 title_arrow_hover_color_layout_8,
192 doc_sub_list_arrow_color,
193 doc_sub_list_arrow_hover_color,
194 listIcon,
195 listIconImageUrl,
196 sidebar_search_layout_7_placeholder_color,
197 sidebarSearchModalContentTabsListCategoryColor,
198 sidebarSearchModalMagnifierColor,
199 sidebarSearchModalFieldColor,
200 sidebarSearchModalFieldPlaceholderColor,
201 sidebarSearchModalCategoryColor,
202 sidebarSearchModalContentTabsListColor,
203 initialDocsQueryNumber,
204 initialFAQQueryNumber,
205 docQueryType,
206 faqQueryType,
207 searchModalQueryTermIds,
208 searchModalQueryDocIds,
209 searchModalQueriesFaqGroupIds
210 } = attributes;
211 const resRequiredProps = {
212 setAttributes,
213 resOption,
214 attributes,
215 objAttributes,
216 };
217
218 // handle include categories
219 const handleIncludeCategories = (categories) => {
220 setAttributes({
221 includeCategories: categories ? JSON.stringify(categories) : null,
222 });
223 };
224
225 //handle exclude categories
226 const handleExcludeCategories = (categories) => {
227 setAttributes({
228 excludeCategories: categories ? JSON.stringify(categories) : null,
229 });
230 };
231
232 return (
233 <InspectorControls key="controls">
234 <div className="eb-panel-control">
235 <TabPanel
236 className="eb-parent-tab-panel"
237 activeClass="active-tab"
238 tabs={[
239 {
240 name: "general",
241 title: __("General", "betterdocs"),
242 className: "eb-tab general",
243 },
244 {
245 name: "styles",
246 title: __("Style", "betterdocs"),
247 className: "eb-tab styles",
248 },
249 ]}
250 >
251 {(tab) => (
252 <div className={"eb-tab-controls " + tab.name}>
253 {tab.name === "general" && (
254 <>
255 <PanelBody
256 title={__("Query", "betterdocs")}
257 >
258 {applyFilters("selectKnowledgeBase", '', attributes, setAttributes)}
259 <BaseControl>
260 <h3 className="eb-control-title">
261 {__("Include", "betterdocs")}
262 </h3>
263 </BaseControl>
264 <Select
265 name="include_categories"
266 value={
267 includeCategories &&
268 JSON.parse(includeCategories)
269 }
270 onChange={handleIncludeCategories}
271 options={
272 docCategories &&
273 docCategories.map(
274 (category) => ({
275 value: category.id,
276 label: decodeEntities(category.name),
277 }),
278 )
279 }
280 isMulti="true"
281 />
282 <BaseControl>
283 <h3 className="eb-control-title">
284 {__("Exclude", "betterdocs")}
285 </h3>
286 </BaseControl>
287 <Select
288 name="exclude_categories"
289 value={
290 excludeCategories &&
291 JSON.parse(excludeCategories)
292 }
293 onChange={handleExcludeCategories}
294 options={
295 docCategories &&
296 docCategories.map(
297 (category) => ({
298 value: category.id,
299 label: decodeEntities(category.name),
300 }),
301 )
302 }
303 isMulti="true"
304 />
305 {/* <TextControl
306 label={__(
307 "Terms Per Page",
308 "betterdocs"
309 )}
310 type="number"
311 value={terms_per_page}
312 onChange={(value) => {
313 setAttributes({
314 terms_per_page:
315 value != ""
316 ? parseInt(value)
317 : 10,
318 });
319 }}
320 /> */}
321 <SelectControl
322 label={__(
323 "Terms Order By",
324 "betterdocs",
325 )}
326 value={terms_orderby}
327 options={
328 BETTERDOCS_SIDEBAR_TERMS_ORDERBY
329 }
330 onChange={(value) => {
331 setAttributes({
332 terms_orderby: value,
333 // postsOrderBy:
334 // value != "name" &&
335 // value != "count" &&
336 // value !=
337 // "doc_category_order"
338 // ? value
339 // : "title",
340 });
341 if( value == 'doc_category_order' ){
342 setAttributes({
343 terms_order:'asc'
344 })
345 }
346 }}
347 />
348 {terms_orderby !='doc_category_order' && <SelectControl
349 label={__(
350 "Terms Order",
351 "betterdocs",
352 )}
353 value={terms_order}
354 options={
355 BETTERDOCS_SIDEBAR_TERMS_ORDER
356 }
357 onChange={(value) =>
358 {terms_orderby == 'doc_category_order'? setAttributes({
359 terms_order: 'asc',
360 postsOrder: 'asc',
361 }) : setAttributes({
362 terms_order: value,
363 postsOrder: value,
364 })}
365 }
366 />}
367 <SelectControl
368 label={__("Order By", "betterdocs")}
369 value={postsOrderBy}
370 options={POSTS_ORDER_BY}
371 onChange={(newPostsOrderBy) =>
372 setAttributes({
373 postsOrderBy: newPostsOrderBy,
374 })
375 }
376 />
377 {postsOrderBy != 'betterdocs_order' && <SelectControl
378 label={__("Order", "betterdocs")}
379 value={postsOrder}
380 options={POSTS_ORDER}
381 onChange={(newPostsOrder) =>
382 setAttributes({
383 postsOrder: newPostsOrder,
384 })
385 }
386 />}
387 <ToggleControl
388 label={__(
389 "Enable Nested Subcategory",
390 "betterdocs",
391 )}
392 checked={enableNestedSubcategory}
393 onChange={(value) => {
394 setAttributes({
395 enableNestedSubcategory:
396 value,
397 });
398 }}
399 />
400 <ToggleControl
401 label={__(
402 "Lazy Load Docs & Subcategories",
403 "betterdocs",
404 )}
405 help={__(
406 "Render only the active category upfront; fetch the rest on click (or scroll for the Memphis layout).",
407 "betterdocs",
408 )}
409 checked={enableLazyLoad}
410 onChange={(value) => {
411 setAttributes({
412 enableLazyLoad: value,
413 });
414 }}
415 />
416 {/* <TextControl
417 label={__("Docs Per Page", "betterdocs")}
418 type="number"
419 value={docs_per_page}
420 onChange={(value) => {
421 setAttributes({
422 docs_per_page: value != '' ? parseInt(value) : 10,
423 });
424 }}
425 />
426 <SelectControl
427 label={__("Docs Order By", "betterdocs")}
428 value={docs_orderby}
429 options={BETTERDOCS_SIDEBAR_DOCS_ORDERBY}
430 onChange={(value) =>
431 setAttributes({
432 docs_orderby: value,
433 })
434 }
435 />
436 <SelectControl
437 label={__("Docs Order", "betterdocs")}
438 value={docs_order}
439 options={BETTERDOCS_SIDEBAR_DOCS_ORDER}
440 onChange={(value) =>
441 setAttributes({
442 docs_order: value,
443 })
444 }
445 />
446 */}
447 {/* { enable_nested_subcategory && (
448 <TextControl
449 label={__("Docs Per Subcategory", "betterdocs")}
450 type="number"
451 value={docs_per_subcategory}
452 onChange={(value) => {
453 setAttributes({
454 docs_per_subcategory: parseInt(value)
455 });
456 }}
457 />
458 )} */}
459 </PanelBody>
460 <PanelBody
461 title={__(
462 "Layout Setting",
463 "betterdocs",
464 )}
465 >
466 <SelectControl
467 label={__(
468 "Select Layout",
469 "betterdocs",
470 )}
471 value={sidebar_layout}
472 options={BETTERDOCS_SIDEBAR_LAYOUTS}
473 onChange={(newLayout) =>
474 setAttributes({
475 sidebar_layout: newLayout,
476 })
477 }
478 />
479 <SelectControl
480 label={__(
481 "Category Title Tag",
482 "betterdocs",
483 )}
484 value={titleTag}
485 options={[
486 {
487 label: __(
488 "H1",
489 "betterdocs",
490 ),
491 value: "h1",
492 },
493 {
494 label: __(
495 "H2",
496 "betterdocs",
497 ),
498 value: "h2",
499 },
500 {
501 label: __(
502 "H3",
503 "betterdocs",
504 ),
505 value: "h3",
506 },
507 {
508 label: __(
509 "H4",
510 "betterdocs",
511 ),
512 value: "h4",
513 },
514 {
515 label: __(
516 "H5",
517 "betterdocs",
518 ),
519 value: "h5",
520 },
521 {
522 label: __(
523 "H6",
524 "betterdocs",
525 ),
526 value: "h6",
527 },
528 {
529 label: __(
530 "Div",
531 "betterdocs",
532 ),
533 value: "div",
534 },
535 {
536 label: __(
537 "Nav",
538 "betterdocs",
539 ),
540 value: "nav",
541 },
542 {
543 label: __(
544 "P",
545 "betterdocs",
546 ),
547 value: "p",
548 },
549 ]}
550 onChange={(newTag) =>
551 setAttributes({
552 titleTag: newTag,
553 })
554 }
555 />
556 </PanelBody>
557 {sidebar_layout == 'layout-7' && <PanelBody title={__(
558 "Search Box Initial Query",
559 "betterdocs",
560 )}>
561 <SelectControl
562 label={__("Select Docs Type", "betterdocs")}
563 value={docQueryType}
564 options={ [
565 { label: __("Popular Docs", "betterdocs"), value: "popular-docs" },
566 { label: __("Specific Doc Id's", "betterdocs"), value: "specific-doc-ids" },
567 { label: __("Specific Doc Term Id's", "betterdocs"), value: "specific-doc-term-ids" },
568 ]}
569 onChange={(newLayout) =>
570 setAttributes({
571 docQueryType: newLayout,
572 })
573 }
574 />
575 {docQueryType == 'popular-docs' && <TextControl
576 label={__("Number of Docs", "betterdocs")}
577 type="number"
578 value={initialDocsQueryNumber}
579 min={1}
580 onChange={(value) => {
581 setAttributes({
582 initialDocsQueryNumber: parseInt(value),
583 });
584 }}
585 />}
586 {docQueryType == 'specific-doc-ids' &&
587 <TextControl
588 label={__("Doc Id's", "betterdocs")}
589 type="text"
590 value={searchModalQueryDocIds}
591 placeholder={__('E.g: 15, 16')}
592 onChange={(value) => {
593 setAttributes({
594 searchModalQueryDocIds: value,
595 });
596 }}
597 />
598 }
599 {docQueryType == 'specific-doc-term-ids' && <TextControl
600 label={__("Doc Term Id's", "betterdocs")}
601 type="text"
602 value={searchModalQueryTermIds}
603 placeholder={__('E.g: 15, 16')}
604 onChange={(value) => {
605 setAttributes({
606 searchModalQueryTermIds: value,
607 });
608 }}
609 />
610 }
611 <SelectControl
612 label={__("Select FAQ Type", "betterdocs")}
613 value={faqQueryType}
614 options={ [
615 { label: __("Default", "betterdocs"), value: "default" },
616 { label: __("Specific FAQ Id's", "betterdocs"), value: "specific-faq-group-ids" }
617 ]}
618 onChange={(newLayout) =>
619 setAttributes({
620 faqQueryType: newLayout,
621 })
622 }
623 />
624 {faqQueryType == 'default' && <TextControl
625 label={__("Number of FAQ", "betterdocs")}
626 type="number"
627 min={1}
628 value={initialFAQQueryNumber}
629 onChange={(value) => {
630 setAttributes({
631 initialFAQQueryNumber: parseInt(value),
632 });
633 }}
634 />}
635 {faqQueryType == 'specific-faq-group-ids' &&
636 <TextControl
637 label={__("Faq Group Id's", "betterdocs")}
638 type="text"
639 value={searchModalQueriesFaqGroupIds}
640 placeholder={__('E.g: 8, 9')}
641 onChange={(value) => {
642 setAttributes({
643 searchModalQueriesFaqGroupIds: value,
644 });
645 }}
646 />
647 }
648 <Notice status="info" isDismissible={false}>
649 {__(
650 "Please note that these query changes will apply to the front end only.",
651 "betterdocs"
652 )}
653 </Notice>
654 <hr />
655 </PanelBody>}
656 </>
657 )}
658 {tab.name === "styles" && (
659 <>
660 <PanelBody title={__("Container Section", "betterdocs")}>
661 <ResponsiveDimensionsControl
662 baseLabel={__(
663 "Padding",
664 "betterdocs",
665 )}
666 resRequiredProps={resRequiredProps}
667 controlName={CONTAINER_PADDING}
668 />
669 <ResponsiveDimensionsControl
670 baseLabel={__(
671 "Margin",
672 "betterdocs",
673 )}
674 resRequiredProps={resRequiredProps}
675 controlName={CONTAINER_MARGIN}
676 />
677 <BackgroundControl
678 controlName={
679 CONTAINER_BACKGROUND
680 }
681 resRequiredProps={resRequiredProps}
682 noOverlay={true}
683 />
684 {/* <ResponsiveRangeController
685 baseLabel={__(
686 "Container Height",
687 "betterdocs",
688 )}
689 controlName={CONTAINER_HEIGHT}
690 resRequiredProps={resRequiredProps}
691 min={1}
692 max={1000}
693 step={1}
694 /> */}
695 <ResponsiveRangeController
696 baseLabel={__(
697 "Container Width",
698 "betterdocs",
699 )}
700 controlName={CONTAINER_WIDTH}
701 resRequiredProps={resRequiredProps}
702 min={1}
703 max={1000}
704 step={1}
705 />
706 </PanelBody>
707 <PanelBody title={__("Box", "betterdocs")}>
708 <ResponsiveDimensionsControl
709 baseLabel={__(
710 "Box Padding",
711 "betterdocs",
712 )}
713 resRequiredProps={resRequiredProps}
714 controlName={sidebar_layout == 'layout-7' ? BOX_PADDING_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_PADDING_LAYOUT_8 : BOX_PADDING_LAYOUT_1)}
715 />
716 <ResponsiveDimensionsControl
717 baseLabel={__(
718 "Box Margin",
719 "betterdocs",
720 )}
721 resRequiredProps={resRequiredProps}
722 controlName={sidebar_layout == 'layout-7' ? BOX_MARGIN_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_MARGIN_LAYOUT_8 : BOX_MARGIN_LAYOUT_1)}
723 />
724 {/* <ResponsiveRangeController
725 baseLabel={__(
726 "Box Height",
727 "betterdocs",
728 )}
729 controlName={BOX_HEIGHT_LAYOUT_1}
730 resRequiredProps={resRequiredProps}
731 min={1}
732 max={1000}
733 step={1}
734 /> */}
735 <ResponsiveRangeController
736 baseLabel={__(
737 "Box Width",
738 "betterdocs",
739 )}
740 controlName={sidebar_layout == 'layout-7' ? BOX_WIDTH_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_WIDTH_LAYOUT_8 : BOX_WIDTH_LAYOUT_1)}
741 resRequiredProps={resRequiredProps}
742 min={1}
743 max={1000}
744 step={1}
745 />
746 {sidebar_layout !== 'layout-8' && <ResponsiveRangeController
747 baseLabel={sidebar_layout != 'layout-7' ? __("Box Icon Size", "betterdocs") : __("Outer Width", "betterdocs")}
748 controlName={sidebar_layout != 'layout-7' ? BOX_IMG_SIZE_LAYOUT_1 : BOX_IMG_SIZE_LAYOUT_7}
749 resRequiredProps={resRequiredProps}
750 min={1}
751 max={100}
752 step={1}
753 />}
754 {sidebar_layout == 'layout-7' && <ResponsiveRangeController
755 baseLabel={__("Outer Height", "betterdocs")}
756 controlName={BOX_IMG_SIZE_LAYOUT_7_HEIGHT}
757 resRequiredProps={resRequiredProps}
758 min={1}
759 max={100}
760 step={1}
761 />}
762 {
763 sidebar_layout == 'layout-7' &&
764 <>
765 <ResponsiveRangeController
766 baseLabel={__(
767 "Inner Width",
768 "betterdocs",
769 )}
770 controlName={
771 SIDEBAR_SEARCH_IMAGE_SIZE_WIDTH_LAYOUT_7
772 }
773 resRequiredProps={resRequiredProps}
774 />
775 <ResponsiveRangeController
776 baseLabel={__(
777 "Inner Height",
778 "betterdocs",
779 )}
780 controlName={
781 SIDEBAR_SEARCH_IMAGE_SIZE_HEIGHT_LAYOUT_7
782 }
783 resRequiredProps={resRequiredProps}
784 />
785 </>
786 }
787 <BaseControl>
788 <h3 className="eb-control-title">
789 {__("Background", "betterdocs")}
790 </h3>
791 </BaseControl>
792 <BackgroundControl
793 controlName={
794 sidebar_layout == 'layout-7' ? BOX_TITLE_BACKGROUND_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_TITLE_BACKGROUND_LAYOUT_8 : BOX_TITLE_BACKGROUND_LAYOUT_1)
795 }
796 resRequiredProps={resRequiredProps}
797 noOverlay={true}
798 />
799 <BaseControl>
800 <h3 className="eb-control-title">
801 {__("Border", "betterdocs")}
802 </h3>
803 </BaseControl>
804 <BorderShadowControl
805 controlName={ sidebar_layout == 'layout-7' ? BOX_SHADOW_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_SHADOW_LAYOUT_8 : BOX_SHADOW_LAYOUT_1)}
806 noShadow={true}
807 resRequiredProps={resRequiredProps}
808 />
809 </PanelBody>
810 <PanelBody
811 title={__("Title", "betterdocs")}
812 >
813 <ColorControl
814 label={__("Color", "betterdocs")}
815 color={sidebar_layout == 'layout-7' ? box_title_color_layout_7 : (sidebar_layout == 'layout-8' ? box_title_color_layout_8 : box_title_color_layout_1)}
816 onChange={(value) => {
817 if( sidebar_layout == 'layout-7' ) {
818 setAttributes({
819 box_title_color_layout_7:
820 value,
821 })
822 } else if( sidebar_layout == 'layout-8' ) {
823 setAttributes({
824 box_title_color_layout_8:
825 value,
826 })
827 } else {
828 setAttributes({
829 box_title_color_layout_1:
830 value,
831 })
832 }
833 }}
834 />
835 {(sidebar_layout == 'layout-1' || sidebar_layout == 'layout-3' || sidebar_layout == 'layout-5') &&
836 <>
837 <BaseControl>
838 <h3 className="eb-control-title">
839 {__("Active Background", "betterdocs")}
840 </h3>
841 </BaseControl>
842 <BackgroundControl
843 controlName={
844 BOX_ACTIVE_TITLE_BACKGROUND
845 }
846 resRequiredProps={resRequiredProps}
847 noOverlay={true}
848 />
849 </>
850 }
851 {(sidebar_layout == 'layout-1' || sidebar_layout == 'layout-5') && <ColorControl
852 label={__(
853 "Active Border Color",
854 "betterdocs",
855 )}
856 color={
857 box_title_active_border_color_layout_1
858 }
859 onChange={(value) =>
860 setAttributes({
861 box_title_active_border_color_layout_1:
862 value,
863 })
864 }
865 />}
866 <BaseControl>
867 <h3 className="eb-control-title">
868 {__("Background", "betterdocs")}
869 </h3>
870 </BaseControl>
871 <BackgroundControl
872 controlName={
873 sidebar_layout == 'layout-7' ? BOX_TITLE_BACKGROUND_7 : (sidebar_layout == 'layout-8' ? TITLE_BACKGROUND_LAYOUT_8 : BOX_TITLE_BACKGROUND)
874 }
875 resRequiredProps={resRequiredProps}
876 noOverlay={true}
877 />
878 <TypographyDropdown
879 baseLabel={__(
880 "Typography",
881 "betterdocs",
882 )}
883 typographyPrefixConstant={
884 sidebar_layout == 'layout-7' ? BOX_TITLE_TYPO_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_TITLE_TYPO_LAYOUT_8 : BOX_TITLE_TYPO_LAYOUT_1)
885 }
886 resRequiredProps={resRequiredProps}
887 defaultFontSize={16}
888 />
889 <ResponsiveDimensionsControl
890 baseLabel={__(
891 "Title Padding",
892 "betterdocs",
893 )}
894 resRequiredProps={resRequiredProps}
895 controlName={
896 sidebar_layout == 'layout-7' ? BOX_TITLE_PADDING_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_TITLE_PADDING_LAYOUT_8 : BOX_TITLE_PADDING_LAYOUT_1)
897 }
898 />
899 <ResponsiveDimensionsControl
900 baseLabel={__(
901 "Title Margin",
902 "betterdocs",
903 )}
904 resRequiredProps={resRequiredProps}
905 controlName={
906 sidebar_layout == 'layout-7' ? BOX_TITLE_MARGIN_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_TITLE_MARGIN_LAYOUT_8 : BOX_TITLE_MARGIN_LAYOUT_1)
907 }
908 />
909 {sidebar_layout != 'layout-8' && <>
910 <BaseControl>
911 <h3 className="eb-control-title">
912 {__("Border", "betterdocs")}
913 </h3>
914 </BaseControl>
915 <BorderShadowControl
916 controlName={
917 sidebar_layout == 'layout-7' ? BOX_TITLE_BORDER_LAYOUT_7 : BOX_TITLE_BORDER_LAYOUT_1
918 }
919 resRequiredProps={resRequiredProps}
920 noShadow={true}
921 noShdowHover={true}
922 />
923 </>}
924 {sidebar_layout == 'layout-6' &&
925 <>
926 <BaseControl>
927 <h3 className="eb-control-title">
928 {__("Active Title Border", "betterdocs")}
929 </h3>
930 </BaseControl>
931 <BorderShadowControl
932 controlName={
933 BOX_ACTIVE_TITLE_BORDER_WIDTH_LAYOUT_6
934 }
935 resRequiredProps={resRequiredProps}
936 noShadow={true}
937 noShdowHover={true}
938 noBdrHover={true}
939 />
940 <BaseControl>
941 <h3 className="eb-control-title">
942 {__("Active List Border", "betterdocs")}
943 </h3>
944 </BaseControl>
945 <BorderShadowControl
946 controlName={
947 BOX_ACTIVE_LIST_BORDER_WIDTH_LAYOUT_6
948 }
949 resRequiredProps={resRequiredProps}
950 noShadow={true}
951 noShdowHover={true}
952 noBdrHover={true}
953 />
954 </>
955 }
956 </PanelBody>
957
958 {/* Title Arrow Section for layouts 2, 3, and 8 */}
959 {(sidebar_layout == 'layout-2' || sidebar_layout == 'layout-3' || sidebar_layout == 'layout-8') && <PanelBody
960 title={__("Title Arrow", "betterdocs")}
961 initialOpen={true}
962 >
963 <ResponsiveRangeController
964 baseLabel={__("Arrow Size", "betterdocs")}
965 controlName={sidebar_layout == 'layout-2' ? TITLE_ARROW_ICON_SIZE_LAYOUT_2 : (sidebar_layout == 'layout-3' ? TITLE_ARROW_ICON_SIZE_LAYOUT_3 : TITLE_ARROW_ICON_SIZE_LAYOUT_8)}
966 resRequiredProps={resRequiredProps}
967 min={10}
968 max={50}
969 step={1}
970 />
971 <ColorControl
972 label={__("Arrow Color", "betterdocs")}
973 color={sidebar_layout == 'layout-2' ? title_arrow_color_layout_2 : (sidebar_layout == 'layout-3' ? title_arrow_color_layout_3 : title_arrow_color_layout_8)}
974 onChange={(value) => {
975 if (sidebar_layout == 'layout-2') {
976 setAttributes({ title_arrow_color_layout_2: value });
977 } else if (sidebar_layout == 'layout-3') {
978 setAttributes({ title_arrow_color_layout_3: value });
979 } else {
980 setAttributes({ title_arrow_color_layout_8: value });
981 }
982 }}
983 />
984 <ColorControl
985 label={__("Arrow Hover Color", "betterdocs")}
986 color={sidebar_layout == 'layout-2' ? title_arrow_hover_color_layout_2 : (sidebar_layout == 'layout-3' ? title_arrow_hover_color_layout_3 : title_arrow_hover_color_layout_8)}
987 onChange={(value) => {
988 if (sidebar_layout == 'layout-2') {
989 setAttributes({ title_arrow_hover_color_layout_2: value });
990 } else if (sidebar_layout == 'layout-3') {
991 setAttributes({ title_arrow_hover_color_layout_3: value });
992 } else {
993 setAttributes({ title_arrow_hover_color_layout_8: value });
994 }
995 }}
996 />
997 </PanelBody>}
998
999 {(sidebar_layout == 'layout-1' || sidebar_layout == 'layout-6' || sidebar_layout == 'layout-7') && <PanelBody
1000 title={__("Count", "betterdocs")}
1001 >
1002 <TypographyDropdown
1003 baseLabel={__(
1004 "Typography",
1005 "betterdocs",
1006 )}
1007 typographyPrefixConstant={
1008 sidebar_layout == 'layout-7' ? BOX_COUNT_TYPO_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_COUNT_TYPO_LAYOUT_8 : BOX_COUNT_TYPO_LAYOUT_1)
1009 }
1010 resRequiredProps={resRequiredProps}
1011 />
1012 <BackgroundControl
1013 controlName={
1014 (sidebar_layout == 'layout-1' ? BOX_COUNT_BACKGROUND_LAYOUT_1 : ( sidebar_layout == 'layout-6' ? BOX_COUNT_BACKGROUND_LAYOUT_6 : ( sidebar_layout == 'layout-7' ? BOX_COUNT_BACKGROUND_LAYOUT_7 : BOX_COUNT_BACKGROUND_LAYOUT_8 )))
1015 }
1016 resRequiredProps={resRequiredProps}
1017 noOverlay={true}
1018 />
1019 {sidebar_layout == 'layout-6' &&
1020 <>
1021 <BaseControl>
1022 <h3 className="eb-control-title">
1023 {__("Active Background Color", "betterdocs")}
1024 </h3>
1025 </BaseControl>
1026 <BackgroundControl
1027 controlName={
1028 BOX_COUNT_ACTIVE_BACKGROUND_COLOR_LAYOUT_6
1029 }
1030 resRequiredProps={resRequiredProps}
1031 noOverlay={true}
1032 />
1033 </>
1034 }
1035 <ColorControl
1036 label={__("Color", "betterdocs")}
1037 color={sidebar_layout == 'layout-1' ? box_layout_1_count_color : ( sidebar_layout == 'layout-6' ? box_layout_6_count_color : ( sidebar_layout == 'layout-7' ? box_layout_7_count_color : box_layout_8_count_color )) }
1038 onChange={(value) => {
1039 if(sidebar_layout == 'layout-1') {
1040 setAttributes({
1041 box_layout_1_count_color:
1042 value,
1043 });
1044 } else if( sidebar_layout == 'layout-6' ) {
1045 setAttributes({
1046 box_layout_6_count_color:
1047 value,
1048 });
1049 } else if( sidebar_layout == 'layout-7' ) {
1050 setAttributes({
1051 box_layout_7_count_color:
1052 value,
1053 });
1054 } else {
1055 setAttributes({
1056 box_layout_8_count_color:
1057 value,
1058 });
1059 }
1060 }}
1061 />
1062 {sidebar_layout == 'layout-6' && <ColorControl
1063 label={__("Active Color", "betterdocs")}
1064 color={box_layout_6_count_active_color}
1065 onChange={(value) => {
1066 setAttributes({
1067 box_layout_6_count_active_color:
1068 value,
1069 });
1070 }}
1071 />}
1072 {sidebar_layout != 'layout-8' && <BorderShadowControl
1073 controlName={
1074 sidebar_layout == 'layout-1' ? BOX_COUNT_BORDER_LAYOUT_1 : ( sidebar_layout == 'layout-6' ? BOX_COUNT_BORDER_LAYOUT_6 : BOX_COUNT_BORDER_LAYOUT_7 )
1075 }
1076 resRequiredProps={resRequiredProps}
1077 noShadow={true}
1078 noShdowHover={true}
1079 />}
1080 </PanelBody>}
1081 <PanelBody
1082 title={__("Doc List", "betterdocs")}
1083 >
1084 <TypographyDropdown
1085 baseLabel={__(
1086 "Typography",
1087 "betterdocs",
1088 )}
1089 typographyPrefixConstant={
1090 sidebar_layout == 'layout-7' ? BOX_DOC_LIST_TYPO_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_DOC_LIST_TYPO_LAYOUT_8 : BOX_DOC_LIST_TYPO_LAYOUT_1)
1091 }
1092 resRequiredProps={resRequiredProps}
1093 />
1094 <BackgroundControl
1095 controlName={
1096 BOX_DOC_LIST_BACKGROUND_COLOR
1097 }
1098 resRequiredProps={resRequiredProps}
1099 noOverlay={true}
1100 />
1101 <ColorControl
1102 label={__(
1103 "List Color",
1104 "betterdocs",
1105 )}
1106 color={ sidebar_layout == 'layout-7' ? box_doc_List_color_layout_7 : (sidebar_layout == 'layout-8' ? box_doc_List_color_layout_8 : box_doc_List_color_layout_1)}
1107 onChange={(value) =>{
1108 if( sidebar_layout == 'layout-7' ) {
1109 setAttributes({
1110 box_doc_List_color_layout_7:
1111 value,
1112 })
1113 } else if( sidebar_layout == 'layout-8' ) {
1114 setAttributes({
1115 box_doc_List_color_layout_8:
1116 value,
1117 })
1118 } else {
1119 setAttributes({
1120 box_doc_List_color_layout_1:
1121 value,
1122 })
1123 }
1124 }}
1125 />
1126 <ColorControl
1127 label={__(
1128 "List Hover Color",
1129 "betterdocs",
1130 )}
1131 color={
1132 sidebar_layout == 'layout-7' ? box_doc_List_hover_color_layout_7 : (sidebar_layout == 'layout-8' ? box_doc_List_hover_color_layout_8 : box_doc_List_hover_color_layout_1)
1133 }
1134 onChange={(value) => {
1135 if( sidebar_layout == 'layout-7' ) {
1136 setAttributes({
1137 box_doc_List_hover_color_layout_7:
1138 value,
1139 })
1140 } else if( sidebar_layout == 'layout-8' ) {
1141 setAttributes({
1142 box_doc_List_hover_color_layout_8:
1143 value,
1144 })
1145 } else {
1146 setAttributes({
1147 box_doc_List_hover_color_layout_1:
1148 value,
1149 })
1150 }
1151 }}
1152 />
1153 {sidebar_layout == 'layout-8' && <ColorControl
1154 label={__(
1155 "List Hover Background Color",
1156 "betterdocs",
1157 )}
1158 color={box_doc_List_hover_bg_color_layout_8}
1159 onChange={(value) => {
1160 setAttributes({
1161 box_doc_List_hover_bg_color_layout_8: value,
1162 })
1163 }}
1164 />}
1165 <ResponsiveDimensionsControl
1166 baseLabel={__(
1167 "List Padding",
1168 "betterdocs",
1169 )}
1170 resRequiredProps={resRequiredProps}
1171 controlName={
1172 sidebar_layout == 'layout-7' ? BOX_DOC_LIST_PADDING_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_DOC_LIST_PADDING_LAYOUT_8 : BOX_DOC_LIST_PADDING_LAYOUT_1)
1173 }
1174 />
1175 <ResponsiveDimensionsControl
1176 baseLabel={__(
1177 "List Margin",
1178 "betterdocs",
1179 )}
1180 resRequiredProps={resRequiredProps}
1181 controlName={
1182 sidebar_layout == 'layout-7' ? BOX_DOC_LIST_MARGIN_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_DOC_LIST_MARGIN_LAYOUT_8 : BOX_DOC_LIST_MARGIN_LAYOUT_1)
1183 }
1184 />
1185 {(sidebar_layout != 'layout-7' && sidebar_layout != 'layout-8') && <MediaPlaceholder
1186 onSelect={(image) => {
1187 setAttributes({
1188 listIconImageUrl:image?.url
1189 })
1190 }}
1191 value={listIconImageUrl}
1192 accept="image/*"
1193 allowedTypes={["image"]}
1194 mediaLibraryButton={({ open }) => {
1195 return (
1196 <>
1197 <Button
1198 icon={upload}
1199 variant="primary"
1200 label={__('Add image from media')}
1201 showTooltip
1202 tooltipPosition="top center"
1203 onClick={() => {
1204 open();
1205 }}
1206 />
1207 {listIconImageUrl?.length > 0 && <div className="preview-wrapper-controller" style={{position:'relative'}}>
1208 <img src={listIconImageUrl} />
1209 <div className="preview-wrapper" style={{position:'absolute', top:'0px', right:'0px', height:'30px', width:'30px', backgroundColor:'#1e1e1e', borderRadius:'5px', cursor:'pointer'}} onClick={(e) => {
1210 setAttributes({
1211 listIconImageUrl:''
1212 })
1213 }}>
1214 {cross()}
1215 </div>
1216 </div>}
1217 </>
1218 );
1219 }}
1220 labels={{
1221 title: "Upload Image",
1222 instructions:
1223 "Drag media file, upload or select image from your library.",
1224 }}
1225 />}
1226 {listIconImageUrl?.length == 0 && (sidebar_layout != 'layout-7' && sidebar_layout != 'layout-8') && <><BaseControl>
1227 <h3 className="eb-control-title">
1228 {__("List Icon", "betterdocs")}
1229 </h3>
1230 </BaseControl>
1231 <FontIconPicker
1232 icons={faIcons}
1233 value={listIcon}
1234 onChange={(listIcon) => setAttributes({ listIcon })}
1235 appendTo="body"
1236 closeOnSelect
1237 />
1238 <ColorControl
1239 label={__(
1240 "Icon Color",
1241 "betterdocs",
1242 )}
1243 color={
1244 box_doc_List_icon_color_layout_1
1245 }
1246 onChange={(value) =>
1247 setAttributes({
1248 box_doc_List_icon_color_layout_1:
1249 value,
1250 })
1251 }
1252 /></>}
1253 {sidebar_layout == 'layout-7' && <ResponsiveRangeController
1254 baseLabel={__(
1255 "Icon Size",
1256 "betterdocs",
1257 )}
1258 controlName={
1259 BOX_DOC_LIST_ICON_SIZE_LAYOUT_7
1260 }
1261 resRequiredProps={resRequiredProps}
1262 />}
1263 {(sidebar_layout != 'layout-7' && sidebar_layout != 'layout-8') && <><ResponsiveRangeController
1264 baseLabel={__(
1265 "Icon Size",
1266 "betterdocs",
1267 )}
1268 controlName={
1269 BOX_DOC_LIST_ICON_SIZE_LAYOUT_1
1270 }
1271 resRequiredProps={resRequiredProps}
1272 />
1273 <ResponsiveDimensionsControl
1274 baseLabel={__(
1275 "Icon Spacing",
1276 "betterdocs",
1277 )}
1278 resRequiredProps={resRequiredProps}
1279 controlName={
1280 BOX_DOC_LIST_ICON_SPACING_LAYOUT_1
1281 }
1282 /></>}
1283 </PanelBody>
1284 {enableNestedSubcategory && (
1285 <PanelBody
1286 title={__(
1287 "Nested Sub Category",
1288 "betterdocs",
1289 )}
1290 >
1291 <BaseControl>
1292 <h3 className="eb-control-title">
1293 {__(
1294 "Nested Sub Category Title",
1295 "betterdocs",
1296 )}
1297 </h3>
1298 </BaseControl>
1299 <ColorControl
1300 label={__(
1301 "Color",
1302 "betterdocs",
1303 )}
1304 color={
1305 sidebar_layout == 'layout-7' ? box_doc_sub_List_title_color_layout_7 : (sidebar_layout == 'layout-8' ? box_doc_sub_List_title_color_layout_8 : box_doc_sub_List_title_color_layout_1)
1306 }
1307 onChange={(value) => {
1308 if( sidebar_layout == 'layout-7' ) {
1309 setAttributes({
1310 box_doc_sub_List_title_color_layout_7:
1311 value,
1312 })
1313 } else if( sidebar_layout == 'layout-8' ) {
1314 setAttributes({
1315 box_doc_sub_List_title_color_layout_8:
1316 value,
1317 })
1318 } else {
1319 setAttributes({
1320 box_doc_sub_List_title_color_layout_1:
1321 value,
1322 })
1323 }
1324 }}
1325 />
1326 <ColorControl
1327 label={__(
1328 "Hover Color",
1329 "betterdocs",
1330 )}
1331 color={
1332 sidebar_layout == 'layout-7' ? box_doc_sub_List_title_hover_color_layout_7 : (sidebar_layout == 'layout-8' ? box_doc_sub_List_title_hover_color_layout_8 : box_doc_sub_List_title_hover_color_layout_1)
1333 }
1334 onChange={(value) => {
1335 if( sidebar_layout == 'layout-7' ){
1336 setAttributes({
1337 box_doc_sub_List_title_hover_color_layout_7:
1338 value,
1339 })
1340 } else if( sidebar_layout == 'layout-8' ){
1341 setAttributes({
1342 box_doc_sub_List_title_hover_color_layout_8:
1343 value,
1344 })
1345 } else {
1346 setAttributes({
1347 box_doc_sub_List_title_hover_color_layout_1:
1348 value,
1349 })
1350 }
1351 }}
1352 />
1353 <TypographyDropdown
1354 baseLabel={__(
1355 "Typography",
1356 "betterdocs",
1357 )}
1358 typographyPrefixConstant={
1359 sidebar_layout == 'layout-7' ? BOX_DOC_SUB_LIST_TITLE_TYPO_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_DOC_SUB_LIST_TITLE_TYPO_LAYOUT_8 : BOX_DOC_SUB_LIST_TITLE_TYPO_LAYOUT_1)
1360 }
1361 resRequiredProps={
1362 resRequiredProps
1363 }
1364 />
1365 <BaseControl>
1366 <h3 className="eb-control-title">
1367 {__(
1368 "Nested Subcategory List",
1369 "betterdocs",
1370 )}
1371 </h3>
1372 </BaseControl>
1373 <TypographyDropdown
1374 baseLabel={__(
1375 "Typography",
1376 "betterdocs",
1377 )}
1378 typographyPrefixConstant={
1379 sidebar_layout == 'layout-7' ? BOX_DOC_SUB_LIST_TYPO_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_DOC_SUB_LIST_TYPO_LAYOUT_8 : BOX_DOC_SUB_LIST_TYPO_LAYOUT_1)
1380 }
1381 resRequiredProps={
1382 resRequiredProps
1383 }
1384 />
1385 <ColorControl
1386 label={__(
1387 "Sub List Color",
1388 "betterdocs",
1389 )}
1390 color={
1391 sidebar_layout == 'layout-7' ? box_doc_sub_List_color_layout_7 : (sidebar_layout == 'layout-8' ? box_doc_sub_List_color_layout_8 : box_doc_sub_List_color_layout_1)
1392 }
1393 onChange={(value) => {
1394 if( sidebar_layout == 'layout-7' ) {
1395 setAttributes({
1396 box_doc_sub_List_color_layout_7:
1397 value,
1398 })
1399 } else if( sidebar_layout == 'layout-8' ) {
1400 setAttributes({
1401 box_doc_sub_List_color_layout_8:
1402 value,
1403 })
1404 } else {
1405 setAttributes({
1406 box_doc_sub_List_color_layout_1:
1407 value,
1408 })
1409 }
1410 }}
1411 />
1412 <ColorControl
1413 label={__(
1414 "Sub List Hover Color",
1415 "betterdocs",
1416 )}
1417 color={
1418 sidebar_layout == 'layout-7' ? box_doc_sub_List_hover_color_layout_7 : (sidebar_layout == 'layout-8' ? box_doc_sub_List_hover_color_layout_8 : box_doc_sub_List_hover_color_layout_1)
1419 }
1420 onChange={(value) => {
1421 if( sidebar_layout == 'layout-7' ){
1422 setAttributes({
1423 box_doc_sub_List_hover_color_layout_7:
1424 value,
1425 })
1426 } else if( sidebar_layout == 'layout-8' ){
1427 setAttributes({
1428 box_doc_sub_List_hover_color_layout_8:
1429 value,
1430 })
1431 } else {
1432 setAttributes({
1433 box_doc_sub_List_hover_color_layout_1:
1434 value,
1435 })
1436 }
1437 }}
1438 />
1439 <ResponsiveRangeController
1440 baseLabel={__(
1441 "Icon Size",
1442 "betterdocs",
1443 )}
1444 controlName={
1445 sidebar_layout == 'layout-7' ? BOX_DOC_LIST_SUB_ICON_SIZE_LAYOUT_7 : (sidebar_layout == 'layout-8' ? BOX_DOC_LIST_SUB_ICON_SIZE_LAYOUT_8 : BOX_DOC_LIST_SUB_ICON_SIZE_LAYOUT_1)
1446 }
1447 resRequiredProps={
1448 resRequiredProps
1449 }
1450 min={1}
1451 max={100}
1452 step={1}
1453 />
1454 <BaseControl>
1455 <h3 className="eb-control-title">
1456 {__("Nested Subcategory Arrow", "betterdocs")}
1457 </h3>
1458 </BaseControl>
1459 <ResponsiveRangeController
1460 baseLabel={__("Arrow Size", "betterdocs")}
1461 controlName={DOC_SUB_LIST_ARROW_ICON_SIZE}
1462 resRequiredProps={resRequiredProps}
1463 min={8}
1464 max={30}
1465 step={1}
1466 />
1467 <ColorControl
1468 label={__("Arrow Color", "betterdocs")}
1469 color={doc_sub_list_arrow_color}
1470 onChange={(value) =>
1471 setAttributes({
1472 doc_sub_list_arrow_color: value,
1473 })
1474 }
1475 />
1476 <ColorControl
1477 label={__("Arrow Hover Color", "betterdocs")}
1478 color={doc_sub_list_arrow_hover_color}
1479 onChange={(value) =>
1480 setAttributes({
1481 doc_sub_list_arrow_hover_color: value,
1482 })
1483 }
1484 />
1485 </PanelBody>
1486 )}
1487 {(sidebar_layout != 'layout-7' && sidebar_layout != 'layout-8') && <PanelBody title={__("Sticky TOC", "betterdocs")}>
1488 <ToggleControl
1489 label={__(
1490 "Enable Sticky TOC",
1491 "betterdocs"
1492 )}
1493 checked={enableStickyTOC}
1494 onChange={(value) => {
1495 setAttributes({
1496 enableStickyTOC:
1497 value,
1498 });
1499 }}
1500 />
1501 <ResponsiveRangeController
1502 baseLabel={__("TOC Width", "betterdocs")}
1503 controlName={STICKY_TOC_WIDTH}
1504 resRequiredProps={resRequiredProps}
1505 min={1}
1506 max={500}
1507 step={1}
1508 />
1509 <TextControl
1510 label={__("Z-Index", "betterdocs")}
1511 type="number"
1512 value={stickyTOCZIndex}
1513 onChange={(value) => {
1514 setAttributes({
1515 stickyTOCZIndex: parseInt(value),
1516 });
1517 }}
1518 />
1519 </PanelBody>}
1520 {sidebar_layout == 'layout-7' && <>
1521 <PanelBody
1522 title={__("Sidebar Search", "betterdocs")}
1523 >
1524 <TypographyDropdown
1525 baseLabel={__(
1526 "Typography",
1527 "betterdocs",
1528 )}
1529 typographyPrefixConstant={
1530 SIDEBAR_SEARCH_LAYOUT_7_TYPO
1531 }
1532 resRequiredProps={resRequiredProps}
1533 defaultFontSize={16}
1534 />
1535 <ColorControl
1536 label={__(
1537 "Color",
1538 "betterdocs",
1539 )}
1540 color={
1541 sidebar_search_layout_7_placeholder_color
1542 }
1543 onChange={(value) => {
1544 setAttributes({
1545 sidebar_search_layout_7_placeholder_color:
1546 value,
1547 })
1548 }}
1549 />
1550 <BackgroundControl
1551 controlName={
1552 SIDEBAR_SEARCH_BACKGROUND_LAYOUT_7
1553 }
1554 resRequiredProps={resRequiredProps}
1555 noOverlay={true}
1556 />
1557 <ResponsiveRangeController
1558 baseLabel={__("Height", "betterdocs")}
1559 controlName={SIDEBAR_SEARCH_MAGNIFIER_SEARCH_LAYOUT_7_HEIGHT}
1560 resRequiredProps={resRequiredProps}
1561 min={1}
1562 max={100}
1563 step={1}
1564 />
1565 <ResponsiveRangeController
1566 baseLabel={__("Width", "betterdocs")}
1567 controlName={SIDEBAR_SEARCH_MAGNIFIER_SEARCH_LAYOUT_7_WIDTH}
1568 resRequiredProps={resRequiredProps}
1569 min={1}
1570 max={100}
1571 step={1}
1572 />
1573 </PanelBody>
1574 <PanelBody
1575 title={__("Sidebar Search Modal", "betterdocs")}
1576 >
1577 <BaseControl>
1578 <h3 className="eb-control-title">
1579 {__("Search Field", "betterdocs")}
1580 </h3>
1581 </BaseControl>
1582 <ColorControl
1583 label={__("Magnifier Color", "betterdocs")}
1584 color={sidebarSearchModalMagnifierColor}
1585 onChange={(value) => {
1586 setAttributes({sidebarSearchModalMagnifierColor:value})
1587 }}
1588 />
1589 <BackgroundControl
1590 controlName={
1591 SEARCH_MODAL_FIELD_BACKGROUND
1592 }
1593 resRequiredProps={resRequiredProps}
1594 noOverlay={true}
1595 />
1596 <TypographyDropdown
1597 baseLabel={__(
1598 "Typography",
1599 "betterdocs",
1600 )}
1601 typographyPrefixConstant={
1602 SEARCH_MODAL_FIELD_TYPO
1603 }
1604 resRequiredProps={resRequiredProps}
1605 defaultFontSize={16}
1606 />
1607 <ColorControl
1608 label={__("Field Color", "betterdocs")}
1609 color={sidebarSearchModalFieldColor}
1610 onChange={(value) => {
1611 setAttributes({sidebarSearchModalFieldColor:value})
1612 }}
1613 />
1614 <ColorControl
1615 label={__("Field Placeholder Color", "betterdocs")}
1616 color={sidebarSearchModalFieldPlaceholderColor}
1617 onChange={(value) => {
1618 setAttributes({sidebarSearchModalFieldPlaceholderColor:value})
1619 }}
1620 />
1621 <BaseControl>
1622 <h3 className="eb-control-title">
1623 {__("Search Category", "betterdocs")}
1624 </h3>
1625 </BaseControl>
1626 <ColorControl
1627 label={__("Color", "betterdocs")}
1628 color={sidebarSearchModalCategoryColor}
1629 onChange={(value) => {
1630 setAttributes({sidebarSearchModalCategoryColor:value})
1631 }}
1632 />
1633 <TypographyDropdown
1634 baseLabel={__(
1635 "Typography",
1636 "betterdocs",
1637 )}
1638 typographyPrefixConstant={
1639 SEARCH_MODAL_CATEGORY_FIELD_TYPO
1640 }
1641 resRequiredProps={resRequiredProps}
1642 defaultFontSize={16}
1643 />
1644 <BaseControl>
1645 <h3 className="eb-control-title">
1646 {__("Content Tabs", "betterdocs")}
1647 </h3>
1648 </BaseControl>
1649 <TypographyDropdown
1650 baseLabel={__(
1651 "Typography",
1652 "betterdocs",
1653 )}
1654 typographyPrefixConstant={
1655 SEARCH_MODAL_CONTENT_TABS_TYPO
1656 }
1657 resRequiredProps={resRequiredProps}
1658 defaultFontSize={16}
1659 />
1660 <ResponsiveRangeController
1661 baseLabel={__("Icon Height", "betterdocs")}
1662 controlName={SEARCH_MODAL_CONTENT_TABS_ICON_SIZE_HEIGHT}
1663 resRequiredProps={resRequiredProps}
1664 min={1}
1665 max={100}
1666 step={1}
1667 />
1668 <ResponsiveRangeController
1669 baseLabel={__("Icon Width", "betterdocs")}
1670 controlName={SEARCH_MODAL_CONTENT_TABS_ICON_SIZE_WIDTH}
1671 resRequiredProps={resRequiredProps}
1672 min={1}
1673 max={100}
1674 step={1}
1675 />
1676 <BorderShadowControl
1677 controlName={SEARCH_MODAL_CONTENT_TABS_BORDER}
1678 resRequiredProps={resRequiredProps}
1679 noShadow={true}
1680 noShdowHover={true}
1681 />
1682 <BaseControl>
1683 <h3 className="eb-control-title">
1684 {__("Content List", "betterdocs")}
1685 </h3>
1686 </BaseControl>
1687 <TypographyDropdown
1688 baseLabel={__(
1689 "Typography",
1690 "betterdocs",
1691 )}
1692 typographyPrefixConstant={
1693 SEARCH_MODAL_CONTENT_TABS_LIST_TYPO
1694 }
1695 resRequiredProps={resRequiredProps}
1696 defaultFontSize={16}
1697 />
1698 <ColorControl
1699 label={__("Color", "betterdocs")}
1700 color={sidebarSearchModalContentTabsListColor}
1701 onChange={(value) => {
1702 setAttributes({sidebarSearchModalContentTabsListColor:value})
1703 }}
1704 />
1705 <ResponsiveRangeController
1706 baseLabel={__("Icon Size", "betterdocs")}
1707 controlName={SEARCH_MODAL_CONTENT_TABS_LIST_ICON_SIZE}
1708 resRequiredProps={resRequiredProps}
1709 min={1}
1710 max={100}
1711 step={1}
1712 />
1713 <BorderShadowControl
1714 controlName={SEARCH_MODAL_CONTENT_TABS_LIST_BORDER}
1715 resRequiredProps={resRequiredProps}
1716 noShadow={true}
1717 noShdowHover={true}
1718 />
1719 <BaseControl>
1720 <h3 className="eb-control-title">
1721 {__("Content List Category", "betterdocs")}
1722 </h3>
1723 </BaseControl>
1724 <TypographyDropdown
1725 baseLabel={__(
1726 "Typography",
1727 "betterdocs",
1728 )}
1729 typographyPrefixConstant={
1730 SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_TYPO
1731 }
1732 resRequiredProps={resRequiredProps}
1733 defaultFontSize={16}
1734 />
1735 <ColorControl
1736 label={__("Color", "betterdocs")}
1737 color={sidebarSearchModalContentTabsListCategoryColor}
1738 onChange={(value) => {
1739 setAttributes({sidebarSearchModalContentTabsListCategoryColor:value})
1740 }}
1741 />
1742 <ResponsiveRangeController
1743 baseLabel={__("Icon Size", "betterdocs")}
1744 controlName={SEARCH_MODAL_CONTENT_TABS_LIST_CATEGORY_ICON_SIZE}
1745 resRequiredProps={resRequiredProps}
1746 min={1}
1747 max={100}
1748 step={1}
1749 />
1750 </PanelBody>
1751 </>}
1752 </>
1753 )}
1754 </div>
1755 )}
1756 </TabPanel>
1757 </div>
1758 </InspectorControls>
1759 );
1760 };
1761
1762 export default withSelect((select) => {
1763 return {
1764 docCategories: select("core").getEntityRecords(
1765 "taxonomy",
1766 "doc_category",
1767 {
1768 per_page: -1,
1769 },
1770 ),
1771 };
1772 })(Inspector);
1773