betterdocs / includes / elementor / widgets / betterdocs-elementor-sidebar.php

betterdocs-elementor-sidebar.php in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 1.7.2, at includes/elementor/widgets/betterdocs-elementor-sidebar.php

1,391 lines 48.1 KB

Raw Download Zip

1	<?php
2
3	use Elementor\Controls_Manager;
4	use Elementor\Group_Control_Background;
5	use Elementor\Group_Control_Border as Group_Control_Border;
6	use Elementor\Group_Control_Box_Shadow as Group_Control_Box_Shadow;
7	use Elementor\Group_Control_Typography;
8	use Elementor\Widget_Base;
9
10	if (!defined('ABSPATH')) {
11	exit; // Exit if accessed directly
12	}
13
14	class BetterDocs_Elementor_Sidebar extends Widget_Base
15	{
16
17	public function get_name()
18	{
19	return 'betterdocs-sidebar';
20	}
21
22	public function get_title()
23	{
24	return __('Doc Sidebar', 'betterdocs');
25	}
26
27	public function get_icon()
28	{
29	return 'betterdocs-icon-Sidebar';
30	}
31
32	public function get_categories()
33	{
34	return ['betterdocs-elements', 'docs-archive'];
35	}
36
37	public function get_keywords()
38	{
39	return ['betterdocs-elements', 'sidebar', 'betterdocs', 'docs'];
40	}
41
42	public function get_custom_help_url()
43	{
44	return 'https://betterdocs.co/docs/single-doc-in-elementor';
45	}
46
47	protected function _register_controls()
48	{
49	do_action('betterdocs_elementor_sidebar_layout_select', $this);
50
51	$this->sidebar_layout_select();
52
53	if (!is_plugin_active('betterdocs-pro/betterdocs-pro.php')) {
54	$this->start_controls_section(
55	'betterdocs_section_pro',
56	[
57	'label' => __('Go Premium for More Features', 'betterdocs'),
58	]
59	);
60
61	$this->add_control(
62	'betterdocs_control_get_pro',
63	[
64	'label' => __('Unlock more possibilities', 'betterdocs'),
65	'type' => Controls_Manager::CHOOSE,
66	'options' => [
67	'1' => [
68	'title' => '',
69	'icon' => 'fa fa-unlock-alt',
70	],
71	],
72	'default' => '1',
73	'description' => '<span class="pro-feature"> Get the <a href="https://betterdocs.co/upgrade" target="_blank">Pro version</a> for more stunning layouts and customization options.</span>',
74	]
75	);
76
77	$this->end_controls_section();
78	}
79
80	$this->box_setting_style();
81
82	$this->icon_style();
83
84	$this->title_style();
85
86	$this->count_style();
87
88	$this->list_setting();
89
90	$this->sub_list_setting();
91
92	$this->sticky_toc();
93	}
94
95	public function sidebar_layout_select()
96	{
97	/**
98	* ----------------------------------------------------------
99	* Section: Select Layout
100	* ----------------------------------------------------------
101	*/
102	$this->start_controls_section(
103	'section_layout_settings',
104	[
105	'label' => __('Layout', 'betterdocs')
106	]
107	);
108
109	$this->add_control(
110	'betterdocs_sidebar_layout',
111	[
112	'label' => esc_html__('Select layout', 'betterdocs'),
113	'type' => Controls_Manager::SELECT,
114	'default' => 'layout-1',
115	'label_block' => false,
116	'options' => [
117	'layout-1' => esc_html__('Layout 1', 'betterdocs'),
118	'layout-2' => esc_html__('Layout 2', 'betterdocs'),
119	'layout-3' => esc_html__('Layout 3', 'betterdocs'),
120	],
121	]
122	);
123
124	if (!is_plugin_active('betterdocs-pro/betterdocs-pro.php')) {
125	$this->add_control(
126	'betterdocs_sidebar_layout_warning_text',
127	[
128	'type' => Controls_Manager::RAW_HTML,
129	'raw' => __('This layout is available in pro version only!', 'betterdocs'),
130	'content_classes' => 'betterdocs-ea-warning',
131	'condition' => [
132	'betterdocs_sidebar_layout' => ['layout-2', 'layout-3'],
133	],
134	]
135	);
136	}
137
138
139	$this->end_controls_section(); # end of 'Select Layout'
140
141	}
142
143	public function sticky_toc()
144	{
145	/**
146	* ----------------------------------------------------------
147	* Section: Box Styles
148	* ----------------------------------------------------------
149	*/
150	$this->start_controls_section(
151	'section_sticky_toc',
152	[
153	'label' => __('Sticky TOC', 'betterdocs'),
154	'tab' => Controls_Manager::TAB_STYLE,
155	]
156	);
157
158	$this->add_control(
159	'enable_sticky_toc',
160	[
161	'label' => __('Enable Sticky TOC', 'betterdocs'),
162	'type' => Controls_Manager::SWITCHER,
163	'label_on' => __('Show', 'betterdocs'),
164	'label_off' => __('Hide', 'betterdocs'),
165	'return_value' => '1',
166	'default' => '',
167	]
168	);
169
170	$this->add_responsive_control(
171	'toc_width',
172	[
173	'label' => __('TOC Width', 'betterdocs'),
174	'type' => Controls_Manager::SLIDER,
175	'size_units' => ['px', '%', 'em'],
176	'range' => [
177	'px' => [
178	'max' => 1000,
179	'step' => 1,
180	],
181	'%' => [
182	'max' => 100,
183	'step' => 1,
184	],
185	],
186	'selectors' => [
187	'{{WRAPPER}} .sticky-toc-container .betterdocs-toc' => 'width: {{SIZE}}{{UNIT}};'
188	],
189	]
190	);
191
192	$this->add_responsive_control(
193	'toc_zindex', // Legacy control id but new control
194	[
195	'label' => __('Z index', 'betterdocs'),
196	'type' => Controls_Manager::NUMBER,
197	'min' => 0,
198	'max' => 1000,
199	'step' => 5,
200	'default' => 320,
201	'selectors' => [
202	'{{WRAPPER}} .sticky-toc-container .betterdocs-toc' => 'z-index: {{VALUE}}%;',
203	]
204	]
205	);
206
207	$this->end_controls_section(); # end of 'Card Settings'
208	}
209
210	public function box_setting_style()
211	{
212	/**
213	* ----------------------------------------------------------
214	* Section: Box Styles
215	* ----------------------------------------------------------
216	*/
217	$this->start_controls_section(
218	'section_card_settings',
219	[
220	'label' => __('Box', 'betterdocs'),
221	'tab' => Controls_Manager::TAB_STYLE,
222	]
223	);
224
225	$this->add_responsive_control(
226	'column_space', // Legacy control id but new control
227	[
228	'label' => __('Box Spacing', 'betterdocs'),
229	'type' => Controls_Manager::DIMENSIONS,
230	'size_units' => ['px', '%', 'em'],
231	'selectors' => [
232	'{{WRAPPER}} .betterdocs-categories-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
233	]
234	]
235	);
236
237	$this->add_responsive_control(
238	'column_padding',
239	[
240	'label' => __('Box Padding', 'betterdocs'),
241	'type' => Controls_Manager::DIMENSIONS,
242	'size_units' => ['px', 'em', '%'],
243	'selectors' => [
244	'{{WRAPPER}} .betterdocs-categories-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
245	],
246	]
247	);
248
249	$this->add_responsive_control(
250	'box_seperator_color',
251	[
252	'label' => esc_html__('Separator Color', 'betterdocs'),
253	'type' => Controls_Manager::COLOR,
254	'selectors' => [
255	'{{WRAPPER}} .betterdocs-categories-wrap' => 'background-color: {{VALUE}};'
256	],
257	]
258	);
259
260	$this->start_controls_tabs('card_settings_tabs');
261
262	// Normal State Tab
263	$this->start_controls_tab(
264	'card_normal',
265	['label' => esc_html__('Normal', 'betterdocs')]
266	);
267
268	$this->add_control(
269	'box_section_header',
270	[
271	'label' => __('Header', 'betterdocs'),
272	'type' => Controls_Manager::HEADING,
273	'separator' => 'before',
274	]
275	);
276
277	$this->add_group_control(
278	Group_Control_Background::get_type(),
279	[
280	'name' => 'card_bg_normal_header',
281	'types' => ['classic', 'gradient'],
282	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-title-wrap, .docs-single-cat-wrap-2 .docs-cat-title-inner'
283	]
284	);
285
286	$this->add_control(
287	'box_section_body',
288	[
289	'label' => __('Body', 'betterdocs'),
290	'type' => Controls_Manager::HEADING,
291	'separator' => 'before',
292	]
293	);
294
295	$this->add_group_control(
296	Group_Control_Background::get_type(),
297	[
298	'name' => 'card_bg_normal',
299	'types' => ['classic', 'gradient'],
300	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-item-container, .docs-single-cat-wrap-2 .docs-item-container'
301	]
302	);
303
304	$this->add_group_control(
305	Group_Control_Border::get_type(),
306	[
307	'name' => 'card_border_normal',
308	'label' => esc_html__('Border', 'betterdocs'),
309	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap'
310	]
311	);
312
313	$this->add_responsive_control(
314	'card_border_radius_normal',
315	[
316	'label' => esc_html__('Border Radius', 'betterdocs'),
317	'type' => Controls_Manager::DIMENSIONS,
318	'size_units' => ['px', 'em', '%'],
319	'selectors' => [
320	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-item-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
321	],
322	]
323	);
324
325	$this->add_group_control(
326	Group_Control_Box_Shadow::get_type(),
327	[
328	'name' => 'card_box_shadow_normal',
329	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap'
330	]
331	);
332
333	$this->end_controls_tab();
334
335	// Hover State Tab
336	$this->start_controls_tab(
337	'card_hover',
338	['label' => esc_html__('Hover', 'betterdocs')]
339	);
340
341	$this->add_control(
342	'card_transition',
343	[
344	'label' => __('Transition', 'betterdocs'),
345	'type' => Controls_Manager::SLIDER,
346	'default' => [
347	'size' => 300,
348	'unit' => '%',
349	],
350	'size_units' => ['%'],
351	'range' => [
352	'%' => [
353	'max' => 2500,
354	'step' => 1,
355	],
356	],
357	'selectors' => [
358	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap' => 'transition: {{SIZE}}ms;',
359	],
360	]
361	);
362
363	$this->add_control(
364	'box_section_header_hover',
365	[
366	'label' => __('Header', 'betterdocs'),
367	'type' => Controls_Manager::HEADING,
368	'separator' => 'before',
369	]
370	);
371
372	$this->add_group_control(
373	Group_Control_Background::get_type(),
374	[
375	'name' => 'card_bg_hover_header',
376	'types' => ['classic', 'gradient'],
377	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap:hover .docs-cat-title-wrap, .docs-single-cat-wrap-2:hover .docs-cat-title-inner'
378	]
379	);
380
381	$this->add_control(
382	'box_section_body_hover',
383	[
384	'label' => __('Body', 'betterdocs'),
385	'type' => Controls_Manager::HEADING,
386	'separator' => 'before',
387	]
388	);
389
390	$this->add_group_control(
391	Group_Control_Background::get_type(),
392	[
393	'name' => 'card_bg_hover',
394	'types' => ['classic', 'gradient'],
395	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap:hover .docs-item-container'
396	]
397	);
398
399	$this->add_group_control(
400	Group_Control_Border::get_type(),
401	[
402	'name' => 'card_border_hover',
403	'label' => esc_html__('Border', 'betterdocs'),
404	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap:hover'
405	]
406	);
407
408	$this->add_responsive_control(
409	'card_border_radius_hover',
410	[
411	'label' => esc_html__('Border Radius', 'betterdocs'),
412	'type' => Controls_Manager::DIMENSIONS,
413	'size_units' => ['px', 'em', '%'],
414	'selectors' => [
415	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
416	],
417	]
418	);
419
420	$this->add_group_control(
421	Group_Control_Box_Shadow::get_type(),
422	[
423	'name' => 'card_box_shadow_hover',
424	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap:hover'
425	]
426	);
427
428	$this->end_controls_tab();
429
430	$this->end_controls_tabs();
431	$this->end_controls_section(); # end of 'Card Settings'
432	}
433
434	public function icon_style()
435	{
436	/**
437	* ----------------------------------------------------------
438	* Section: Icon Styles
439	* ----------------------------------------------------------
440	*/
441	$this->start_controls_section(
442	'section_box_icon_style',
443	[
444	'label' => __('Icon', 'betterdocs'),
445	'tab' => Controls_Manager::TAB_STYLE,
446	]
447	);
448
449	$this->add_responsive_control(
450	'category_settings_icon_size_normal',
451	[
452	'label' => esc_html__('Size', 'betterdocs'),
453	'type' => Controls_Manager::SLIDER,
454	'size_units' => ['px', '%', 'em'],
455	'range' => [
456	'px' => [
457	'max' => 500,
458	],
459	],
460	'selectors' => [
461	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-icon' => 'width: {{SIZE}}{{UNIT}}; height: auto;',
462	],
463	]
464	);
465
466	$this->start_controls_tabs('box_icon_styles_tab');
467
468	// Normal State Tab
469	$this->start_controls_tab(
470	'icon_normal',
471	['label' => esc_html__('Normal', 'betterdocs')]
472	);
473
474	$this->add_group_control(
475	Group_Control_Background::get_type(),
476	[
477	'name' => 'icon_background_normal',
478	'types' => ['classic', 'gradient'],
479	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-icon',
480	'exclude' => [
481	'image'
482	]
483	]
484	);
485
486	$this->add_group_control(
487	Group_Control_Border::get_type(),
488	[
489	'name' => 'icon_border_normal',
490	'label' => esc_html__('Border', 'betterdocs'),
491	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-icon'
492	]
493	);
494
495	$this->add_responsive_control(
496	'icon_border_radius_normal',
497	[
498	'label' => esc_html__('Border Radius', 'betterdocs'),
499	'type' => Controls_Manager::DIMENSIONS,
500	'size_units' => ['px', 'em', '%'],
501	'selectors' => [
502	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
503	]
504	]
505	);
506
507	$this->add_responsive_control(
508	'icon_padding',
509	[
510	'label' => esc_html__('Padding', 'betterdocs'),
511	'type' => Controls_Manager::DIMENSIONS,
512	'size_units' => ['px', 'em', '%'],
513	'selectors' => [
514	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
515	],
516	]
517	);
518
519	$this->add_responsive_control(
520	'icon_spacing',
521	[
522	'label' => esc_html__('Spacing', 'betterdocs'),
523	'type' => Controls_Manager::DIMENSIONS,
524	'size_units' => ['px', 'em', '%'],
525	'allowed_dimensions' => [
526	'top',
527	'bottom'
528	],
529	'selectors' => [
530	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-icon' => 'margin: {{TOP}}{{UNIT}} auto {{BOTTOM}}{{UNIT}} auto;'
531	]
532	]
533	);
534
535	$this->end_controls_tab();
536
537	// Hover State Tab
538	$this->start_controls_tab(
539	'icon_hover',
540	['label' => esc_html__('Hover', 'betterdocs')]
541	);
542
543	$this->add_group_control(
544	Group_Control_Background::get_type(),
545	[
546	'name' => 'icon_background_hover',
547	'types' => ['classic', 'gradient'],
548	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-icon:hover'
549	]
550	);
551
552	$this->add_group_control(
553	Group_Control_Border::get_type(),
554	[
555	'name' => 'icon_border_hover',
556	'label' => esc_html__('Border', 'betterdocs'),
557	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-icon:hover'
558	]
559	);
560
561	$this->add_responsive_control(
562	'icon_border_radius_hover',
563	[
564	'label' => esc_html__('Border Radius', 'betterdocs'),
565	'type' => Controls_Manager::DIMENSIONS,
566	'size_units' => ['px', 'em', '%'],
567	'selectors' => [
568	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-icon:hover:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
569	],
570
571	]
572	);
573
574	$this->add_control(
575	'category_settings_icon_size_transition',
576	[
577	'label' => __('Transition', 'betterdocs'),
578	'type' => Controls_Manager::SLIDER,
579	'default' => [
580	'size' => 300,
581	'unit' => '%',
582	],
583	'size_units' => ['%'],
584	'range' => [
585	'%' => [
586	'max' => 2500,
587	'step' => 1,
588	],
589	],
590	'selectors' => [
591	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-icon:hover' => 'transition: {{SIZE}}ms;'
592	],
593	]
594	);
595
596	$this->end_controls_tab();
597
598	$this->end_controls_tabs();
599
600	$this->end_controls_section(); # end of 'Icon Styles'
601	}
602
603
604	public function title_style()
605	{
606	/**
607	* ----------------------------------------------------------
608	* Section: Title Styles
609	* ----------------------------------------------------------
610	*/
611	$this->start_controls_section(
612	'section_box_title_styles',
613	[
614	'label' => __('Title', 'betterdocs'),
615	'tab' => Controls_Manager::TAB_STYLE,
616	]
617	);
618
619	$this->start_controls_tabs('box_title_styles_tab');
620
621	// Normal State Tab
622	$this->start_controls_tab(
623	'title_normal',
624	['label' => esc_html__('Normal', 'betterdocs')]
625	);
626
627	$this->add_control(
628	'cat_title_color_normal',
629	[
630	'label' => esc_html__('Color', 'betterdocs'),
631	'type' => Controls_Manager::COLOR,
632	'selectors' => [
633	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-title h3, .docs-single-cat-wrap-2 .docs-cat-title-inner h3' => 'color: {{VALUE}};',
634	],
635	]
636	);
637
638	$this->add_group_control(
639	Group_Control_Typography::get_type(),
640	[
641	'name' => 'cat_title_typography_normal',
642	'selector' => '{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-title h3, .docs-single-cat-wrap-2 .docs-cat-title-inner h3'
643	]
644	);
645
646	$this->add_responsive_control(
647	'title_spacing',
648	[
649	'label' => __('Spacing', 'betterdocs'),
650	'type' => Controls_Manager::DIMENSIONS,
651	'size_units' => ['px', '%', 'em'],
652	'selectors' => [
653	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-title h3, .docs-single-cat-wrap-2 .docs-cat-title-inner h3' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
654	]
655	]
656	);
657
658	$this->end_controls_tab();
659
660	// Hover State Tab
661	$this->start_controls_tab(
662	'title_hover',
663	['label' => esc_html__('Hover', 'betterdocs')]
664	);
665
666	$this->add_control(
667	'cat_title_color_hover',
668	[
669	'label' => esc_html__('Color', 'betterdocs'),
670	'type' => Controls_Manager::COLOR,
671	'selectors' => [
672	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap:hover .docs-cat-title h3, .docs-single-cat-wrap-2 .docs-cat-title-inner h3' => 'color: {{VALUE}};'
673	],
674	]
675	);
676
677	$this->add_control(
678	'category_title_transition',
679	[
680	'label' => __('Transition', 'betterdocs'),
681	'type' => Controls_Manager::SLIDER,
682	'default' => [
683	'size' => 300,
684	'unit' => '%',
685	],
686	'size_units' => ['%'],
687	'range' => [
688	'%' => [
689	'max' => 2500,
690	'step' => 1,
691	],
692	],
693	'selectors' => [
694	'{{WRAPPER}} .betterdocs-categories-wrap .docs-single-cat-wrap .docs-cat-title h3, .docs-single-cat-wrap-2 .docs-cat-title-inner h3' => 'transition: {{SIZE}}ms;',
695	],
696	]
697	);
698
699	$this->end_controls_tab();
700
701	$this->end_controls_tabs();
702
703	$this->end_controls_section(); # end of 'Icon Styles'
704	}
705
706	public function count_style()
707	{
708	/**
709	* ----------------------------------------------------------
710	* Section: Count Styles
711	* ----------------------------------------------------------
712	*/
713	$this->start_controls_section(
714	'section_box_count_styles',
715	[
716	'label' => __('Count', 'betterdocs'),
717	'tab' => Controls_Manager::TAB_STYLE,
718	]
719	);
720
721	$this->add_group_control(
722	Group_Control_Typography::get_type(),
723	[
724	'name' => 'count_typography_normal',
725	'selector' => '{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count span'
726	]
727	);
728
729	$this->start_controls_tabs('box_count_styles_tab');
730
731	// Normal State Tab
732	$this->start_controls_tab(
733	'count_normal',
734	['label' => esc_html__('Normal', 'betterdocs')]
735	);
736
737	$this->add_control(
738	'count_color_normal',
739	[
740	'label' => esc_html__('Color', 'betterdocs'),
741	'type' => Controls_Manager::COLOR,
742	'selectors' => [
743	'{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count span' => 'color: {{VALUE}};',
744	],
745	]
746	);
747
748	$this->add_group_control(
749	Group_Control_Background::get_type(),
750	[
751	'name' => 'count_box_bg',
752	'types' => ['classic', 'gradient'],
753	'selector' => '{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count',
754	]
755	);
756
757	$this->add_group_control(
758	Group_Control_Border::get_type(),
759	[
760	'name' => 'count_box_border',
761	'label' => esc_html__('Border', 'betterdocs'),
762	'selector' => '{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count',
763	]
764	);
765
766	$this->add_responsive_control(
767	'count_box_border_radius',
768	[
769	'label' => esc_html__('Border Radius', 'betterdocs'),
770	'type' => Controls_Manager::DIMENSIONS,
771	'size_units' => ['px', 'em', '%'],
772	'selectors' => [
773	'{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
774	]
775	]
776	);
777
778	$this->add_group_control(
779	Group_Control_Box_Shadow::get_type(),
780	[
781	'name' => 'count_box_box_shadow',
782	'selector' => '{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count',
783	]
784	);
785
786	$this->add_responsive_control(
787	'count_box_size',
788	[
789	'label' => esc_html__('Size', 'betterdocs'),
790	'type' => Controls_Manager::SLIDER,
791	'size_units' => ['px', '%', 'em'],
792	'range' => [
793	'px' => [
794	'max' => 500,
795	],
796	],
797	'selectors' => [
798	'{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};'
799	]
800	]
801	);
802
803	$this->add_responsive_control(
804	'count_spacing',
805	[
806	'label' => __('Spacing', 'betterdocs'),
807	'type' => Controls_Manager::DIMENSIONS,
808	'size_units' => ['px', '%', 'em'],
809	'selectors' => [
810	'{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
811	]
812	]
813	);
814
815	$this->end_controls_tab();
816
817	// Hover State Tab
818	$this->start_controls_tab(
819	'count_hover',
820	['label' => esc_html__('Hover', 'betterdocs')]
821	);
822
823	$this->add_control(
824	'count_color_hover',
825	[
826	'label' => esc_html__('Color', 'betterdocs'),
827	'type' => Controls_Manager::COLOR,
828	'selectors' => [
829	'{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count:hover span' => 'color: {{VALUE}};',
830	],
831	]
832	);
833
834	$this->add_group_control(
835	Group_Control_Background::get_type(),
836	[
837	'name' => 'count_box_bg_hover',
838	'types' => ['classic', 'gradient'],
839	'selector' => '{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count:hover',
840
841	]
842	);
843
844	$this->add_group_control(
845	Group_Control_Border::get_type(),
846	[
847	'name' => 'count_box_border_hover',
848	'label' => esc_html__('Border', 'betterdocs'),
849	'selector' => '{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count:hover',
850
851	]
852	);
853
854	$this->add_responsive_control(
855	'count_box_border_radius_hover',
856	[
857	'label' => esc_html__('Border Radius', 'betterdocs'),
858	'type' => Controls_Manager::DIMENSIONS,
859	'size_units' => ['px', 'em', '%'],
860	'selectors' => [
861	'{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
862	],
863
864	]
865	);
866
867	$this->add_group_control(
868	Group_Control_Box_Shadow::get_type(),
869	[
870	'name' => 'count_box_box_shadow_hover',
871	'selector' => '{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count:hover',
872	]
873	);
874
875	$this->add_control(
876	'category_count_transition',
877	[
878	'label' => __('Transition', 'betterdocs'),
879	'type' => Controls_Manager::SLIDER,
880	'default' => [
881	'size' => 300,
882	'unit' => '%',
883	],
884	'size_units' => ['%'],
885	'range' => [
886	'%' => [
887	'max' => 2500,
888	'step' => 1,
889	],
890	],
891	'selectors' => [
892	'{{WRAPPER}} .docs-single-cat-wrap .docs-cat-title-wrap .docs-item-count:hover' => 'transition: {{SIZE}}ms;',
893
894	],
895	]
896	);
897
898	$this->end_controls_tab();
899
900	$this->end_controls_tabs();
901
902	$this->end_controls_section(); # end of 'Count Styles'
903	}
904
905	public function list_setting()
906	{
907	/**
908	* ----------------------------------------------------------
909	* Section: List Settinggs
910	* ----------------------------------------------------------
911	*/
912	$this->start_controls_section(
913	'section_article_settings',
914	[
915	'label' => __('Category List', 'betterdocs'),
916	'tab' => Controls_Manager::TAB_STYLE
917	]
918	);
919
920
921	$this->add_group_control(
922	Group_Control_Typography::get_type(),
923	[
924	'name' => 'list_item_typography',
925	'selector' => '{{WRAPPER}} .docs-item-container ul li a',
926	]
927	);
928
929	$this->add_control(
930	'list_color',
931	[
932	'label' => esc_html__('Color', 'betterdocs'),
933	'type' => Controls_Manager::COLOR,
934	'selectors' => [
935	'{{WRAPPER}} .docs-item-container ul li a' => 'color: {{VALUE}};',
936	],
937	]
938	);
939
940	$this->add_control(
941	'list_hover_color',
942	[
943	'label' => esc_html__('Hover Color', 'betterdocs'),
944	'type' => Controls_Manager::COLOR,
945	'selectors' => [
946	'{{WRAPPER}} .docs-item-container ul li a:hover' => 'color: {{VALUE}};',
947	],
948	]
949	);
950
951	$this->add_responsive_control(
952	'list_margin',
953	[
954	'label' => esc_html__('List Item Spacing', 'betterdocs'),
955	'type' => Controls_Manager::DIMENSIONS,
956	'size_units' => ['px', 'em', '%'],
957	'selectors' => [
958	'{{WRAPPER}} .docs-item-container ul li' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
959	],
960	]
961	);
962
963
964	$this->add_responsive_control(
965	'list_area_padding',
966	[
967	'label' => esc_html__('List Area Padding', 'betterdocs'),
968	'type' => Controls_Manager::DIMENSIONS,
969	'allowed_dimensions' => 'vertical',
970	'size_units' => ['px', 'em', '%'],
971	'selectors' => [
972	'{{WRAPPER}} .docs-item-container' => 'padding-top: {{TOP}}{{UNIT}}; padding-bottom: {{BOTTOM}}{{UNIT}};',
973	],
974	]
975	);
976
977	$this->add_control(
978	'icon_settings_heading',
979	[
980	'label' => esc_html__('Icon', 'betterdocs'),
981	'type' => Controls_Manager::HEADING,
982	'separator' => 'before',
983	]
984	);
985
986
987	$this->add_control(
988	'list_icon_color',
989	[
990	'label' => esc_html__('Color', 'betterdocs'),
991	'type' => Controls_Manager::COLOR,
992	'selectors' => [
993	'{{WRAPPER}} .docs-item-container li svg' => 'fill: {{VALUE}};',
994	],
995	]
996	);
997
998	$this->add_responsive_control(
999	'list_icon_size',
1000	[
1001	'label' => __('Size', 'betterdocs'),
1002	'type' => Controls_Manager::SLIDER,
1003	'size_units' => ['px', '%', 'em'],
1004	'range' => [
1005	'%' => [
1006	'max' => 100,
1007	'step' => 1,
1008	],
1009	],
1010	'selectors' => [
1011	'{{WRAPPER}} .docs-item-container li svg' => 'font-size: {{SIZE}}{{UNIT}};'
1012	],
1013	]
1014	);
1015
1016	$this->add_responsive_control(
1017	'list_icon_spacing',
1018	[
1019	'label' => esc_html__('Spacing', 'betterdocs'),
1020	'type' => Controls_Manager::DIMENSIONS,
1021	'size_units' => ['px', 'em', '%'],
1022	'selectors' => [
1023	'{{WRAPPER}} .docs-item-container li svg' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1024	],
1025	]
1026	);
1027
1028	$this->end_controls_section(); # end of 'Column Settings'
1029
1030	}
1031
1032	/**
1033	* ----------------------------------------------------------
1034	* Section: Sub List Settinggs
1035	* ----------------------------------------------------------
1036	*/
1037	public function sub_list_setting()
1038	{
1039
1040	$this->start_controls_section(
1041	'section_sub_list_settings',
1042	[
1043	'label' => __('Sub-Category List', 'betterdocs'),
1044	'tab' => Controls_Manager::TAB_STYLE
1045	]
1046	);
1047
1048
1049	$this->add_group_control(
1050	Group_Control_Typography::get_type(),
1051	[
1052	'name' => 'sub_list_item_typography',
1053	'selector' => '{{WRAPPER}} .docs-item-container .docs-sub-cat-title a',
1054	]
1055	);
1056
1057	$this->add_control(
1058	'sub_list_color',
1059	[
1060	'label' => esc_html__('Color', 'betterdocs'),
1061	'type' => Controls_Manager::COLOR,
1062	'selectors' => [
1063	'{{WRAPPER}} .docs-item-container .docs-sub-cat-title a' => 'color: {{VALUE}};',
1064	],
1065	]
1066	);
1067
1068	$this->add_control(
1069	'sub_list_hover_color',
1070	[
1071	'label' => esc_html__('Hover Color', 'betterdocs'),
1072	'type' => Controls_Manager::COLOR,
1073	'selectors' => [
1074	'{{WRAPPER}} .docs-item-container .docs-sub-cat-title a:hover' => 'color: {{VALUE}};',
1075	],
1076	]
1077	);
1078
1079	$this->add_responsive_control(
1080	'sub_list_margin',
1081	[
1082	'label' => esc_html__('List Item Spacing', 'betterdocs'),
1083	'type' => Controls_Manager::DIMENSIONS,
1084	'size_units' => ['px', 'em', '%'],
1085	'selectors' => [
1086	'{{WRAPPER}} .docs-item-container .docs-sub-cat-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1087	],
1088	]
1089	);
1090
1091
1092	$this->add_responsive_control(
1093	'sub_list_area_padding',
1094	[
1095	'label' => esc_html__('List Area Padding', 'betterdocs'),
1096	'type' => Controls_Manager::DIMENSIONS,
1097	'allowed_dimensions' => 'vertical',
1098	'size_units' => ['px', 'em', '%'],
1099	'selectors' => [
1100	'{{WRAPPER}} .docs-item-container .docs-sub-cat-title' => 'padding-top: {{TOP}}{{UNIT}}; padding-bottom: {{BOTTOM}}{{UNIT}};',
1101	],
1102	]
1103	);
1104
1105	$this->add_control(
1106	'sub_list_icon_settings_heading',
1107	[
1108	'label' => esc_html__('Icon', 'betterdocs'),
1109	'type' => Controls_Manager::HEADING,
1110	'separator' => 'before',
1111	]
1112	);
1113
1114	$this->add_responsive_control(
1115	'sub_list_icon_size',
1116	[
1117	'label' => __('Size', 'betterdocs'),
1118	'type' => Controls_Manager::SLIDER,
1119	'size_units' => ['px', '%', 'em'],
1120	'range' => [
1121	'%' => [
1122	'max' => 100,
1123	'step' => 1,
1124	],
1125	],
1126	'selectors' => [
1127	'{{WRAPPER}} .docs-item-container .docs-sub-cat-title svg' => 'font-size: {{SIZE}}{{UNIT}};'
1128	],
1129	]
1130	);
1131
1132	$this->add_control(
1133	'sub_list_icon_color',
1134	[
1135	'label' => esc_html__('Color', 'betterdocs'),
1136	'type' => Controls_Manager::COLOR,
1137	'selectors' => [
1138	'{{WRAPPER}} .docs-item-container .docs-sub-cat .sub-list svg' => 'fill: {{VALUE}};',
1139	],
1140	]
1141	);
1142
1143	$this->add_responsive_control(
1144	'sub_list_icon_spacing',
1145	[
1146	'label' => esc_html__('Spacing', 'betterdocs'),
1147	'type' => Controls_Manager::DIMENSIONS,
1148	'size_units' => ['px', 'em', '%'],
1149	'selectors' => [
1150	'{{WRAPPER}} .docs-item-container .docs-sub-cat-title svg' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1151	],
1152	]
1153	);
1154
1155	$this->end_controls_section(); # end of 'Column Settings'
1156	}
1157
1158	public function button_setting()
1159	{
1160	/**
1161	* ----------------------------------------------------------
1162	* Section: Button Settings
1163	* ----------------------------------------------------------
1164	*/
1165	$this->start_controls_section(
1166	'section_button_settings',
1167	[
1168	'label' => __('Button', 'betterdocs'),
1169	'tab' => Controls_Manager::TAB_STYLE,
1170	]
1171	);
1172
1173
1174	$this->start_controls_tabs(
1175	'button_settings_tabs'
1176	);
1177
1178	// Normal State Tab
1179	$this->start_controls_tab(
1180	'button_normal',
1181	['label' => esc_html__('Normal', 'betterdocs')]
1182	);
1183
1184	$this->add_group_control(
1185	Group_Control_Typography::get_type(),
1186	[
1187	'name' => 'button_typography_normal',
1188	'selector' => '{{WRAPPER}} .docs-cat-link-btn',
1189	]
1190	);
1191
1192	$this->add_control(
1193	'button_color_normal',
1194	[
1195	'label' => esc_html__('Color', 'betterdocs'),
1196	'type' => Controls_Manager::COLOR,
1197	'selectors' => [
1198	'{{WRAPPER}} .docs-cat-link-btn' => 'color: {{VALUE}};',
1199	],
1200	]
1201	);
1202
1203	$this->add_group_control(
1204	Group_Control_Background::get_type(),
1205	[
1206	'name' => 'button_background_normal',
1207	'types' => ['classic', 'gradient'],
1208	'selector' => '{{WRAPPER}} .docs-cat-link-btn',
1209	'exclude' => [
1210	'image',
1211	],
1212	]
1213	);
1214
1215	$this->add_group_control(
1216	Group_Control_Border::get_type(),
1217	[
1218	'name' => 'button_border_normal',
1219	'label' => esc_html__('Border', 'betterdocs'),
1220	'selector' => '{{WRAPPER}} .docs-cat-link-btn',
1221	]
1222	);
1223
1224	$this->add_responsive_control(
1225	'button_border_radius',
1226	[
1227	'label' => esc_html__('Border Radius', 'betterdocs'),
1228	'type' => Controls_Manager::DIMENSIONS,
1229	'size_units' => ['px', 'em', '%'],
1230	'selectors' => [
1231	'{{WRAPPER}} .docs-cat-link-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1232	],
1233	]
1234	);
1235
1236	$this->add_responsive_control(
1237	'button_padding',
1238	[
1239	'label' => esc_html__('Padding', 'betterdocs'),
1240	'type' => Controls_Manager::DIMENSIONS,
1241	'size_units' => ['px', 'em', '%'],
1242	'selectors' => [
1243	'{{WRAPPER}} .docs-cat-link-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1244	],
1245	]
1246	);
1247
1248	$this->add_responsive_control(
1249	'button_area_margin',
1250	[
1251	'label' => esc_html__('Area Spacing', 'betterdocs'),
1252	'type' => Controls_Manager::DIMENSIONS,
1253	'size_units' => ['px', 'em', '%'],
1254	'selectors' => [
1255	'{{WRAPPER}} .docs-cat-link-btn' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1256	],
1257	]
1258	);
1259
1260	$this->end_controls_tab();
1261
1262	// Normal State Tab
1263	$this->start_controls_tab(
1264	'button_hover',
1265	['label' => esc_html__('Hover', 'betterdocs')]
1266	);
1267
1268	$this->add_control(
1269	'button_color_hover',
1270	[
1271	'label' => esc_html__('Color', 'betterdocs'),
1272	'type' => Controls_Manager::COLOR,
1273	'selectors' => [
1274	'{{WRAPPER}} .docs-cat-link-btn:hover' => 'color: {{VALUE}};',
1275	],
1276	]
1277	);
1278
1279	$this->add_group_control(
1280	Group_Control_Background::get_type(),
1281	[
1282	'name' => 'button_background_hover',
1283	'types' => ['classic', 'gradient'],
1284	'selector' => '{{WRAPPER}} .docs-cat-link-btn:hover',
1285	'exclude' => [
1286	'image',
1287	],
1288	]
1289	);
1290
1291	$this->add_group_control(
1292	Group_Control_Border::get_type(),
1293	[
1294	'name' => 'button_border_hover',
1295	'label' => esc_html__('Border', 'betterdocs'),
1296	'selector' => '{{WRAPPER}} .docs-cat-link-btn:hover',
1297	]
1298	);
1299
1300	$this->add_responsive_control(
1301	'button_hover_border_radius',
1302	[
1303	'label' => esc_html__('Border Radius', 'betterdocs'),
1304	'type' => Controls_Manager::DIMENSIONS,
1305	'size_units' => ['px', 'em', '%'],
1306	'selectors' => [
1307	'{{WRAPPER}} .docs-cat-link-btn:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1308	],
1309	]
1310	);
1311
1312	$this->end_controls_tab();
1313
1314	$this->end_controls_tabs();
1315
1316	$this->add_responsive_control(
1317	'button_text_alignment',
1318	[
1319	'label' => __('Text Alignment', 'betterdocs'),
1320	'type' => Controls_Manager::CHOOSE,
1321	'options' => [
1322	'left' => [
1323	'title' => __('Left', 'betterdocs'),
1324	'icon' => 'fa fa-align-left',
1325	],
1326	'center' => [
1327	'title' => __('Center', 'betterdocs'),
1328	'icon' => 'fa fa-align-center',
1329	],
1330	'right' => [
1331	'title' => __('Right', 'betterdocs'),
1332	'icon' => 'fa fa-align-right',
1333	],
1334	],
1335	'selectors' => [
1336	'{{WRAPPER}} .docs-cat-link-btn' => 'text-align: {{VALUE}};',
1337	],
1338	]
1339	);
1340
1341	$this->add_responsive_control(
1342	'button_alignment',
1343	[
1344	'label' => __('Button Alignment', 'betterdocs'),
1345	'type' => Controls_Manager::CHOOSE,
1346	'options' => [
1347	'left' => [
1348	'title' => __('Left', 'betterdocs'),
1349	'icon' => 'fa fa-align-left',
1350	],
1351	'center' => [
1352	'title' => __('Center', 'betterdocs'),
1353	'icon' => 'fa fa-align-center',
1354	],
1355	'right' => [
1356	'title' => __('Right', 'betterdocs'),
1357	'icon' => 'fa fa-align-right',
1358	],
1359	],
1360	'selectors' => [
1361	'{{WRAPPER}} .docs-item-container .docs-cat-link-btn' => 'text-align: {{VALUE}};',
1362	],
1363	]
1364	);
1365
1366	$this->end_controls_section(); # end of 'Button Settings'
1367	}
1368
1369	protected function render()
1370	{
1371	$settings = $this->get_settings_for_display();
1372	$sticky_toc = ($settings['enable_sticky_toc'] == '1') ? $this->get_toc() : '';
1373	$shortcode = do_shortcode('[betterdocs_category_grid disable_customizer_style="true" sidebar_list="true" posts_per_grid="-1"]');
1374	$sidebar = '<aside id="betterdocs-sidebar" class="betterdocs-el-single-sidebar"><div class="betterdocs-sidebar-content">' . $shortcode . '</div>' . $sticky_toc . '</aside>';
1375	echo apply_filters('betterdocs_elementor_sidebar', $sidebar, $settings);
1376	}
1377
1378	public function get_toc()
1379	{
1380	ob_start();
1381	echo '<div class="sticky-toc-container">
1382	<a class="close-toc" href="#">
1383	<svg xmlns="http://www.w3.org/2000/svg" width="16px" viewBox="0 0 24 24">
1384	<path style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal" d="M 4.9902344 3.9902344 A 1.0001 1.0001 0 0 0 4.2929688 5.7070312 L 10.585938 12 L 4.2929688 18.292969 A 1.0001 1.0001 0 1 0 5.7070312 19.707031 L 12 13.414062 L 18.292969 19.707031 A 1.0001 1.0001 0 1 0 19.707031 18.292969 L 13.414062 12 L 19.707031 5.7070312 A 1.0001 1.0001 0 0 0 18.980469 3.9902344 A 1.0001 1.0001 0 0 0 18.292969 4.2929688 L 12 10.585938 L 5.7070312 4.2929688 A 1.0001 1.0001 0 0 0 4.9902344 3.9902344 z" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible"></path>
1385	</svg>
1386	</a>
1387	</div>';
1388	return ob_get_clean();
1389	}
1390	}
1391