PluginProbe
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 3.8.9
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v3.8.9
4.9.3 4.9.2 4.9.1 4.9.0 4.8.2 4.8.1 4.8.0 4.7.0 4.6.2 4.6.1 4.6.0 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 4.5.1 4.5.0 4.4.1 4.4.0 3.3.4 3.4.0 3.4.1 3.4.2 3.5.0 All 201 releases
← All changes | includes/Editors/Elementor/Widget/Basic/FAQ.php +755 -409 3.4.2 → 3.8.9 View file →
@@ -1,487 +1,833 @@
1 1 <?php
2 2
3 3 namespace WPDeveloper\BetterDocs\Editors\Elementor\Widget\Basic;
4 +
4 5 use Elementor\Widget_Base;
5 6
6 7 // If this file is called directly, abort.
7 8 if ( ! defined( 'ABSPATH' ) ) {
8 - exit;
9 + exit;
9 10 }
10 11
11 12 use Elementor\Group_Control_Background;
12 13 use Elementor\Plugin as ElementorPlugin;
13 -use Elementor\Controls_Manager as Controls_Manager;
14 +use Elementor\Controls_Manager;
14 15 use WPDeveloper\BetterDocs\Editors\Elementor\Helper;
15 -use Elementor\Group_Control_Border as Group_Control_Border;
16 -use Elementor\Group_Control_Typography as Group_Control_Typography;
16 +use Elementor\Group_Control_Border;
17 +use Elementor\Group_Control_Typography;
17 18
18 19 class FAQ extends Widget_Base {
19 20
20 - public function get_name() {
21 - return 'betterdocs-faq';
22 - }
21 + public function get_name() {
22 + return 'betterdocs-faq';
23 + }
23 24
24 - public function get_title() {
25 - return __( 'BetterDocs FAQ', 'betterdocs' );
26 - }
25 + public function get_title() {
26 + return __( 'BetterDocs FAQ', 'betterdocs' );
27 + }
27 28
28 - public function get_custom_help_url() {
29 - return 'http://betterdocs.co/docs/betterdocs-faq-builder-in-elementor/';
30 - }
29 + public function get_custom_help_url() {
30 + return 'http://betterdocs.co/docs/betterdocs-faq-builder-in-elementor/';
31 + }
31 32
32 - public function get_icon() {
33 - return 'betterdocs-icon-faq';
34 - }
33 + public function get_icon() {
34 + return 'betterdocs-icon-faq';
35 + }
35 36
36 - public function get_categories() {
37 - return ['betterdocs-elements'];
38 - }
37 + public function get_categories() {
38 + return [ 'betterdocs-elements' ];
39 + }
39 40
40 - public function get_keywords() {
41 - return ['betterdocs-elements', 'betterdocs', 'docs', 'faq', 'FAQ', 'betterdocs-faq'];
42 - }
41 + public function get_keywords() {
42 + return [ 'betterdocs-elements', 'betterdocs', 'docs', 'faq', 'FAQ', 'betterdocs-faq' ];
43 + }
43 44
44 - public function get_style_depends() {
45 - return ['betterdocs-faq'];
46 - }
45 + public function get_style_depends() {
46 + return [ 'betterdocs-faq' ];
47 + }
47 48
48 - protected function register_controls() {
49 - $this->start_controls_section(
50 - 'faq_section_controls',
51 - [
52 - 'label' => __( 'Layout Options', 'betterdocs' )
53 - ]
54 - );
49 + protected function register_controls() {
50 + $this->start_controls_section(
51 + 'faq_section_controls',
52 + [
53 + 'label' => __( 'Layout Options', 'betterdocs' )
54 + ]
55 + );
55 56
56 - $this->add_control(
57 - 'faq_layout_selection',
58 - [
59 - 'label' => __( 'Select Layout', 'betterdocs' ),
60 - 'type' => Controls_Manager::SELECT2,
61 - 'options' => [
62 - 'layout-1' => __( 'Modern Layout', 'betterdocs' ),
63 - 'layout-2' => __( 'Classic Layout', 'betterdocs' )
64 - ],
65 - 'default' => 'layout-1',
66 - 'label_block' => true
67 - ]
68 - );
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 + );
69 72
70 - $this->add_control(
71 - 'faq_layout_section',
72 - [
73 - 'label' => __( 'FAQ Section', 'betterdocs' ),
74 - 'type' => Controls_Manager::TEXT,
75 - 'dynamic' => [
76 - 'active' => true
77 - ],
78 - 'default' => __( 'Frequently Asked Questions', 'betterdocs' )
79 - ]
80 - );
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 + );
81 84
82 - $terms = betterdocs()->container->get( Helper::class )->get_faq_terms();
85 + $terms = betterdocs()->container->get( Helper::class )->get_faq_terms();
83 86
84 - $this->add_control(
85 - 'select_specific_faq',
86 - [
87 - 'label' => __( 'Include FAQ Groups', 'betterdocs' ),
88 - 'label_block' => true,
89 - 'type' => Controls_Manager::SELECT2,
90 - 'options' => $terms,
91 - 'multiple' => true,
92 - 'default' => '',
93 - 'select2options' => [
94 - 'placeholder' => __( 'Include FAQ Groups', 'betterdocs' ),
95 - 'allowClear' => true
96 - ]
97 - ]
98 - );
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 + );
99 102
100 - $this->add_control(
101 - 'exclude_specific_faq',
102 - [
103 - 'label' => __( 'Exclude FAQ Groups', 'betterdocs' ),
104 - 'label_block' => true,
105 - 'type' => Controls_Manager::SELECT2,
106 - 'options' => $terms,
107 - 'multiple' => true,
108 - 'default' => '',
109 - 'select2options' => [
110 - 'placeholder' => __( 'Exclude FAQ Groups', 'betterdocs' ),
111 - 'allowClear' => true
112 - ]
113 - ]
114 - );
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 + );
115 118
116 - $this->end_controls_section();
119 + $this->end_controls_section();
117 120
118 - /******* Common Section Style For Both Layouts *******/
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 + );
119 133
120 - $this->start_controls_section(
121 - 'faq_section_style',
122 - [
123 - 'label' => __( 'FAQ Section Title', 'betterdocs' ),
124 - 'tab' => Controls_Manager::TAB_STYLE
125 - ]
126 - );
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 + );
127 145
128 - $this->add_control(
129 - 'faq_layout_section_title_color',
130 - [
131 - 'label' => esc_html__( 'Text Color', 'betterdocs' ),
132 - 'type' => Controls_Manager::COLOR,
133 - 'selectors' => [
134 - '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-section-title' => 'color:{{VALUE}};'
135 - ]
136 - ]
137 - );
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 + );
138 157
139 - $this->add_group_control(
140 - Group_Control_Typography::get_type(),
141 - [
142 - 'name' => 'faq_layout_section_title_typography',
143 - 'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-section-title'
144 - ]
145 - );
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 + );
146 166
147 - $this->end_controls_section();
167 + $this->end_controls_section();
148 168
149 - $this->start_controls_section(
150 - 'faq_box_title_section',
151 - [
152 - 'label' => __( 'FAQ Group Title', 'betterdocs' ),
153 - 'tab' => Controls_Manager::TAB_STYLE
154 - ]
155 - );
169 + /******* Common Section Style For Both Layouts *******/
156 170
157 - $this->add_control(
158 - 'faq_box_title_color',
159 - [
160 - 'label' => esc_html__( 'Title Color', 'betterdocs' ),
161 - 'type' => Controls_Manager::COLOR,
162 - 'selectors' => [
163 - '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title h2' => 'color:{{VALUE}};'
164 - ]
165 - ]
166 - );
171 + $this->start_controls_section(
172 + 'faq_section_style',
173 + [
174 + 'label' => __( 'FAQ Section Title', 'betterdocs' ),
175 + 'tab' => Controls_Manager::TAB_STYLE
176 + ]
177 + );
167 178
168 - $this->add_control(
169 - 'faq_box_title_color_hover',
170 - [
171 - 'label' => esc_html__( 'Title Hover Color', 'betterdocs' ),
172 - 'type' => Controls_Manager::COLOR,
173 - 'selectors' => [
174 - '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title h2:hover' => 'color:{{VALUE}};'
175 - ]
176 - ]
177 - );
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 + );
178 189
179 - $this->add_group_control(
180 - Group_Control_Typography::get_type(),
181 - [
182 - 'name' => 'faq_box_title_typography',
183 - 'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-title h2'
184 - ]
185 - );
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 + );
186 197
187 - $this->end_controls_section();
198 + $this->end_controls_section();
188 199
189 - $this->start_controls_section(
190 - 'faq_box_style_section',
191 - [
192 - 'label' => __( 'FAQ List', 'betterdocs' ),
193 - 'tab' => Controls_Manager::TAB_STYLE
194 - ]
195 - );
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 + );
196 210
197 - $this->add_responsive_control(
198 - 'faq_box_padding',
199 - [
200 - 'label' => __( 'Padding', 'betterdocs' ),
201 - 'type' => Controls_Manager::DIMENSIONS,
202 - 'size_units' => ['px', '%', 'em'],
203 - 'selectors' => [
204 - '{{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}};'
205 - ]
206 - ]
207 - );
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 + );
208 221
209 - $this->add_responsive_control(
210 - 'faq_box_margin',
211 - [
212 - 'label' => __( 'Margin', 'betterdocs' ),
213 - 'type' => Controls_Manager::DIMENSIONS,
214 - 'size_units' => ['px', '%', 'em'],
215 - 'selectors' => [
216 - '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
217 - ]
218 - ]
219 - );
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 + );
220 232
221 - $this->add_group_control(
222 - Group_Control_Typography::get_type(),
223 - [
224 - 'name' => 'faq_box_typography',
225 - 'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name'
226 - ]
227 - );
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 + );
228 240
229 - $this->add_control(
230 - 'faq_box_term_title_color',
231 - [
232 - 'label' => esc_html__( 'Color', 'betterdocs' ),
233 - 'type' => Controls_Manager::COLOR,
234 - 'selectors' => [
235 - '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post .betterdocs-faq-post-name' => 'color:{{VALUE}};'
236 - ]
237 - ]
238 - );
241 + $this->end_controls_section();
239 242
240 - $this->start_controls_tabs( 'faq_tabs' );
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 + );
241 253
242 - // Normal State Tab
243 - $this->start_controls_tab(
244 - 'faq_box_normal',
245 - ['label' => esc_html__( 'Normal', 'betterdocs' )]
246 - );
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 + );
247 264
248 - $this->add_group_control(
249 - Group_Control_Border::get_type(),
250 - [
251 - 'name' => 'faq_box_border_normal',
252 - 'label' => esc_html__( 'Border', 'betterdocs' ),
253 - 'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post'
254 - ]
255 - );
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 + );
256 276
257 - $this->add_group_control(
258 - Group_Control_Background::get_type(),
259 - [
260 - 'name' => 'faq_box_background_normal',
261 - 'label' => esc_html__( 'Background', 'betterdocs' ),
262 - 'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post'
263 - ]
264 - );
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 + );
265 284
266 - $this->end_controls_tab();
285 + $this->end_controls_section();
267 286
268 - // Hover State Tab
269 - $this->start_controls_tab(
270 - 'faq_box_hover',
271 - ['label' => esc_html__( 'Hover', 'betterdocs' )]
272 - );
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 + );
273 297
274 - $this->add_group_control(
275 - Group_Control_Border::get_type(),
276 - [
277 - 'name' => 'faq_box_border_hover',
278 - 'label' => esc_html__( 'Border', 'betterdocs' ),
279 - 'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post:hover'
280 - ]
281 - );
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 + );
282 309
283 - $this->add_group_control(
284 - Group_Control_Background::get_type(),
285 - [
286 - 'name' => 'faq_box_background_hover',
287 - 'label' => esc_html__( 'Background', 'betterdocs' ),
288 - 'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post:hover'
289 - ]
290 - );
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 + );
291 321
292 - $this->end_controls_tab();
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 + );
293 329
294 - $this->end_controls_tabs();
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 + );
295 340
296 - $this->end_controls_section();
341 + $this->start_controls_tabs( 'faq_tabs' );
297 342
298 - $this->start_controls_section(
299 - 'faq_box_content_section',
300 - [
301 - 'label' => __( 'FAQ Content', 'betterdocs' ),
302 - 'tab' => Controls_Manager::TAB_STYLE
303 - ]
304 - );
343 + // Normal State Tab
344 + $this->start_controls_tab(
345 + 'faq_box_normal',
346 + [ 'label' => esc_html__( 'Normal', 'betterdocs' ) ]
347 + );
305 348
306 - $this->add_responsive_control(
307 - 'faq_box_content_section_padding',
308 - [
309 - 'label' => __( 'Padding', 'betterdocs' ),
310 - 'type' => Controls_Manager::DIMENSIONS,
311 - 'size_units' => ['px', '%', 'em'],
312 - 'selectors' => [
313 - '{{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}};'
314 - ]
315 - ]
316 - );
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 + );
317 357
318 - $this->add_responsive_control(
319 - 'faq_box_content_section_margin',
320 - [
321 - 'label' => __( 'Margin', 'betterdocs' ),
322 - 'type' => Controls_Manager::DIMENSIONS,
323 - 'size_units' => ['px', '%', 'em'],
324 - 'selectors' => [
325 - '{{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}};'
326 - ]
327 - ]
328 - );
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 + );
329 366
330 - $this->add_group_control(
331 - Group_Control_Background::get_type(),
332 - [
333 - 'name' => 'faq_box_content_section_background',
334 - 'label' => esc_html__( 'Background', 'betterdocs' ),
335 - 'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content'
336 - ]
337 - );
367 + $this->end_controls_tab();
338 368
339 - $this->add_group_control(
340 - Group_Control_Typography::get_type(),
341 - [
342 - 'name' => 'faq_box_content_section_typography',
343 - 'selector' => '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content'
344 - ]
345 - );
369 + // Hover State Tab
370 + $this->start_controls_tab(
371 + 'faq_box_hover',
372 + [ 'label' => esc_html__( 'Hover', 'betterdocs' ) ]
373 + );
346 374
347 - $this->add_control(
348 - 'faq_box_content_section_color',
349 - [
350 - 'label' => esc_html__( 'Color', 'betterdocs' ),
351 - 'type' => Controls_Manager::COLOR,
352 - 'selectors' => [
353 - '{{WRAPPER}} .betterdocs-faq-wrapper .betterdocs-faq-inner-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-main-content' => 'color:{{VALUE}};'
354 - ]
355 - ]
356 - );
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 + );
357 383
358 - $this->end_controls_section();
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 + );
359 392
360 - $this->start_controls_section(
361 - 'faq_box_content_icon',
362 - [
363 - 'label' => __( 'FAQ List Icon', 'betterdocs' ),
364 - 'tab' => Controls_Manager::TAB_STYLE
365 - ]
366 - );
393 + $this->end_controls_tab();
367 394
368 - $this->add_responsive_control(
369 - 'faq_box_content_icon_height',
370 - [
371 - 'label' => esc_html__( 'Icon Height', 'betterdocs' ),
372 - 'type' => Controls_Manager::SLIDER,
373 - 'size_units' => ['px', '%', 'em'],
374 - 'range' => [
375 - 'px' => [
376 - 'max' => 500
377 - ]
378 - ],
379 - 'selectors' => [
380 - '{{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}};',
381 - '{{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}};'
382 - ]
383 - ]
384 - );
395 + $this->end_controls_tabs();
385 396
386 - $this->add_responsive_control(
387 - 'faq_box_content_icon_width',
388 - [
389 - 'label' => esc_html__( 'Icon Width', 'betterdocs' ),
390 - 'type' => Controls_Manager::SLIDER,
391 - 'size_units' => ['px', '%', 'em'],
392 - 'range' => [
393 - 'px' => [
394 - 'max' => 500
395 - ]
396 - ],
397 - 'selectors' => [
398 - '{{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}};',
399 - '{{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}};'
400 - ]
401 - ]
402 - );
397 + $this->end_controls_section();
403 398
404 - $this->add_control(
405 - 'faq_box_content_icon_color',
406 - [
407 - 'label' => esc_html__( 'Icon Color', 'betterdocs' ),
408 - 'type' => Controls_Manager::COLOR,
409 - 'selectors' => [
410 - '{{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;',
411 - '{{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;',
412 - '{{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;',
413 - '{{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;'
414 - ]
415 - ]
416 - );
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 + );
417 409
418 - $this->end_controls_section();
419 - }
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 + );
420 421
421 - protected function render() {
422 - $control_values = $this->get_settings_for_display();
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 + );
423 433
424 - $specific_faqs = ! empty( $control_values['select_specific_faq'] ) ? implode( ',', $control_values['select_specific_faq'] ) : '';
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 + );
425 441
426 - $faqs_exclude = ! empty( $control_values['exclude_specific_faq'] ) ? implode( ',', $control_values['exclude_specific_faq'] ) : '';
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 + );
427 452
428 - betterdocs()->views->get( 'layouts/faq', [
429 - 'enable' => true,
430 - 'have_posts' => true,
431 - 'layout' => $control_values['faq_layout_selection'],
432 - 'shortcode_attr' => [
433 - 'group_exclude' => $faqs_exclude,
434 - 'class' => 'betterdocs-faq-' . $control_values['faq_layout_selection'],
435 - 'groups' => $specific_faqs,
436 - 'faq_heading' => $control_values['faq_layout_section']
437 - ]
438 - ] );
453 + $this->start_controls_tabs( 'faq_tabs_layout_4' );
439 454
440 - if ( ElementorPlugin::instance()->editor->is_edit_mode() ) {
441 - $this->render_editor_script();
442 - }
443 - }
455 + // Normal State Tab
456 + $this->start_controls_tab(
457 + 'faq_box_normal_layout_4',
458 + [ 'label' => esc_html__( 'Normal', 'betterdocs' ) ]
459 + );
444 460
445 - protected function render_editor_script()
446 - {
447 - ?>
448 - <script>
449 - jQuery(document).ready(function($) {
450 - $('.betterdocs-faq-post').on('click', function(e) {
451 - var current_node = $(this);
452 - var active_list = $('.betterdocs-faq-group.active');
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 + );
453 469
454 - if( ! current_node.parent().hasClass('active') ) {
455 - current_node.parent().addClass('active');
456 - current_node.children('svg').toggle();
457 - current_node.next().slideDown();
458 - }
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 + );
459 478
460 - for( let node of active_list ) {
461 - if( $(node).hasClass('active') ) {
462 - $(node).removeClass('active');
463 - $(node).children('.betterdocs-faq-post').children('svg').toggle();
464 - $(node).children('.betterdocs-faq-main-content').slideUp();
465 - }
466 - }
467 - });
479 + $this->end_controls_tab();
468 480
469 - $('.betterdocs-faq-post-layout-2').on('click', function(e) {
470 - var current_node = $(this);
481 + // Hover State Tab
482 + $this->start_controls_tab(
483 + 'faq_box_hover_layout_4',
484 + [ 'label' => esc_html__( 'Hover', 'betterdocs' ) ]
485 + );
471 486
472 - if( ! current_node.parent().hasClass('active') ) {
473 - current_node.parent().addClass('active');
474 - current_node.children('.betterdocs-faq-post-layout-2-icon-group').children('svg').toggle();
475 - current_node.next().slideDown();
476 - } else {
477 - current_node.parent().removeClass('active');
478 - current_node.children('.betterdocs-faq-post-layout-2-icon-group').children('svg').toggle();
479 - current_node.next().slideUp();
480 - }
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 + );
481 495
482 - });
483 - });
484 - </script>
485 - <?php
486 - }
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 + }
487 833 }