← All changes | includes/Editors/Elementor/Widget/Reactions.php +956 -251 3.4.0 → 4.9.3 View file →

		@@ -2,9 +2,9 @@
2	2
3	3	namespace WPDeveloper\BetterDocs\Editors\Elementor\Widget;
4	4
5	5	if ( ! defined( 'ABSPATH' ) ) {
6		- exit; // Exit if accessed directly
	6	+ exit; // Exit if accessed directly
7	7	}
8	8
9	9	use Elementor\Controls_Manager;
10	10	use Elementor\Group_Control_Background;
		@@ -9,291 +9,996 @@
9	9	use Elementor\Controls_Manager;
10	10	use Elementor\Group_Control_Background;
11	11	use Elementor\Group_Control_Typography;
12	12	use WPDeveloper\BetterDocs\Editors\Elementor\BaseWidget;
13		-use Elementor\Group_Control_Border as Group_Control_Border;
14		-use Elementor\Group_Control_Box_Shadow as Group_Control_Box_Shadow;
	13	+use Elementor\Group_Control_Border;
	14	+use Elementor\Group_Control_Box_Shadow;
15	15
16	16	class Reactions extends BaseWidget {
17		- public $view_wrapper = 'betterdocs-article-reactions';
	17	+ public $view_wrapper = 'betterdocs-article-reactions';
18	18
19		- public function get_name() {
20		- return 'betterdocs-reactions';
21		- }
	19	+ public function get_name() {
	20	+ return 'betterdocs-reactions';
	21	+ }
22	22
23		- public function get_title() {
24		- return __( 'Doc Reactions', 'betterdocs' );
25		- }
	23	+ public function get_title() {
	24	+ return __( 'Doc Reactions', 'betterdocs' );
	25	+ }
26	26
27		- public function get_icon() {
28		- return 'betterdocs-icon-Reactions';
29		- }
	27	+ public function get_icon() {
	28	+ return 'betterdocs-icon-Reactions';
	29	+ }
30	30
31		- public function get_categories() {
32		- return ['betterdocs-elements-single'];
33		- }
	31	+ public function get_categories() {
	32	+ return [ 'betterdocs-elements-single' ];
	33	+ }
34	34
35		- public function get_keywords() {
36		- return ['betterdocs-elements', 'reaction', 'betterdocs', 'heading', 'docs'];
37		- }
	35	+ public function get_keywords() {
	36	+ return [ 'betterdocs-elements', 'reaction', 'betterdocs', 'heading', 'docs' ];
	37	+ }
38	38
39		- public function get_style_depends() {
40		- return ['betterdocs-reactions'];
41		- }
	39	+ public function get_style_depends() {
	40	+ return [ 'betterdocs-reactions' ];
	41	+ }
42	42
43		- public function get_script_depends() {
44		- return ['betterdocs-reactions'];
45		- }
	43	+ public function get_script_depends() {
	44	+ return [ 'betterdocs-reactions' ];
	45	+ }
46	46
47		- public function get_custom_help_url() {
48		- return 'https://betterdocs.co/docs/single-doc-in-elementor';
49		- }
	47	+ public function get_custom_help_url() {
	48	+ return 'https://betterdocs.co/docs/single-doc-in-elementor';
	49	+ }
50	50
51		- protected function register_controls() {
	51	+ protected function register_controls() {
	52	+ $this->start_controls_section(
	53	+ 'reactions_layout_options',
	54	+ [
	55	+ 'label' => __( 'Layout Options', 'betterdocs' )
	56	+ ]
	57	+ );
52	58
53		- $this->start_controls_section(
54		- 'section_column_settings',
55		- [
56		- 'label' => __( 'Box Style', 'betterdocs' ),
57		- 'tab' => Controls_Manager::TAB_STYLE
58		- ]
59		- );
	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	+ );
60	73
61		- $this->add_control(
62		- 'reaction_box_width',
63		- [
64		- 'label' => __( 'Width', 'betterdocs' ),
65		- 'type' => Controls_Manager::SLIDER,
66		- 'size_units' => ['px'],
67		- 'range' => [
68		- 'px' => [
69		- 'max' => 2500,
70		- 'step' => 1
71		- ]
72		- ],
73		- 'selectors' => [
74		- '{{WRAPPER}} .betterdocs-article-reactions' => 'width: {{SIZE}}px;'
75		- ]
76		- ]
77		- );
	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	+ );
78	88
79		- $this->add_control(
80		- 'reaction_box_height',
81		- [
82		- 'label' => __( 'Height', 'betterdocs' ),
83		- 'type' => Controls_Manager::SLIDER,
84		- 'size_units' => ['px'],
85		- 'range' => [
86		- 'px' => [
87		- 'max' => 500,
88		- 'step' => 1
89		- ]
90		- ],
91		- 'selectors' => [
92		- '{{WRAPPER}} .betterdocs-article-reactions' => 'height: {{SIZE}}px;'
93		- ]
94		- ]
95		- );
	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	+ );
