Flip_Box.php — Essential Addons for Elementor – Popular Elementor Templates & Widgets 6.0.10

essential-addons-for-elementor-lite / includes / Elements / Flip_Box.php

essential-addons-for-elementor-lite / includes / Elements Last commit date

Adv_Accordion.php 1 year ago Adv_Tabs.php 1 year ago Advanced_Data_Table.php 1 year ago Better_Payment.php 4 years ago Betterdocs_Category_Box.php 1 year ago Betterdocs_Category_Grid.php 1 year ago Betterdocs_Search_Form.php 1 year ago Business_Reviews.php 1 year ago Caldera_Forms.php 1 year ago Career_Page.php 4 years ago Contact_Form_7.php 1 year ago Content_Ticker.php 1 year ago Countdown.php 1 year ago Creative_Button.php 1 year ago Cta_Box.php 1 year ago Data_Table.php 1 year ago Dual_Color_Header.php 1 year ago EmbedPress.php 4 years ago Event_Calendar.php 1 year ago Facebook_Feed.php 1 year ago Fancy_Text.php 1 year ago Feature_List.php 1 year ago Filterable_Gallery.php 1 year ago Flip_Box.php 1 year ago FluentForm.php 1 year ago Formstack.php 1 year ago GravityForms.php 1 year ago Image_Accordion.php 1 year ago Info_Box.php 1 year ago Interactive_Circle.php 1 year ago Login_Register.php 1 year ago NFT_Gallery.php 1 year ago NinjaForms.php 1 year ago Post_Grid.php 1 year ago Post_Timeline.php 1 year ago Pricing_Table.php 1 year ago Product_Grid.php 1 year ago Progress_Bar.php 1 year ago SVG_Draw.php 1 year ago Simple_Menu.php 1 year ago Sticky_Video.php 1 year ago Team_Member.php 1 year ago Testimonial.php 1 year ago Tooltip.php 1 year ago Twitter_Feed.php 1 year ago TypeForm.php 1 year ago WeForms.php 2 years ago Woo_Cart.php 1 year ago Woo_Checkout.php 1 year ago Woo_Product_Carousel.php 1 year ago Woo_Product_Compare.php 2 years ago Woo_Product_Gallery.php 1 year ago Woo_Product_List.php 1 year ago WpForms.php 1 year ago index.php 3 years ago

Flip_Box.php

1769 lines

