betterdocs / includes / elementor / widgets / basic / betterdocs-elementor-category-grid.php

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

1,723 lines 59.8 KB

Raw Download Zip

1	<?php
2
3	use Elementor\Controls_Manager;
4	use \Elementor\Group_Control_Background;
5	use \Elementor\Group_Control_Border;
6	use \Elementor\Group_Control_Typography;
7	use \Elementor\Group_Control_Box_Shadow;
8	use Elementor\Widget_Base;
9
10	if (!defined('ABSPATH')) {
11	exit; // Exit if accessed directly
12	}
13
14	class BetterDocs_Elementor_Category_Grid extends Widget_Base
15	{
16
17	use \Better_Docs_Elementor\Traits\Template_Query;
18
19	public function get_name()
20	{
21	return 'betterdocs-category-grid';
22	}
23
24	public function get_title()
25	{
26	return __('BetterDocs Category Grid', 'betterdocs');
27	}
28
29	public function get_icon()
30	{
31	return 'betterdocs-icon-category-grid';
32	}
33
34	public function get_categories()
35	{
36	return ['docs-archive'];
37	}
38
39	public function get_keywords()
40	{
41	return [
42	'knowledgebase',
43	'knowledge base',
44	'documentation',
45	'Doc',
46	'kb',
47	'betterdocs',
48	'docs',
49	'category-grid'
50	];
51	}
52
53	public function get_style_depends()
54	{
55	return ['betterdocs-category-grid'];
56	}
57
58	public function get_script_depends()
59	{
60	return ['masonry', 'betterdocs-category-grid'];
61	}
62
63	public function get_custom_help_url()
64	{
65	return 'https://betterdocs.co/docs/betterdocs-category-grid';
66	}
67
68	protected function _register_controls()
69	{
70	/**
71	* Query Controls!
72	* @source includes/elementor-helper.php
73	*/
74	do_action('betterdocs/elementor/widgets/query', $this, 'doc_category');
75
76	/**
77	* ----------------------------------------------------------
78	* Section: Layout Options
79	* ----------------------------------------------------------
80	*/
81	$this->start_controls_section(
82	'select_layout',
83	[
84	'label' => __('Layout Options', 'betterdocs'),
85	]
86	);
87
88	$this->add_control(
89	'layout_template',
90	[
91	'label' => __('Select Layout', 'betterdocs'),
92	'type' => Controls_Manager::SELECT2,
93	'options' => $this->template_options(),
94	'default' => $this->get_default(),
95	'label_block' => true
96	]
97	);
98
99	$this->add_control(
100	'layout_mode',
101	[
102	'label' => __('Layout Mode', 'betterdocs'),
103	'type' => Controls_Manager::SELECT2,
104	'options' => [
105	'grid' => __('Grid', 'betterdocs'),
106	'fit-to-screen' => __('Fit to Screen', 'betterdocs'),
107	'masonry' => __('Masonry', 'betterdocs'),
108	],
109	'default' => 'grid',
110	'label_block' => true,
111	]
112	);
113
114	$this->add_responsive_control(
115	'grid_column',
116	[
117	'label' => __('Grid Column', 'betterdocs'),
118	'type' => Controls_Manager::SELECT,
119	'default' => '3',
120	'tablet_default' => '2',
121	'mobile_default' => '1',
122	'options' => [
123	'1' => '1',
124	'2' => '2',
125	'3' => '3',
126	'4' => '4',
127	'5' => '5',
128	'6' => '6',
129	],
130	'prefix_class' => 'elementor-grid%s-',
131	'frontend_available' => true,
132	'label_block' => true
133	]
134	);
135
136	$this->add_responsive_control(
137	'grid_space',
138	[
139	'label' => __('Grid Space', 'betterdocs'),
140	'type' => Controls_Manager::NUMBER,
141	'min' => 0,
142	'max' => 100,
143	'step' => 1,
144	'default' => 10,
145	'condition' => [
146	'layout_mode' => 'masonry'
147	]
148	]
149	);
150
151	$this->add_control(
152	'show_header',
153	[
154	'label' => __('Show Header', 'betterdocs'),
155	'type' => Controls_Manager::SWITCHER,
156	'label_on' => __('Show', 'betterdocs'),
157	'label_off' => __('Hide', 'betterdocs'),
158	'return_value' => 'true',
159	'default' => 'true',
160	]
161	);
162
163
164	$this->add_control(
165	'show_icon',
166	[
167	'label' => __('Show Icon', 'betterdocs'),
168	'type' => Controls_Manager::SWITCHER,
169	'label_on' => __('Show', 'betterdocs'),
170	'label_off' => __('Hide', 'betterdocs'),
171	'return_value' => 'true',
172	'default' => 'true',
173	'condition' => [
174	'show_header' => 'true'
175	]
176	]
177	);
178
179	$this->add_control(
180	'show_title',
181	[
182	'label' => __('Show Title', 'betterdocs'),
183	'type' => Controls_Manager::SWITCHER,
184	'label_on' => __('Show', 'betterdocs'),
185	'label_off' => __('Hide', 'betterdocs'),
186	'return_value' => 'true',
187	'default' => 'true',
188	'condition' => [
189	'show_header' => 'true'
190	]
191	]
192	);
193
194	$this->add_control(
195	'title_tag',
196	[
197	'label' => __('Select Tag', 'betterdocs'),
198	'type' => Controls_Manager::SELECT,
199	'default' => 'h2',
200	'options' => [
201	'h1' => __('H1', 'betterdocs'),
202	'h2' => __('H2', 'betterdocs'),
203	'h3' => __('H3', 'betterdocs'),
204	'h4' => __('H4', 'betterdocs'),
205	'h5' => __('H5', 'betterdocs'),
206	'h6' => __('H6', 'betterdocs'),
207	'span' => __('Span', 'betterdocs'),
208	'p' => __('P', 'betterdocs'),
209	'div' => __('Div', 'betterdocs'),
210	],
211	'condition' => [
212	'show_title' => 'true',
213	'show_header' => 'true'
214	],
215	]
216	);
217
218	$this->add_control(
219	'show_count',
220	[
221	'label' => __('Show Count', 'betterdocs'),
222	'type' => Controls_Manager::SWITCHER,
223	'label_on' => __('Show', 'betterdocs'),
224	'label_off' => __('Hide', 'betterdocs'),
225	'return_value' => 'true',
226	'default' => 'true',
227	'condition' => [
228	'show_header' => 'true'
229	]
230	]
231	);
232
233
234	$this->add_control(
235	'show_list',
236	[
237	'label' => __('Show List', 'betterdocs'),
238	'type' => Controls_Manager::SWITCHER,
239	'label_on' => __('Show', 'betterdocs'),
240	'label_off' => __('Hide', 'betterdocs'),
241	'return_value' => 'true',
242	'default' => 'true',
243	]
244	);
245
246	$this->add_control(
247	'show_button',
248	[
249	'label' => __('Show Button', 'betterdocs'),
250	'type' => Controls_Manager::SWITCHER,
251	'label_on' => __('Show', 'betterdocs'),
252	'label_off' => __('Hide', 'betterdocs'),
253	'return_value' => 'true',
254	'default' => 'true',
255	]
256	);
257
258	$this->add_control(
259	'button_text',
260	[
261	'label' => __('Button Text', 'betterdocs'),
262	'type' => Controls_Manager::TEXT,
263	'dynamic' => [
264	'active' => true,
265	],
266	'default' => __('Explore More', 'betterdocs'),
267	'condition' => [
268	'show_button' => 'true',
269	],
270	]
271	);
272
273	$this->end_controls_section(); #end of section 'Layout Options'
274
275	/**
276	* ----------------------------------------------------------
277	* Section: Column Settings
278	* ----------------------------------------------------------
279	*/
280	$this->start_controls_section(
281	'section_column_settings',
282	[
283	'label' => __('Grid', 'betterdocs'),
284	'tab' => Controls_Manager::TAB_STYLE,
285	]
286	);
287
288
289	$this->start_controls_tabs('grid_style_tab');
290
291	// Normal State Tab
292	$this->start_controls_tab(
293	'grid_normal',
294	['label' => esc_html__('Normal', 'betterdocs')]
295	);
296
297	$this->add_group_control(
298	Group_Control_Background::get_type(),
299	[
300	'name' => 'grid_bg', // Legacy control id 'content_area_bg'
301	'types' => ['classic', 'gradient'],
302	'selector' => '{{WRAPPER}} .el-betterdocs-category-grid-post .el-betterdocs-cg-inner',
303	]
304	);
305
306	$this->add_group_control(
307	Group_Control_Box_Shadow::get_type(),
308	[
309	'name' => 'grid_box_shadow',
310	'label' => __('Box Shadow', 'betterdocs'),
311	'selector' => '{{WRAPPER}} .el-betterdocs-category-grid-post .el-betterdocs-cg-inner',
312	]
313	);
314
315
316	$this->add_group_control(
317	Group_Control_Border::get_type(),
318	[
319	'name' => 'grid_border',
320	'label' => __('Border', 'betterdocs'),
321	'selector' => '{{WRAPPER}} .el-betterdocs-category-grid-post .el-betterdocs-cg-inner',
322	]
323	);
324
325	$this->add_responsive_control(
326	'grid_border_radius',
327	[
328	'label' => __('Border Radius', 'betterdocs'),
329	'type' => Controls_Manager::DIMENSIONS,
330	'size_units' => ['px', '%', 'em'],
331	'selectors' => [
332	'{{WRAPPER}} .el-betterdocs-category-grid-post .el-betterdocs-cg-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
333	]
334	]
335	);
336
337	$this->end_controls_tab();
338
339	// Hover State Tab
340	$this->start_controls_tab(
341	'grid_hover',
342	['label' => esc_html__('Hover', 'betterdocs')]
343	);
344
345	$this->add_group_control(
346	Group_Control_Background::get_type(),
347	[
348	'name' => 'grid_bg_hover',
349	'types' => ['classic', 'gradient'],
350	'selector' => '{{WRAPPER}} .el-betterdocs-category-grid-post .el-betterdocs-cg-inner:hover',
351	]
352	);
353
354	$this->add_group_control(
355	Group_Control_Box_Shadow::get_type(),
356	[
357	'name' => 'grid_hover_box_shadow',
358	'label' => __('Box Shadow', 'betterdocs'),
359	'selector' => '{{WRAPPER}} .el-betterdocs-category-grid-post .el-betterdocs-cg-inner:hover',
360	]
361	);
362
363
364	$this->add_group_control(
365	Group_Control_Border::get_type(),
366	[
367	'name' => 'grid_hover_border',
368	'label' => __('Border', 'betterdocs'),
369	'selector' => '{{WRAPPER}} .el-betterdocs-category-grid-post .el-betterdocs-cg-inner:hover',
370	]
371	);
372
373	$this->add_responsive_control(
374	'grid_hover_border_radius',
375	[
376	'label' => __('Border Radius', 'betterdocs'),
377	'type' => Controls_Manager::DIMENSIONS,
378	'size_units' => ['px', '%', 'em'],
379	'selectors' => [
380	'{{WRAPPER}} .el-betterdocs-category-grid-post .el-betterdocs-cg-inner:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
381	]
382	]
383	);
384
385	$this->end_controls_tab();
386
387	$this->end_controls_tabs(); # end of $this->start_controls_tabs('grid_style_tab');
388
389	$this->add_responsive_control(
390	'grid_padding',
391	[
392	'label' => __('Grid Padding', 'betterdocs'),
393	'type' => Controls_Manager::DIMENSIONS,
394	'size_units' => ['px', '%', 'em'],
395	'selectors' => [
396	'{{WRAPPER}} .el-betterdocs-category-grid-post .el-betterdocs-cg-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
397	],
398	'separator' => 'before'
399	]
400	);
401
402	$this->add_responsive_control(
403	'column_padding', // Legacy control id
404	[
405	'label' => __('Grid Spacing', 'betterdocs'),
406	'type' => Controls_Manager::DIMENSIONS,
407	'size_units' => ['px', '%', 'em'],
408	'selectors' => [
409	'{{WRAPPER}} .el-betterdocs-category-grid-post .el-betterdocs-cg-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
410	],
411	'condition' => [
412	'layout_mode' => ['grid', 'fit-to-screen']
413	]
414	]
415	);
416
417	$this->end_controls_section(); # end of 'Column Settings'
418
419
420	$this->start_controls_section(
421	'section_icon_settings',
422	[
423	'label' => __('Icon', 'betterdocs'),
424	'tab' => Controls_Manager::TAB_STYLE,
425	'condition' => [
426	'show_icon' => 'true',
427	'layout_template' => 'Layout_Default'
428	]
429	]
430	);
431
432	$this->start_controls_tabs('icon_settings_tabs');
433
434	// Normal State Tab
435	$this->start_controls_tab(
436	'icon_normal',
437	['label' => esc_html__('Normal', 'betterdocs')]
438	);
439
440	$this->add_group_control(
441	Group_Control_Background::get_type(),
442	[
443	'name' => 'header_icon_bg',
444	'types' => ['classic', 'gradient'],
445	'selector' => '{{WRAPPER}} .el-betterdocs-cg-header .el-betterdocs-cat-icon',
446	'exclude' => [
447	'image'
448	]
449	]
450	);
451
452	$this->add_group_control(
453	Group_Control_Border::get_type(),
454	[
455	'name' => 'header_icon_border', // Legacy control name change it with 'border_size' if anything happens.
456	'label' => __('Border', 'betterdocs'),
457	'selector' => '{{WRAPPER}} .el-betterdocs-cg-header .el-betterdocs-cat-icon',
458	]
459	);
460
461	$this->add_control(
462	'header_icon_border_radius',
463	[
464	'label' => __('Border Radius', 'betterdocs'),
465	'type' => Controls_Manager::DIMENSIONS,
466	'size_units' => ['px', '%', 'em'],
467	'selectors' => [
468	'{{WRAPPER}} .el-betterdocs-cg-header .el-betterdocs-cat-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
469	]
470	]
471	);
472
473	$this->end_controls_tab();
474
475	// Hover State Tab
476	$this->start_controls_tab(
477	'icon_hover',
478	['label' => esc_html__('Hover', 'betterdocs')]
479	);
480
481	$this->add_group_control(
482	Group_Control_Background::get_type(),
483	[
484	'name' => 'header_icon_bg_hover',
485	'types' => ['classic', 'gradient'],
486	'selector' => '{{WRAPPER}} .el-betterdocs-cg-header .el-betterdocs-cat-icon:hover',
487	'exclude' => [
488	'image'
489	]
490	]
491	);
492
493	$this->add_group_control(
494	Group_Control_Border::get_type(),
495	[
496	'name' => 'header_icon_border_hover', // Legacy control name change it with 'border_size' if anything happens.
497	'label' => __('Border', 'betterdocs'),
498	'selector' => '{{WRAPPER}} .el-betterdocs-cg-header .el-betterdocs-cat-icon:hover',
499	]
500	);
501
502	$this->add_control(
503	'header_icon_border_radius_hover',
504	[
505	'label' => __('Border Radius', 'betterdocs'),
506	'type' => Controls_Manager::DIMENSIONS,
507	'size_units' => ['px', '%', 'em'],
508	'selectors' => [
509	'{{WRAPPER}} .el-betterdocs-cg-header .el-betterdocs-cat-icon:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
510	]
511	]
512	);
513
514	$this->end_controls_tab();
515
516	$this->end_controls_tabs();
517
518	$this->add_responsive_control(
519	'header_icon_size',
520	[
521	'label' => __('Size', 'betterdocs'),
522	'type' => Controls_Manager::SLIDER,
523	'size_units' => ['px', '%', 'em'],
524	'range' => [
525	'%' => [
526	'max' => 100,
527	'step' => 1,
528	],
529	],
530	'selectors' => [
531	'{{WRAPPER}} .el-betterdocs-cg-header .el-betterdocs-cat-icon' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
532	],
533	'separator' => 'before'
534	]
535	);
536
537	$this->add_responsive_control(
538	'header_icon_padding',
539	[
540	'label' => esc_html__('Padding', 'betterdocs'),
541	'type' => Controls_Manager::DIMENSIONS,
542	'size_units' => ['px', 'em', '%'],
543	'selectors' => [
544	'{{WRAPPER}} .el-betterdocs-cg-header .el-betterdocs-cat-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
545	]
546	]
547	);
548
549	$this->add_responsive_control(
550	'header_icon_margin',
551	[
552	'label' => esc_html__('Margin', 'betterdocs'),
553	'type' => Controls_Manager::DIMENSIONS,
554	'size_units' => ['px', 'em', '%'],
555	'selectors' => [
556	'{{WRAPPER}} .el-betterdocs-cg-header .el-betterdocs-cat-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
557	],
558	]
559	);
560
561	$this->end_controls_section(); # end of 'Column Settings'
562
563	/**
564	* ----------------------------------------------------------
565	* Section: Title Settinggs
566	* ----------------------------------------------------------
567	*/
568	$this->start_controls_section(
569	'section_title_settings',
570	[
571	'label' => __('Title', 'betterdocs'),
572	'tab' => Controls_Manager::TAB_STYLE,
573	'condition' => [
574	'show_title' => 'true'
575	]
576	]
577	);
578
579	$this->add_group_control(
580	Group_Control_Typography::get_type(),
581	[
582	'name' => 'cat_list_typography',
583	'selector' => '{{WRAPPER}} .el-betterdocs-cat-title',
584	]
585	);
586
587	$this->start_controls_tabs('title_settings_tabs');
588
589	// Normal State Tab
590	$this->start_controls_tab(
591	'title_normal',
592	['label' => esc_html__('Normal', 'betterdocs')]
593	);
594
595	$this->add_control(
596	'cat_title_color',
597	[
598	'label' => esc_html__('Color', 'betterdocs'),
599	'type' => Controls_Manager::COLOR,
600	'selectors' => [
601	'{{WRAPPER}} .el-betterdocs-cat-title' => 'color: {{VALUE}};',
602	],
603	]
604	);
605
606	$this->add_group_control(
607	Group_Control_Background::get_type(),
608	[
609	'name' => 'cat_title_bg',
610	'types' => ['classic', 'gradient'],
611	'selector' => '{{WRAPPER}} .el-betterdocs-category-grid-post:not(.layout-2) .el-betterdocs-cg-header, {{WRAPPER}} .el-betterdocs-category-grid-post.layout-2 .el-betterdocs-cat-title',
612	'exclude' => [
613	'image'
614	]
615	]
616	);
617
618	$this->add_group_control(
619	Group_Control_Border::get_type(),
620	[
621	'name' => 'title_border', // Legacy control name change it with 'border_size' if anything happens.
622	'label' => __('Border', 'betterdocs'),
623	'fields_options' => [
624	'border' => [
625	'default' => 'solid',
626	],
627	'width' => [
628	'default' => [
629	'top' => '0',
630	'right' => '0',
631	'bottom' => '2',
632	'left' => '0',
633	'isLinked' => false,
634	],
635	],
636	'color' => [
637	'default' => '#8E0AE9',
638	],
639	],
640	'selector' => '{{WRAPPER}} .el-betterdocs-cg-header-inner, {{WRAPPER}} .layout-2 .el-betterdocs-cat-title',
641	]
642	);
643
644	$this->add_control(
645	'title_border_radius',
646	[
647	'label' => __('Border Radius', 'betterdocs'),
648	'type' => Controls_Manager::DIMENSIONS,
649	'size_units' => ['px', '%', 'em'],
650	'selectors' => [
651	'{{WRAPPER}} .layout-2 .el-betterdocs-cat-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
652	'{{WRAPPER}} .el-betterdocs-cg-header' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
653	'{{WRAPPER}} .el-betterdocs-cg-header .el-betterdocs-cg-header-inner' => 'border-radius: {{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}} .el-betterdocs-cat-title:hover' => 'color: {{VALUE}};',
673	],
674	]
675	);
676
677	$this->add_group_control(
678	Group_Control_Background::get_type(),
679	[
680	'name' => 'cat_title_bg_hover',
681	'types' => ['classic', 'gradient'],
682	'selector' => '{{WRAPPER}} .el-betterdocs-category-grid-post:not(.layout-2) .el-betterdocs-cg-header:hover, {{WRAPPER}} .el-betterdocs-category-grid-post.layout-2 .el-betterdocs-cat-title:hover',
683	'exclude' => [
684	'image'
685	]
686	]
687	);
688
689	$this->add_group_control(
690	Group_Control_Border::get_type(),
691	[
692	'name' => 'title_border_hover', // Legacy control name change it with 'border_size' if anything happens.
693	'label' => __('Border', 'betterdocs'),
694	'selector' => '{{WRAPPER}} .el-betterdocs-cg-header-inner:hover, {{WRAPPER}} .layout-2 .el-betterdocs-cat-title:hover',
695	]
696	);
697
698	$this->add_control(
699	'title_border_radius_hover',
700	[
701	'label' => __('Border Radius', 'betterdocs'),
702	'type' => Controls_Manager::DIMENSIONS,
703	'size_units' => ['px', '%', 'em'],
704	'selectors' => [
705	'{{WRAPPER}} .layout-2 .el-betterdocs-cat-title:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
706	],
707	'condition' => [
708	'layout_template' => 'Layout_2'
709	]
710	]
711	);
712
713	$this->end_controls_tab();
714
715	$this->end_controls_tabs();
716
717
718	$this->add_responsive_control(
719	'cat_title_padding',
720	[
721	'label' => esc_html__('Padding', 'betterdocs'),
722	'type' => Controls_Manager::DIMENSIONS,
723	'size_units' => ['px', 'em', '%'],
724	'selectors' => [
725	'{{WRAPPER}} .el-betterdocs-cg-header-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
726	'{{WRAPPER}} .el-betterdocs-category-grid-post.layout-2 .el-betterdocs-cat-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
727	],
728	'separator' => 'before'
729	]
730	);
731
732	$this->add_responsive_control(
733	'cat_title_margin',
734	[
735	'label' => esc_html__('Margin', 'betterdocs'),
736	'type' => Controls_Manager::DIMENSIONS,
737	'size_units' => ['px', 'em', '%'],
738	'selectors' => [
739	'{{WRAPPER}} .el-betterdocs-cg-header' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
740	'{{WRAPPER}} .el-betterdocs-category-grid-post.layout-2 .el-betterdocs-cat-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
741	],
742	]
743	);
744
745	$this->end_controls_section(); # end of 'Title Settings'
746
747
748	/**
749	* ----------------------------------------------------------
750	* Section: Count Settinggs
751	* ----------------------------------------------------------
752	*/
753	$this->start_controls_section(
754	'section_count_settings',
755	[
756	'label' => __('Count', 'betterdocs'),
757	'tab' => Controls_Manager::TAB_STYLE,
758	'condition' => [
759	'show_count' => 'true'
760	]
761	]
762	);
763
764	$this->add_group_control(
765	Group_Control_Typography::get_type(),
766	[
767	'name' => 'count_font_size',
768	'selector' => '{{WRAPPER}} .el-betterdocs-item-count',
769	]
770	);
771
772	$this->add_responsive_control(
773	'count_size',
774	[
775	'label' => __('Size', 'betterdocs'),
776	'type' => Controls_Manager::SLIDER,
777	'size_units' => ['px', '%', 'em'],
778	'range' => [
779	'%' => [
780	'max' => 100,
781	'step' => 1,
782	],
783	],
784	'selectors' => [
785	'{{WRAPPER}} .el-betterdocs-item-count' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};'
786	],
787	'condition' => [
788	'layout_template!' => 'Layout_2'
789	]
790	]
791	);
792
793	$this->start_controls_tabs('count_settings_tabs');
794
795	// Normal State Tab
796	$this->start_controls_tab(
797	'count_normal',
798	['label' => esc_html__('Normal', 'betterdocs')]
799	);
800
801	$this->add_control(
802	'count_color',
803	[
804	'label' => esc_html__('Color', 'betterdocs'),
805	'type' => Controls_Manager::COLOR,
806	'selectors' => [
807	'{{WRAPPER}} .el-betterdocs-item-count' => 'color: {{VALUE}};',
808	],
809	]
810	);
811
812	$this->add_group_control(
813	Group_Control_Background::get_type(),
814	[
815	'name' => 'count_bg',
816	'types' => ['classic', 'gradient'],
817	'selector' => '{{WRAPPER}} .el-betterdocs-item-count, {{WRAPPER}} .layout-2 .el-betterdocs-item-count:before',
818	'exclude' => [
819	'image',
820	],
821	]
822	);
823
824	$this->add_control(
825	'count_ticker_color',
826	[
827	'label' => esc_html__('Ticker Background', 'betterdocs'),
828	'type' => Controls_Manager::COLOR,
829	'selectors' => [
830	'{{WRAPPER}} .layout-2 .el-betterdocs-item-count:after' => 'border-top-color: {{VALUE}};',
831	],
832	'condition' => [
833	'layout_template' => 'Layout_2'
834	]
835	]
836	);
837
838	$this->add_group_control(
839	Group_Control_Border::get_type(),
840	[
841	'name' => 'count_border', // Legacy control name change it with 'border_size' if anything happens.
842	'label' => __('Border', 'betterdocs'),
843	'selector' => '{{WRAPPER}} .el-betterdocs-item-count',
844	'condition' => [
845	'layout_template!' => 'Layout_2'
846	]
847	]
848	);
849
850	$this->add_control(
851	'count_border_radius',
852	[
853	'label' => __('Border Radius', 'betterdocs'),
854	'type' => Controls_Manager::DIMENSIONS,
855	'size_units' => ['px', '%', 'em'],
856	'selectors' => [
857	'{{WRAPPER}} .el-betterdocs-item-count' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
858	],
859	'condition' => [
860	'layout_template!' => 'Layout_2'
861	]
862	]
863	);
864
865	$this->end_controls_tab();
866
867	// Hover State Tab
868	$this->start_controls_tab(
869	'count_hover',
870	['label' => esc_html__('Hover', 'betterdocs')]
871	);
872
873	$this->add_control(
874	'count_transition',
875	[
876	'label' => __( 'Transition', 'betterdocs' ),
877	'type' => Controls_Manager::SLIDER,
878	'default' => [
879	'size' => '300',
880	'unit' => 'px',
881	],
882	'range' => [
883	'px' => [
884	'min' => 0,
885	'max' => 10000,
886	'step' => 100,
887	],
888	],
889	'size_units' => ['px'],
890	'selectors' => [
891	'{{WRAPPER}} .el-betterdocs-item-count' => 'transition: {{SIZE}}ms;',
892	'{{WRAPPER}} .el-betterdocs-item-count:after' => 'transition: {{SIZE}}ms;',
893	'{{WRAPPER}} .el-betterdocs-item-count:after' => 'transition: {{SIZE}}ms;',
894	]
895	]
896	);
897
898	$this->add_control(
899	'count_color_hover',
900	[
901	'label' => esc_html__('Color', 'betterdocs'),
902	'type' => Controls_Manager::COLOR,
903	'selectors' => [
904	'{{WRAPPER}} .el-betterdocs-item-count:hover' => 'color: {{VALUE}};',
905	],
906	]
907	);
908
909	$this->add_group_control(
910	Group_Control_Background::get_type(),
911	[
912	'name' => 'count_bg_hover',
913	'types' => ['classic', 'gradient'],
914	'selector' => '{{WRAPPER}} .el-betterdocs-item-count:hover, {{WRAPPER}} .layout-2 .el-betterdocs-item-count:hover:before',
915	'exclude' => [
916	'image',
917	],
918	]
919	);
920
921	$this->add_control(
922	'count_ticker_color_hover',
923	[
924	'label' => esc_html__('Ticker Background', 'betterdocs'),
925	'type' => Controls_Manager::COLOR,
926	'selectors' => [
927	'{{WRAPPER}} .layout-2 .el-betterdocs-item-count:hover:after' => 'border-top-color: {{VALUE}};',
928	],
929	'condition' => [
930	'layout_template' => 'Layout_2'
931	]
932	]
933	);
934
935	$this->add_group_control(
936	Group_Control_Border::get_type(),
937	[
938	'name' => 'count_border_hover', // Legacy control name change it with 'border_size' if anything happens.
939	'label' => __('Border', 'betterdocs'),
940	'selector' => '{{WRAPPER}} .el-betterdocs-item-count:hover',
941	'condition' => [
942	'layout_template!' => 'Layout_2'
943	]
944	]
945	);
946
947	$this->add_control(
948	'count_border_radius_hover',
949	[
950	'label' => __('Border Radius', 'betterdocs'),
951	'type' => Controls_Manager::DIMENSIONS,
952	'size_units' => ['px', '%', 'em'],
953	'selectors' => [
954	'{{WRAPPER}} .el-betterdocs-item-count:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
955	],
956	'condition' => [
957	'layout_template!' => 'Layout_2'
958	]
959	]
960	);
961
962	$this->end_controls_tab();
963
964	$this->end_controls_tabs();
965
966
967	$this->end_controls_section(); # end of 'Count Settings'
968
969	/**
970	* ----------------------------------------------------------
971	* Section: List Settinggs
972	* ----------------------------------------------------------
973	*/
974	$this->start_controls_section(
975	'section_article_settings',
976	[
977	'label' => __('List', 'betterdocs'),
978	'tab' => Controls_Manager::TAB_STYLE,
979	'condition' => [
980	'show_list' => 'true'
981	]
982	]
983	);
984
985	$this->add_group_control(
986	Group_Control_Typography::get_type(),
987	[
988	'name' => 'list_item_typography',
989	'selector' => '{{WRAPPER}} .el-betterdocs-cg-body ul li a',
990	]
991	);
992
993	$this->add_control(
994	'list_color',
995	[
996	'label' => esc_html__('Color', 'betterdocs'),
997	'type' => Controls_Manager::COLOR,
998	'selectors' => [
999	'{{WRAPPER}} .el-betterdocs-cg-body ul li a' => 'color: {{VALUE}};',
1000	],
1001	]
1002	);
1003
1004	$this->add_control(
1005	'list_hover_color',
1006	[
1007	'label' => esc_html__('Hover Color', 'betterdocs'),
1008	'type' => Controls_Manager::COLOR,
1009	'selectors' => [
1010	'{{WRAPPER}} .el-betterdocs-cg-body ul li a:hover' => 'color: {{VALUE}};',
1011	],
1012	]
1013	);
1014
1015	$this->add_responsive_control(
1016	'list_margin',
1017	[
1018	'label' => esc_html__('List Item Spacing', 'betterdocs'),
1019	'type' => Controls_Manager::DIMENSIONS,
1020	'size_units' => ['px', 'em', '%'],
1021	'selectors' => [
1022	'{{WRAPPER}} .el-betterdocs-cg-body ul li' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1023	],
1024	]
1025	);
1026
1027	$this->add_group_control(
1028	Group_Control_Background::get_type(),
1029	[
1030	'name' => 'list_bg',
1031	'types' => ['classic', 'gradient'],
1032	'selector' => '{{WRAPPER}} .el-betterdocs-cg-body',
1033	'exclude' => [
1034	'image',
1035	],
1036	]
1037	);
1038
1039	$this->add_responsive_control(
1040	'list_area_padding',
1041	[
1042	'label' => esc_html__('List Area Padding', 'betterdocs'),
1043	'type' => Controls_Manager::DIMENSIONS,
1044	'allowed_dimensions' => 'vertical',
1045	'size_units' => ['px', 'em', '%'],
1046	'selectors' => [
1047	'{{WRAPPER}} .el-betterdocs-cg-body' => 'padding-top: {{TOP}}{{UNIT}}; padding-bottom: {{BOTTOM}}{{UNIT}};',
1048	],
1049	]
1050	);
1051
1052	$this->add_control(
1053	'icon_settings_heading',
1054	[
1055	'label' => esc_html__('Icon', 'betterdocs'),
1056	'type' => Controls_Manager::HEADING,
1057	'separator' => 'before',
1058	]
1059	);
1060
1061	$this->add_control(
1062	'list_icon',
1063	[
1064	'label' => __('Icon', 'betterdocs'),
1065	'type' => Controls_Manager::ICONS,
1066	'default' => [
1067	'value' => 'far fa-file-alt',
1068	'library' => 'fa-regular'
1069	]
1070	]
1071	);
1072
1073	$this->add_control(
1074	'list_icon_color',
1075	[
1076	'label' => esc_html__('Color', 'betterdocs'),
1077	'type' => Controls_Manager::COLOR,
1078	'selectors' => [
1079	'{{WRAPPER}} .el-betterdocs-cg-body .el-betterdocs-cg-post-list-icon' => 'color: {{VALUE}};',
1080	],
1081	]
1082	);
1083
1084	$this->add_responsive_control(
1085	'list_icon_size',
1086	[
1087	'label' => __('Size', 'betterdocs'),
1088	'type' => Controls_Manager::SLIDER,
1089	'size_units' => ['px', '%', 'em'],
1090	'range' => [
1091	'%' => [
1092	'max' => 100,
1093	'step' => 1,
1094	],
1095	],
1096	'selectors' => [
1097	'{{WRAPPER}} .el-betterdocs-cg-body .el-betterdocs-cg-post-list-icon' => 'font-size: {{SIZE}}{{UNIT}};',
1098	'{{WRAPPER}} .el-betterdocs-cg-body img.el-betterdocs-cg-post-list-icon' => 'width: {{SIZE}}{{UNIT}};'
1099	],
1100	]
1101	);
1102
1103	$this->add_responsive_control(
1104	'list_icon_spacing',
1105	[
1106	'label' => esc_html__('Spacing', 'betterdocs'),
1107	'type' => Controls_Manager::DIMENSIONS,
1108	'size_units' => ['px', 'em', '%'],
1109	'selectors' => [
1110	'{{WRAPPER}} .el-betterdocs-cg-body .el-betterdocs-cg-post-list-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1111	],
1112	]
1113	);
1114
1115	$this->end_controls_section(); # end of 'Column Settings'
1116
1117	/**
1118	* ----------------------------------------------------------
1119	* Section: Nested List Settinggs
1120	* ----------------------------------------------------------
1121	*/
1122	$this->start_controls_section(
1123	'section_nested_list_settings',
1124	[
1125	'label' => __('Nested List', 'betterdocs'),
1126	'tab' => Controls_Manager::TAB_STYLE,
1127	'condition' => [
1128	'nested_subcategory' => 'true'
1129	]
1130	]
1131	);
1132
1133	$this->add_control(
1134	'section_nested_list_title',
1135	[
1136	'label' => esc_html__('Title', 'betterdocs'),
1137	'type' => Controls_Manager::HEADING,
1138	]
1139	);
1140
1141	$this->add_group_control(
1142	Group_Control_Typography::get_type(),
1143	[
1144	'name' => 'nested_list_title_typography',
1145	'selector' => '{{WRAPPER}} .el-betterdocs-grid-sub-cat-title a',
1146	]
1147	);
1148
1149	$this->add_control(
1150	'nested_list_title_color',
1151	[
1152	'label' => esc_html__('Color', 'betterdocs'),
1153	'type' => Controls_Manager::COLOR,
1154	'selectors' => [
1155	'{{WRAPPER}} .el-betterdocs-grid-sub-cat-title a' => 'color: {{VALUE}};',
1156	],
1157	]
1158	);
1159
1160	$this->add_group_control(
1161	Group_Control_Background::get_type(),
1162	[
1163	'name' => 'nested_list_title_background',
1164	'types' => ['classic', 'gradient'],
1165	'selector' => '{{WRAPPER}} .el-betterdocs-grid-sub-cat-title',
1166	'exclude' => [
1167	'image',
1168	],
1169	]
1170	);
1171
1172	$this->add_group_control(
1173	Group_Control_Border::get_type(),
1174	[
1175	'name' => 'nested_list_title_border',
1176	'label' => esc_html__('Border', 'betterdocs'),
1177	'selector' => '{{WRAPPER}} .el-betterdocs-grid-sub-cat-title'
1178	]
1179	);
1180
1181	$this->add_responsive_control(
1182	'nested_list_title_spacing',
1183	[
1184	'label' => esc_html__('Spacing', 'betterdocs'),
1185	'type' => Controls_Manager::DIMENSIONS,
1186	'size_units' => ['px', 'em', '%'],
1187	'selectors' => [
1188	'{{WRAPPER}} .el-betterdocs-grid-sub-cat-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1189	],
1190	]
1191	);
1192
1193	$this->add_control(
1194	'section_nested_list_icon',
1195	[
1196	'label' => esc_html__('Icon', 'betterdocs'),
1197	'type' => Controls_Manager::HEADING,
1198	'separator' => 'before'
1199	]
1200	);
1201
1202	$this->add_control(
1203	'nested_list_title_closed_icon',
1204	[
1205	'label' => __('Collapse Icon', 'betterdocs'),
1206	'type' => Controls_Manager::ICONS,
1207	'default' => [
1208	'value' => 'fas fa-angle-right',
1209	'library' => 'fa-regular'
1210	]
1211	]
1212	);
1213
1214	$this->add_control(
1215	'nested_list_title_open_icon',
1216	[
1217	'label' => __('Open Icon', 'betterdocs'),
1218	'type' => Controls_Manager::ICONS,
1219	'default' => [
1220	'value' => 'fas fa-angle-down',
1221	'library' => 'fa-regular'
1222	]
1223	]
1224	);
1225
1226	$this->add_control(
1227	'nested_list_icon_color',
1228	[
1229	'label' => esc_html__('Color', 'betterdocs'),
1230	'type' => Controls_Manager::COLOR,
1231	'selectors' => [
1232	'{{WRAPPER}} .el-betterdocs-grid-sub-cat-title .toggle-arrow' => 'color: {{VALUE}};',
1233	],
1234	]
1235	);
1236
1237	$this->add_responsive_control(
1238	'nested_list_icon_size',
1239	[
1240	'label' => __('Size', 'betterdocs'),
1241	'type' => Controls_Manager::SLIDER,
1242	'size_units' => ['px', '%', 'em'],
1243	'range' => [
1244	'%' => [
1245	'max' => 100,
1246	'step' => 1,
1247	],
1248	],
1249	'selectors' => [
1250	'{{WRAPPER}} .el-betterdocs-grid-sub-cat-title .toggle-arrow' => 'font-size: {{SIZE}}{{UNIT}};',
1251	'{{WRAPPER}} .el-betterdocs-grid-sub-cat-title img.toggle-arrow' => 'width: {{SIZE}}{{UNIT}};'
1252	],
1253	]
1254	);
1255
1256	$this->add_responsive_control(
1257	'nested_list_icon_margin',
1258	[
1259	'label' => esc_html__('Area Spacing', 'betterdocs'),
1260	'type' => Controls_Manager::DIMENSIONS,
1261	'size_units' => ['px', 'em', '%'],
1262	'selectors' => [
1263	'{{WRAPPER}} .el-betterdocs-grid-sub-cat-title .toggle-arrow' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1264	],
1265	]
1266	);
1267
1268
1269
1270	$this->end_controls_section(); # end of 'Column Settings'
1271
1272	/**
1273	* ----------------------------------------------------------
1274	* Section: Button Settings
1275	* ----------------------------------------------------------
1276	*/
1277	$this->start_controls_section(
1278	'section_button_settings',
1279	[
1280	'label' => __('Button', 'betterdocs'),
1281	'tab' => Controls_Manager::TAB_STYLE,
1282	'condition' => [
1283	'show_button' => 'true'
1284	]
1285	]
1286	);
1287
1288	$this->add_control(
1289	'show_button_icon',
1290	[
1291	'label' => __('Show Icon', 'betterdocs'),
1292	'type' => Controls_Manager::SWITCHER,
1293	'label_on' => __('Show', 'betterdocs'),
1294	'label_off' => __('Hide', 'betterdocs'),
1295	'return_value' => 'true',
1296	'default' => 'true'
1297	]
1298	);
1299
1300	$this->add_control(
1301	'button_icon',
1302	[
1303	'label' => __('Icon', 'betterdocs'),
1304	'type' => Controls_Manager::ICONS,
1305	'default' => [
1306	'value' => 'fas fa-angle-right',
1307	'library' => 'fa-solid'
1308	],
1309	'condition' => [
1310	'show_button_icon' => 'true'
1311	]
1312	]
1313	);
1314
1315	$this->add_control(
1316	'icon_position',
1317	[
1318	'label' => __('Icon Position', 'betterdocs'),
1319	'type' => Controls_Manager::SELECT,
1320	'default' => 'after',
1321	'options' => [
1322	'before' => __('Before', 'betterdocs'),
1323	'after' => __('After', 'betterdocs')
1324	],
1325	'condition' => [
1326	'show_button_icon' => 'true'
1327	]
1328	]
1329	);
1330
1331	$this->add_group_control(
1332	Group_Control_Typography::get_type(),
1333	[
1334	'name' => 'button_typography_normal',
1335	'selector' => '{{WRAPPER}} .el-betterdocs-cg-button',
1336	]
1337	);
1338
1339	$this->start_controls_tabs(
1340	'button_settings_tabs'
1341	);
1342
1343	// Normal State Tab
1344	$this->start_controls_tab(
1345	'button_normal',
1346	['label' => esc_html__('Normal', 'betterdocs')]
1347	);
1348
1349	$this->add_control(
1350	'button_color_normal',
1351	[
1352	'label' => esc_html__('Color', 'betterdocs'),
1353	'type' => Controls_Manager::COLOR,
1354	'selectors' => [
1355	'{{WRAPPER}} .el-betterdocs-cg-button' => 'color: {{VALUE}};',
1356	],
1357	]
1358	);
1359
1360	$this->add_group_control(
1361	Group_Control_Background::get_type(),
1362	[
1363	'name' => 'button_background_normal',
1364	'types' => ['classic', 'gradient'],
1365	'selector' => '{{WRAPPER}} .el-betterdocs-cg-button',
1366	'exclude' => [
1367	'image',
1368	],
1369	]
1370	);
1371
1372	$this->add_group_control(
1373	Group_Control_Border::get_type(),
1374	[
1375	'name' => 'button_border_normal',
1376	'label' => esc_html__('Border', 'betterdocs'),
1377	'selector' => '{{WRAPPER}} .el-betterdocs-cg-button',
1378	]
1379	);
1380
1381	$this->add_responsive_control(
1382	'button_border_radius',
1383	[
1384	'label' => esc_html__('Border Radius', 'betterdocs'),
1385	'type' => Controls_Manager::DIMENSIONS,
1386	'size_units' => ['px', 'em', '%'],
1387	'selectors' => [
1388	'{{WRAPPER}} .el-betterdocs-cg-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1389	],
1390	]
1391	);
1392
1393	$this->add_responsive_control(
1394	'button_padding',
1395	[
1396	'label' => esc_html__('Padding', 'betterdocs'),
1397	'type' => Controls_Manager::DIMENSIONS,
1398	'size_units' => ['px', 'em', '%'],
1399	'selectors' => [
1400	'{{WRAPPER}} .el-betterdocs-cg-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1401	],
1402	]
1403	);
1404
1405	$this->add_responsive_control(
1406	'button_area_margin',
1407	[
1408	'label' => esc_html__('Area Spacing', 'betterdocs'),
1409	'type' => Controls_Manager::DIMENSIONS,
1410	'size_units' => ['px', 'em', '%'],
1411	'selectors' => [
1412	'{{WRAPPER}} .el-betterdocs-cg-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1413	],
1414	]
1415	);
1416
1417	$this->end_controls_tab();
1418
1419	// Normal State Tab
1420	$this->start_controls_tab(
1421	'button_hover',
1422	['label' => esc_html__('Hover', 'betterdocs')]
1423	);
1424
1425	$this->add_control(
1426	'button_transition',
1427	[
1428	'label' => __( 'Transition', 'betterdocs' ),
1429	'type' => Controls_Manager::SLIDER,
1430	'default' => [
1431	'size' => '300',
1432	'unit' => 'px',
1433	],
1434	'range' => [
1435	'px' => [
1436	'min' => 0,
1437	'max' => 10000,
1438	'step' => 100,
1439	],
1440	],
1441	'size_units' => ['px'],
1442	'selectors' => [
1443	'{{WRAPPER}} .el-betterdocs-cg-button' => 'transition: {{SIZE}}ms;',
1444	]
1445	]
1446	);
1447
1448	$this->add_control(
1449	'button_color_hover',
1450	[
1451	'label' => esc_html__('Color', 'betterdocs'),
1452	'type' => Controls_Manager::COLOR,
1453	'selectors' => [
1454	'{{WRAPPER}} .el-betterdocs-cg-button:hover' => 'color: {{VALUE}};',
1455	],
1456	]
1457	);
1458
1459	$this->add_group_control(
1460	Group_Control_Background::get_type(),
1461	[
1462	'name' => 'button_background_hover',
1463	'types' => ['classic', 'gradient'],
1464	'selector' => '{{WRAPPER}} .el-betterdocs-cg-button:hover',
1465	'exclude' => [
1466	'image',
1467	],
1468	]
1469	);
1470
1471	$this->add_group_control(
1472	Group_Control_Border::get_type(),
1473	[
1474	'name' => 'button_border_hover',
1475	'label' => esc_html__('Border', 'betterdocs'),
1476	'selector' => '{{WRAPPER}} .el-betterdocs-cg-button:hover',
1477	]
1478	);
1479
1480	$this->add_responsive_control(
1481	'button_hover_border_radius',
1482	[
1483	'label' => esc_html__('Border Radius', 'betterdocs'),
1484	'type' => Controls_Manager::DIMENSIONS,
1485	'size_units' => ['px', 'em', '%'],
1486	'selectors' => [
1487	'{{WRAPPER}} .el-betterdocs-cg-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1488	],
1489	]
1490	);
1491
1492	$this->end_controls_tab();
1493
1494	$this->end_controls_tabs();
1495
1496	$this->add_responsive_control(
1497	'button_text_alignment',
1498	[
1499	'label' => __('Text Alignment', 'betterdocs'),
1500	'type' => Controls_Manager::CHOOSE,
1501	'options' => [
1502	'left' => [
1503	'title' => __('Left', 'betterdocs'),
1504	'icon' => 'fa fa-align-left',
1505	],
1506	'center' => [
1507	'title' => __('Center', 'betterdocs'),
1508	'icon' => 'fa fa-align-center',
1509	],
1510	'right' => [
1511	'title' => __('Right', 'betterdocs'),
1512	'icon' => 'fa fa-align-right',
1513	],
1514	],
1515	'selectors' => [
1516	'{{WRAPPER}} .el-betterdocs-cg-footer .el-betterdocs-cg-button' => 'text-align: {{VALUE}};',
1517	],
1518	]
1519	);
1520
1521	$this->add_responsive_control(
1522	'button_alignment',
1523	[
1524	'label' => __('Button Alignment', 'betterdocs'),
1525	'type' => Controls_Manager::CHOOSE,
1526	'options' => [
1527	'left' => [
1528	'title' => __('Left', 'betterdocs'),
1529	'icon' => 'fa fa-align-left',
1530	],
1531	'center' => [
1532	'title' => __('Center', 'betterdocs'),
1533	'icon' => 'fa fa-align-center',
1534	],
1535	'right' => [
1536	'title' => __('Right', 'betterdocs'),
1537	'icon' => 'fa fa-align-right',
1538	],
1539	],
1540	'selectors' => [
1541	'{{WRAPPER}} .el-betterdocs-cg-footer' => 'text-align: {{VALUE}};',
1542	],
1543	]
1544	);
1545
1546	$this->end_controls_section(); # end of 'Button Settings'
1547	}
1548
1549
1550	protected function render()
1551	{
1552	$settings = $this->get_settings_for_display();
1553
1554	$this->add_render_attribute(
1555	'bd_category_grid_wrapper',
1556	[
1557	'id' => 'el-betterdocs-cat-grid-' . esc_attr($this->get_id()),
1558	'class' => [
1559	'betterdocs-category-grid-wrapper',
1560	],
1561	]
1562	);
1563
1564	$this->add_render_attribute(
1565	'bd_category_grid_inner',
1566	[
1567	'class' => [
1568	'betterdocs-category-grid',
1569	$settings['layout_mode']
1570	],
1571	'data-layout-mode' => $settings['layout_mode']
1572	]
1573	);
1574
1575	$terms_object = array(
1576	'taxonomy' => 'doc_category',
1577	'order' => $settings['order'],
1578	'offset' => $settings['offset'],
1579	'number' => $settings['grid_per_page']
1580	);
1581
1582	if ($settings['nested_subcategory'] == true) {
1583	$terms_object['parent'] = 0;
1584	}
1585
1586	if ($settings['include']) {
1587	$terms_object['include'] = array_diff($settings['include'], (array) $settings['exclude']);
1588	}
1589
1590	if ($settings['exclude']) {
1591	$terms_object['exclude'] = $settings['exclude'];
1592	}
1593
1594	if ($settings['orderby'] == 'betterdocs_order') {
1595	$terms_object['meta_key'] = 'doc_category_order';
1596	$terms_object['orderby'] = 'meta_value_num';
1597	$terms_object['order'] = 'ASC';
1598	} else {
1599	$terms_object['orderby'] = $settings['orderby'];
1600	}
1601
1602	$default_multiple_kb = BetterDocs_Elementor::get_betterdocs_multiple_kb_status();
1603
1604	if ($settings['layout_template'] == 'Layout_2') {
1605	$settings['layout_template'] = 'layout-2';
1606	}
1607
1608	if ($default_multiple_kb) {
1609	$object = get_queried_object();
1610	if (empty($settings['selected_knowledge_base']) && is_tax('knowledge_base')) {
1611	$meta_value = $object->slug;
1612	} else {
1613	$meta_value = $settings['selected_knowledge_base'];
1614	}
1615
1616	$terms_object['meta_query'] = array(
1617	array(
1618	'relation' => 'OR',
1619	array(
1620	'key' => 'doc_category_knowledge_base',
1621	'value' => $meta_value,
1622	'compare' => 'LIKE'
1623	)
1624	),
1625	);
1626
1627	$taxonomy_objects = get_terms($terms_object);
1628
1629	$html = '<div ' . $this->get_render_attribute_string('bd_category_grid_wrapper') . '>';
1630	$html .= '<div ' . $this->get_render_attribute_string('bd_category_grid_inner') . ' data-column="' . $settings['grid_column'] . '" data-column-space="' . $settings['grid_space'] . '">';
1631	if (file_exists($this->get_template($settings['layout_template']))) {
1632	if ($taxonomy_objects && !is_wp_error($taxonomy_objects)) {
1633	foreach ($taxonomy_objects as $term) {
1634	$term_id = $term->term_id;
1635	$term_slug = $term->slug;
1636	$count = $term->count;
1637	$get_term_count = betterdocs_get_postcount($count, $term_id, $settings['nested_subcategory']);
1638	$term_count = apply_filters('betterdocs_postcount', $get_term_count, $default_multiple_kb, $term_id, $term_slug, $count, $settings['nested_subcategory']);
1639	if ($term_count > 0) {
1640	$html .= BetterDocs_Elementor::include_with_variable($this->get_template($settings['layout_template']), ['term' => $term, 'term_count' => $term_count, 'settings' => $settings, 'default_multiple_kb' => $default_multiple_kb]);
1641	}
1642	}
1643	} else {
1644	$html .= '<p class="no-posts-found">' . __('No posts found!', 'betterdocs') . '</p>';
1645	}
1646
1647	wp_reset_postdata();
1648	} else {
1649	$html .= '<h4>' . __('File Not Found', 'betterdocs') . '</h4>';
1650	}
1651	$html .= '</div>';
1652	$html .= '<div class="clearfix"></div>';
1653
1654	if (\Elementor\Plugin::instance()->editor->is_edit_mode()) {
1655	$this->render_editor_script();
1656	}
1657	$html .= '</div>';
1658
1659	echo $html;
1660	} else {
1661	$taxonomy_objects = get_terms($terms_object);
1662
1663	$html = '<div ' . $this->get_render_attribute_string('bd_category_grid_wrapper') . '>';
1664	$html .= '<div ' . $this->get_render_attribute_string('bd_category_grid_inner') . ' data-column="' . $settings['grid_column'] . '" data-column-space="' . $settings['grid_space'] . '">';
1665
1666	if (file_exists($this->get_template($settings['layout_template']))) {
1667	if ($taxonomy_objects && !is_wp_error($taxonomy_objects)) {
1668	foreach ($taxonomy_objects as $term) {
1669	$term_id = $term->term_id;
1670	$term_slug = $term->slug;
1671	$count = $term->count;
1672	$get_term_count = betterdocs_get_postcount($count, $term_id, $settings['nested_subcategory']);
1673	$term_count = apply_filters('betterdocs_postcount', $get_term_count, $default_multiple_kb, $term_id, $term_slug, $count, $settings['nested_subcategory']);
1674	if ($term_count > 0) {
1675	$html .= BetterDocs_Elementor::include_with_variable($this->get_template($settings['layout_template']), ['term' => $term, 'term_count' => $term_count, 'settings' => $settings, 'default_multiple_kb' => $default_multiple_kb]);
1676	}
1677	}
1678	} else {
1679	$html .= '<p class="no-posts-found">' . __('No posts found!', 'betterdocs') . '</p>';
1680	}
1681	wp_reset_postdata();
1682	} else {
1683	$html .= '<h4>' . __('File Not Found', 'betterdocs') . '</h4>';
1684	}
1685	$html .= '</div>';
1686	$html .= '<div class="clearfix"></div>';
1687
1688	if (\Elementor\Plugin::instance()->editor->is_edit_mode()) {
1689	$this->render_editor_script();
1690	}
1691	$html .= '</div>';
1692
1693	echo $html;
1694	}
1695	}
1696
1697	protected function render_editor_script()
1698	{
1699	?>
1700	<script>
1701	jQuery(document).ready(function($) {
1702	$('.betterdocs-category-grid').each(function() {
1703	let $grid = $(this),
1704	$layout_mode = $grid.data('layout-mode'),
1705	$column = $grid.data('column'),
1706	$column_space = $grid.data('column-space');
1707	if ($layout_mode === 'masonry') {
1708	let masonryItem = $(".el-betterdocs-category-grid-post", $grid);
1709	let total_margin = $column * $column_space;
1710	masonryItem.css("width", "calc((100% - " + total_margin + "px) / " + parseInt($column) + ")");
1711	$grid.masonry({
1712	itemSelector: ".el-betterdocs-category-grid-post",
1713	percentPosition: true,
1714	gutter: $column_space
1715	});
1716	}
1717	});
1718	});
1719	</script>
1720	<?php
1721	}
1722	}
1723