betterdocs / includes / Editors / Elementor / Widget / Reactions.php

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

1,005 lines 27.1 KB

Raw Download Zip

1	<?php
2
3	namespace WPDeveloper\BetterDocs\Editors\Elementor\Widget;
4
5	if ( ! defined( 'ABSPATH' ) ) {
6	exit; // Exit if accessed directly
7	}
8
9	use Elementor\Controls_Manager;
10	use Elementor\Group_Control_Background;
11	use Elementor\Group_Control_Typography;
12	use WPDeveloper\BetterDocs\Editors\Elementor\BaseWidget;
13	use Elementor\Group_Control_Border;
14	use Elementor\Group_Control_Box_Shadow;
15
16	class Reactions extends BaseWidget {
17	public $view_wrapper = 'betterdocs-article-reactions';
18
19	public function get_name() {
20	return 'betterdocs-reactions';
21	}
22
23	public function get_title() {
24	return __( 'Doc Reactions', 'betterdocs' );
25	}
26
27	public function get_icon() {
28	return 'betterdocs-icon-Reactions';
29	}
30
31	public function get_categories() {
32	return [ 'betterdocs-elements-single' ];
33	}
34
35	public function get_keywords() {
36	return [ 'betterdocs-elements', 'reaction', 'betterdocs', 'heading', 'docs' ];
37	}
38
39	public function get_style_depends() {
40	return [ 'betterdocs-reactions' ];
41	}
42
43	public function get_script_depends() {
44	return [ 'betterdocs-reactions' ];
45	}
46
47	public function get_custom_help_url() {
48	return 'https://betterdocs.co/docs/single-doc-in-elementor';
49	}
50
51	protected function register_controls() {
52	$this->start_controls_section(
53	'reactions_layout_options',
54	[
55	'label' => __( 'Layout Options', 'betterdocs' )
56	]
57	);
58
59	$this->add_control(
60	'reactions_layout_template',
61	[
62	'label' => __( 'Select Layout', 'betterdocs' ),
63	'type' => Controls_Manager::SELECT2,
64	'options' => [
65	'layout-1' => esc_html__( 'Layout 1', 'betterdocs' ),
66	'layout-2' => esc_html__( 'Layout 2', 'betterdocs' ),
67	'layout-3' => esc_html__( 'Layout 3', 'betterdocs' )
68	],
69	'default' => 'layout-1',
70	'label_block' => true
71	]
72	);
73
74	$this->add_control(
75	'happy',
76	[
77	'label' => esc_html__( 'Happy', 'betterdocs' ),
78	'type' => Controls_Manager::SWITCHER,
79	'label_on' => esc_html__( 'Show', 'betterdocs' ),
80	'label_off' => esc_html__( 'Hide', 'betterdocs' ),
81	'return_value' => true,
82	'default' => true,
83	'condition' => [
84	'reactions_layout_template' => [ 'layout-1' ,'layout-2', 'layout-3' ]
85	]
86	]
87	);
88
89	$this->add_control(
90	'happy_icon',
91	[
92	'label' => esc_html__( 'Happy Icon', 'betterdocs' ),
93	'type' => Controls_Manager::MEDIA,
94	'condition' => [
95	'reactions_layout_template' => [ 'layout-1', 'layout-2', 'layout-3' ]
96	]
97	]
98	);
99
100	$this->add_control(
101	'normal',
102	[
103	'label' => esc_html__( 'Normal', 'betterdocs' ),
104	'type' => Controls_Manager::SWITCHER,
105	'label_on' => esc_html__( 'Show', 'betterdocs' ),
106	'label_off' => esc_html__( 'Hide', 'betterdocs' ),
107	'return_value' => true,
108	'default' => true,
109	'condition' => [
110	'reactions_layout_template' => [ 'layout-1', 'layout-2', 'layout-3' ]
111	]
112	]
113	);
114
115	$this->add_control(
116	'normal_icon',
117	[
118	'label' => esc_html__( 'Normal Icon', 'betterdocs' ),
119	'type' => Controls_Manager::MEDIA,
120	'condition' => [
121	'reactions_layout_template' => [ 'layout-1', 'layout-2', 'layout-3' ]
122	]
123	]
124	);
125
126	$this->add_control(
127	'sad',
128	[
129	'label' => esc_html__( 'Sad', 'betterdocs' ),
130	'type' => Controls_Manager::SWITCHER,
131	'label_on' => esc_html__( 'Show', 'betterdocs' ),
132	'label_off' => esc_html__( 'Hide', 'betterdocs' ),
133	'return_value' => true,
134	'default' => true,
135	'condition' => [
136	'reactions_layout_template' => [ 'layout-1', 'layout-2', 'layout-3' ]
137	]
138	]
139	);
140
141	$this->add_control(
142	'sad_icon',
143	[
144	'label' => esc_html__( 'Sad Icon', 'betterdocs' ),
145	'type' => Controls_Manager::MEDIA,
146	'condition' => [
147	'reactions_layout_template' => [ 'layout-1', 'layout-2', 'layout-3' ]
148	]
149	]
150	);
151
152	$this->end_controls_section();
153
154	$this->box_style_layout_1();
155	$this->title_style_layout_1();
156	$this->icon_style_layout_1();
157
158	$this->box_style_layout_2();
159	$this->title_style_layout_2();
160	$this->icon_style_layout_2();
161
162	$this->box_style_layout_3();
163	$this->title_style_layout_3();
164	$this->icon_style_layout_3();
165	}
166
167	public function box_style_layout_1() {
168	$this->start_controls_section(
169	'section_column_settings',
170	[
171	'label' => __( 'Box Style', 'betterdocs' ),
172	'tab' => Controls_Manager::TAB_STYLE,
173	'condition' => [
174	'reactions_layout_template' => [ 'layout-1' ]
175	]
176	]
177	);
178
179	$this->add_control(
180	'reaction_box_width',
181	[
182	'label' => __( 'Width', 'betterdocs' ),
183	'type' => Controls_Manager::SLIDER,
184	'size_units' => [ 'px' ],
185	'range' => [
186	'px' => [
187	'max' => 2500,
188	'step' => 1
189	]
190	],
191	'selectors' => [
192	'{{WRAPPER}} .betterdocs-article-reactions' => 'width: {{SIZE}}px;'
193	]
194	]
195	);
196
197	$this->add_control(
198	'reaction_box_height',
199	[
200	'label' => __( 'Height', 'betterdocs' ),
201	'type' => Controls_Manager::SLIDER,
202	'size_units' => [ 'px' ],
203	'range' => [
204	'px' => [
205	'max' => 500,
206	'step' => 1
207	]
208	],
209	'selectors' => [
210	'{{WRAPPER}} .betterdocs-article-reactions' => 'height: {{SIZE}}px;'
211	]
212	]
213	);
214
215	$this->add_group_control(
216	Group_Control_Background::get_type(),
217	[
218	'name' => 'reaction_box_background',
219	'types' => [ 'classic', 'gradient' ],
220	'selector' => '{{WRAPPER}} .betterdocs-article-reactions'
221	]
222	);
223
224	$this->add_responsive_control(
225	'reaction_box_space', // Legacy control id but new control
226	[
227	'label' => __( 'Box Spacing', 'betterdocs' ),
228	'type' => Controls_Manager::DIMENSIONS,
229	'size_units' => [ 'px', '%', 'em' ],
230	'selectors' => [
231	'{{WRAPPER}} .betterdocs-article-reactions' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
232	]
233	]
234	);
235
236	$this->add_responsive_control(
237	'reaction_box_padding',
238	[
239	'label' => __( 'Box Padding', 'betterdocs' ),
240	'type' => Controls_Manager::DIMENSIONS,
241	'size_units' => [ 'px', 'em', '%' ],
242	'selectors' => [
243	'{{WRAPPER}} .betterdocs-article-reactions' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
244	]
245	]
246	);
247
248	$this->add_group_control(
249	Group_Control_Border::get_type(),
250	[
251	'name' => 'reaction_box_border_normal',
252	'label' => esc_html__( 'Border', 'betterdocs' ),
253	'selector' => '{{WRAPPER}} .betterdocs-article-reactions'
254	]
255	);
256
257	$this->add_responsive_control(
258	'reaction_box_radius_normal',
259	[
260	'label' => esc_html__( 'Border Radius', 'betterdocs' ),
261	'type' => Controls_Manager::DIMENSIONS,
262	'size_units' => [ 'px', 'em', '%' ],
263	'selectors' => [
264	'{{WRAPPER}} .betterdocs-article-reactions' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
265	]
266	]
267	);
268
269	$this->add_group_control(
270	Group_Control_Box_Shadow::get_type(),
271	[
272	'name' => 'reaction_box_shadow_normal',
273	'selector' => '{{WRAPPER}} .betterdocs-article-reactions'
274	]
275	);
276
277	$this->end_controls_section();
278	}
279
280	public function box_style_layout_2() {
281	$this->start_controls_section(
282	'section_column_settings_layout_2',
283	[
284	'label' => __( 'Box Style', 'betterdocs' ),
285	'tab' => Controls_Manager::TAB_STYLE,
286	'condition' => [
287	'reactions_layout_template' => [ 'layout-2' ]
288	]
289	]
290	);
291
292	$this->add_control(
293	'reaction_box_width_layout_2',
294	[
295	'label' => __( 'Width', 'betterdocs' ),
296	'type' => Controls_Manager::SLIDER,
297	'size_units' => [ 'px' ],
298	'range' => [
299	'px' => [
300	'max' => 2500,
301	'step' => 1
302	]
303	],
304	'selectors' => [
305	'{{WRAPPER}} .betterdocs-elementor.betterdocs-article-reactions' => 'width: {{SIZE}}px;'
306	]
307	]
308	);
309
310	$this->add_control(
311	'reaction_box_height_layout_2',
312	[
313	'label' => __( 'Height', 'betterdocs' ),
314	'type' => Controls_Manager::SLIDER,
315	'size_units' => [ 'px' ],
316	'range' => [
317	'px' => [
318	'max' => 500,
319	'step' => 1
320	]
321	],
322	'selectors' => [
323	'{{WRAPPER}} .betterdocs-elementor.betterdocs-article-reactions' => 'height: {{SIZE}}px;'
324	]
325	]
326	);
327
328	$this->add_group_control(
329	Group_Control_Background::get_type(),
330	[
331	'name' => 'reaction_box_background_layout_2',
332	'types' => [ 'classic', 'gradient' ],
333	'selector' => '{{WRAPPER}} .betterdocs-elementor.betterdocs-article-reactions'
334	]
335	);
336
337	$this->add_responsive_control(
338	'reaction_box_space_layout_2', // Legacy control id but new control
339	[
340	'label' => __( 'Box Spacing', 'betterdocs' ),
341	'type' => Controls_Manager::DIMENSIONS,
342	'size_units' => [ 'px', '%', 'em' ],
343	'selectors' => [
344	'{{WRAPPER}} .betterdocs-elementor.betterdocs-article-reactions' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
345	]
346	]
347	);
348
349	$this->add_responsive_control(
350	'reaction_box_padding_layout_2',
351	[
352	'label' => __( 'Box Padding', 'betterdocs' ),
353	'type' => Controls_Manager::DIMENSIONS,
354	'size_units' => [ 'px', 'em', '%' ],
355	'selectors' => [
356	'{{WRAPPER}} .betterdocs-elementor.betterdocs-article-reactions' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
357	]
358	]
359	);
360
361	$this->add_group_control(
362	Group_Control_Border::get_type(),
363	[
364	'name' => 'reaction_box_border_normal_layout_2',
365	'label' => esc_html__( 'Border', 'betterdocs' ),
366	'selector' => '{{WRAPPER}} .betterdocs-elementor.betterdocs-article-reactions .betterdocs-article-reactions-box'
367	]
368	);
369
370	$this->add_responsive_control(
371	'reaction_box_radius_normal_layout_2',
372	[
373	'label' => esc_html__( 'Border Radius', 'betterdocs' ),
374	'type' => Controls_Manager::DIMENSIONS,
375	'size_units' => [ 'px', 'em', '%' ],
376	'selectors' => [
377	'{{WRAPPER}} .betterdocs-elementor.betterdocs-article-reactions .betterdocs-article-reactions-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
378	]
379	]
380	);
381
382	$this->add_group_control(
383	Group_Control_Box_Shadow::get_type(),
384	[
385	'name' => 'reaction_box_shadow_normal_layout_2',
386	'selector' => '{{WRAPPER}} .betterdocs-elementor.betterdocs-article-reactions'
387	]
388	);
389
390	$this->end_controls_section();
391	}
392
393	public function box_style_layout_3() {
394	$this->start_controls_section(
395	'section_column_settings_layout_3',
396	[
397	'label' => __( 'Box Style', 'betterdocs' ),
398	'tab' => Controls_Manager::TAB_STYLE,
399	'condition' => [
400	'reactions_layout_template' => [ 'layout-3' ]
401	]
402	]
403	);
404
405	$this->add_control(
406	'reaction_box_width_layout_3',
407	[
408	'label' => __( 'Width', 'betterdocs' ),
409	'type' => Controls_Manager::SLIDER,
410	'size_units' => [ 'px' ],
411	'range' => [
412	'px' => [
413	'max' => 2500,
414	'step' => 1
415	]
416	],
417	'selectors' => [
418	'{{WRAPPER}} .betterdocs-article-reactions' => 'width: {{SIZE}}px;'
419	]
420	]
421	);
422
423	$this->add_control(
424	'reaction_box_height_layout_3',
425	[
426	'label' => __( 'Height', 'betterdocs' ),
427	'type' => Controls_Manager::SLIDER,
428	'size_units' => [ 'px' ],
429	'range' => [
430	'px' => [
431	'max' => 500,
432	'step' => 1
433	]
434	],
435	'selectors' => [
436	'{{WRAPPER}} .betterdocs-article-reactions' => 'height: {{SIZE}}px;'
437	]
438	]
439	);
440
441	$this->add_group_control(
442	Group_Control_Background::get_type(),
443	[
444	'name' => 'reaction_box_background_layout_3',
445	'types' => [ 'classic', 'gradient' ],
446	'selector' => '{{WRAPPER}} .betterdocs-article-reactions'
447	]
448	);
449
450	$this->add_responsive_control(
451	'reaction_box_space_layout_3', // Legacy control id but new control
452	[
453	'label' => __( 'Box Spacing', 'betterdocs' ),
454	'type' => Controls_Manager::DIMENSIONS,
455	'size_units' => [ 'px', '%', 'em' ],
456	'selectors' => [
457	'{{WRAPPER}} .betterdocs-article-reactions' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
458	]
459	]
460	);
461
462	$this->add_responsive_control(
463	'reaction_box_padding_layout_3',
464	[
465	'label' => __( 'Box Padding', 'betterdocs' ),
466	'type' => Controls_Manager::DIMENSIONS,
467	'size_units' => [ 'px', 'em', '%' ],
468	'selectors' => [
469	'{{WRAPPER}} .betterdocs-article-reactions' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
470	]
471	]
472	);
473
474	$this->add_group_control(
475	Group_Control_Border::get_type(),
476	[
477	'name' => 'reaction_box_border_normal_layout_3',
478	'label' => esc_html__( 'Border', 'betterdocs' ),
479	'selector' => '{{WRAPPER}} .betterdocs-article-reactions-box'
480	]
481	);
482
483	$this->add_responsive_control(
484	'reaction_box_radius_normal_layout_3',
485	[
486	'label' => esc_html__( 'Border Radius', 'betterdocs' ),
487	'type' => Controls_Manager::DIMENSIONS,
488	'size_units' => [ 'px', 'em', '%' ],
489	'selectors' => [
490	'{{WRAPPER}} .betterdocs-article-reactions-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
491	]
492	]
493	);
494
495	$this->add_group_control(
496	Group_Control_Box_Shadow::get_type(),
497	[
498	'name' => 'reaction_box_shadow_normal_layout_3',
499	'selector' => '{{WRAPPER}} .betterdocs-article-reactions-box'
500	]
501	);
502
503	$this->end_controls_section();
504	}
505
506	public function title_style_layout_1() {
507	$this->start_controls_section(
508	'section_title_settings',
509	[
510	'label' => __( 'Title', 'betterdocs' ),
511	'tab' => Controls_Manager::TAB_STYLE,
512	'condition' => [
513	'reactions_layout_template' => [ 'layout-1' ]
514	]
515	]
516	);
517
518	$this->add_control(
519	'reaction_text',
520	[
521	'label' => __( 'Text', 'betterdocs' ),
522	'type' => Controls_Manager::TEXT,
523	'default' => esc_html__( 'What are your feelings', 'betterdocs' )
524	]
525	);
526
527	$this->add_control(
528	'reaction_text_tag',
529	[
530	'label' => __( 'Text Tag', 'betterdocs' ),
531	'type' => Controls_Manager::SELECT,
532	'default' => 'h5',
533	'options' => [
534	'h1' => 'H1',
535	'h2' => 'H2',
536	'h3' => 'H3',
537	'h4' => 'H4',
538	'h5' => 'H5',
539	'h6' => 'H6',
540	],
541	]
542	);
543
544	$this->add_control(
545	'reaction_box_title_color',
546	[
547	'label' => esc_html__( 'Color', 'betterdocs' ),
548	'type' => Controls_Manager::COLOR,
549	'selectors' => [
550	'{{WRAPPER}} .betterdocs-article-reactions-heading .betterdocs-reactions-title-tag' => 'color: {{VALUE}};'
551	]
552	]
553	);
554
555	$this->add_group_control(
556	Group_Control_Typography::get_type(),
557	[
558	'name' => 'reaction_box_title_typography',
559	'selector' => '{{WRAPPER}} .betterdocs-article-reactions-heading .betterdocs-reactions-title-tag'
560	]
561	);
562
563	$this->end_controls_section();
564	}
565
566	public function title_style_layout_2() {
567	$this->start_controls_section(
568	'section_title_settings_layout_2',
569	[
570	'label' => __( 'Title', 'betterdocs' ),
571	'tab' => Controls_Manager::TAB_STYLE,
572	'condition' => [
573	'reactions_layout_template' => [ 'layout-2' ]
574	]
575	]
576	);
577
578	$this->add_control(
579	'reaction_text_layout_2',
580	[
581	'label' => __( 'Text', 'betterdocs' ),
582	'type' => Controls_Manager::TEXT,
583	'default' => esc_html__( 'What are your feelings', 'betterdocs' )
584	]
585	);
586
587	$this->add_control(
588	'reaction_text_tag_layout_2',
589	[
590	'label' => __( 'Text Tag', 'betterdocs' ),
591	'type' => Controls_Manager::SELECT,
592	'default' => 'h5',
593	'options' => [
594	'h1' => 'H1',
595	'h2' => 'H2',
596	'h3' => 'H3',
597	'h4' => 'H4',
598	'h5' => 'H5',
599	'h6' => 'H6',
600	],
601	]
602	);
603
604	$this->add_control(
605	'reaction_box_title_color_layout_2',
606	[
607	'label' => esc_html__( 'Color', 'betterdocs' ),
608	'type' => Controls_Manager::COLOR,
609	'selectors' => [
610	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-box p' => 'color: {{VALUE}};'
611	]
612	]
613	);
614
615	$this->add_group_control(
616	Group_Control_Typography::get_type(),
617	[
618	'name' => 'reaction_box_title_typography_layout_2',
619	'selector' => '{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-box p'
620	]
621	);
622
623	$this->end_controls_section();
624	}
625
626	public function title_style_layout_3() {
627	$this->start_controls_section(
628	'section_title_settings_layout_3',
629	[
630	'label' => __( 'Title', 'betterdocs' ),
631	'tab' => Controls_Manager::TAB_STYLE,
632	'condition' => [
633	'reactions_layout_template' => [ 'layout-3' ]
634	]
635	]
636	);
637
638	$this->add_control(
639	'reaction_text_layout_3',
640	[
641	'label' => __( 'Text', 'betterdocs' ),
642	'type' => Controls_Manager::TEXT,
643	'default' => esc_html__( 'Was it helpful ?', 'betterdocs' )
644	]
645	);
646
647	$this->add_control(
648	'reaction_text_tag_layout_3',
649	[
650	'label' => __( 'Text Tag', 'betterdocs' ),
651	'type' => Controls_Manager::SELECT,
652	'default' => 'h5',
653	'options' => [
654	'h1' => 'H1',
655	'h2' => 'H2',
656	'h3' => 'H3',
657	'h4' => 'H4',
658	'h5' => 'H5',
659	'h6' => 'H6',
660	],
661	]
662	);
663
664	$this->add_control(
665	'reaction_box_title_color_layout_3',
666	[
667	'label' => esc_html__( 'Color', 'betterdocs' ),
668	'type' => Controls_Manager::COLOR,
669	'selectors' => [
670	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-sidebar .betterdocs-reactions-title-tag' => 'color: {{VALUE}};'
671	]
672	]
673	);
674
675	$this->add_group_control(
676	Group_Control_Typography::get_type(),
677	[
678	'name' => 'reaction_box_title_typography_layout_3',
679	'selector' => '{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-sidebar .betterdocs-reactions-title-tag'
680	]
681	);
682
683	$this->end_controls_section();
684	}
685
686
687	public function icon_style_layout_1() {
688	$this->start_controls_section(
689	'section_icon_settings',
690	[
691	'label' => __( 'Icon', 'betterdocs' ),
692	'tab' => Controls_Manager::TAB_STYLE,
693	'condition' => [
694	'reactions_layout_template' => [ 'layout-1' ]
695	]
696	]
697	);
698
699	$this->add_control(
700	'reaction_box_icon_area',
701	[
702	'label' => __( 'Area', 'betterdocs' ),
703	'type' => Controls_Manager::SLIDER,
704	'size_units' => [ 'px' ],
705	'range' => [
706	'px' => [
707	'max' => 500,
708	'step' => 1
709	]
710	],
711	'selectors' => [
712	'{{WRAPPER}} .betterdocs-article-reaction-links li a' => 'height: {{SIZE}}px;width: {{SIZE}}px;'
713	]
714	]
715	);
716
717	$this->add_control(
718	'reaction_box_icon_size',
719	[
720	'label' => __( 'Icon Size', 'betterdocs' ),
721	'type' => Controls_Manager::SLIDER,
722	'size_units' => [ 'px' ],
723	'range' => [
724	'px' => [
725	'max' => 500,
726	'step' => 1
727	]
728	],
729	'selectors' => [
730	'{{WRAPPER}} .betterdocs-article-reaction-links li a svg' => 'height: {{SIZE}}px;width: {{SIZE}}px;'
731	]
732	]
733	);
734
735	$this->add_control(
736	'reaction_box_icon_background',
737	[
738	'label' => esc_html__( 'Background Color', 'betterdocs' ),
739	'type' => Controls_Manager::COLOR,
740	'selectors' => [
741	'{{WRAPPER}} .betterdocs-article-reaction-links li a' => 'background-color: {{VALUE}};'
742	]
743	]
744	);
745
746	$this->add_control(
747	'reaction_box_icon_hover_background',
748	[
749	'label' => esc_html__( 'Hover Background Color', 'betterdocs' ),
750	'type' => Controls_Manager::COLOR,
751	'selectors' => [
752	'{{WRAPPER}} .betterdocs-article-reaction-links li a:hover' => 'background-color: {{VALUE}};'
753	]
754	]
755	);
756
757	$this->add_control(
758	'reaction_box_icon_color',
759	[
760	'label' => esc_html__( 'Color', 'betterdocs' ),
761	'type' => Controls_Manager::COLOR,
762	'selectors' => [
763	'{{WRAPPER}} .betterdocs-article-reaction-links li a svg path' => 'fill: {{VALUE}};'
764	]
765	]
766	);
767
768	$this->add_control(
769	'reaction_box_icon_hover_color',
770	[
771	'label' => esc_html__( 'Hover Color', 'betterdocs' ),
772	'type' => Controls_Manager::COLOR,
773	'selectors' => [
774	'{{WRAPPER}} .betterdocs-article-reaction-links li a:hover svg path' => 'fill: {{VALUE}};'
775	]
776	]
777	);
778
779	$this->end_controls_section();
780	}
781
782	public function icon_style_layout_2() {
783	$this->start_controls_section(
784	'section_icon_settings_layout_2',
785	[
786	'label' => __( 'Icon', 'betterdocs' ),
787	'tab' => Controls_Manager::TAB_STYLE,
788	'condition' => [
789	'reactions_layout_template' => [ 'layout-2' ]
790	]
791	]
792	);
793
794	$this->add_control(
795	'reaction_box_icon_area_layout_2',
796	[
797	'label' => __( 'Area', 'betterdocs' ),
798	'type' => Controls_Manager::SLIDER,
799	'size_units' => [ 'px' ],
800	'range' => [
801	'px' => [
802	'max' => 500,
803	'step' => 1
804	]
805	],
806	'selectors' => [
807	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji' => 'height: {{SIZE}}px;width: {{SIZE}}px;'
808	]
809	]
810	);
811
812	$this->add_control(
813	'reaction_box_icon_background_layout_2',
814	[
815	'label' => esc_html__( 'Background Color', 'betterdocs' ),
816	'type' => Controls_Manager::COLOR,
817	'selectors' => [
818	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji' => 'background-color: {{VALUE}};'
819	]
820	]
821	);
822
823	$this->add_control(
824	'reaction_box_icon_hover_background_layout_2',
825	[
826	'label' => esc_html__( 'Hover Background Color', 'betterdocs' ),
827	'type' => Controls_Manager::COLOR,
828	'selectors' => [
829	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji:hover' => 'background-color: {{VALUE}};'
830	]
831	]
832	);
833
834	$this->add_control(
835	'reaction_box_icon_color_layout_2',
836	[
837	'label' => esc_html__( 'Color', 'betterdocs' ),
838	'type' => Controls_Manager::COLOR,
839	'selectors' => [
840	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji svg path' => 'fill: {{VALUE}};'
841	]
842	]
843	);
844
845	$this->add_control(
846	'reaction_box_icon_hover_color_layout_2',
847	[
848	'label' => esc_html__( 'Hover Color', 'betterdocs' ),
849	'type' => Controls_Manager::COLOR,
850	'selectors' => [
851	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-box .layout-2 li a.betterdocs-emoji svg path:hover' => 'fill: {{VALUE}};'
852	]
853	]
854	);
855
856	$this->end_controls_section();
857	}
858
859	public function icon_style_layout_3() {
860	$this->start_controls_section(
861	'section_icon_settings_layout_3',
862	[
863	'label' => __( 'Icon', 'betterdocs' ),
864	'tab' => Controls_Manager::TAB_STYLE,
865	'condition' => [
866	'reactions_layout_template' => [ 'layout-3' ]
867	]
868	]
869	);
870
871	$this->add_control(
872	'reaction_box_icon_area_layout_3',
873	[
874	'label' => __( 'Area', 'betterdocs' ),
875	'type' => Controls_Manager::SLIDER,
876	'size_units' => [ 'px' ],
877	'range' => [
878	'px' => [
879	'max' => 500,
880	'step' => 1
881	]
882	],
883	'selectors' => [
884	'{{WRAPPER}} .betterdocs-article-reactions .layout-3 li a.betterdocs-emoji svg' => 'height: {{SIZE}}px;width: {{SIZE}}px;'
885	]
886	]
887	);
888
889	$this->add_control(
890	'reaction_box_icon_background_layout_3',
891	[
892	'label' => esc_html__( 'Background Color', 'betterdocs' ),
893	'type' => Controls_Manager::COLOR,
894	'selectors' => [
895	'{{WRAPPER}} .betterdocs-article-reactions .layout-3 li a.betterdocs-emoji' => 'background-color: {{VALUE}};'
896	]
897	]
898	);
899
900	$this->add_control(
901	'reaction_box_icon_hover_background_layout_3',
902	[
903	'label' => esc_html__( 'Hover Background Color', 'betterdocs' ),
904	'type' => Controls_Manager::COLOR,
905	'selectors' => [
906	'{{WRAPPER}} .betterdocs-article-reactions .layout-3 li a.betterdocs-emoji:hover' => 'background-color: {{VALUE}};'
907	]
908	]
909	);
910
911	$this->add_control(
912	'reaction_box_icon_color_layout_3',
913	[
914	'label' => esc_html__( 'Color', 'betterdocs' ),
915	'type' => Controls_Manager::COLOR,
916	'selectors' => [
917	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg path' => 'fill: {{VALUE}};'
918	]
919	]
920	);
921
922	$this->add_control(
923	'reaction_box_icon_hover_color_layout_3',
924	[
925	'label' => esc_html__( 'Hover Color', 'betterdocs' ),
926	'type' => Controls_Manager::COLOR,
927	'selectors' => [
928	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links li a svg:hover path' => 'fill: {{VALUE}};'
929	]
930	]
931	);
932
933	$this->add_group_control(
934	Group_Control_Typography::get_type(),
935	[
936	'name' => 'reaction_box_icon_text_layout_3',
937	'selector' => '{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links.layout-3 li .betterdocs-tooltip'
938	]
939	);
940
941	$this->add_responsive_control(
942	'reaction_box_icon_main_wrapper_padding_layout_3', // Legacy control id but new control
943	[
944	'label' => __( 'List Padding', 'betterdocs' ),
945	'type' => Controls_Manager::DIMENSIONS,
946	'size_units' => [ 'px', '%', 'em' ],
947	'selectors' => [
948	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links.layout-3 li' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
949	]
950	]
951	);
952
953	$this->add_responsive_control(
954	'reaction_box_icon_main_wrapper_margin_layout_3', // Legacy control id but new control
955	[
956	'label' => __( 'List Margin', 'betterdocs' ),
957	'type' => Controls_Manager::DIMENSIONS,
958	'size_units' => [ 'px', '%', 'em' ],
959	'selectors' => [
960	'{{WRAPPER}} .betterdocs-article-reactions .betterdocs-article-reactions-sidebar .betterdocs-article-reaction-links.layout-3 li' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
961	]
962	]
963	);
964
965	$this->end_controls_section();
966	}
967
968	public function generate_attributes() {
969	$attributes = [
970	'class' => [
971	$this->attributes['reactions_layout_template']
972	]
973	];
974
975	return $attributes;
976	}
977
978	protected function render_callback() {
979	$layout = &$this->attributes['reactions_layout_template'];
980	if ( $layout == 'layout-1' ) {
981	$this->views( 'widgets/reactions' );
982	} elseif ( $layout == 'layout-2' ) {
983	$this->views( 'widgets/reactions-2' );
984	} else {
985	$this->views( 'widgets/reactions-3' );
986	}
987	}
988
989	public function view_params() {
990	$settings = &$this->attributes;
991	$wrapper_attr = $this->generate_attributes();
992	return [
993	'wrapper_attr' => $wrapper_attr,
994	'reactions_text' => $settings['reactions_layout_template'] == 'layout-1' ? $this->attributes['reaction_text'] : ( $settings['reactions_layout_template'] == 'layout-2' ? $this->attributes['reaction_text_layout_2'] : $this->attributes['reaction_text_layout_3'] ),
995	'text_tag' => $settings['reactions_layout_template'] == 'layout-1' ? $this->attributes['reaction_text_tag'] : ( $settings['reactions_layout_template'] == 'layout-2' ? $this->attributes['reaction_text_tag_layout_2'] : $this->attributes['reaction_text_tag_layout_3'] ),
996	'happy' => $settings['happy'],
997	'happy_icon' => is_array( $settings['happy_icon'] ) ? $settings['happy_icon']['url'] : '',
998	'normal' => $settings['normal'],
999	'normal_icon' => is_array( $settings['normal_icon'] ) ? $settings['normal_icon']['url'] : '',
1000	'sad' => $settings['sad'],
1001	'sad_icon' => is_array( $settings['sad_icon'] ) ? $settings['sad_icon']['url'] : ''
1002	];
1003	}
1004	}
1005