1	<?php
2
3	namespace Essential_Addons_Elementor\Elements;
4
5	// If this file is called directly, abort.
6	if (!defined('ABSPATH')) {
7	exit;
8	}
9
10	use \Elementor\Controls_Manager;
11	use \Elementor\Group_Control_Background;
12	use \Elementor\Group_Control_Border;
13	use \Elementor\Group_Control_Box_Shadow;
14	use \Elementor\Group_Control_Image_Size;
15	use \Elementor\Group_Control_Typography;
16	use Elementor\Icons_Manager;
17	use \Elementor\Modules\DynamicTags\Module as TagsModule;
18	use \Elementor\Plugin;
19	use \Elementor\Utils;
20	use \Elementor\Widget_Base;
21	use \Essential_Addons_Elementor\Classes\Helper;
22
23	class Flip_Box extends Widget_Base
24	{
25
26	public function get_name()
27	{
28	return 'eael-flip-box';
29	}
30
31	public function get_title()
32	{
33	return esc_html__('Flip Box', 'essential-addons-for-elementor-lite');
34	}
35
36	public function get_icon()
37	{
38	return 'eaicon-flip-box';
39	}
40
41	public function get_categories()
42	{
43	return ['essential-addons-elementor'];
44	}
45
46	public function get_keywords()
47	{
48	return [
49	'flip',
50	'ea flipbox',
51	'ea flip box',
52	'box',
53	'flip box',
54	'card',
55	'flip card',
56	'ea flip card',
57	'rotate',
58	'ea',
59	'essential addons',
60	];
61	}
62
63	protected function is_dynamic_content():bool {
64	if( Plugin::$instance->editor->is_edit_mode() ) {
65	return false;
66	}
67
68	$front_content_type = $this->get_settings('eael_flipbox_front_content_type');
69	$back_content_type = $this->get_settings('eael_flipbox_back_content_type');
70	$is_dynamic_content = 'template' === $front_content_type \|\| 'template' === $back_content_type;
71
72	return $is_dynamic_content;
73	}
74
75	public function get_custom_help_url()
76	{
77	return 'https://essential-addons.com/elementor/docs/flip-box/';
78	}
79
80	protected function register_controls()
81	{
82
83	/**
84	* Flipbox Image Settings
85	*/
86	$this->start_controls_section(
87	'eael_section_flipbox_content_settings',
88	[
89	'label' => esc_html__('Settings', 'essential-addons-for-elementor-lite'),
90	]
91	);
92
93	$this->add_control(
94	'eael_flipbox_event_type',
95	[
96	'label' => esc_html__( 'Choose Event', 'essential-addons-for-elementor-lite' ),
97	'type' => Controls_Manager::CHOOSE,
98	'options' => [
99	'hover' => [
100	'title' => esc_html__( 'Hover', 'essential-addons-for-elementor-lite' ),
101	'icon' => 'eicon-button',
102	],
103	'click' => [
104	'title' => esc_html__( 'Click', 'essential-addons-for-elementor-lite' ),
105	'icon' => 'eicon-click',
106	],
107	],
108	'default' => 'hover',
109	'toggle' => true,
110	]
111	);
112
113	$this->add_control(
114	'eael_flipbox_type',
115	[
116	'label' => esc_html__('Flipbox Type', 'essential-addons-for-elementor-lite'),
117	'type' => Controls_Manager::SELECT,
118	'default' => 'animate-left',
119	'label_block' => false,
120	'options' => [
121	'animate-left' => esc_html__('Flip Left', 'essential-addons-for-elementor-lite'),
122	'animate-right' => esc_html__('Flip Right', 'essential-addons-for-elementor-lite'),
123	'animate-up' => esc_html__('Flip Top', 'essential-addons-for-elementor-lite'),
124	'animate-down' => esc_html__('Flip Bottom', 'essential-addons-for-elementor-lite'),
125	'animate-zoom-in' => esc_html__('Zoom In', 'essential-addons-for-elementor-lite'),
126	'animate-zoom-out' => esc_html__('Zoom Out', 'essential-addons-for-elementor-lite'),
127	'animate-fade-in' => esc_html__('Fade In', 'essential-addons-for-elementor-lite'),
128	],
129	]
130	);
131	$this->add_control(
132	'eael_flipbox_3d',
133	[
134	'label' => __( '3D Depth', 'essential-addons-for-elementor-lite' ),
135	'type' => Controls_Manager::SWITCHER,
136	'label_on' => __( 'On', 'essential-addons-for-elementor-lite' ),
137	'label_off' => __( 'Off', 'essential-addons-for-elementor-lite' ),
138	'return_value' => 'eael-flip-box--3d',
139	'default' => '',
140	'prefix_class' => '',
141	'condition' => [
142	'eael_flipbox_type' => [
143	'animate-left',
144	'animate-right',
145	'animate-up',
146	'animate-down',
147	]
148	],
149	]
150	);
151
152	$this->add_responsive_control(
153	'eael_flipbox_height',
154	[
155	'label' => esc_html__('Height', 'essential-addons-for-elementor-lite'),
156	'type' => Controls_Manager::SLIDER,
157	'size_units' => ['px', '%'],
158	'range' => [
159	'px' => [
160	'min' => 0,
161	'step' => 1,
162	'max' => 1000,
163	],
164	'%' => [
165	'min' => 0,
166	'step' => 3,
167	'max' => 100,
168	],
169	],
170	'default' => [
171	'unit' => 'px',
172	'size' => 300,
173	],
174	'selectors' => [
175	'{{WRAPPER}} .eael-elements-flip-box-container:not(.eael-template)' => 'height: {{SIZE}}{{UNIT}};',
176	'{{WRAPPER}} .eael-elements-flip-box-container.eael-template' => 'min-height: {{SIZE}}{{UNIT}};',
177	],
178	]
179	);
180
181	$this->end_controls_section();
182
183	/**
184	* Flipbox Content
185	*/
186	$this->start_controls_section(
187	'eael_flipbox_content',
188	[
189	'label' => esc_html__('Content', 'essential-addons-for-elementor-lite'),
190	]
191	);
192
193	$this->start_controls_tabs('eael_flipbox_content_tabs');
194
195	$this->start_controls_tab(
196	'eael_flipbox_content_front',
197	[
198	'label' => __('Front', 'essential-addons-for-elementor-lite'),
199	]
200	);
201	$this->add_control(
202	'eael_flipbox_front_content_type',
203	[
204	'label' => __( 'Content Type', 'essential-addons-for-elementor-lite' ),
205	'type' => Controls_Manager::SELECT,
206	'options' => [
207	'content' => __( 'Content', 'essential-addons-for-elementor-lite' ),
208	'template' => __( 'Saved Templates', 'essential-addons-for-elementor-lite' ),
209	],
210	'default' => 'content',
211	]
212	);
213
214	$this->add_control(
215	'eael_flipbox_front_templates',
216	[
217	'label' => __( 'Choose Template', 'essential-addons-for-elementor-lite' ),
218	'type' => 'eael-select2',
219	'source_name' => 'post_type',
220	'source_type' => 'elementor_library',
221	'label_block' => true,
222	'condition' => [
223	'eael_flipbox_front_content_type' => 'template',
224	],
225	]
226	);
227
228
229
230	$this->add_control(
231	'eael_flipbox_img_or_icon',
232	[
233	'label' => esc_html__('Icon Type', 'essential-addons-for-elementor-lite'),
234	'type' => Controls_Manager::SELECT,
235	'options' => [
236	'none' => __('None', 'essential-addons-for-elementor-lite'),
237	'img' => __('Image', 'essential-addons-for-elementor-lite'),
238	'icon' => __('Icon', 'essential-addons-for-elementor-lite'),
239	],
240	'default' => 'icon',
241	'condition' => [
242	'eael_flipbox_front_content_type' => 'content',
243	],
244	]
245	);
246
247	$this->add_control(
248	'eael_flipbox_image',
249	[
250	'label' => esc_html__('Flipbox Image', 'essential-addons-for-elementor-lite'),
251	'type' => Controls_Manager::MEDIA,
252	'default' => [
253	'url' => Utils::get_placeholder_image_src(),
254	],
255	'condition' => [
256	'eael_flipbox_img_or_icon' => 'img',
257	],
258	'ai' => [
259	'active' => false,
260	],
261	]
262	);
263
264	$this->add_control(
265	'eael_flipbox_icon_new',
266	[
267	'label' => esc_html__('Icon', 'essential-addons-for-elementor-lite'),
268	'type' => Controls_Manager::ICONS,
269	'fa4compatibility' => 'eael_flipbox_icon',
270	'default' => [
271	'value' => 'fas fa-snowflake',
272	'library' => 'fa-solid',
273	],
274	'condition' => [
275	'eael_flipbox_img_or_icon' => 'icon',
276	],
277	]
278	);
279
280	$this->add_responsive_control(
281	'eael_flipbox_image_resizer',
282	[
283	'label' => esc_html__('Image Resizer', 'essential-addons-for-elementor-lite'),
284	'type' => Controls_Manager::SLIDER,
285	'default' => [
286	'size' => '100',
287	],
288	'range' => [
289	'px' => [
290	'max' => 500,
291	],
292	],
293	'selectors' => [
294	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image > img.eael-flipbox-image-as-icon' => 'width: {{SIZE}}{{UNIT}};',
295	],
296	'condition' => [
297	'eael_flipbox_img_or_icon' => 'img',
298	],
299	]
300	);
301
302	$this->add_group_control(
303	Group_Control_Image_Size::get_type(),
304	[
305	'name' => 'thumbnail',
306	'default' => 'full',
307	'condition' => [
308	'eael_flipbox_image[url]!' => '',
309	'eael_flipbox_img_or_icon' => 'img',
310	],
311	]
312	);
313
314	$this->add_control(
315	'eael_flipbox_front_title',
316	[
317	'label' => esc_html__('Front Title', 'essential-addons-for-elementor-lite'),
318	'type' => Controls_Manager::TEXT,
319	'dynamic' => [
320	'active' => true,
321	],
322	'label_block' => true,
323	'default' => esc_html__('Front Title', 'essential-addons-for-elementor-lite'),
324	'condition' => [
325	'eael_flipbox_front_content_type' => 'content',
326	],
327	'ai' => [
328	'active' => false,
329	],
330	]
331	);
332
333	$this->add_control(
334	'eael_flipbox_front_title_tag',
335	[
336	'label' => __('Select Front Title Tag', 'essential-addons-for-elementor-lite'),
337	'type' => Controls_Manager::SELECT,
338	'default' => 'h2',
339	'options' => [
340	'h1' => __('H1', 'essential-addons-for-elementor-lite'),
341	'h2' => __('H2', 'essential-addons-for-elementor-lite'),
342	'h3' => __('H3', 'essential-addons-for-elementor-lite'),
343	'h4' => __('H4', 'essential-addons-for-elementor-lite'),
344	'h5' => __('H5', 'essential-addons-for-elementor-lite'),
345	'h6' => __('H6', 'essential-addons-for-elementor-lite'),
346	'span' => __('Span', 'essential-addons-for-elementor-lite'),
347	'p' => __('P', 'essential-addons-for-elementor-lite'),
348	'div' => __('Div', 'essential-addons-for-elementor-lite'),
349	],
350	'condition' => [
351	'eael_flipbox_front_content_type' => 'content',
352	],
353	]
354	);
355
356	$this->add_control(
357	'eael_flipbox_front_text',
358	[
359	'label' => esc_html__('Front Content', 'essential-addons-for-elementor-lite'),
360	'type' => Controls_Manager::WYSIWYG,
361	'label_block' => true,
362	'default' => __('<p>This is front side content.</p>', 'essential-addons-for-elementor-lite'),
363	'condition' => [
364	'eael_flipbox_front_content_type' => 'content',
365	],
366	'ai' => [
367	'active' => false,
368	],
369	]
370	);
371
372	$this->add_control(
373	'eael_flipbox_front_vertical_position',
374	[
375	'label' => __( 'Vertical Position', 'essential-addons-for-elementor-lite' ),
376	'type' => Controls_Manager::CHOOSE,
377	'options' => [
378	'top' => [
379	'title' => __( 'Top', 'essential-addons-for-elementor-lite' ),
380	'icon' => 'eicon-v-align-top',
381	],
382	'middle' => [
383	'title' => __( 'Middle', 'essential-addons-for-elementor-lite' ),
384	'icon' => 'eicon-v-align-middle',
385	],
386	'bottom' => [
387	'title' => __( 'Bottom', 'essential-addons-for-elementor-lite' ),
388	'icon' => 'eicon-v-align-bottom',
389	],
390	],
391	'default' => 'middle',
392	'selectors_dictionary' => [
393	'top' => 'flex-start',
394	'middle' => 'center',
395	'bottom' => 'flex-end',
396	],
397	'selectors' => [
398	'{{WRAPPER}} .eael-elements-flip-box-front-container' => 'align-items: {{VALUE}}',
399	],
400	'condition' => [
401	'eael_flipbox_front_content_type' => 'content',
402	],
403	]
404	);
405
406	$this->add_control(
407	'eael_flipbox_content_alignment',
408	[
409	'label' => esc_html__('Content Alignment', 'essential-addons-for-elementor-lite'),
410	'type' => Controls_Manager::CHOOSE,
411	'label_block' => true,
412	'options' => [
413	'left' => [
414	'title' => esc_html__('Left', 'essential-addons-for-elementor-lite'),
415	'icon' => 'eicon-text-align-left',
416	],
417	'center' => [
418	'title' => esc_html__('Center', 'essential-addons-for-elementor-lite'),
419	'icon' => 'eicon-text-align-center',
420	],
421	'right' => [
422	'title' => esc_html__('Right', 'essential-addons-for-elementor-lite'),
423	'icon' => 'eicon-text-align-right',
424	],
425	],
426	'default' => 'center',
427	'prefix_class' => 'eael-flipbox-content-align-',
428	'condition' => [
429	'eael_flipbox_front_content_type' => 'content',
430	],
431	]
432	);
433
434	$this->end_controls_tab();
435
436	$this->start_controls_tab(
437	'eael_flipbox_content_back',
438	[
439	'label' => __('Back', 'essential-addons-for-elementor-lite'),
440	]
441	);
442
443	$this->add_control(
444	'eael_flipbox_back_content_type',
445	[
446	'label' => __( 'Content Type', 'essential-addons-for-elementor-lite' ),
447	'type' => Controls_Manager::SELECT,
448	'options' => [
449	'content' => __( 'Content', 'essential-addons-for-elementor-lite' ),
450	'template' => __( 'Saved Templates', 'essential-addons-for-elementor-lite' ),
451	],
452	'default' => 'content',
453	]
454	);
455
456	$this->add_control(
457	'eael_flipbox_back_templates',
458	[
459	'label' => __( 'Choose Template', 'essential-addons-for-elementor-lite' ),
460	'type' => 'eael-select2',
461	'source_name' => 'post_type',
462	'source_type' => 'elementor_library',
463	'label_block' => true,
464	'condition' => [
465	'eael_flipbox_back_content_type' => 'template',
466	],
467	]
468	);
469
470	$this->add_control(
471	'eael_flipbox_img_or_icon_back',
472	[
473	'label' => esc_html__('Icon Type', 'essential-addons-for-elementor-lite'),
474	'type' => Controls_Manager::SELECT,
475	'options' => [
476	'none' => __('None', 'essential-addons-for-elementor-lite'),
477	'img' => __('Image', 'essential-addons-for-elementor-lite'),
478	'icon' => __('Icon', 'essential-addons-for-elementor-lite'),
479	],
480	'default' => 'icon',
481	'condition' => [
482	'eael_flipbox_back_content_type' => 'content',
483	],
484	]
485	);
486
487	$this->add_control(
488	'eael_flipbox_image_back',
489	[
490	'label' => esc_html__('Flipbox Image', 'essential-addons-for-elementor-lite'),
491	'type' => Controls_Manager::MEDIA,
492	'default' => [
493	'url' => Utils::get_placeholder_image_src(),
494	],
495	'condition' => [
496	'eael_flipbox_img_or_icon_back' => 'img',
497	],
498	'ai' => [
499	'active' => false,
500	],
501	]
502	);
503
504	$this->add_control(
505	'eael_flipbox_icon_back_new',
506	[
507	'label' => esc_html__('Icon', 'essential-addons-for-elementor-lite'),
508	'type' => Controls_Manager::ICONS,
509	'fa4compatibility' => 'eael_flipbox_icon_back',
510	'default' => [
511	'value' => 'fas fa-snowflake',
512	'library' => 'fa-solid',
513	],
514	'condition' => [
515	'eael_flipbox_img_or_icon_back' => 'icon',
516	],
517	]
518	);
519
520	$this->add_responsive_control(
521	'eael_flipbox_image_resizer_back',
522	[
523	'label' => esc_html__('Image Resizer', 'essential-addons-for-elementor-lite'),
524	'type' => Controls_Manager::SLIDER,
525	'default' => [
526	'size' => '100',
527	],
528	'range' => [
529	'px' => [
530	'max' => 500,
531	],
532	],
533	'selectors' => [
534	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image > img.eael-flipbox-image-as-icon' => 'width: {{SIZE}}{{UNIT}};',
535	],
536	'condition' => [
537	'eael_flipbox_img_or_icon_back' => 'img',
538	],
539	]
540	);
541
542	$this->add_group_control(
543	Group_Control_Image_Size::get_type(),
544	[
545	'name' => 'thumbnail_back',
546	'default' => 'full',
547	'condition' => [
548	'eael_flipbox_image[url]!' => '',
549	'eael_flipbox_img_or_icon_back' => 'img',
550	],
551	]
552	);
553
554	$this->add_control(
555	'eael_flipbox_back_title',
556	[
557	'label' => esc_html__('Back Title', 'essential-addons-for-elementor-lite'),
558	'type' => Controls_Manager::TEXT,
559	'dynamic' => [
560	'active' => true,
561	],
562	'label_block' => true,
563	'default' => esc_html__('Back Title', 'essential-addons-for-elementor-lite'),
564	'condition' => [
565	'eael_flipbox_back_content_type' => 'content',
566	],
567	'ai' => [
568	'active' => false,
569	],
570	]
571	);
572
573	$this->add_control(
574	'eael_flipbox_back_title_tag',
575	[
576	'label' => __('Select Back Title Tag', 'essential-addons-for-elementor-lite'),
577	'type' => Controls_Manager::SELECT,
578	'default' => 'h2',
579	'options' => [
580	'h1' => __('H1', 'essential-addons-for-elementor-lite'),
581	'h2' => __('H2', 'essential-addons-for-elementor-lite'),
582	'h3' => __('H3', 'essential-addons-for-elementor-lite'),
583	'h4' => __('H4', 'essential-addons-for-elementor-lite'),
584	'h5' => __('H5', 'essential-addons-for-elementor-lite'),
585	'h6' => __('H6', 'essential-addons-for-elementor-lite'),
586	'span' => __('Span', 'essential-addons-for-elementor-lite'),
587	'p' => __('P', 'essential-addons-for-elementor-lite'),
588	'div' => __('Div', 'essential-addons-for-elementor-lite'),
589	],
590	'condition' => [
591	'eael_flipbox_back_content_type' => 'content',
592	],
593	]
594	);
595
596	$this->add_control(
597	'eael_flipbox_back_text',
598	[
599	'label' => esc_html__('Back Content', 'essential-addons-for-elementor-lite'),
600	'type' => Controls_Manager::WYSIWYG,
601	'label_block' => true,
602	'default' => __('<p>This is back side content.</p>', 'essential-addons-for-elementor-lite'),
603	'condition' => [
604	'eael_flipbox_back_content_type' => 'content',
605	],
606	'ai' => [
607	'active' => false,
608	],
609	]
610	);
611
612	$this->add_control(
613	'eael_flipbox_back_vertical_position',
614	[
615	'label' => __( 'Vertical Position', 'essential-addons-for-elementor-lite' ),
616	'type' => Controls_Manager::CHOOSE,
617	'options' => [
618	'top' => [
619	'title' => __( 'Top', 'essential-addons-for-elementor-lite' ),
620	'icon' => 'eicon-v-align-top',
621	],
622	'middle' => [
623	'title' => __( 'Middle', 'essential-addons-for-elementor-lite' ),
624	'icon' => 'eicon-v-align-middle',
625	],
626	'bottom' => [
627	'title' => __( 'Bottom', 'essential-addons-for-elementor-lite' ),
628	'icon' => 'eicon-v-align-bottom',
629	],
630	],
631	'default' => 'middle',
632	'selectors_dictionary' => [
633	'top' => 'flex-start',
634	'middle' => 'center',
635	'bottom' => 'flex-end',
636	],
637	'selectors' => [
638	'{{WRAPPER}} .eael-elements-flip-box-rear-container' => 'align-items: {{VALUE}}',
639	],
640	'condition' => [
641	'eael_flipbox_back_content_type' => 'content',
642	],
643	]
644	);
645
646	$this->add_control(
647	'eael_flipbox_back_content_alignment',
648	[
649	'label' => esc_html__('Content Alignment', 'essential-addons-for-elementor-lite'),
650	'type' => Controls_Manager::CHOOSE,
651	'label_block' => true,
652	'options' => [
653	'left' => [
654	'title' => esc_html__('Left', 'essential-addons-for-elementor-lite'),
655	'icon' => 'eicon-text-align-left',
656	],
657	'center' => [
658	'title' => esc_html__('Center', 'essential-addons-for-elementor-lite'),
659	'icon' => 'eicon-text-align-center',
660	],
661	'right' => [
662	'title' => esc_html__('Right', 'essential-addons-for-elementor-lite'),
663	'icon' => 'eicon-text-align-right',
664	],
665	],
666	'default' => 'center',
667	'selectors' => [
668	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-padding' => 'text-align: {{VALUE}}',
669	],
670	'condition' => [
671	'eael_flipbox_back_content_type' => 'content',
672	],
673	]
674	);
675
676	$this->end_controls_tab();
677
678	$this->end_controls_tabs();
679
680	$this->end_controls_section();
681
682	/**
683	* ----------------------------------------------
684	* Flipbox Link
685	* ----------------------------------------------
686	*/
687	$this->start_controls_section(
688	'eael_flixbox_link_section',
689	[
690	'label' => esc_html__('Link', 'essential-addons-for-elementor-lite'),
691	'condition' => [
692	'eael_flipbox_back_content_type' => 'content',
693	],
694	]
695	);
696
697	$this->add_control(
698	'flipbox_link_type',
699	[
700	'label' => __('Link Type', 'essential-addons-for-elementor-lite'),
701	'type' => Controls_Manager::SELECT,
702	'default' => 'none',
703	'options' => [
704	'none' => __('None', 'essential-addons-for-elementor-lite'),
705	'box' => __('Box', 'essential-addons-for-elementor-lite'),
706	'title' => __('Title', 'essential-addons-for-elementor-lite'),
707	'button' => __('Button', 'essential-addons-for-elementor-lite'),
708	],
709	]
710	);
711
712	$this->add_control(
713	'flipbox_link',
714	[
715	'label' => __('Link', 'essential-addons-for-elementor-lite'),
716	'type' => Controls_Manager::URL,
717	'dynamic' => [
718	'active' => true,
719	'categories' => [
720	TagsModule::POST_META_CATEGORY,
721	TagsModule::URL_CATEGORY,
722	],
723	],
724	'placeholder' => 'https://www.your-link.com',
725	'default' => [
726	'url' => '#',
727	],
728	'condition' => [
729	'flipbox_link_type!' => 'none',
730	],
731	]
732	);
733
734	$this->add_control(
735	'flipbox_button_text',
736	[
737	'label' => __('Button Text', 'essential-addons-for-elementor-lite'),
738	'type' => Controls_Manager::TEXT,
739	'dynamic' => [
740	'active' => true,
741	],
742	'default' => __('Get Started', 'essential-addons-for-elementor-lite'),
743	'condition' => [
744	'flipbox_link_type' => 'button',
745	],
746	'ai' => [
747	'active' => false,
748	],
749	]
750	);
751
752	$this->add_control(
753	'button_icon_new',
754	[
755	'label' => __('Button Icon', 'essential-addons-for-elementor-lite'),
756	'type' => Controls_Manager::ICONS,
757	'fa4compatibility' => 'button_icon',
758	'condition' => [
759	'flipbox_link_type' => 'button',
760	],
761	]
762	);
763
764	$this->add_control(
765	'button_icon_position',
766	[
767	'label' => __('Icon Position', 'essential-addons-for-elementor-lite'),
768	'type' => Controls_Manager::SELECT,
769	'default' => 'after',
770	'options' => [
771	'after' => __('After', 'essential-addons-for-elementor-lite'),
772	'before' => __('Before', 'essential-addons-for-elementor-lite'),
773	],
774	'condition' => [
775	'flipbox_link_type' => 'button',
776	],
777	]
778	);
779
780	$this->end_controls_section();
781
782	if (!apply_filters('eael/pro_enabled', false)) {
783	$this->start_controls_section(
784	'eael_section_pro',
785	[
786	'label' => __('Go Premium for More Features', 'essential-addons-for-elementor-lite'),
787	]
788	);
789
790	$this->add_control(
791	'eael_control_get_pro',
792	[
793	'label' => __('Unlock more possibilities', 'essential-addons-for-elementor-lite'),
794	'type' => Controls_Manager::CHOOSE,
795	'options' => [
796	'1' => [
797	'title' => '',
798	'icon' => 'fa fa-unlock-alt',
799	],
800	],
801	'default' => '1',
802	'description' => '<span class="pro-feature"> Get the <a href="https://wpdeveloper.com/upgrade/ea-pro" target="_blank">Pro version</a> for more stunning elements and customization options.</span>',
803	]
804	);
805
806	$this->end_controls_section();
807	}
808
809	/**
810	* -------------------------------------------
811	* Tab Style (Flipbox Style)
812	* -------------------------------------------
813	*/
814	$this->start_controls_section(
815	'eael_section_flipbox_style_settings',
816	[
817	'label' => esc_html__('Filp Box Style', 'essential-addons-for-elementor-lite'),
818	'tab' => Controls_Manager::TAB_STYLE,
819	]
820	);
821
822	$this->add_control(
823	'eael_flipbox_front_bg_heading',
824	[
825	'label' => __('Front Background Color', 'essential-addons-for-elementor-lite'),
826	'type' => Controls_Manager::HEADING,
827	]
828	);
829
830	$this->add_group_control(
831	Group_Control_Background::get_type(),
832	[
833	'name' => 'eael_flipbox_front_bg_color',
834	'label' => __('Front Background Color', 'essential-addons-for-elementor-lite'),
835	'types' => ['classic', 'gradient'],
836	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container',
837	'fields_options' => [
838	'color' => [
839	'default' => '#8a35ff',
840	],
841	],
842	]
843	);
844
845	$this->add_control(
846	'eael_flipbox_back_bg_heading',
847	[
848	'label' => __('Back Background Color', 'essential-addons-for-elementor-lite'),
849	'type' => Controls_Manager::HEADING,
850	'separator' => 'before',
851	]
852	);
853
854	$this->add_group_control(
855	Group_Control_Background::get_type(),
856	[
857	'name' => 'eael_flipbox_back_bg_color',
858	'label' => __('Back Background Color', 'essential-addons-for-elementor-lite'),
859	'types' => ['classic', 'gradient'],
860	'selector' => '{{WRAPPER}} .eael-elements-flip-box-rear-container',
861	'fields_options' => [
862	'color' => [
863	'default' => '#502fc6',
864	],
865	],
866	'separator' => 'after',
867	]
868	);
869
870	$this->add_responsive_control(
871	'eael_flipbox_front_back_padding',
872	[
873	'label' => esc_html__('Content Padding', 'essential-addons-for-elementor-lite'),
874	'type' => Controls_Manager::DIMENSIONS,
875	'size_units' => ['px', 'em', '%'],
876	'selectors' => [
877	'{{WRAPPER}} .eael-elements-flip-box-front-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
878	'{{WRAPPER}} .eael-elements-flip-box-rear-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
879	],
880	]
881	);
882
883	$this->add_group_control(
884	Group_Control_Border::get_type(),
885	[
886	'name' => 'eael_filbpox_border',
887	'label' => esc_html__('Border Style', 'essential-addons-for-elementor-lite'),
888	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container, {{WRAPPER}} .eael-elements-flip-box-rear-container',
889	]
890	);
891
892	$this->add_control(
893	'eael_flipbox_border_radius',
894	[
895	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
896	'type' => Controls_Manager::DIMENSIONS,
897	'size_units' => ['px', '%', 'em'],
898	'selectors' => [
899	'{{WRAPPER}} .eael-elements-flip-box-front-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
900	'{{WRAPPER}} .eael-elements-flip-box-rear-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
901	],
902	]
903	);
904
905	$this->add_group_control(
906	Group_Control_Box_Shadow::get_type(),
907	[
908	'name' => 'eael_flipbox_shadow',
909	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container, {{WRAPPER}} .eael-elements-flip-box-rear-container',
910	]
911	);
912
913	$this->end_controls_section();
914
915	/**
916	* -------------------------------------------
917	* Tab Style (Flip Box Image)
918	* -------------------------------------------
919	*/
920	$this->start_controls_section(
921	'eael_section_flipbox_imgae_style_settings',
922	[
923	'label' => esc_html__('Image Style', 'essential-addons-for-elementor-lite'),
924	'tab' => Controls_Manager::TAB_STYLE,
925	'condition' => [
926	'eael_flipbox_img_or_icon' => 'img',
927	],
928	]
929	);
930
931	$this->add_control(
932	'eael_flipbox_img_type',
933	[
934	'label' => esc_html__('Image Type', 'essential-addons-for-elementor-lite'),
935	'type' => Controls_Manager::SELECT,
936	'default' => 'default',
937	'label_block' => false,
938	'options' => [
939	'circle' => esc_html__('Circle', 'essential-addons-for-elementor-lite'),
940	'radius' => esc_html__('Radius', 'essential-addons-for-elementor-lite'),
941	'default' => esc_html__('Default', 'essential-addons-for-elementor-lite'),
942	],
943	'prefix_class' => 'eael-flipbox-img-',
944	'condition' => [
945	'eael_flipbox_img_or_icon' => 'img',
946	],
947	]
948	);
949
950	/**
951	* Condition: 'eael_flipbox_img_type' => 'radius'
952	*/
953	$this->add_control(
954	'eael_filpbox_img_border_radius',
955	[
956	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
957	'type' => Controls_Manager::SLIDER,
958	'range' => [
959	'px' => [
960	'max' => 100,
961	],
962	],
963	'selectors' => [
964	'{{WRAPPER}} .eael-elements-flip-box-icon-image img' => 'border-radius: {{SIZE}}px;',
965	'{{WRAPPER}} .eael-elements-flip-box-icon-image img' => 'border-radius: {{SIZE}}px;',
966	],
967	'condition' => [
968	'eael_flipbox_img_or_icon' => 'img',
969	'eael_flipbox_img_type' => 'radius',
970	],
971	]
972	);
973
974	$this->end_controls_section();
975
976	/**
977	* -------------------------------------------
978	* Tab Style (Flip Box Icon Style)
979	* -------------------------------------------
980	*/
981	$this->start_controls_section(
982	'eael_section_flipbox_icon_style_settings',
983	[
984	'label' => esc_html__('Icon Style', 'essential-addons-for-elementor-lite'),
985	'tab' => Controls_Manager::TAB_STYLE,
986	'condition' => [
987	'eael_flipbox_img_or_icon' => 'icon',
988	],
989	]
990	);
991
992	$this->start_controls_tabs('eael_section_icon_style_settings');
993	$this->start_controls_tab('eael_section_icon_front_style_settings', [
994	'label' => esc_html__('Front', 'essential-addons-for-elementor-lite'),
995	]);
996
997	/**
998	* Icon
999	*/
1000	$this->add_control(
1001	'eael_flipbox_front_icon_heading',
1002	[
1003	'label' => esc_html__('Icon Style', 'essential-addons-for-elementor-lite'),
1004	'type' => Controls_Manager::HEADING,
1005	'condition' => [
1006	'eael_flipbox_img_or_icon' => 'icon',
1007	],
1008	]
1009	);
1010
1011	$this->add_control(
1012	'eael_flipbox_front_icon_color',
1013	[
1014	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1015	'type' => Controls_Manager::COLOR,
1016	'default' => '#fff',
1017	'selectors' => [
1018	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image .ea-flipbox-icon' => 'color: {{VALUE}}; fill: {{VALUE}};',
1019	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
1020	],
1021	'condition' => [
1022	'eael_flipbox_img_or_icon' => 'icon',
1023	],
1024	]
1025	);
1026
1027	$this->add_control(
1028	'eael_flipbox_front_icon_typography',
1029	[
1030	'label' => esc_html__('Icon Size', 'essential-addons-for-elementor-lite'),
1031	'type' => Controls_Manager::SLIDER,
1032	'size_units' => ['px'],
1033	'default' => [
1034	'size' => 40,
1035	'unit' => 'px',
1036	],
1037	'range' => [
1038	'px' => [
1039	'min' => 0,
1040	'step' => 1,
1041	'max' => 150,
1042	],
1043	],
1044	'selectors' => [
1045	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image .ea-flipbox-icon' => 'font-size: {{SIZE}}{{UNIT}};',
1046	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image svg.ea-flipbox-icon' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};line-height: {{SIZE}}{{UNIT}};',
1047	],
1048	'condition' => [
1049	'eael_flipbox_img_or_icon' => 'icon',
1050	],
1051	]
1052	);
1053
1054	$this->add_group_control(
1055	Group_Control_Border::get_type(),
1056	[
1057	'name' => 'eael_flipbox_icon_front_border',
1058	'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
1059	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image',
1060	'condition' => [
1061	'eael_flipbox_img_or_icon' => 'icon',
1062	],
1063	]
1064	);
1065
1066	$this->add_responsive_control(
1067	'eael_flipbox_icon_front_padding',
1068	[
1069	'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
1070	'type' => Controls_Manager::DIMENSIONS,
1071	'size_units' => ['px', 'em'],
1072	'selectors' => [
1073	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1074	],
1075	]
1076	);
1077
1078	$this->add_control(
1079	'eael_flipbox_icon_front_border_radius',
1080	[
1081	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
1082	'type' => Controls_Manager::SLIDER,
1083	'size_units' => ['px', '%'],
1084	'range' => [
1085	'px' => [
1086	'min' => 0,
1087	'step' => 1,
1088	'max' => 500,
1089	],
1090	'%' => [
1091	'min' => 0,
1092	'step' => 3,
1093	'max' => 100,
1094	],
1095	],
1096	'selectors' => [
1097	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image' => 'border-radius: {{SIZE}}{{UNIT}};',
1098	],
1099	'condition' => [
1100	'eael_flipbox_img_or_icon' => 'icon',
1101	],
1102	]
1103	);
1104
1105	$this->end_controls_tab();
1106
1107	$this->start_controls_tab('eael_section_icon_back_style_settings', [
1108	'label' => esc_html__('Back', 'essential-addons-for-elementor-lite'),
1109	]);
1110
1111	/**
1112	* Icon
1113	*/
1114	$this->add_control(
1115	'eael_flipbox_back_icon_heading',
1116	[
1117	'label' => esc_html__('Icon Style', 'essential-addons-for-elementor-lite'),
1118	'type' => Controls_Manager::HEADING,
1119	'condition' => [
1120	'eael_flipbox_img_or_icon_back' => 'icon',
1121	],
1122	]
1123	);
1124
1125	$this->add_control(
1126	'eael_flipbox_back_icon_color',
1127	[
1128	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1129	'type' => Controls_Manager::COLOR,
1130	'default' => '#fff',
1131	'selectors' => [
1132	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image .ea-flipbox-icon' => 'color: {{VALUE}}; fill: {{VALUE}};',
1133	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image .ea-flipbox-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
1134	],
1135	'condition' => [
1136	'eael_flipbox_img_or_icon_back' => 'icon',
1137	],
1138	]
1139	);
1140
1141	$this->add_control(
1142	'eael_flipbox_back_icon_typography',
1143	[
1144	'label' => esc_html__('Icon Size', 'essential-addons-for-elementor-lite'),
1145	'type' => Controls_Manager::SLIDER,
1146	'size_units' => ['px'],
1147	'default' => [
1148	'size' => 40,
1149	'unit' => 'px',
1150	],
1151	'range' => [
1152	'px' => [
1153	'min' => 0,
1154	'step' => 1,
1155	'max' => 150,
1156	],
1157	],
1158	'selectors' => [
1159	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image .ea-flipbox-icon' => 'font-size: {{SIZE}}{{UNIT}};',
1160	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image svg.ea-flipbox-icon' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};line-height: {{SIZE}}{{UNIT}};',
1161	],
1162	'condition' => [
1163	'eael_flipbox_img_or_icon_back' => 'icon',
1164	],
1165	]
1166	);
1167
1168	$this->add_group_control(
1169	Group_Control_Border::get_type(),
1170	[
1171	'name' => 'eael_flipbox_icon_back_border',
1172	'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
1173	'selector' => '{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image',
1174	'condition' => [
1175	'eael_flipbox_img_or_icon' => 'icon',
1176	],
1177	]
1178	);
1179
1180	$this->add_responsive_control(
1181	'eael_flipbox_icon_back_padding',
1182	[
1183	'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
1184	'type' => Controls_Manager::DIMENSIONS,
1185	'size_units' => ['px', 'em'],
1186	'selectors' => [
1187	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1188	],
1189	]
1190	);
1191
1192	$this->add_control(
1193	'eael_flipbox_icon_back_border_radius',
1194	[
1195	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
1196	'type' => Controls_Manager::SLIDER,
1197	'size_units' => ['px', '%'],
1198	'range' => [
1199	'px' => [
1200	'min' => 0,
1201	'step' => 1,
1202	'max' => 500,
1203	],
1204	'%' => [
1205	'min' => 0,
1206	'step' => 3,
1207	'max' => 100,
1208	],
1209	],
1210	'selectors' => [
1211	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image' => 'border-radius: {{SIZE}}{{UNIT}};',
1212	],
1213	'condition' => [
1214	'eael_flipbox_img_or_icon' => 'icon',
1215	],
1216	]
1217	);
1218
1219	$this->end_controls_tab();
1220	$this->end_controls_tabs();
1221
1222	$this->end_controls_section();
1223
1224	/**
1225	* -------------------------------------------
1226	* Tab Style (Flip Box Title Style)
1227	* -------------------------------------------
1228	*/
1229	$this->start_controls_section(
1230	'eael_section_flipbox_title_style_settings',
1231	[
1232	'label' => esc_html__('Color & Typography', 'essential-addons-for-elementor-lite'),
1233	'tab' => Controls_Manager::TAB_STYLE,
1234	]
1235	);
1236
1237	$this->start_controls_tabs('eael_section_flipbox_typo_style_settings');
1238	$this->start_controls_tab('eael_section_flipbox_typo_style_front_settings', [
1239	'label' => esc_html__('Front', 'essential-addons-for-elementor-lite'),
1240	]);
1241
1242	/**
1243	* Title
1244	*/
1245	$this->add_control(
1246	'eael_flipbox_front_title_heading',
1247	[
1248	'label' => esc_html__('Title Style', 'essential-addons-for-elementor-lite'),
1249	'type' => Controls_Manager::HEADING,
1250	]
1251	);
1252
1253	$this->add_control(
1254	'eael_flipbox_front_title_color',
1255	[
1256	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1257	'type' => Controls_Manager::COLOR,
1258	'default' => '#fff',
1259	'selectors' => [
1260	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-heading' => 'color: {{VALUE}};',
1261	],
1262	]
1263	);
1264
1265	$this->add_group_control(
1266	Group_Control_Typography::get_type(),
1267	[
1268	'name' => 'eael_flipbox_front_title_typography',
1269	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-heading',
1270	]
1271	);
1272
1273	/**
1274	* Content
1275	*/
1276	$this->add_control(
1277	'eael_flipbox_front_content_heading',
1278	[
1279	'label' => esc_html__('Content Style', 'essential-addons-for-elementor-lite'),
1280	'type' => Controls_Manager::HEADING,
1281	]
1282	);
1283
1284	$this->add_control(
1285	'eael_flipbox_front_content_color',
1286	[
1287	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1288	'type' => Controls_Manager::COLOR,
1289	'default' => '#fff',
1290	'selectors' => [
1291	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-content' => 'color: {{VALUE}};',
1292	],
1293	]
1294	);
1295
1296	$this->add_group_control(
1297	Group_Control_Typography::get_type(),
1298	[
1299	'name' => 'eael_flipbox_front_content_typography',
1300	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-content',
1301	]
1302	);
1303
1304	$this->end_controls_tab();
1305
1306	$this->start_controls_tab('eael_section_flipbox_typo_style_back_settings', [
1307	'label' => esc_html__('Back', 'essential-addons-for-elementor-lite'),
1308	]);
1309
1310	/**
1311	* Title
1312	*/
1313	$this->add_control(
1314	'eael_flipbox_back_title_heading',
1315	[
1316	'label' => esc_html__('Title Style', 'essential-addons-for-elementor-lite'),
1317	'type' => Controls_Manager::HEADING,
1318	'separator' => 'before',
1319	]
1320	);
1321
1322	$this->add_control(
1323	'eael_flipbox_back_title_color',
1324	[
1325	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1326	'type' => Controls_Manager::COLOR,
1327	'default' => '#fff',
1328	'selectors' => [
1329	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-heading' => 'color: {{VALUE}};',
1330	],
1331	]
1332	);
1333
1334	$this->add_group_control(
1335	Group_Control_Typography::get_type(),
1336	[
1337	'name' => 'eael_flipbox_back_title_typography',
1338	'selector' => '{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-heading',
1339	]
1340	);
1341
1342	/**
1343	* Content
1344	*/
1345	$this->add_control(
1346	'eael_flipbox_back_content_heading',
1347	[
1348	'label' => esc_html__('Content Style', 'essential-addons-for-elementor-lite'),
1349	'type' => Controls_Manager::HEADING,
1350	'separator' => 'before',
1351	]
1352	);
1353
1354	$this->add_control(
1355	'eael_flipbox_back_content_color',
1356	[
1357	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1358	'type' => Controls_Manager::COLOR,
1359	'default' => '#fff',
1360	'selectors' => [
1361	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-content' => 'color: {{VALUE}};',
1362	],
1363	]
1364	);
1365
1366	$this->add_group_control(
1367	Group_Control_Typography::get_type(),
1368	[
1369	'name' => 'eael_flipbox_back_content_typography',
1370	'selector' => '{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-content',
1371	]
1372	);
1373
1374	$this->end_controls_tab();
1375	$this->end_controls_tabs();
1376
1377	$this->end_controls_section();
1378
1379	/**
1380	* -------------------------------------------
1381	* Tab Style (Flip Box Button Style)
1382	* -------------------------------------------
1383	*/
1384	$this->start_controls_section(
1385	'eael_section_flipbox_button_style_settings',
1386	[
1387	'label' => esc_html__('Button Style', 'essential-addons-for-elementor-lite'),
1388	'tab' => Controls_Manager::TAB_STYLE,
1389	'condition' => [
1390	'flipbox_link_type' => 'button',
1391	'eael_flipbox_back_content_type' => 'content',
1392	],
1393	]
1394	);
1395
1396	$this->start_controls_tabs('flipbox_button_style_settings');
1397
1398	$this->start_controls_tab(
1399	'flipbox_button_normal_style',
1400	[
1401	'label' => __('Normal', 'essential-addons-for-elementor-lite'),
1402	]
1403	);
1404	$this->add_responsive_control(
1405	'eael_flipbox_button_margin',
1406	[
1407	'label' => esc_html__('Margin', 'essential-addons-for-elementor-lite'),
1408	'type' => Controls_Manager::DIMENSIONS,
1409	'size_units' => ['px', 'em'],
1410	'selectors' => [
1411	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1412	],
1413	]
1414	);
1415
1416	$this->add_responsive_control(
1417	'eael_flipbox_button_padding',
1418	[
1419	'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
1420	'type' => Controls_Manager::DIMENSIONS,
1421	'size_units' => ['px', 'em'],
1422	'selectors' => [
1423	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1424	],
1425	]
1426	);
1427
1428	$this->add_control(
1429	'eael_flipbox_button_color',
1430	[
1431	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1432	'type' => Controls_Manager::COLOR,
1433	'default' => '#ffffff',
1434	'selectors' => [
1435	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button, {{WRAPPER}} .eael-elements-flip-box-container .flipbox-button .ea-flipbox-icon' => 'color: {{VALUE}}; fill: {{VALUE}};',
1436	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button .ea-flipbox-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
1437	],
1438	]
1439	);
1440
1441	$this->add_control(
1442	'eael_flipbox_button_bg_color',
1443	[
1444	'label' => esc_html__('Background', 'essential-addons-for-elementor-lite'),
1445	'type' => Controls_Manager::COLOR,
1446	'default' => '#7048ff',
1447	'selectors' => [
1448	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button' => 'background: {{VALUE}};',
1449	],
1450	]
1451	);
1452
1453	$this->add_control(
1454	'eael_flipbox_button_border_radius',
1455	[
1456	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
1457	'type' => Controls_Manager::SLIDER,
1458	'size_units' => ['px'],
1459	'range' => [
1460	'px' => [
1461	'min' => 0,
1462	'step' => 1,
1463	'max' => 100,
1464	],
1465	],
1466	'selectors' => [
1467	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button' => 'border-radius: {{SIZE}}{{UNIT}};',
1468	],
1469	]
1470	);
1471
1472	$this->add_group_control(
1473	Group_Control_Typography::get_type(),
1474	[
1475	'name' => 'eael_flipbox_button_typography',
1476	'selector' => '{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button',
1477	]
1478	);
1479
1480	$this->add_control(
1481	'eael_flipbox_button_icon_size',
1482	[
1483	'label' => esc_html__('Icon Size', 'essential-addons-for-elementor-lite'),
1484	'type' => Controls_Manager::SLIDER,
1485	'size_units' => ['px'],
1486	'range' => [
1487	'px' => [
1488	'min' => 1,
1489	'step' => 1,
1490	'max' => 200,
1491	],
1492	],
1493	'default' => [
1494	'unit' => 'px',
1495	'size' => 16,
1496	],
1497	'selectors' => [
1498	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button > i' => 'font-size: {{SIZE}}{{UNIT}};',
1499	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button > svg' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};line-height: {{SIZE}}{{UNIT}};',
1500	],
1501	]
1502	);
1503	$this->end_controls_tab();
1504
1505	$this->start_controls_tab(
1506	'flipbox_button_hover_style',
1507	[
1508	'label' => __('Hover', 'essential-addons-for-elementor-lite'),
1509	]
1510	);
1511	$this->add_control(
1512	'eael_flipbox_button_hover_color',
1513	[
1514	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1515	'type' => Controls_Manager::COLOR,
1516	'default' => '#ffffff',
1517	'selectors' => [
1518	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button:hover' => 'color: {{VALUE}};',
1519	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button:hover .ea-flipbox-icon' => 'color: {{VALUE}}; fill: {{VALUE}};',
1520	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button:hover .ea-flipbox-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
1521	],
1522	]
1523	);
1524
1525	$this->add_control(
1526	'eael_flipbox_button_hover_bg_color',
1527	[
1528	'label' => esc_html__('Background', 'essential-addons-for-elementor-lite'),
1529	'type' => Controls_Manager::COLOR,
1530	'default' => '#000000',
1531	'selectors' => [
1532	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button:hover' => 'background: {{VALUE}};',
1533	],
1534	]
1535	);
1536	$this->end_controls_tab();
1537
1538	$this->end_controls_tabs();
1539
1540	$this->end_controls_section();
1541	}
1542
1543	protected function render()
1544	{
1545
1546	$settings = $this->get_settings_for_display();
1547	$flipbox_image = $this->get_settings('eael_flipbox_image');
1548	$flipbox_image_url = Group_Control_Image_Size::get_attachment_image_src($flipbox_image['id'], 'thumbnail', $settings);
1549
1550	if (empty($flipbox_image_url) && !empty($flipbox_image['url'])) {
1551	$flipbox_image_url = $flipbox_image['url'];
1552	}
1553
1554	// $breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
1555	// print_r($breakpoints);
1556
1557	$flipbox_if_html_tag = 'div';
1558	$flipbox_if_html_title_tag = Helper::eael_validate_html_tag($settings['eael_flipbox_back_title_tag']);
1559	$this->add_render_attribute('flipbox-container', 'class', 'eael-elements-flip-box-flip-card');
1560	$this->add_render_attribute('flipbox-title-container', 'class', 'eael-elements-flip-box-heading');
1561
1562
1563	if ($settings['flipbox_link_type'] != 'none') {
1564	if (!empty($settings['flipbox_link']['url'])) {
1565	if ($settings['flipbox_link_type'] == 'box') {
1566	$flipbox_if_html_tag = 'a';
1567
1568	$this->add_link_attributes( 'flipbox-container', $settings['flipbox_link'] );
1569	} elseif ($settings['flipbox_link_type'] == 'title') {
1570	$flipbox_if_html_title_tag = 'a';
1571
1572	$this->add_render_attribute(
1573	'flipbox-title-container',
1574	[
1575	'class' => 'flipbox-linked-title',
1576	]
1577	);
1578
1579	$this->add_link_attributes( 'flipbox-title-container', $settings['flipbox_link'] );
1580	} elseif ($settings['flipbox_link_type'] == 'button') {
1581	$this->add_render_attribute(
1582	'flipbox-button-container',
1583	[
1584	'class' => 'flipbox-button',
1585	]
1586	);
1587
1588	$this->add_link_attributes( 'flipbox-button-container', $settings['flipbox_link'] );
1589	}
1590	}
1591	}
1592
1593	$flipbox_image_back = $this->get_settings('eael_flipbox_image_back');
1594	$flipbox_back_image_url = Group_Control_Image_Size::get_attachment_image_src($flipbox_image_back['id'], 'thumbnail_back', $settings);
1595	$flipbox_back_image_url = empty($flipbox_back_image_url) ? $flipbox_back_image_url : $flipbox_back_image_url;
1596	if ('img' == $settings['eael_flipbox_img_or_icon_back']) {
1597	$this->add_render_attribute(
1598	'flipbox-back-icon-image-container',
1599	[
1600	'src' => $flipbox_back_image_url,
1601	'alt' => esc_attr(get_post_meta($flipbox_image_back['id'], '_wp_attachment_image_alt', true)),
1602	]
1603	);
1604	}
1605
1606	$this->add_render_attribute(
1607	'eael_flipbox_main_wrap',
1608	[
1609	'class' => [
1610	'eael-elements-flip-box-container',
1611	'eael-animate-flip',
1612	'eael-' . esc_attr($settings['eael_flipbox_type']),
1613	'eael-' . esc_attr($settings['eael_flipbox_front_content_type']),
1614	'eael-flip-box-' . esc_attr($settings['eael_flipbox_event_type']),
1615	],
1616	]
1617	);
1618
1619	?>
1620
1621	<div <?php $this->print_render_attribute_string('eael_flipbox_main_wrap'); ?>>
1622
1623	<<?php echo esc_html( $flipbox_if_html_tag ) . ' '; $this->print_render_attribute_string('flipbox-container'); ?>>
1624	<div class="eael-elements-flip-box-front-container">
1625
1626	<?php
1627	if ( $settings['eael_flipbox_front_content_type'] == 'template' ) {
1628	if ( ! empty( $settings['eael_flipbox_front_templates'] ) ) {
1629	// WPML Compatibility
1630	if ( ! is_array( $settings['eael_flipbox_front_templates'] ) ) {
1631	$settings['eael_flipbox_front_templates'] = apply_filters( 'wpml_object_id', $settings['eael_flipbox_front_templates'], 'wp_template', true );
1632	}
1633	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1634	echo Plugin::$instance->frontend->get_builder_content( $settings['eael_flipbox_front_templates'], true );
1635	}
1636	} else { ?>
1637
1638	<div class="eael-elements-slider-display-table">
1639	<div class="eael-elements-flip-box-vertical-align">
1640	<div class="eael-elements-flip-box-padding">
1641	<div class="eael-elements-flip-box-icon-image">
1642	<?php if ('icon' === $settings['eael_flipbox_img_or_icon']) : ?>
1643	<?php
1644	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1645	$this->render_icon($settings); ?>
1646	<?php elseif ('img' === $settings['eael_flipbox_img_or_icon']) : ?>
1647	<img class="eael-flipbox-image-as-icon" src="<?php echo esc_url($flipbox_image_url); ?>" alt="<?php echo esc_attr(get_post_meta($flipbox_image['id'], '_wp_attachment_image_alt', true)); ?>">
1648	<?php endif; ?>
1649	</div>
1650	<?php
1651	if ( !empty( $settings['eael_flipbox_front_title'] ) ){
1652	$title_tag = Helper::eael_validate_html_tag( $settings['eael_flipbox_front_title_tag'] );
1653	$title = '<'. $title_tag . ' class="eael-elements-flip-box-heading">';
1654	$title .= $settings['eael_flipbox_front_title'];
1655	$title .= '</' . $title_tag . '>';
1656	echo wp_kses( $title, Helper::eael_allowed_tags() );
1657	}
1658	?>
1659	<div class="eael-elements-flip-box-content">
1660	<?php
1661	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1662	echo $this->parse_text_editor( $settings['eael_flipbox_front_text'] );?>
1663	</div>
1664	</div>
1665	</div>
1666	</div>
1667	<?php } ?>
1668	</div>
1669
1670	<div class="eael-elements-flip-box-rear-container">
1671
1672	<?php
1673	if ( $settings['eael_flipbox_back_content_type'] == 'template' ) {
1674	if ( ! empty( $settings['eael_flipbox_back_templates'] ) ) {
1675	// WPML Compatibility
1676	if ( ! is_array( $settings['eael_flipbox_back_templates'] ) ) {
1677	$settings['eael_flipbox_back_templates'] = apply_filters( 'wpml_object_id', $settings['eael_flipbox_back_templates'], 'wp_template', true );
1678	}
1679	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1680	echo Plugin::$instance->frontend->get_builder_content( $settings['eael_flipbox_back_templates'], true );
1681	}
1682	} else { ?>
1683	<div class="eael-elements-slider-display-table">
1684	<div class="eael-elements-flip-box-vertical-align">
1685	<div class="eael-elements-flip-box-padding">
1686	<?php if ('none' != $settings['eael_flipbox_img_or_icon_back']) { ?>
1687	<div class="eael-elements-flip-box-icon-image">
1688	<?php if ('img' == $settings['eael_flipbox_img_or_icon_back']) { ?>
1689	<img class="eael-flipbox-image-as-icon" <?php $this->print_render_attribute_string('flipbox-back-icon-image-container'); ?>>
1690	<?php } elseif ('icon' == $settings['eael_flipbox_img_or_icon_back']) {
1691	$this->render_icon($settings, 'back');
1692	} ?>
1693	</div>
1694	<?php } ?>
1695	<?php if ( !empty( $settings['eael_flipbox_back_title'] ) ): ?>
1696	<<?php echo esc_html( $flipbox_if_html_title_tag ), ' '; $this->print_render_attribute_string('flipbox-title-container'); ?>><?php echo wp_kses( $settings['eael_flipbox_back_title'], Helper::eael_allowed_tags() ); ?></<?php echo esc_html( $flipbox_if_html_title_tag ); ?>>
1697	<?php endif; ?>
1698	<div class="eael-elements-flip-box-content">
1699	<?php
1700	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1701	echo $this->parse_text_editor( $settings['eael_flipbox_back_text'] );
1702	?>
1703	</div>
1704
1705	<?php if ($settings['flipbox_link_type'] == 'button' && !empty($settings['flipbox_button_text'])) : ?>
1706	<a <?php $this->print_render_attribute_string('flipbox-button-container'); ?>>
1707	<?php if ('before' == $settings['button_icon_position']) {
1708	$this->render_icon($settings, 'button');
1709	} ?>
1710	<?php echo wp_kses( $settings['flipbox_button_text'], Helper::eael_allowed_tags() ); ?>
1711	<?php if ('after' == $settings['button_icon_position']) {
1712	$this->render_icon($settings, 'button');
1713	} ?>
1714	</a>
1715	<?php endif; ?>
1716	</div>
1717	</div>
1718	</div>
1719	<?php } ?>
1720	</div>
1721	</<?php echo esc_html( $flipbox_if_html_tag ); ?>>
1722	</div>
1723
1724	<script>
1725	jQuery(document).ready(function( $ ) {
1726	$(".eael-flip-box-click").off('click').on( 'click', function( event ) {
1727	$(this).toggleClass( '--active' );
1728	});
1729	});
1730	</script>
1731
1732	<?php
1733	}
1734
1735	protected function render_icon($settings, $icon_location = 'front')
1736	{
1737	$new_icon_key = $old_icon_key = '';
1738	switch ($icon_location){
1739	case 'front':
1740	$new_icon_key = 'eael_flipbox_icon_new';
1741	$old_icon_key = 'eael_flipbox_icon';
1742	break;
1743	case 'back':
1744	$new_icon_key = 'eael_flipbox_icon_back_new';
1745	$old_icon_key = 'eael_flipbox_icon_back';
1746	break;
1747	case 'button':
1748	$new_icon_key = 'button_icon_new';
1749	$old_icon_key = 'button_icon';
1750	break;
1751	}
1752
1753	$is_migrated = isset($settings['__fa4_migrated'][$new_icon_key]);
1754	$is_new_icon = empty($settings[$old_icon_key]);
1755	if ($is_new_icon \|\| $is_migrated) {
1756	if ( 'svg' === $settings[$new_icon_key]['library'] ) {
1757	echo "<span class='ea-flipbox-icon eael-flipbox-svg-icon eaa-svg'>";
1758	Icons_Manager::render_icon( $settings[$new_icon_key] );
1759	echo '</span>';
1760	}else{
1761	Icons_Manager::render_icon( $settings[$new_icon_key], [ 'aria-hidden' => 'true', 'class' => "ea-flipbox-icon" ] );
1762	}
1763	?>
1764	<?php } else { ?>
1765	<i class="<?php echo esc_attr($settings[$old_icon_key]); ?> ea-flipbox-icon "></i>
1766	<?php }
1767	}
1768	}
1769