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

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

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