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.26.4, at modules/floating-buttons/base/widget-floating-bars-base.php

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