elementor / modules / floating-buttons / base / widget-floating-bars-base.php

widget-floating-bars-base.php in Elementor Website Builder – more than just a page builder 3.35.0-dev2, at modules/floating-buttons/base/widget-floating-bars-base.php

1,555 lines 37.6 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Modules\FloatingButtons\Base;
3
4	use Elementor\Modules\FloatingButtons\Classes\Render\Floating_Bars_Core_Render;
5	use Elementor\Core\Base\Providers\Social_Network_Provider;
6
7	use Elementor\Group_Control_Background;
8	use Elementor\Group_Control_Typography;
9
10	use Elementor\Plugin;
11	use Elementor\Repeater;
12	use Elementor\Controls_Manager;
13	use Elementor\Widget_Base;
14
15	abstract class Widget_Floating_Bars_Base extends Widget_Base {
16
17	const TAB_ADVANCED = 'advanced-tab-floating-bars';
18
19	public function get_style_depends(): array {
20	$widget_name = $this->get_name();
21
22	$style_depends = Plugin::$instance->experiments->is_feature_active( 'e_font_icon_svg' )
23	? parent::get_style_depends()
24	: [ 'elementor-icons-fa-solid', 'elementor-icons-fa-brands', 'elementor-icons-fa-regular' ];
25
26	$style_depends[] = 'widget-floating-bars-base';
27
28	$style_depends[] = "widget-{$widget_name}";
29
30	return $style_depends;
31	}
32
33	public function has_widget_inner_wrapper(): bool {
34	return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
35	}
36
37	public function get_icon(): string {
38	return 'eicon-banner';
39	}
40
41	public function show_in_panel() {
42	return false;
43	}
44
45	public function hide_on_search() {
46	return true;
47	}
48
49	protected function get_initial_config(): array {
50	return array_merge( parent::get_initial_config(), [
51	'commonMerged' => true,
52	] );
53	}
54
55	public static function get_configuration() {
56	return [
57	'content' => [
58	'announcement_section' => [
59	'icon_default' => [
60	'value' => 'fas fa-tshirt',
61	'library' => 'fa-solid',
62	],
63	'text_label' => esc_html__( 'Text', 'elementor' ),
64	'text_default' => esc_html__( 'Just in! Cool summer tees', 'elementor' ),
65	],
66	'floating_bar_section' => [
67	'close_switch_default' => 'yes',
68	'has_pause_switch' => false,
69	'accessible_name_default' => esc_html__( 'Banner', 'elementor' ),
70	],
71	],
72	'style' => [
73	'floating_bar_section' => [
74	'has_close_bg' => false,
75	'close_position_selectors' => [
76	'{{WRAPPER}} .e-floating-bars__close-button' => 'inset-inline-{{VALUE}}: 10px;',
77	],
78	'has_close_position_control' => true,
79	'background_selector' => '{{WRAPPER}} .e-floating-bars',
80	'align_elements_selector' => [
81	'{{WRAPPER}} .e-floating-bars' => 'justify-content: {{VALUE}};',
82	'{{WRAPPER}} .e-floating-bars__cta-button-container' => 'justify-content: {{VALUE}};',
83	'{{WRAPPER}} .e-floating-bars__announcement-text' => 'text-align: {{VALUE}};',
84	],
85	],
86	],
87	'advanced' => [],
88	];
89	}
90
91	protected function register_controls(): void {
92	$this->add_content_tab();
93
94	$this->add_style_tab();
95
96	$this->add_advanced_tab();
97	}
98
99	protected function add_announcement_content_section(): void {
100	$config = static::get_configuration();
101
102	$this->start_controls_section(
103	'announcement_content_section',
104	[
105	'label' => __( 'Announcement', 'elementor' ),
106	'tab' => Controls_Manager::TAB_CONTENT,
107	]
108	);
109
110	$this->add_control(
111	'announcement_icon',
112	[
113	'label' => esc_html__( 'Icon', 'elementor' ),
114	'type' => Controls_Manager::ICONS,
115	'fa4compatibility' => 'icon',
116	'default' => $config['content']['announcement_section']['icon_default'],
117	'skin' => 'inline',
118	'label_block' => false,
119	'icon_exclude_inline_options' => [],
120	]
121	);
122
123	$this->add_control(
124	'announcement_text',
125	[
126	'label' => $config['content']['announcement_section']['text_label'],
127	'type' => Controls_Manager::TEXTAREA,
128	'dynamic' => [
129	'active' => true,
130	],
131	'placeholder' => esc_html__( 'Enter your text here', 'elementor' ),
132	'default' => $config['content']['announcement_section']['text_default'],
133	]
134	);
135
136	$this->end_controls_section();
137	}
138
139	protected function add_cta_button_content_section(): void {
140	$this->start_controls_section(
141	'cta_button_content_section',
142	[
143	'label' => __( 'CTA Button', 'elementor' ),
144	'tab' => Controls_Manager::TAB_CONTENT,
145	]
146	);
147
148	$this->add_control(
149	'cta_text',
150	[
151	'label' => esc_html__( 'Text', 'elementor' ),
152	'type' => Controls_Manager::TEXT,
153	'dynamic' => [
154	'active' => true,
155	],
156	'placeholder' => esc_html__( 'Enter text', 'elementor' ),
157	'default' => esc_html__( 'Shop now', 'elementor' ),
158	],
159	);
160
161	$this->add_control(
162	'cta_link',
163	[
164	'label' => esc_html__( 'Link', 'elementor' ),
165	'type' => Controls_Manager::URL,
166	'placeholder' => esc_html__( 'Paste URL or type', 'elementor' ),
167	'dynamic' => [
168	'active' => true,
169	],
170	'default' => [
171	'url' => '',
172	'is_external' => true,
173	'nofollow' => false,
174	],
175	]
176	);
177
178	$this->add_control(
179	'cta_icon',
180	[
181	'label' => esc_html__( 'Icon', 'elementor' ),
182	'type' => Controls_Manager::ICONS,
183	'fa4compatibility' => 'icon',
184	'skin' => 'inline',
185	'label_block' => false,
186	'icon_exclude_inline_options' => [],
187	]
188	);
189
190	$this->end_controls_section();
191	}
192
193	protected function add_accessible_name_control(): void {
194	$config = static::get_configuration();
195
196	$this->add_control(
197	'accessible_name',
198	[
199	'label' => esc_html__( 'Accessible Name', 'elementor' ),
200	'type' => Controls_Manager::TEXT,
201	'dynamic' => [
202	'active' => true,
203	],
204	'placeholder' => esc_html__( 'Enter text', 'elementor' ),
205	'default' => $config['content']['floating_bar_section']['accessible_name_default'],
206	'condition' => [
207	'floating_bar_close_switch' => 'yes',
208	],
209	],
210	);
211	}
212
213	protected function add_floating_bar_content_section(): void {
214	$config = static::get_configuration();
215
216	$this->start_controls_section(
217	'floating_bar_content_section',
218	[
219	'label' => __( 'Floating Bar', 'elementor' ),
220	'tab' => Controls_Manager::TAB_CONTENT,
221	]
222	);
223
224	if ( $config['content']['floating_bar_section']['has_pause_switch'] ) {
225	$this->add_control(
226	'floating_bar_pause_switch',
227	[
228	'label' => esc_html__( 'Pause and Play', 'elementor' ),
229	'type' => Controls_Manager::SWITCHER,
230	'label_on' => esc_html__( 'Show', 'elementor' ),
231	'label_off' => esc_html__( 'Hide', 'elementor' ),
232	'return_value' => 'yes',
233	'default' => 'no',
234	]
235	);
236
237	$this->add_control(
238	'floating_bar_pause_icon',
239	[
240	'label' => esc_html__( 'Pause Icon', 'elementor' ),
241	'type' => Controls_Manager::ICONS,
242	'fa4compatibility' => 'icon',
243	'default' => [
244	'value' => 'fas fa-pause',
245	'library' => 'fa-solid',
246	],
247	'skin' => 'inline',
248	'label_block' => false,
249	'exclude_inline_options' => [ 'none' ],
250	'recommended' => [
251	'fa-regular' => [
252	'pause-circle',
253	],
254	'fa-solid' => [
255	'pause-circle',
256	],
257	],
258	'condition' => [
259	'floating_bar_pause_switch' => 'yes',
260	],
261	],
262	);
263
264	$this->add_control(
265	'floating_bar_play_icon',
266	[
267	'label' => esc_html__( 'Play Icon', 'elementor' ),
268	'type' => Controls_Manager::ICONS,
269	'fa4compatibility' => 'icon',
270	'default' => [
271	'value' => 'fas fa-play',
272	'library' => 'fa-solid',
273	],
274	'skin' => 'inline',
275	'label_block' => false,
276	'exclude_inline_options' => [ 'none' ],
277	'recommended' => [
278	'fa-regular' => [
279	'play-circle',
280	],
281	'fa-solid' => [
282	'play-circle',
283	],
284	],
285	'condition' => [
286	'floating_bar_pause_switch' => 'yes',
287	],
288	],
289	);
290	}
291
292	$this->add_control(
293	'floating_bar_close_switch',
294	[
295	'label' => esc_html__( 'Close Button', 'elementor' ),
296	'type' => Controls_Manager::SWITCHER,
297	'label_on' => esc_html__( 'Show', 'elementor' ),
298	'label_off' => esc_html__( 'Hide', 'elementor' ),
299	'return_value' => 'yes',
300	'default' => $config['content']['floating_bar_section']['close_switch_default'],
301	]
302	);
303
304	$this->add_accessible_name_control();
305
306	$this->end_controls_section();
307	}
308
309	protected function add_headlines_content_section(): void {
310	$config = static::get_configuration();
311
312	$this->start_controls_section(
313	'headlines_content',
314	[
315	'label' => esc_html__( 'Headlines', 'elementor' ),
316	'tab' => Controls_Manager::TAB_CONTENT,
317	]
318	);
319
320	$repeater = new Repeater();
321
322	$repeater->add_control(
323	'headlines_icon',
324	[
325	'label' => esc_html__( 'Icon', 'elementor' ),
326	'type' => Controls_Manager::ICONS,
327	'fa4compatibility' => 'icon',
328	'skin' => 'inline',
329	'label_block' => false,
330	'icon_exclude_inline_options' => [],
331	]
332	);
333
334	$repeater->add_control(
335	'headlines_text',
336	[
337	'label' => esc_html__( 'Text', 'elementor' ),
338	'type' => Controls_Manager::TEXTAREA,
339	'placeholder' => esc_html__( 'Enter your text', 'elementor' ),
340	'default' => esc_html__( 'Item Title', 'elementor' ),
341	'dynamic' => [
342	'active' => true,
343	],
344	]
345	);
346
347	$repeater->add_control(
348	'headlines_url',
349	[
350	'label' => esc_html__( 'Link', 'elementor' ),
351	'type' => Controls_Manager::URL,
352	'placeholder' => esc_html__( 'Paste URL or type', 'elementor' ),
353	'dynamic' => [
354	'active' => true,
355	],
356	'frontend_available' => true,
357	]
358	);
359
360	$this->add_control(
361	'headlines_repeater',
362	[
363	'type' => Controls_Manager::REPEATER,
364	'fields' => $repeater->get_controls(),
365	'title_field' => '{{{ headlines_text }}}',
366	'prevent_empty' => true,
367	'button_text' => esc_html__( 'Add Item', 'elementor' ),
368	'default' => [
369	[
370	'headlines_text' => esc_html__( 'Item #1', 'elementor' ),
371	],
372	[
373	'headlines_text' => esc_html__( 'Item #2', 'elementor' ),
374	],
375	[
376	'headlines_text' => esc_html__( 'Item #3', 'elementor' ),
377	],
378	],
379	]
380	);
381
382	$this->end_controls_section();
383	}
384
385	protected function add_announcement_style_section(): void {
386	$config = static::get_configuration();
387
388	$this->start_controls_section(
389	'style_announcement',
390	[
391	'label' => esc_html__( 'Announcement', 'elementor' ),
392	'tab' => Controls_Manager::TAB_STYLE,
393	]
394	);
395
396	$this->add_control(
397	'style_announcement_icon_heading',
398	[
399	'label' => esc_html__( 'Icon', 'elementor' ),
400	'type' => Controls_Manager::HEADING,
401	'conditions' => [
402	'relation' => 'and',
403	'terms' => [
404	[
405	'name' => 'announcement_icon[value]',
406	'operator' => '!==',
407	'value' => '',
408	],
409	[
410	'name' => 'announcement_icon[value]',
411	'operator' => '!==',
412	'value' => null,
413	],
414	],
415	],
416	]
417	);
418
419	$this->add_control(
420	'style_announcement_icon_color',
421	[
422	'label' => esc_html__( 'Color', 'elementor' ),
423	'type' => Controls_Manager::COLOR,
424	'selectors' => [
425	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-announcement-icon-color: {{VALUE}}',
426	],
427	'conditions' => [
428	'relation' => 'and',
429	'terms' => [
430	[
431	'name' => 'announcement_icon[value]',
432	'operator' => '!==',
433	'value' => '',
434	],
435	[
436	'name' => 'announcement_icon[value]',
437	'operator' => '!==',
438	'value' => null,
439	],
440	],
441	],
442	]
443	);
444
445	$this->add_responsive_control(
446	'style_announcement_icon_position',
447	[
448	'label' => esc_html__( 'Position', 'elementor' ),
449	'type' => Controls_Manager::CHOOSE,
450	'options' => [
451	'start' => [
452	'title' => esc_html__( 'Left', 'elementor' ),
453	'icon' => 'eicon-h-align-left',
454	],
455	'end' => [
456	'title' => esc_html__( 'Right', 'elementor' ),
457	'icon' => 'eicon-h-align-right',
458	],
459	],
460	'selectors' => [
461	'{{WRAPPER}} .e-floating-bars__announcement-icon' => 'order: {{VALUE}};',
462	],
463	'selectors_dictionary' => [
464	'start' => '-1',
465	'end' => '2',
466	],
467	'default' => 'start',
468	'toggle' => false,
469	'conditions' => [
470	'relation' => 'and',
471	'terms' => [
472	[
473	'name' => 'announcement_icon[value]',
474	'operator' => '!==',
475	'value' => '',
476	],
477	[
478	'name' => 'announcement_icon[value]',
479	'operator' => '!==',
480	'value' => null,
481	],
482	],
483	],
484	]
485	);
486
487	$this->add_responsive_control(
488	'style_announcement_icon_size',
489	[
490	'label' => esc_html__( 'Size', 'elementor' ),
491	'type' => Controls_Manager::SLIDER,
492	'range' => [
493	'px' => [
494	'min' => 0,
495	'max' => 150,
496	],
497	],
498	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
499	'selectors' => [
500	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-announcement-icon-size: {{SIZE}}{{UNIT}}',
501	],
502	'separator' => 'after',
503	'conditions' => [
504	'relation' => 'and',
505	'terms' => [
506	[
507	'name' => 'announcement_icon[value]',
508	'operator' => '!==',
509	'value' => '',
510	],
511	[
512	'name' => 'announcement_icon[value]',
513	'operator' => '!==',
514	'value' => null,
515	],
516	],
517	],
518	]
519	);
520
521	$this->add_control(
522	'style_announcement_text_heading',
523	[
524	'label' => $config['content']['announcement_section']['text_label'],
525	'type' => Controls_Manager::HEADING,
526	]
527	);
528
529	$this->add_group_control(
530	Group_Control_Typography::get_type(),
531	[
532	'name' => 'style_announcement_text_typography',
533	'selector' => '{{WRAPPER}} .e-floating-bars__announcement-text',
534	]
535	);
536
537	$this->add_control(
538	'style_announcement_text_color',
539	[
540	'label' => esc_html__( 'Color', 'elementor' ),
541	'type' => Controls_Manager::COLOR,
542	'selectors' => [
543	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-announcement-text-color: {{VALUE}}',
544	],
545	]
546	);
547
548	$this->end_controls_section();
549	}
550
551	protected function add_cta_button_style_section(): void {
552	$this->start_controls_section(
553	'style_cta_button',
554	[
555	'label' => esc_html__( 'CTA Button', 'elementor' ),
556	'tab' => Controls_Manager::TAB_STYLE,
557	]
558	);
559
560	$this->add_control(
561	'style_cta_type',
562	[
563	'label' => esc_html__( 'Type', 'elementor' ),
564	'type' => Controls_Manager::SELECT,
565	'default' => 'button',
566	'options' => [
567	'button' => esc_html__( 'Button', 'elementor' ),
568	'link' => esc_html__( 'Link', 'elementor' ),
569	],
570	]
571	);
572
573	$this->add_responsive_control(
574	'style_cta_icon_position',
575	[
576	'label' => esc_html__( 'Icon Position', 'elementor' ),
577	'type' => Controls_Manager::CHOOSE,
578	'default' => is_rtl() ? 'row-reverse' : 'row',
579	'toggle' => false,
580	'options' => [
581	'row' => [
582	'title' => esc_html__( 'Start', 'elementor' ),
583	'icon' => 'eicon-h-align-left',
584	],
585	'row-reverse' => [
586	'title' => esc_html__( 'End', 'elementor' ),
587	'icon' => 'eicon-h-align-right',
588	],
589	],
590	'selectors_dictionary' => [
591	'left' => is_rtl() ? 'row-reverse' : 'row',
592	'right' => is_rtl() ? 'row' : 'row-reverse',
593	],
594	'selectors' => [
595	'{{WRAPPER}} .e-floating-bars__cta-button' => 'flex-direction: {{VALUE}};',
596	],
597	'condition' => [
598	'cta_icon[value]!' => '',
599	],
600	]
601	);
602
603	$this->add_control(
604	'style_cta_icon_spacing',
605	[
606	'label' => esc_html__( 'Icon Spacing', 'elementor' ),
607	'type' => Controls_Manager::SLIDER,
608	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
609	'range' => [
610	'px' => [
611	'max' => 50,
612	],
613	'em' => [
614	'max' => 5,
615	],
616	'rem' => [
617	'max' => 5,
618	],
619	],
620	'selectors' => [
621	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-icon-gap: {{SIZE}}{{UNIT}};',
622	],
623	'conditions' => [
624	'relation' => 'and',
625	'terms' => [
626	[
627	'name' => 'cta_icon[value]',
628	'operator' => '!==',
629	'value' => '',
630	],
631	[
632	'name' => 'cta_icon[value]',
633	'operator' => '!==',
634	'value' => null,
635	],
636	],
637	],
638	]
639	);
640
641	$this->add_group_control(
642	Group_Control_Typography::get_type(),
643	[
644	'name' => 'style_cta_typography',
645	'selector' => '{{WRAPPER}} .e-floating-bars__cta-button',
646	]
647	);
648
649	$this->start_controls_tabs(
650	'style_cta_button_tabs'
651	);
652
653	$this->start_controls_tab(
654	'style_cta_button_tabs_normal',
655	[
656	'label' => esc_html__( 'Normal', 'elementor' ),
657	]
658	);
659
660	$this->add_control(
661	'style_cta_button_text_color',
662	[
663	'label' => esc_html__( 'Text Color', 'elementor' ),
664	'type' => Controls_Manager::COLOR,
665	'selectors' => [
666	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-text-color: {{VALUE}}',
667	],
668	]
669	);
670
671	$this->add_control(
672	'style_cta_button_bg_color',
673	[
674	'label' => esc_html__( 'Background Color', 'elementor' ),
675	'type' => Controls_Manager::COLOR,
676	'selectors' => [
677	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-bg-color: {{VALUE}}',
678	],
679	'condition' => [
680	'style_cta_type' => 'button',
681	],
682	]
683	);
684
685	$this->end_controls_tab();
686
687	$this->start_controls_tab(
688	'style_cta_button_tabs_hover',
689	[
690	'label' => esc_html__( 'Hover', 'elementor' ),
691	]
692	);
693
694	$this->add_control(
695	'style_cta_button_text_color_hover',
696	[
697	'label' => esc_html__( 'Text Color', 'elementor' ),
698	'type' => Controls_Manager::COLOR,
699	'selectors' => [
700	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-text-color-hover: {{VALUE}}',
701	],
702	]
703	);
704
705	$this->add_control(
706	'style_cta_button_bg_color_hover',
707	[
708	'label' => esc_html__( 'Background Color', 'elementor' ),
709	'type' => Controls_Manager::COLOR,
710	'selectors' => [
711	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-bg-color-hover: {{VALUE}}',
712	],
713	'condition' => [
714	'style_cta_type' => 'button',
715	],
716	]
717	);
718
719	$this->add_control(
720	'style_cta_button_border_color_hover',
721	[
722	'label' => esc_html__( 'Border Color', 'elementor' ),
723	'type' => Controls_Manager::COLOR,
724	'selectors' => [
725	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-border-color-hover: {{VALUE}}',
726	],
727	'conditions' => [
728	'relation' => 'and',
729	'terms' => [
730	[
731	'name' => 'style_cta_button_show_border',
732	'operator' => '===',
733	'value' => 'yes',
734	],
735	[
736	'name' => 'style_cta_type',
737	'operator' => '===',
738	'value' => 'button',
739	],
740	],
741	],
742	]
743	);
744
745	$this->add_control(
746	'style_cta_button_hover_animation',
747	[
748	'label' => esc_html__( 'Hover Animation', 'elementor' ),
749	'type' => Controls_Manager::HOVER_ANIMATION,
750	'frontend_available' => true,
751	]
752	);
753
754	$this->end_controls_tab();
755
756	$this->end_controls_tabs();
757
758	$this->add_control(
759	'style_cta_button_show_border',
760	[
761	'label' => esc_html__( 'Border', 'elementor' ),
762	'type' => Controls_Manager::SWITCHER,
763	'label_on' => esc_html__( 'Yes', 'elementor' ),
764	'label_off' => esc_html__( 'No', 'elementor' ),
765	'return_value' => 'yes',
766	'default' => 'yes',
767	'separator' => 'before',
768	'condition' => [
769	'style_cta_type' => 'button',
770	],
771	]
772	);
773
774	$this->add_responsive_control(
775	'style_cta_button_border_width',
776	[
777	'label' => esc_html__( 'Border Width', 'elementor' ),
778	'type' => Controls_Manager::SLIDER,
779	'range' => [
780	'%' => [
781	'min' => 10,
782	'max' => 100,
783	],
784	'px' => [
785	'min' => 0,
786	'max' => 10,
787	],
788	],
789	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
790	'selectors' => [
791	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-border-width: {{SIZE}}{{UNIT}}',
792	],
793	'conditions' => [
794	'relation' => 'and',
795	'terms' => [
796	[
797	'name' => 'style_cta_button_show_border',
798	'operator' => '===',
799	'value' => 'yes',
800	],
801	[
802	'name' => 'style_cta_type',
803	'operator' => '===',
804	'value' => 'button',
805	],
806	],
807	],
808	]
809	);
810
811	$this->add_control(
812	'style_cta_button_border_color',
813	[
814	'label' => esc_html__( 'Border Color', 'elementor' ),
815	'type' => Controls_Manager::COLOR,
816	'selectors' => [
817	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-border-color: {{VALUE}}',
818	],
819	'conditions' => [
820	'relation' => 'and',
821	'terms' => [
822	[
823	'name' => 'style_cta_button_show_border',
824	'operator' => '===',
825	'value' => 'yes',
826	],
827	[
828	'name' => 'style_cta_type',
829	'operator' => '===',
830	'value' => 'button',
831	],
832	],
833	],
834	]
835	);
836
837	$this->add_control(
838	'style_cta_button_corners',
839	[
840	'label' => esc_html__( 'Corners', 'elementor' ),
841	'type' => Controls_Manager::SELECT,
842	'default' => 'round',
843	'options' => [
844	'round' => esc_html__( 'Round', 'elementor' ),
845	'rounded' => esc_html__( 'Rounded', 'elementor' ),
846	'sharp' => esc_html__( 'Sharp', 'elementor' ),
847	],
848	'condition' => [
849	'style_cta_type' => 'button',
850	],
851	]
852	);
853
854	$this->add_responsive_control(
855	'style_cta_button_padding',
856	[
857	'label' => esc_html__( 'Padding', 'elementor' ),
858	'type' => Controls_Manager::DIMENSIONS,
859	'size_units' => [ 'px', '%', 'em', 'rem' ],
860	'selectors' => [
861	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-padding-block-end: {{BOTTOM}}{{UNIT}}; --e-floating-bars-cta-button-padding-block-start: {{TOP}}{{UNIT}}; --e-floating-bars-cta-button-padding-inline-end: {{RIGHT}}{{UNIT}}; --e-floating-bars-cta-button-padding-inline-start: {{LEFT}}{{UNIT}};',
862	],
863	'separator' => 'before',
864	'condition' => [
865	'style_cta_type' => 'button',
866	],
867	]
868	);
869
870	$this->add_responsive_control(
871	'style_cta_button_animation',
872	[
873	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
874	'type' => Controls_Manager::ANIMATION,
875	'frontend_available' => true,
876	'separator' => 'before',
877	]
878	);
879
880	$this->add_control(
881	'style_cta_button_animation_duration',
882	[
883	'label' => esc_html__( 'Animation Duration', 'elementor' ),
884	'type' => Controls_Manager::SELECT,
885	'default' => '1000',
886	'options' => [
887	'2000' => esc_html__( 'Slow', 'elementor' ),
888	'1000' => esc_html__( 'Normal', 'elementor' ),
889	'800' => esc_html__( 'Fast', 'elementor' ),
890	],
891	'selectors' => [
892	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-animation-duration: {{VALUE}}ms',
893	],
894	'prefix_class' => 'animated-',
895	'conditions' => [
896	'relation' => 'and',
897	'terms' => [
898	[
899	'name' => 'style_cta_button_animation',
900	'operator' => '!==',
901	'value' => '',
902	],
903	[
904	'name' => 'style_cta_button_animation',
905	'operator' => '!==',
906	'value' => 'none',
907	],
908	],
909	],
910	]
911	);
912
913	$this->add_control(
914	'style_cta_button_animation_delay',
915	[
916	'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
917	'type' => Controls_Manager::NUMBER,
918	'min' => 0,
919	'step' => 100,
920	'selectors' => [
921	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-cta-button-animation-delay: {{SIZE}}ms;',
922	],
923	'render_type' => 'none',
924	'frontend_available' => true,
925	'conditions' => [
926	'relation' => 'and',
927	'terms' => [
928	[
929	'name' => 'style_cta_button_animation',
930	'operator' => '!==',
931	'value' => '',
932	],
933	[
934	'name' => 'style_cta_button_animation',
935	'operator' => '!==',
936	'value' => 'none',
937	],
938	],
939	],
940	]
941	);
942
943	$this->end_controls_section();
944	}
945
946	protected function add_floating_bar_background_style_controls(): void {
947	$config = static::get_configuration();
948
949	$this->add_control(
950	'floating_bar_background_heading',
951	[
952	'label' => esc_html__( 'Background', 'elementor' ),
953	'type' => Controls_Manager::HEADING,
954	'separator' => 'before',
955	]
956	);
957
958	$this->add_group_control(
959	Group_Control_Background::get_type(),
960	[
961	'name' => 'floating_bar_background_type',
962	'types' => [ 'classic', 'gradient' ],
963	'selector' => $config['style']['floating_bar_section']['background_selector'],
964	'fields_options' => [
965	'background' => [
966	'default' => 'classic',
967	],
968	'position' => [
969	'default' => 'center center',
970	],
971	'size' => [
972	'default' => 'cover',
973	],
974	],
975	]
976	);
977
978	$this->add_control(
979	'floating_bar_background_overlay_heading',
980	[
981	'label' => esc_html__( 'Background Overlay', 'elementor' ),
982	'type' => Controls_Manager::HEADING,
983	'separator' => 'before',
984	]
985	);
986
987	$this->add_group_control(
988	Group_Control_Background::get_type(),
989	[
990	'name' => 'floating_bar_background_overlay_type',
991	'types' => [ 'classic', 'gradient' ],
992	'selector' => '{{WRAPPER}} .e-floating-bars__overlay',
993	'fields_options' => [
994	'background' => [
995	'default' => 'classic',
996	],
997	'position' => [
998	'default' => 'center center',
999	],
1000	'size' => [
1001	'default' => 'cover',
1002	],
1003	],
1004	]
1005	);
1006
1007	$this->add_responsive_control(
1008	'floating_bar_background_overlay_opacity',
1009	[
1010	'label' => esc_html__( 'Opacity', 'elementor' ),
1011	'type' => Controls_Manager::SLIDER,
1012	'range' => [
1013	'%' => [
1014	'max' => 1,
1015	'min' => 0,
1016	'step' => 0.01,
1017	],
1018	],
1019	'default' => [
1020	'unit' => '%',
1021	'size' => 0.5,
1022	],
1023	'selectors' => [
1024	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-background-overlay-opacity: {{SIZE}};',
1025	],
1026	]
1027	);
1028	}
1029
1030	protected function add_floating_bar_close_button_style_controls(): void {
1031	$config = static::get_configuration();
1032
1033	$this->add_control(
1034	'floating_bar_close_button_heading',
1035	[
1036	'label' => esc_html__( 'Close Button', 'elementor' ),
1037	'type' => Controls_Manager::HEADING,
1038	'separator' => 'before',
1039	'condition' => [
1040	'floating_bar_close_switch' => 'yes',
1041	],
1042	]
1043	);
1044
1045	if ( $config['style']['floating_bar_section']['has_close_position_control'] ) {
1046	$this->add_responsive_control(
1047	'floating_bar_close_button_position',
1048	[
1049	'label' => esc_html__( 'Horizontal position', 'elementor' ),
1050	'type' => Controls_Manager::CHOOSE,
1051	'options' => [
1052	'start' => [
1053	'title' => esc_html__( 'Left', 'elementor' ),
1054	'icon' => 'eicon-h-align-left',
1055	],
1056	'end' => [
1057	'title' => esc_html__( 'Right', 'elementor' ),
1058	'icon' => 'eicon-h-align-right',
1059	],
1060	],
1061	'default' => 'end',
1062	'toggle' => false,
1063	'selectors' => $config['style']['floating_bar_section']['close_position_selectors'],
1064	'condition' => [
1065	'floating_bar_close_switch' => 'yes',
1066	],
1067	]
1068	);
1069	}
1070
1071	$this->add_control(
1072	'floating_bar_close_button_color',
1073	[
1074	'label' => esc_html__( 'Color', 'elementor' ),
1075	'type' => Controls_Manager::COLOR,
1076	'selectors' => [
1077	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-close-button-color: {{VALUE}}',
1078	],
1079	'condition' => [
1080	'floating_bar_close_switch' => 'yes',
1081	],
1082	]
1083	);
1084
1085	$this->add_responsive_control(
1086	'style_floating_bar_close_button_size',
1087	[
1088	'label' => esc_html__( 'Size', 'elementor' ),
1089	'type' => Controls_Manager::SLIDER,
1090	'range' => [
1091	'px' => [
1092	'min' => 0,
1093	'max' => 150,
1094	],
1095	],
1096	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1097	'selectors' => [
1098	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-close-icon-size: {{SIZE}}{{UNIT}}',
1099	],
1100	'condition' => [
1101	'floating_bar_close_switch' => 'yes',
1102	],
1103	]
1104	);
1105
1106	if ( $config['style']['floating_bar_section']['has_close_bg'] ) {
1107	$this->add_control(
1108	'floating_bar_close_bg_color',
1109	[
1110	'label' => esc_html__( 'Background Color', 'elementor' ),
1111	'type' => Controls_Manager::COLOR,
1112	'selectors' => [
1113	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-close-button-bg-color: {{VALUE}}',
1114	],
1115	'condition' => [
1116	'floating_bar_close_switch' => 'yes',
1117	],
1118	'separator' => 'after',
1119	]
1120	);
1121	}
1122	}
1123
1124	protected function add_floating_bar_pause_style_controls(): void {
1125	$config = static::get_configuration();
1126
1127	$this->add_control(
1128	'floating_bar_pause_button_heading',
1129	[
1130	'label' => esc_html__( 'Pause and Play', 'elementor' ),
1131	'type' => Controls_Manager::HEADING,
1132	'condition' => [
1133	'floating_bar_pause_switch' => 'yes',
1134	],
1135	]
1136	);
1137
1138	$this->add_control(
1139	'floating_bar_pause_button_color',
1140	[
1141	'label' => esc_html__( 'Icon Color', 'elementor' ),
1142	'type' => Controls_Manager::COLOR,
1143	'selectors' => [
1144	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-pause-play-icon-color: {{VALUE}}',
1145	],
1146	'condition' => [
1147	'floating_bar_pause_switch' => 'yes',
1148	],
1149	]
1150	);
1151
1152	$this->add_control(
1153	'floating_bar_pause_bg_color',
1154	[
1155	'label' => esc_html__( 'Background Color', 'elementor' ),
1156	'type' => Controls_Manager::COLOR,
1157	'selectors' => [
1158	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-pause-play-bg-color: {{VALUE}}',
1159	],
1160	'condition' => [
1161	'floating_bar_pause_switch' => 'yes',
1162	],
1163	]
1164	);
1165	}
1166
1167	protected function add_floating_bar_style_section(): void {
1168	$config = static::get_configuration();
1169
1170	$this->start_controls_section(
1171	'style_floating_bar',
1172	[
1173	'label' => esc_html__( 'Floating Bar', 'elementor' ),
1174	'tab' => Controls_Manager::TAB_STYLE,
1175	]
1176	);
1177
1178	$this->add_floating_bar_close_button_style_controls();
1179
1180	$this->add_responsive_control(
1181	'style_floating_bar_elements_align',
1182	[
1183	'label' => esc_html__( 'Align Elements', 'elementor' ),
1184	'type' => Controls_Manager::CHOOSE,
1185	'toggle' => false,
1186	'default' => 'center',
1187	'options' => [
1188	'start' => [
1189	'title' => esc_html__( 'Start', 'elementor' ),
1190	'icon' => 'eicon-align-start-h',
1191	],
1192	'center' => [
1193	'title' => esc_html__( 'Center', 'elementor' ),
1194	'icon' => 'eicon-align-center-h',
1195	],
1196	'end' => [
1197	'title' => esc_html__( 'End', 'elementor' ),
1198	'icon' => 'eicon-align-end-h',
1199	],
1200	'space-between' => [
1201	'title' => esc_html__( 'Stretch', 'elementor' ),
1202	'icon' => 'eicon-align-stretch-h',
1203	],
1204	],
1205	'selectors' => $config['style']['floating_bar_section']['align_elements_selector'],
1206	'separator' => 'before',
1207	]
1208	);
1209
1210	$this->add_responsive_control(
1211	'style_floating_bar_elements_spacing',
1212	[
1213	'label' => esc_html__( 'Element spacing', 'elementor' ),
1214	'type' => Controls_Manager::SLIDER,
1215	'range' => [
1216	'px' => [
1217	'min' => 0,
1218	'max' => 50,
1219	],
1220	],
1221	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1222	'selectors' => [
1223	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-elements-gap: {{SIZE}}{{UNIT}}',
1224	],
1225	'conditions' => [
1226	'relation' => 'and',
1227	'terms' => [
1228	[
1229	'name' => 'style_floating_bar_elements_align',
1230	'operator' => '!==',
1231	'value' => 'stretch',
1232	],
1233	],
1234	],
1235	]
1236	);
1237
1238	$this->add_responsive_control(
1239	'style_floating_bar_elements_padding',
1240	[
1241	'label' => esc_html__( 'Padding', 'elementor' ),
1242	'type' => Controls_Manager::DIMENSIONS,
1243	'size_units' => [ 'px', '%', 'em', 'rem' ],
1244	'selectors' => [
1245	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-elements-padding-block-end: {{BOTTOM}}{{UNIT}}; --e-floating-bars-elements-padding-block-start: {{TOP}}{{UNIT}}; --e-floating-bars-elements-padding-inline-end: {{RIGHT}}{{UNIT}}; --e-floating-bars-elements-padding-inline-start: {{LEFT}}{{UNIT}};',
1246	],
1247	]
1248	);
1249
1250	$this->add_floating_bar_background_style_controls();
1251
1252	$this->end_controls_section();
1253	}
1254
1255	protected function add_headlines_style_section(): void {
1256	$this->start_controls_section(
1257	'style_headlines',
1258	[
1259	'label' => esc_html__( 'Headline', 'elementor' ),
1260	'tab' => Controls_Manager::TAB_STYLE,
1261	]
1262	);
1263
1264	$this->add_control(
1265	'style_headlines_icon_heading',
1266	[
1267	'label' => esc_html__( 'Icon', 'elementor' ),
1268	'type' => Controls_Manager::HEADING,
1269	]
1270	);
1271
1272	$this->add_control(
1273	'style_headlines_icon_color',
1274	[
1275	'label' => esc_html__( 'Color', 'elementor' ),
1276	'type' => Controls_Manager::COLOR,
1277	'selectors' => [
1278	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-headline-icon-color: {{VALUE}}',
1279	],
1280	]
1281	);
1282
1283	$this->add_responsive_control(
1284	'style_headlines_icon_position',
1285	[
1286	'label' => esc_html__( 'Icon Position', 'elementor' ),
1287	'type' => Controls_Manager::CHOOSE,
1288	'default' => is_rtl() ? 'row-reverse' : 'row',
1289	'toggle' => false,
1290	'options' => [
1291	'row' => [
1292	'title' => esc_html__( 'Start', 'elementor' ),
1293	'icon' => 'eicon-h-align-left',
1294	],
1295	'row-reverse' => [
1296	'title' => esc_html__( 'End', 'elementor' ),
1297	'icon' => 'eicon-h-align-right',
1298	],
1299	],
1300	'selectors_dictionary' => [
1301	'row' => is_rtl() ? 'row-reverse' : 'row',
1302	'row-reverse' => is_rtl() ? 'row' : 'row-reverse',
1303	],
1304	'selectors' => [
1305	'{{WRAPPER}} .e-floating-bars__headline' => '--e-floating-bars-headline-icon-position: {{VALUE}};',
1306	],
1307	]
1308	);
1309
1310	$this->add_responsive_control(
1311	'style_headlines_icon_size',
1312	[
1313	'label' => esc_html__( 'Size', 'elementor' ),
1314	'type' => Controls_Manager::SLIDER,
1315	'range' => [
1316	'px' => [
1317	'min' => 0,
1318	'max' => 150,
1319	],
1320	],
1321	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1322	'selectors' => [
1323	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-headline-icon-size: {{SIZE}}{{UNIT}}',
1324	],
1325	]
1326	);
1327
1328	$this->add_responsive_control(
1329	'style_headlines_icon_spacing',
1330	[
1331	'label' => esc_html__( 'Icon Spacing', 'elementor' ),
1332	'type' => Controls_Manager::SLIDER,
1333	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1334	'range' => [
1335	'px' => [
1336	'max' => 50,
1337	],
1338	'em' => [
1339	'max' => 5,
1340	],
1341	'rem' => [
1342	'max' => 5,
1343	],
1344	],
1345	'selectors' => [
1346	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-headline-icon-gap: {{SIZE}}{{UNIT}}',
1347	],
1348	]
1349	);
1350	$this->add_control(
1351	'style_headline_text_heading',
1352	[
1353	'label' => esc_html__( 'Text', 'elementor' ),
1354	'type' => Controls_Manager::HEADING,
1355	'separator' => 'before',
1356	]
1357	);
1358
1359	$this->add_group_control(
1360	Group_Control_Typography::get_type(),
1361	[
1362	'name' => 'style_headline_text_typography',
1363	'selector' => '{{WRAPPER}} .e-floating-bars__headline-text',
1364	]
1365	);
1366
1367	$this->start_controls_tabs(
1368	'style_headline_tabs'
1369	);
1370
1371	$this->start_controls_tab(
1372	'style_headline_tabs_normal',
1373	[
1374	'label' => esc_html__( 'Normal', 'elementor' ),
1375	]
1376	);
1377
1378	$this->add_control(
1379	'style_headline_text_color',
1380	[
1381	'label' => esc_html__( 'Text Color', 'elementor' ),
1382	'type' => Controls_Manager::COLOR,
1383	'selectors' => [
1384	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-headline-text-color: {{VALUE}}',
1385	],
1386	]
1387	);
1388
1389	$this->end_controls_tab();
1390
1391	$this->start_controls_tab(
1392	'style_headline_tabs_hover',
1393	[
1394	'label' => esc_html__( 'Hover', 'elementor' ),
1395	]
1396	);
1397
1398	$this->add_control(
1399	'style_headline_text_color_hover',
1400	[
1401	'label' => esc_html__( 'Text Color', 'elementor' ),
1402	'type' => Controls_Manager::COLOR,
1403	'selectors' => [
1404	'{{WRAPPER}} .e-floating-bars' => '--e-floating-bars-headline-text-color-hover: {{VALUE}}',
1405	],
1406	]
1407	);
1408
1409	$this->end_controls_tab();
1410
1411	$this->end_controls_tabs();
1412
1413	$this->end_controls_section();
1414	}
1415
1416	protected function add_advanced_tab(): void {
1417	Controls_Manager::add_tab(
1418	static::TAB_ADVANCED,
1419	esc_html__( 'Advanced', 'elementor' )
1420	);
1421
1422	$this->start_controls_section(
1423	'advanced_layout_section',
1424	[
1425	'label' => esc_html__( 'Layout', 'elementor' ),
1426	'tab' => static::TAB_ADVANCED,
1427	]
1428	);
1429
1430	$this->add_control(
1431	'advanced_vertical_position',
1432	[
1433	'label' => esc_html__( 'Vertical Position', 'elementor' ),
1434	'type' => Controls_Manager::CHOOSE,
1435	'options' => [
1436	'top' => [
1437	'title' => esc_html__( 'Top', 'elementor' ),
1438	'icon' => 'eicon-v-align-top',
1439	],
1440	'bottom' => [
1441	'title' => esc_html__( 'Bottom', 'elementor' ),
1442	'icon' => 'eicon-v-align-bottom',
1443	],
1444	],
1445	'default' => 'top',
1446	'toggle' => false,
1447	]
1448	);
1449
1450	$this->add_control(
1451	'advanced_toggle_sticky',
1452	[
1453	'label' => esc_html__( 'Sticky', 'elementor' ),
1454	'type' => Controls_Manager::SWITCHER,
1455	'label_on' => esc_html__( 'Yes', 'elementor' ),
1456	'label_off' => esc_html__( 'No', 'elementor' ),
1457	'return_value' => 'yes',
1458	'default' => 'yes',
1459	]
1460	);
1461
1462	$this->end_controls_section();
1463
1464	$this->start_controls_section(
1465	'advanced_responsive_section',
1466	[
1467	'label' => esc_html__( 'Responsive', 'elementor' ),
1468	'tab' => static::TAB_ADVANCED,
1469	]
1470	);
1471
1472	$this->add_control(
1473	'responsive_description',
1474	[
1475	'raw' => __( 'Responsive visibility will take effect only on preview mode or live page, and not while editing in Elementor.', 'elementor' ),
1476	'type' => Controls_Manager::RAW_HTML,
1477	'content_classes' => 'elementor-descriptor',
1478	]
1479	);
1480
1481	$this->add_hidden_device_controls();
1482
1483	$this->end_controls_section();
1484
1485	$this->start_controls_section(
1486	'advanced_custom_controls_section',
1487	[
1488	'label' => esc_html__( 'CSS', 'elementor' ),
1489	'tab' => static::TAB_ADVANCED,
1490	]
1491	);
1492
1493	$this->add_control(
1494	'advanced_custom_css_id',
1495	[
1496	'label' => esc_html__( 'CSS ID', 'elementor' ),
1497	'type' => Controls_Manager::TEXT,
1498	'default' => '',
1499	'ai' => [
1500	'active' => false,
1501	],
1502	'dynamic' => [
1503	'active' => true,
1504	],
1505	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
1506	'style_transfer' => false,
1507	]
1508	);
1509
1510	$this->add_control(
1511	'advanced_custom_css_classes',
1512	[
1513	'label' => esc_html__( 'CSS Classes', 'elementor' ),
1514	'type' => Controls_Manager::TEXT,
1515	'default' => '',
1516	'ai' => [
1517	'active' => false,
1518	],
1519	'dynamic' => [
1520	'active' => true,
1521	],
1522	'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
1523	]
1524	);
1525
1526	$this->end_controls_section();
1527
1528	Plugin::$instance->controls_manager->add_custom_css_controls( $this, static::TAB_ADVANCED );
1529
1530	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this, static::TAB_ADVANCED );
1531	}
1532
1533	protected function add_content_tab(): void {
1534	$this->add_announcement_content_section();
1535
1536	$this->add_cta_button_content_section();
1537
1538	$this->add_floating_bar_content_section();
1539	}
1540
1541	protected function add_style_tab(): void {
1542	$this->add_announcement_style_section();
1543
1544	$this->add_cta_button_style_section();
1545
1546	$this->add_floating_bar_style_section();
1547	}
1548
1549	protected function render(): void {
1550	$render_strategy = new Floating_Bars_Core_Render( $this );
1551
1552	$render_strategy->render();
1553	}
1554	}
1555