96	99
97		- $this->add_group_control(
98		- Group_Control_Background::get_type(),
99		- [
100		- 'name' => 'reaction_box_background',
101		- 'types' => ['classic', 'gradient'],
102		- 'selector' => '{{WRAPPER}} .betterdocs-article-reactions'
103		- ]
104		- );
	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	+ );
105	114
106		- $this->add_responsive_control(
107		- 'reaction_box_space', // Legacy control id but new control
108		- [
109		- 'label' => __( 'Box Spacing', 'betterdocs' ),
110		- 'type' => Controls_Manager::DIMENSIONS,
111		- 'size_units' => ['px', '%', 'em'],
112		- 'selectors' => [
113		- '{{WRAPPER}} .betterdocs-article-reactions' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
114		- ]
115		- ]
116		- );
	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	+ );
117	125
118		- $this->add_responsive_control(
119		- 'reaction_box_padding',
120		- [
121		- 'label' => __( 'Box Padding', 'betterdocs' ),
122		- 'type' => Controls_Manager::DIMENSIONS,
123		- 'size_units' => ['px', 'em', '%'],
124		- 'selectors' => [
125		- '{{WRAPPER}} .betterdocs-article-reactions' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
126		- ]
127		- ]
128		- );
	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	+ );
129	140
130		- $this->add_group_control(
131		- Group_Control_Border::get_type(),
132		- [
133		- 'name' => 'reaction_box_border_normal',
134		- 'label' => esc_html__( 'Border', 'betterdocs' ),
135		- 'selector' => '{{WRAPPER}} .betterdocs-article-reactions'
136		- ]
137		- );
	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	+ );
138	151
139		- $this->add_responsive_control(
140		- 'reaction_box_radius_normal',
141		- [
142		- 'label' => esc_html__( 'Border Radius', 'betterdocs' ),
143		- 'type' => Controls_Manager::DIMENSIONS,
144		- 'size_units' => ['px', 'em', '%'],
145		- 'selectors' => [
146		- '{{WRAPPER}} .betterdocs-article-reactions' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
147		- ]
148		- ]
149		- );
	152	+ $this->end_controls_section();
150	153
151		- $this->add_group_control(
152		- Group_Control_Box_Shadow::get_type(),
153		- [
154		- 'name' => 'reaction_box_shadow_normal',
155		- 'selector' => '{{WRAPPER}} .betterdocs-article-reactions'
156		- ]
157		- );
	154	+ $this->box_style_layout_1();
	155	+ $this->title_style_layout_1();
	156	+ $this->icon_style_layout_1();
158	157
159		- $this->end_controls_section();
	158	+ $this->box_style_layout_2();
	159	+ $this->title_style_layout_2();
	160	+ $this->icon_style_layout_2();
160	161
161		- $this->start_controls_section(
162		- 'section_title_settings',
163		- [
164		- 'label' => __( 'Title', 'betterdocs' ),
165		- 'tab' => Controls_Manager::TAB_STYLE
166		- ]
167		- );
	162	+ $this->box_style_layout_3();
	163	+ $this->title_style_layout_3();
	164	+ $this->icon_style_layout_3();
	165	+ }
168	166
169		- $this->add_control(
170		- 'reaction_text',
171		- [
172		- 'label' => __( 'Text', 'betterdocs' ),
173		- 'type' => Controls_Manager::TEXT,
174		- 'default' => esc_html__( 'What are your feelings', 'betterdocs-pro' )
175		- ]
176		- );
	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	+ );
177	178
178		- $this->add_control(
179		- 'reaction_box_title_color',
180		- [
181		- 'label' => esc_html__( 'Color', 'betterdocs' ),
182		- 'type' => Controls_Manager::COLOR,
183		- 'selectors' => [
184		- '{{WRAPPER}} .betterdocs-article-reactions-heading h5' => 'color: {{VALUE}};'
185		- ]
186		- ]
187		- );
	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	+ );
