betterdocs / includes / Editors / Elementor / Widget / Basic / FAQ.php

FAQ.php in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.5.6, at includes/Editors/Elementor/Widget/Basic/FAQ.php

908 lines 30.6 KB

Raw Download Zip

1	<?php
2
3	namespace WPDeveloper\BetterDocs\Editors\Elementor\Widget\Basic;
4
5	use Elementor\Widget_Base;
6
7	// If this file is called directly, abort.
8	if ( ! defined( 'ABSPATH' ) ) {
9	exit;
10	}
11
12	use Elementor\Group_Control_Background;
13	use Elementor\Plugin as ElementorPlugin;
14	use Elementor\Controls_Manager;
15	use WPDeveloper\BetterDocs\Editors\Elementor\Helper;
16	use Elementor\Group_Control_Border;
17	use Elementor\Group_Control_Typography;
18	use WPDeveloper\BetterDocs\Editors\Elementor\BaseWidget;
19
20	class FAQ extends BaseWidget {
21
22	public function get_name() {
23	return 'betterdocs-faq';
24	}
25
26	public function get_title() {
27	return __( 'BetterDocs FAQ', 'betterdocs' );
28	}
29
30	public function get_custom_help_url() {
31	return 'http://betterdocs.co/docs/betterdocs-faq-builder-in-elementor/';
32	}
33
34	public function get_icon() {
35	return 'betterdocs-icon-faq';
36	}
37
38	public function get_categories() {
39	return [ 'betterdocs-elements' ];
40	}
41
42	public function get_keywords() {
43	return [ 'betterdocs-elements', 'betterdocs', 'docs', 'faq', 'FAQ', 'betterdocs-faq' ];
44	}
45
46	public function get_style_depends() {
47	return [ 'betterdocs-faq' ];
48	}
49
50	protected function register_controls() {
51	$this->start_controls_section(
52	'faq_section_controls',
53	[
54	'label' => __( 'Layout Options', 'betterdocs' )
55	]
56	);
57
58	$this->add_control(
59	'faq_layout_selection',
60	[
61	'label' => __( 'Select Layout', 'betterdocs' ),
62	'type' => Controls_Manager::SELECT2,
63	'options' => [
64	'layout-3' => __( 'Abstract Layout', 'betterdocs' ),
65	'layout-1' => __( 'Modern Layout', 'betterdocs' ),
66	'layout-2' => __( 'Classic Layout', 'betterdocs' ),
67	'layout-4' => __( 'Tab Layout', 'betterdocs' )
68	],
69	'default' => 'layout-1',
70	'label_block' => true
71	]
72	);
73
74	$this->add_control(
75	'faq_layout_section',
76	[
77	'label' => __( 'FAQ Section', 'betterdocs' ),
78	'type' => Controls_Manager::TEXT,
79	'dynamic' => [
80	'active' => true
81	],
82	'default' => __( 'Frequently Asked Questions', 'betterdocs' )
83	]
84	);
85
86	$this->add_control(
87	'faq_section_title_tag',
88	[
89	'label' => __( 'Section Title Tag', 'betterdocs' ),
90	'type' => Controls_Manager::SELECT,
91	'default' => 'h2',
92	'options' => [
93	'h1' => __( 'H1', 'betterdocs' ),
94	'h2' => __( 'H2', 'betterdocs' ),
95	'h3' => __( 'H3', 'betterdocs' ),
96	'h4' => __( 'H4', 'betterdocs' ),
97	'h5' => __( 'H5', 'betterdocs' ),
98	'h6' => __( 'H6', 'betterdocs' )
99	]
100	]
101	);
102
103	$this->add_control(
104	'faq_group_title_tag',
105	[
106	'label' => __( 'Group Title Tag', 'betterdocs' ),
107	'type' => Controls_Manager::SELECT,
108	'default' => 'h3',
109	'options' => [
110	'h1' => __( 'H1', 'betterdocs' ),
111	'h2' => __( 'H2', 'betterdocs' ),
112	'h3' => __( 'H3', 'betterdocs' ),
113	'h4' => __( 'H4', 'betterdocs' ),
114	'h5' => __( 'H5', 'betterdocs' ),
115	'h6' => __( 'H6', 'betterdocs' )
116	],
117	'condition' => [
118	'faq_layout_selection' => ['layout-1', 'layout-2', 'layout-3']
119	]
120	]
121	);
122
123	$terms = betterdocs()->container->get( Helper::class )->get_faq_terms();
124
125	$this->add_control(
126	'select_specific_faq',
127	[
128	'label' => __( 'Include FAQ Groups', 'betterdocs' ),
129	'label_block' => true,
130	'type' => Controls_Manager::SELECT2,
131	'options' => $terms,
132	'multiple' => true,
133	'default' => '',
134	'select2options' => [
135	'placeholder' => __( 'Include FAQ Groups', 'betterdocs' ),
136	'allowClear' => true
137	]
138	]
139	);
140
141	$this->add_control(
142	'exclude_specific_faq',
143	[
144	'label' => __( 'Exclude FAQ Groups', 'betterdocs' ),
145	'label_block' => true,
146	'type' => Controls_Manager::SELECT2,
147	'options' => $terms,
148	'multiple' => true,
149	'default' => '',
150	'select2options' => [
151	'placeholder' => __( 'Exclude FAQ Groups', 'betterdocs' ),
152	'allowClear' => true
153	]
154	]
155	);
156
157	$this->end_controls_section();
158
159	/**
160	* ----------------------------------------------------------
161	* Section: Container Section Settings
162	* ----------------------------------------------------------
163	*/
164	$this->start_controls_section(
165	'section_faq_container_section',
166	[
167	'label' => __( 'Container Section', 'betterdocs' ),
168	'tab' => Controls_Manager::TAB_STYLE,
169	]
170	);
171
172	$this->add_responsive_control(
173	'section_faq_container_section_padding',
174	[
175	'label' => __( 'Padding', 'betterdocs' ),
176	'type' => Controls_Manager::DIMENSIONS,
177	'size_units' => [ 'px', 'em', '%' ],
178	'selectors' => [
179	'{{WRAPPER}} .betterdocs-faq-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
180	]
181	]
182	);
183
184	$this->add_responsive_control(
185	'section_faq_container_section_margin', // Legacy control id but new control
186	[
187	'label' => __( 'Margin', 'betterdocs' ),
188	'type' => Controls_Manager::DIMENSIONS,
189	'size_units' => [ 'px', '%', 'em' ],
190	'selectors' => [
191	'{{WRAPPER}} .betterdocs-faq-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
192	]
193	]
194	);
195
196	$this->add_group_control(
197	Group_Control_Background::get_type(),
198	[
199	'name' => 'section_faq_container_section_background',
200	'types' => [ 'classic', 'gradient' ],
201	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper'
202	]
203	);
204
205	$this->end_controls_section();
206
207	/***** Common Section Style For Both Layouts *****/
208
209	$this->start_controls_section(
210	'faq_section_style',
211	[
212	'label' => __( 'FAQ Section Title', 'betterdocs' ),
213	'tab' => Controls_Manager::TAB_STYLE
214	]
215	);
216
217	$this->add_control(
218	'faq_layout_section_title_color',
219	[
220	'label' => esc_html__( 'Text Color', 'betterdocs' ),
221	'type' => Controls_Manager::COLOR,
222	'selectors' => [
223	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-section-title' => 'color:{{VALUE}};'
224	]
225	]
226	);
227
228	$this->add_group_control(
229	Group_Control_Typography::get_type(),
230	[
231	'name' => 'faq_layout_section_title_typography',
232	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-section-title'
233	]
234	);
235
236	$this->end_controls_section();
237
238	$this->start_controls_section(
239	'faq_box_title_section',
240	[
241	'label' => __( 'FAQ Group Title', 'betterdocs' ),
242	'tab' => Controls_Manager::TAB_STYLE,
243	'condition' => [
244	'faq_layout_selection' => ['layout-1', 'layout-2', 'layout-3']
245	]
246	]
247	);
248
249	$this->add_control(
250	'faq_box_title_color',
251	[
252	'label' => esc_html__( 'Title Color', 'betterdocs' ),
253	'type' => Controls_Manager::COLOR,
254	'selectors' => [
255	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title .betterdocs-faq-title-tag' => 'color:{{VALUE}};'
256	]
257	]
258	);
259
260	$this->add_control(
261	'faq_box_title_color_hover',
262	[
263	'label' => esc_html__( 'Title Hover Color', 'betterdocs' ),
264	'type' => Controls_Manager::COLOR,
265	'selectors' => [
266	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title .betterdocs-faq-title-tag:hover' => 'color:{{VALUE}};'
267	]
268	]
269	);
270
271	$this->add_group_control(
272	Group_Control_Typography::get_type(),
273	[
274	'name' => 'faq_box_title_typography',
275	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title .betterdocs-faq-title-tag'
276	]
277	);
278
279	$this->end_controls_section();
280
281	$this->start_controls_section(
282	'faq_box_title_section_layout_4',
283	[
284	'label' => __( 'FAQ Group Title', 'betterdocs' ),
285	'tab' => Controls_Manager::TAB_STYLE,
286	'condition' => [
287	'faq_layout_selection' => ['layout-4']
288	]
289	]
290	);
291
292	$this->add_control(
293	'faq_box_title_color_layout_4',
294	[
295	'label' => esc_html__( 'Title Color', 'betterdocs' ),
296	'type' => Controls_Manager::COLOR,
297	'selectors' => [
298	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-title, .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-tab .faq-tab-title' => 'color:{{VALUE}};'
299	]
300	]
301	);
302
303	$this->add_control(
304	'faq_box_title_color_hover_layout_4',
305	[
306	'label' => esc_html__( 'Title Hover Color', 'betterdocs' ),
307	'type' => Controls_Manager::COLOR,
308	'selectors' => [
309	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-title:hover' => 'color:{{VALUE}};',
310	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-tab .faq-tab-title:hover' => 'color:{{VALUE}};'
311	]
312	]
313	);
314
315	$this->add_group_control(
316	Group_Control_Typography::get_type(),
317	[
318	'name' => 'faq_box_title_typography_layout_4',
319	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-title, .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-tab .faq-tab-title'
320	]
321	);
322
323	$this->end_controls_section();
324
325	$this->start_controls_section(
326	'faq_box_style_section',
327	[
328	'label' => __( 'FAQ List', 'betterdocs' ),
329	'tab' => Controls_Manager::TAB_STYLE,
330	'condition' => [
331	'faq_layout_selection' => ['layout-1', 'layout-2', 'layout-3']
332	]
333	]
334	);
335
336	$this->add_responsive_control(
337	'faq_box_padding',
338	[
339	'label' => __( 'Padding', 'betterdocs' ),
340	'type' => Controls_Manager::DIMENSIONS,
341	'size_units' => [ 'px', '%', 'em' ],
342	'selectors' => [
343	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
344	]
345	]
346	);
347
348	$this->add_responsive_control(
349	'faq_box_margin',
350	[
351	'label' => __( 'Margin', 'betterdocs' ),
352	'type' => Controls_Manager::DIMENSIONS,
353	'size_units' => [ 'px', '%', 'em' ],
354	'selectors' => [
355	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
356	]
357	]
358	);
359
360	$this->add_group_control(
361	Group_Control_Typography::get_type(),
362	[
363	'name' => 'faq_box_typography',
364	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name'
365	]
366	);
367
368	$this->add_control(
369	'faq_box_term_title_color',
370	[
371	'label' => esc_html__( 'Color', 'betterdocs' ),
372	'type' => Controls_Manager::COLOR,
373	'selectors' => [
374	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name' => 'color:{{VALUE}};'
375	]
376	]
377	);
378
379	$this->start_controls_tabs( 'faq_tabs' );
380
381	// Normal State Tab
382	$this->start_controls_tab(
383	'faq_box_normal',
384	[ 'label' => esc_html__( 'Normal', 'betterdocs' ) ]
385	);
386
387	$this->add_group_control(
388	Group_Control_Border::get_type(),
389	[
390	'name' => 'faq_box_border_normal',
391	'label' => esc_html__( 'Border', 'betterdocs' ),
392	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post'
393	]
394	);
395
396	$this->add_group_control(
397	Group_Control_Background::get_type(),
398	[
399	'name' => 'faq_box_background_normal',
400	'label' => esc_html__( 'Background', 'betterdocs' ),
401	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post'
402	]
403	);
404
405	$this->end_controls_tab();
406
407	// Hover State Tab
408	$this->start_controls_tab(
409	'faq_box_hover',
410	[ 'label' => esc_html__( 'Hover', 'betterdocs' ) ]
411	);
412
413	$this->add_group_control(
414	Group_Control_Border::get_type(),
415	[
416	'name' => 'faq_box_border_hover',
417	'label' => esc_html__( 'Border', 'betterdocs' ),
418	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post:hover'
419	]
420	);
421
422	$this->add_group_control(
423	Group_Control_Background::get_type(),
424	[
425	'name' => 'faq_box_background_hover',
426	'label' => esc_html__( 'Background', 'betterdocs' ),
427	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post:hover'
428	]
429	);
430
431	$this->end_controls_tab();
432
433	$this->end_controls_tabs();
434
435	$this->end_controls_section();
436
437	$this->start_controls_section(
438	'faq_box_style_section_layout_4',
439	[
440	'label' => __( 'FAQ List', 'betterdocs' ),
441	'tab' => Controls_Manager::TAB_STYLE,
442	'condition' => [
443	'faq_layout_selection' => ['layout-4']
444	]
445	]
446	);
447
448	$this->add_responsive_control(
449	'faq_box_padding_layout_4',
450	[
451	'label' => __( 'Padding', 'betterdocs' ),
452	'type' => Controls_Manager::DIMENSIONS,
453	'size_units' => [ 'px', '%', 'em' ],
454	'selectors' => [
455	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
456	]
457	]
458	);
459
460	$this->add_responsive_control(
461	'faq_box_margin_layout_4',
462	[
463	'label' => __( 'Margin', 'betterdocs' ),
464	'type' => Controls_Manager::DIMENSIONS,
465	'size_units' => [ 'px', '%', 'em' ],
466	'selectors' => [
467	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
468	]
469	]
470	);
471
472	$this->add_group_control(
473	Group_Control_Typography::get_type(),
474	[
475	'name' => 'faq_box_typography_layout_4',
476	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name'
477	]
478	);
479
480	$this->add_control(
481	'faq_box_term_title_color_layout_4',
482	[
483	'label' => esc_html__( 'Color', 'betterdocs' ),
484	'type' => Controls_Manager::COLOR,
485	'selectors' => [
486	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name' => 'color:{{VALUE}};'
487	]
488	]
489	);
490
491	$this->start_controls_tabs( 'faq_tabs_layout_4' );
492
493	// Normal State Tab
494	$this->start_controls_tab(
495	'faq_box_normal_layout_4',
496	[ 'label' => esc_html__( 'Normal', 'betterdocs' ) ]
497	);
498
499	$this->add_group_control(
500	Group_Control_Border::get_type(),
501	[
502	'name' => 'faq_box_border_normal_layout_4',
503	'label' => esc_html__( 'Border', 'betterdocs' ),
504	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group'
505	]
506	);
507
508	$this->add_group_control(
509	Group_Control_Background::get_type(),
510	[
511	'name' => 'faq_box_background_normal_layout_4',
512	'label' => esc_html__( 'Background', 'betterdocs' ),
513	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group'
514	]
515	);
516
517	$this->end_controls_tab();
518
519	// Hover State Tab
520	$this->start_controls_tab(
521	'faq_box_hover_layout_4',
522	[ 'label' => esc_html__( 'Hover', 'betterdocs' ) ]
523	);
524
525	$this->add_group_control(
526	Group_Control_Border::get_type(),
527	[
528	'name' => 'faq_box_border_hover_layout_4',
529	'label' => esc_html__( 'Border', 'betterdocs' ),
530	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group:hover'
531	]
532	);
533
534	$this->add_group_control(
535	Group_Control_Background::get_type(),
536	[
537	'name' => 'faq_box_background_hover_layout_4',
538	'label' => esc_html__( 'Background', 'betterdocs' ),
539	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group:hover'
540	]
541	);
542
543	$this->end_controls_tab();
544
545	$this->end_controls_tabs();
546
547	$this->end_controls_section();
548
549	$this->start_controls_section(
550	'faq_box_content_section',
551	[
552	'label' => __( 'FAQ Content', 'betterdocs' ),
553	'tab' => Controls_Manager::TAB_STYLE,
554	'condition' => [
555	'faq_layout_selection' => ['layout-1', 'layout-2', 'layout-3']
556	]
557	]
558	);
559
560	$this->add_responsive_control(
561	'faq_box_content_section_padding',
562	[
563	'label' => __( 'Padding', 'betterdocs' ),
564	'type' => Controls_Manager::DIMENSIONS,
565	'size_units' => [ 'px', '%', 'em' ],
566	'selectors' => [
567	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
568	]
569	]
570	);
571
572	$this->add_responsive_control(
573	'faq_box_content_section_margin',
574	[
575	'label' => __( 'Margin', 'betterdocs' ),
576	'type' => Controls_Manager::DIMENSIONS,
577	'size_units' => [ 'px', '%', 'em' ],
578	'selectors' => [
579	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
580	]
581	]
582	);
583
584	$this->add_group_control(
585	Group_Control_Background::get_type(),
586	[
587	'name' => 'faq_box_content_section_background',
588	'label' => esc_html__( 'Background', 'betterdocs' ),
589	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content'
590	]
591	);
592
593	$this->add_group_control(
594	Group_Control_Typography::get_type(),
595	[
596	'name' => 'faq_box_content_section_typography',
597	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content'
598	]
599	);
600
601	$this->add_control(
602	'faq_box_content_section_color',
603	[
604	'label' => esc_html__( 'Color', 'betterdocs' ),
605	'type' => Controls_Manager::COLOR,
606	'selectors' => [
607	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content' => 'color:{{VALUE}};'
608	]
609	]
610	);
611
612	$this->end_controls_section();
613
614	$this->start_controls_section(
615	'faq_box_content_section_layout_4',
616	[
617	'label' => __( 'FAQ Content', 'betterdocs' ),
618	'tab' => Controls_Manager::TAB_STYLE,
619	'condition' => [
620	'faq_layout_selection' => ['layout-4']
621	]
622	]
623	);
624
625	$this->add_responsive_control(
626	'faq_box_content_section_padding_layout_4',
627	[
628	'label' => __( 'Padding', 'betterdocs' ),
629	'type' => Controls_Manager::DIMENSIONS,
630	'size_units' => [ 'px', '%', 'em' ],
631	'selectors' => [
632	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-main-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
633	]
634	]
635	);
636
637	$this->add_responsive_control(
638	'faq_box_content_section_margin_layout_4',
639	[
640	'label' => __( 'Margin', 'betterdocs' ),
641	'type' => Controls_Manager::DIMENSIONS,
642	'size_units' => [ 'px', '%', 'em' ],
643	'selectors' => [
644	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-main-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
645	]
646	]
647	);
648
649	$this->add_group_control(
650	Group_Control_Background::get_type(),
651	[
652	'name' => 'faq_box_content_section_background_layout_4',
653	'label' => esc_html__( 'Background', 'betterdocs' ),
654	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group.active'
655	]
656	);
657
658	$this->add_group_control(
659	Group_Control_Typography::get_type(),
660	[
661	'name' => 'faq_box_content_section_typography_layout_4',
662	'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-main-content'
663	]
664	);
665
666	$this->add_control(
667	'faq_box_content_section_color_layout_4',
668	[
669	'label' => esc_html__( 'Color', 'betterdocs' ),
670	'type' => Controls_Manager::COLOR,
671	'selectors' => [
672	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-list-wrapper .betterdocs-faq-list-content .betterdocs-faq-list li .betterdocs-faq-group .betterdocs-faq-main-content' => 'color:{{VALUE}};'
673	]
674	]
675	);
676
677	$this->end_controls_section();
678
679	$this->start_controls_section(
680	'faq_box_content_icon',
681	[
682	'label' => __( 'FAQ List Icon', 'betterdocs' ),
683	'tab' => Controls_Manager::TAB_STYLE,
684	'condition' => [
685	'faq_layout_selection' => ['layout-1', 'layout-2', 'layout-3']
686	]
687	]
688	);
689
690	$this->add_responsive_control(
691	'faq_box_content_icon_height',
692	[
693	'label' => esc_html__( 'Icon Height', 'betterdocs' ),
694	'type' => Controls_Manager::SLIDER,
695	'size_units' => [ 'px', '%', 'em' ],
696	'range' => [
697	'px' => [
698	'max' => 500
699	]
700	],
701	'selectors' => [
702	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconplus' => 'height:{{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}};',
703	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconminus' => 'height:{{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}};'
704	]
705	]
706	);
707
708	$this->add_responsive_control(
709	'faq_box_content_icon_width',
710	[
711	'label' => esc_html__( 'Icon Width', 'betterdocs' ),
712	'type' => Controls_Manager::SLIDER,
713	'size_units' => [ 'px', '%', 'em' ],
714	'range' => [
715	'px' => [
716	'max' => 500
717	]
718	],
719	'selectors' => [
720	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconplus' => 'width:{{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};',
721	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconminus' => 'width:{{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};'
722	]
723	]
724	);
725
726	$this->add_control(
727	'faq_box_content_icon_color',
728	[
729	'label' => esc_html__( 'Icon Color', 'betterdocs' ),
730	'type' => Controls_Manager::COLOR,
731	'selectors' => [
732	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconplus path' => 'fill:{{VALUE}} ! important;',
733	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconminus path' => 'fill:{{VALUE}} ! important;',
734	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconplus g' => 'stroke:{{VALUE}} ! important;',
735	'{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-iconminus g' => 'stroke:{{VALUE}} ! important;'
736	]
737	]
738	);
739
740	$this->end_controls_section();
741
742	$this->start_controls_section(
743	'faq_group_icon_layout_4',
744	[
745	'label' => __( 'FAQ Group Icon', 'betterdocs' ),
746	'tab' => Controls_Manager::TAB_STYLE,
747	'condition' => [
748	'faq_layout_selection' => ['layout-4']
749	]
750	]
751	);
752
753	$this->add_responsive_control(
754	'faq_box_content_icon_height_layout_4',
755	[
756	'label' => esc_html__( 'Icon Height', 'betterdocs' ),
757	'type' => Controls_Manager::SLIDER,
758	'size_units' => [ 'px', '%', 'em' ],
759	'range' => [
760	'px' => [
761	'max' => 500
762	]
763	],
764	'selectors' => [
765	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-icon svg' => 'height:{{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}};',
766	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab img' => 'height:{{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}};',
767	]
768	]
769	);
770
771	$this->add_responsive_control(
772	'faq_box_content_icon_width_layout_4',
773	[
774	'label' => esc_html__( 'Icon Width', 'betterdocs' ),
775	'type' => Controls_Manager::SLIDER,
776	'size_units' => [ 'px', '%', 'em' ],
777	'range' => [
778	'px' => [
779	'max' => 500
780	]
781	],
782	'selectors' => [
783	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-icon svg' => 'width:{{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};',
784	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab img' => 'width:{{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};'
785	]
786	]
787	);
788
789	$this->add_control(
790	'faq_box_content_icon_color_layout_4',
791	[
792	'label' => esc_html__( 'Icon Color', 'betterdocs' ),
793	'type' => Controls_Manager::COLOR,
794	'selectors' => [
795	'{{WRAPPER}} .betterdocs-faq-wrapper.betterdocs-faq-layout-4 .betterdocs-faq-inner-wrapper .betterdocs-faq-tab-wrapper .betterdocs-faq-tab .faq-tab-icon svg g path' => 'fill:{{VALUE}} ! important;'
796	]
797	]
798	);
799
800	$this->end_controls_section();
801	}
802
803	protected function render_callback() {
804	$control_values = $this->get_settings_for_display();
805
806	$specific_faqs = ! empty( $control_values['select_specific_faq'] ) ? implode( ',', $control_values['select_specific_faq'] ) : '';
807
808	$faqs_exclude = ! empty( $control_values['exclude_specific_faq'] ) ? implode( ',', $control_values['exclude_specific_faq'] ) : '';
809
810	betterdocs()->views->get(
811	'layouts/faq',
812	[
813	'enable' => true,
814	'have_posts' => true,
815	'layout' => $control_values['faq_layout_selection'],
816	'shortcode_attr' => [
817	'group_exclude' => $faqs_exclude,
818	'class' => 'betterdocs-faq-' . $control_values['faq_layout_selection'],
819	'groups' => $specific_faqs,
820	'faq_heading' => $control_values['faq_layout_section'],
821	'faq_section_title_tag' => $control_values['faq_section_title_tag'],
822	'faq_group_title_tag' => $control_values['faq_group_title_tag']
823	]
824	]
825	);
826
827	if ( ElementorPlugin::instance()->editor->is_edit_mode() ) {
828	$this->render_editor_script();
829	}
830	}
831
832	protected function render_editor_script() {
833	?>
834	<script>
835	jQuery(document).ready(function($) {
836	const $tabs = $(".betterdocs-faq-tab");
837	const $mobileTabs = $(".betterdocs-faq-list-wrapper .betterdocs-faq-tab");
838	const $contents = $(".betterdocs-faq-list-content");
839
840	$tabs.on("click", function () {
841	const termId = $(this).data("term-id");
842
843	// Remove active class from all tabs and hide all contents
844	$tabs.removeClass("active");
845	$contents.hide().removeClass("active");
846
847	// Reset all icons to default state
848	$(".betterdocs-faq-iconplus").show();
849	$(".betterdocs-faq-iconminus").hide();
850
851	// Add active class to the clicked tab and show the corresponding content
852	$(this).addClass("active");
853	$contents.filter(`[data-term-id="${termId}"]`).show().addClass("active");
854
855	// Toggle icons for the active tab
856	$(this).find(".betterdocs-faq-iconplus").hide();
857	$(this).find(".betterdocs-faq-iconminus").show();
858	});
859
860	// Trigger click on the first tab to show the first content by default
861	if ($tabs.length > 0) {
862	$tabs.first().trigger("click").addClass("active");
863
864	const $mobileFirstTab = $mobileTabs.first();
865	$mobileFirstTab.addClass("active");
866	$mobileFirstTab.find(".betterdocs-faq-iconplus").hide();
867	$mobileFirstTab.find(".betterdocs-faq-iconminus").show();
868	}
869
870	$('.betterdocs-faq-post').on('click', function(e) {
871	var current_node = $(this);
872	var active_list = $('.betterdocs-faq-group.active');
873
874	if( ! current_node.parent().hasClass('active') ) {
875	current_node.parent().addClass('active');
876	current_node.children('svg').toggle();
877	current_node.next().slideDown();
878	}
879
880	for( let node of active_list ) {
881	if( $(node).hasClass('active') ) {
882	$(node).removeClass('active');
883	$(node).children('.betterdocs-faq-post').children('svg').toggle();
884	$(node).children('.betterdocs-faq-main-content').slideUp();
885	}
886	}
887	});
888
889	$('.betterdocs-faq-post-layout-2').on('click', function(e) {
890	var current_node = $(this);
891
892	if( ! current_node.parent().hasClass('active') ) {
893	current_node.parent().addClass('active');
894	current_node.children('.betterdocs-faq-post-layout-2-icon-group').children('svg').toggle();
895	current_node.next().slideDown();
896	} else {
897	current_node.parent().removeClass('active');
898	current_node.children('.betterdocs-faq-post-layout-2-icon-group').children('svg').toggle();
899	current_node.next().slideUp();
900	}
901
902	});
903	});
904	</script>
905	<?php
906	}
907	}
908