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

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

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