188	196
189		- $this->add_group_control(
190		- Group_Control_Typography::get_type(),
191		- [
192		- 'name' => 'reaction_box_title_typography',
193		- 'selector' => '{{WRAPPER}} .betterdocs-article-reactions-heading h5'
194		- ]
195		- );
	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	+ );
196	214
197		- $this->end_controls_section();
	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	+ );
198	223
199		- $this->start_controls_section(
200		- 'section_icon_settings',
201		- [
202		- 'label' => __( 'Icon', 'betterdocs' ),
203		- 'tab' => Controls_Manager::TAB_STYLE
204		- ]
205		- );
	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	+ );
206	235
207		- $this->add_control(
208		- 'reaction_box_icon_area',
209		- [
210		- 'label' => __( 'Area', 'betterdocs' ),
211		- 'type' => Controls_Manager::SLIDER,
212		- 'size_units' => ['px'],
213		- 'range' => [
214		- 'px' => [
215		- 'max' => 500,
216		- 'step' => 1
217		- ]
218		- ],
219		- 'selectors' => [
220		- '{{WRAPPER}} .betterdocs-article-reaction-links li a' => 'height: {{SIZE}}px;width: {{SIZE}}px;'
221		- ]
222		- ]
223		- );
	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	+ );
224	247
225		- $this->add_control(
226		- 'reaction_box_icon_size',
227		- [
228		- 'label' => __( 'Icon Size', 'betterdocs' ),
229		- 'type' => Controls_Manager::SLIDER,
230		- 'size_units' => ['px'],
231		- 'range' => [
232		- 'px' => [
233		- 'max' => 500,
234		- 'step' => 1
235		- ]
236		- ],
237		- 'selectors' => [
238		- '{{WRAPPER}} .betterdocs-article-reaction-links li a svg' => 'height: {{SIZE}}px;width: {{SIZE}}px;'
239		- ]
240		- ]
241		- );
	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	+ );
242	256
243		- $this->add_control(
244		- 'reaction_box_icon_background',
245		- [
246		- 'label' => esc_html__( 'Background Color', 'betterdocs' ),
247		- 'type' => Controls_Manager::COLOR,
248		- 'selectors' => [
249		- '{{WRAPPER}} .betterdocs-article-reaction-links li a' => 'background-color: {{VALUE}};'
250		- ]
251		- ]
252		- );
	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	+ );
253	268
254		- $this->add_control(
255		- 'reaction_box_icon_hover_background',
256		- [
257		- 'label' => esc_html__( 'Hover Background Color', 'betterdocs' ),
258		- 'type' => Controls_Manager::COLOR,
259		- 'selectors' => [
260		- '{{WRAPPER}} .betterdocs-article-reaction-links li a:hover' => 'background-color: {{VALUE}};'
261		- ]
262		- ]
263		- );
	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	+ );
264	276
265		- $this->add_control(
266		- 'reaction_box_icon_color',
267		- [
268		- 'label' => esc_html__( 'Color', 'betterdocs' ),
269		- 'type' => Controls_Manager::COLOR,
270		- 'selectors' => [
271		- '{{WRAPPER}} .betterdocs-article-reaction-links li a svg path' => 'fill: {{VALUE}};'
272		- ]
273		- ]
274		- );
	277	+ $this->end_controls_section();
	278	+ }
275	279
276		- $this->add_control(
277		- 'reaction_box_icon_hover_color',
278		- [
279		- 'label' => esc_html__( 'Hover Color', 'betterdocs' ),
280		- 'type' => Controls_Manager::COLOR,
281		- 'selectors' => [
282		- '{{WRAPPER}} .betterdocs-article-reaction-links li a:hover svg path' => 'fill: {{VALUE}};'
283		- ]
284		- ]
285		- );
	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	+ );
286	291
287		- $this->end_controls_section();
288		- }
	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	+ );
289	309
290		- protected function render_callback() {
291		- $this->views( 'widgets/reactions' );
292		- }
	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	+ );
293	327
294		- public function view_params(){
295		- return [
296		- 'reactions_text' => $this->attributes['reaction_text']
297		- ];
298		- }
	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	+ }
299	1004	}