master-addons / addons / basic / ma-flipbox / ma-flipbox.php

ma-flipbox.php in Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits 3.1.2, at addons/basic/ma-flipbox/ma-flipbox.php

1,185 lines 35.7 KB

Raw Download Zip

1	<?php
2
3	namespace MasterAddons\Addons;
4
5	/**
6	* Author Name: Liton Arefin
7	* Author URL : https: //jeweltheme.com
8	* Date : 6/26/19
9	*/
10
11	use MasterAddons\Inc\Classes\Base\Master_Widget;
12	use \Elementor\Controls_Stack;
13	use \Elementor\Utils;
14	use \Elementor\Controls_Manager;
15	use \Elementor\Group_Control_Border;
16	use \Elementor\Group_Control_Typography;
17	use \Elementor\Group_Control_Image_Size;
18	use \Elementor\Group_Control_Background;
19	use \Elementor\Core\Kits\Documents\Tabs\Global_Colors;
20	use \Elementor\Core\Kits\Documents\Tabs\Global_Typography;
21	use \Elementor\Modules\DynamicTags\Module as TagsModule;
22	use MasterAddons\Inc\Classes\Helper;
23	use MasterAddons\Inc\Admin\Config;
24
25	if (!defined('ABSPATH')) exit; // If this file is called directly, abort.
26
27	class Flipbox extends Master_Widget
28	{
29	use \MasterAddons\Inc\Traits\Widget_Notice;
30	use \MasterAddons\Inc\Traits\Widget_Assets_Trait;
31
32	public function get_name()
33	{
34	return 'ma-flipbox';
35	}
36	public function get_title()
37	{
38	return esc_html__('Flipbox', 'master-addons' );
39	}
40
41	public function get_icon()
42	{
43	return 'jltma-icon ' . Config::get_addon_icon($this->get_name());
44	}
45
46	protected function register_controls()
47	{
48
49	/-----------------------------------------------------------------------------------/
50	/* STYLE PRESETS
51	/-----------------------------------------------------------------------------------/
52
53	$this->start_controls_section(
54	'section_flipbox_style',
55	[
56	'label' => esc_html__('Style Preset', 'master-addons' )
57	]
58	);
59
60	// Define default free options - Pro version overrides via filter
61	$layout_style_options = apply_filters('master_addons/addons/flipbox/layout_style', [
62	'one' => __('Default', 'master-addons'),
63	'four' => __('Front Icon', 'master-addons'),
64	'flipbox-pro-1' => __('Front Image (Pro)', 'master-addons'),
65	'flipbox-pro-2' => __('Diagnonal (Pro)', 'master-addons'),
66	]);
67
68	$this->add_control(
69	'ma_flipbox_layout_style',
70	[
71	'label' => __('Design Variation', 'master-addons'),
72	'type' => Controls_Manager::SELECT,
73	'options' => $layout_style_options,
74	'default' => 'one',
75	'description' => Helper::upgrade_to_pro('2+ more Variations on'),
76	]
77	);
78
79	// Define default free options - Pro version overrides via filter
80	$animation_style_options = apply_filters('master_addons/addons/flipbox/animation_style', [
81	'horizontal' => esc_html__('Flip Horizontal', 'master-addons'),
82	'vertical' => esc_html__('Flip Vertical', 'master-addons'),
83	'fade' => esc_html__('Fade', 'master-addons'),
84	'flip box' => esc_html__('Flip Box', 'master-addons'),
85	'flip box fade' => esc_html__('Flip Box Fade', 'master-addons'),
86	'flip box fade up' => esc_html__('Fade Up', 'master-addons'),
87	'flipbox-anim-1' => esc_html__('Cube - Top Down (Pro)', 'master-addons'),
88	'flipbox-anim-2' => esc_html__('Cube - Down Top (Pro)', 'master-addons'),
89	'flipbox-anim-3' => esc_html__('Cube - Left Right (Pro)', 'master-addons'),
90	'flipbox-anim-4' => esc_html__('Cube - Right Left (Pro)', 'master-addons'),
91	'flipbox-anim-5' => esc_html__('Fade Hideback (Pro)', 'master-addons'),
92	'flipbox-anim-6' => esc_html__('Fade Up Hideback (Pro)', 'master-addons'),
93	'flipbox-anim-7' => esc_html__('Left to Right (Pro)', 'master-addons'),
94	'flipbox-anim-8' => esc_html__('Right to Left (Pro)', 'master-addons'),
95	'flipbox-anim-9' => esc_html__('Top to Bottom (Pro)', 'master-addons'),
96	'flipbox-anim-10' => esc_html__('Bottom to Top (Pro)', 'master-addons'),
97	'flipbox-anim-11' => esc_html__('Diagonal (Top to Bottom) (Pro)', 'master-addons'),
98	'flipbox-anim-12' => esc_html__('Diagonal (Bottom to Top) (Pro)', 'master-addons'),
99	'flipbox-anim-13' => esc_html__('Fade In Out (Pro)', 'master-addons'),
100	'flipbox-anim-14' => esc_html__('Nananana (Pro)', 'master-addons'),
101	'flipbox-anim-15' => esc_html__('Rollover (Pro)', 'master-addons'),
102	'flipbox-anim-16' => esc_html__('3d Flip (Pro)', 'master-addons'),
103	]);
104
105	$this->add_control(
106	'animation_style',
107	[
108	'label' => __('Animation Style', 'master-addons'),
109	'type' => Controls_Manager::SELECT,
110	'options' => $animation_style_options,
111	'default' => 'vertical',
112	'prefix_class' => 'jltma-flip-animate-',
113	'description' => Helper::upgrade_to_pro('15+ more Flipbox Variations on'),
114	]
115	);
116
117	$this->end_controls_section();
118
119	/-----------------------------------------------------------------------------------/
120	/* Front Box
121	/-----------------------------------------------------------------------------------/
122
123	$this->start_controls_section(
124	'section_front_box',
125	[
126	'label' => esc_html__('Front Box', 'master-addons' )
127	]
128	);
129
130	$this->add_control(
131	'front_icon_view',
132	[
133	'label' => esc_html__('Icon Style', 'master-addons' ),
134	'type' => Controls_Manager::SELECT,
135	'options' => [
136	'default' => esc_html__('Default', 'master-addons' ),
137	'stacked' => esc_html__('Stacked', 'master-addons' ),
138	'framed' => esc_html__('Framed', 'master-addons' ),
139	],
140	'default' => 'default',
141
142	]
143	);
144
145	$this->add_control(
146	'front_icon_shape',
147	[
148	'label' => __('Shape', 'master-addons' ),
149	'type' => Controls_Manager::SELECT,
150	'options' => [
151	'circle' => __('Circle', 'master-addons' ),
152	'square' => __('Square', 'master-addons' ),
153	],
154	'default' => 'circle',
155	'condition' => [
156	'front_icon_view!' => 'default',
157	],
158
159	]
160	);
161
162	$this->add_control(
163	'front_icon',
164	[
165	'label' => esc_html__('Icon', 'master-addons' ),
166	'description' => esc_html__('Please choose an icon from the list.', 'master-addons' ),
167	'type' => Controls_Manager::ICONS,
168	'fa4compatibility' => 'icon',
169	'default' => [
170	'value' => 'fab fa-elementor',
171	'library' => 'brand',
172	],
173	'render_type' => 'template',
174	'condition' => [
175	'ma_flipbox_layout_style' => ['one', 'three', 'four']
176	]
177	]
178	);
179
180	$this->add_control(
181	'front_box_image',
182	[
183	'label' => __('Image', 'master-addons'),
184	'type' => Controls_Manager::MEDIA,
185	'default' => [
186	'url' => Utils::get_placeholder_image_src(),
187	],
188	'condition' => [
189	'ma_flipbox_layout_style' => 'two',
190	],
191	]
192	);
193
194	$this->add_group_control(
195	Group_Control_Image_Size::get_type(),
196	[
197	'name' => 'full',
198	'default' => 'full',
199	'condition' => [
200	'ma_flipbox_layout_style' => 'two',
201	],
202	]
203	);
204
205	$this->add_control(
206	'front_title',
207	[
208	'label' => esc_html__('Title', 'master-addons' ),
209	'type' => Controls_Manager::TEXTAREA,
210	'dynamic' => [
211	'active' => true,
212	],
213	'placeholder' => esc_html__('Enter text', 'master-addons' ),
214	'default' => esc_html__('Front Title Here', 'master-addons' ),
215	]
216	);
217
218	$this->add_control(
219	'front_text',
220	[
221	'label' => esc_html__('Description', 'master-addons' ),
222	'type' => Controls_Manager::TEXTAREA,
223	'dynamic' => [
224	'active' => true,
225	],
226	'placeholder' => esc_html__('Enter text', 'master-addons' ),
227	'default' => esc_html__('Add some nice text here.', 'master-addons' ),
228	]
229	);
230
231	$this->add_responsive_control(
232	'front_box_front_text_align',
233	[
234	'label' => esc_html__('Alignment', 'master-addons' ),
235	'type' => Controls_Manager::CHOOSE,
236	'label_block' => false,
237	'options' => Helper::jltma_content_alignment(),
238	'default' => 'left',
239	'selectors' => [
240	'{{WRAPPER}} .jltma-flip-box-front' => 'text-align: {{VALUE}};',
241	],
242	]
243	);
244
245	$this->add_control(
246	'front_title_html_tag',
247	[
248	'label' => esc_html__('Title HTML Tag', 'master-addons' ),
249	'type' => Controls_Manager::SELECT,
250	'options' => Helper::jltma_title_tags(),
251	'default' => 'h3',
252	]
253	);
254
255	$this->end_controls_section();
256
257	$this->start_controls_section(
258	'section_back_box',
259	[
260	'label' => __('Back Box', 'master-addons' )
261	]
262	);
263
264	$this->add_control(
265	'back_icon_view',
266	[
267	'label' => __('View', 'master-addons' ),
268	'type' => Controls_Manager::SELECT,
269	'options' => [
270	'default' => __('Default', 'master-addons' ),
271	'stacked' => __('Stacked', 'master-addons' ),
272	'framed' => __('Framed', 'master-addons' ),
273	],
274	'default' => 'default',
275
276	]
277	);
278
279	$this->add_control(
280	'back_icon_shape',
281	[
282	'label' => __('Shape', 'master-addons' ),
283	'type' => Controls_Manager::SELECT,
284	'options' => [
285	'circle' => __('Circle', 'master-addons' ),
286	'square' => __('Square', 'master-addons' ),
287	],
288	'default' => 'circle',
289	'condition' => [
290	'back_icon_view!' => 'default',
291	],
292
293	]
294	);
295
296	$this->add_control(
297	'back_icon',
298	[
299	'label' => esc_html__('Icon', 'master-addons' ),
300	'description' => esc_html__('Please choose an icon from the list.', 'master-addons' ),
301	'type' => Controls_Manager::ICONS,
302	'fa4compatibility' => 'icon',
303	'default' => [
304	'value' => 'fab fa-wordpress',
305	'library' => 'brand',
306	],
307	'render_type' => 'template'
308	]
309	);
310
311	$this->add_control(
312	'back_title',
313	[
314	'label' => __('Title', 'master-addons' ),
315	'type' => Controls_Manager::TEXTAREA,
316	'dynamic' => [
317	'active' => true,
318	],
319	'placeholder' => __('Enter text', 'master-addons' ),
320	'default' => __('Text Title', 'master-addons' ),
321	]
322	);
323
324	$this->add_control(
325	'back_text',
326	[
327	'label' => __('Description', 'master-addons' ),
328	'type' => Controls_Manager::TEXTAREA,
329	'dynamic' => [
330	'active' => true,
331	],
332	'placeholder' => __('Enter text', 'master-addons' ),
333	'default' => __('Add some nice text here.', 'master-addons' ),
334	]
335	);
336
337	$this->add_responsive_control(
338	'front_box_back_text_align',
339	[
340	'label' => esc_html__('Alignment', 'master-addons' ),
341	'type' => Controls_Manager::CHOOSE,
342	'label_block' => false,
343	'options' => Helper::jltma_content_alignment(),
344	'default' => 'left',
345	'selectors' => [
346	'{{WRAPPER}} .jltma-flip-box-back' => 'text-align: {{VALUE}};',
347	],
348	]
349	);
350
351	$this->add_control(
352	'back_title_html_tag',
353	[
354	'label' => __('HTML Tag', 'master-addons' ),
355	'type' => Controls_Manager::SELECT,
356	'options' => Helper::jltma_title_tags(),
357	'default' => 'h3',
358	]
359	);
360
361	$this->end_controls_section();
362
363	$this->start_controls_section(
364	'section-action-button',
365	[
366	'label' => __('Action Button', 'master-addons' ),
367	]
368	);
369
370	$this->add_control(
371	'action_text',
372	[
373	'label' => __('Button Text', 'master-addons' ),
374	'type' => Controls_Manager::TEXT,
375	'placeholder' => __('Buy', 'master-addons' ),
376	'default' => __('Buy Now', 'master-addons' ),
377	]
378	);
379
380	$this->add_control(
381	'link',
382	[
383	'label' => __('Link to', 'master-addons' ),
384	'type' => Controls_Manager::URL,
385	'dynamic' => [
386	'active' => true,
387	],
388	'placeholder' => __('http://your-link.com', 'master-addons' ),
389	'separator' => 'before',
390	]
391	);
392
393	$this->end_controls_section();
394
395	/-----------------------------------------------------------------------------------/
396	/* STYLE TAB
397	/-----------------------------------------------------------------------------------/
398
399	$this->start_controls_section(
400	'section-general-style',
401	[
402	'label' => __('General', 'master-addons' ),
403	'tab' => Controls_Manager::TAB_STYLE
404	]
405	);
406
407	$this->add_control(
408	'ma_el_flip_3d',
409	[
410	'label' => __('3d Flip Style', 'master-addons' ),
411	'type' => Controls_Manager::SELECT,
412	'options' => [
413	'flip_3d_left' => __('Slide Right to Left', 'master-addons' ),
414	'flip_3d_right' => __('Slide Left to Right', 'master-addons' ),
415	'flip_3d_top' => __('Slide Top to Bottom', 'master-addons' ),
416	'flip_3d_bottom' => __('Slide Bottom to Top', 'master-addons' ),
417	],
418	'default' => '3d_left',
419	'condition' => [
420	'animation_style' => 'flip3d'
421	]
422	]
423	);
424
425	$this->add_group_control(
426	Group_Control_Border::get_type(),
427	[
428	'name' => 'flip_box_border',
429	'label' => __('Box Border', 'master-addons' ),
430	'selector' => '{{WRAPPER}} .jltma-flip-box-inner > div',
431	]
432	);
433
434	$this->add_control(
435	'box_border_radius',
436	[
437	'label' => __('Border Radius', 'master-addons' ),
438	'type' => Controls_Manager::DIMENSIONS,
439	'size_units' => ['px', '%'],
440	'selectors' => [
441	'{{WRAPPER}} .jltma-flip-box-front' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
442	'{{WRAPPER}} .jltma-flip-box-back' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
443	],
444	]
445	);
446
447	$this->add_control(
448	'box_height',
449	[
450	'type' => Controls_Manager::TEXT,
451	'label' => __('Flip Box Height', 'master-addons' ),
452	'placeholder' => __('250', 'master-addons' ),
453	'default' => __('250', 'master-addons' ),
454	'selectors' => [
455	'{{WRAPPER}} .jltma-flip-box-inner' => 'height: {{VALUE}}px;',
456	'{{WRAPPER}}.jltma-flip-animate-flipcard .jltma-flip-box-front' => 'transform-origin: center center calc(-{{VALUE}}px/2);-webkit-transform-origin:center center calc(-{{VALUE}}px/2);',
457	'{{WRAPPER}}.jltma-flip-animate-flipcard .jltma-flip-box-back' => 'transform-origin: center center calc(-{{VALUE}}px/2);-webkit-transform-origin:center center calc(-{{VALUE}}px/2);',
458	],
459	]
460	);
461
462	$this->end_controls_section();
463
464	$this->start_controls_section(
465	'section-front-box-style',
466	[
467	'label' => __('Front Box', 'master-addons' ),
468	'tab' => Controls_Manager::TAB_STYLE
469	]
470	);
471
472	$this->add_group_control(
473	Group_Control_Background::get_type(),
474	[
475	'name' => 'front_box_bg_color',
476	'label' => __('Background', 'master-addons' ),
477	'types' => ['classic', 'gradient'],
478	'default' => '#fff',
479	'selector' => '{{WRAPPER}} .jltma-flip-box-front',
480	'condition' => [
481	'ma_flipbox_layout_style' => ['one', 'three', 'four']
482	]
483	]
484	);
485
486	$this->add_control(
487	'front_box_background_color',
488	[
489	'label' => esc_html__('Background Color', 'master-addons' ),
490	'type' => Controls_Manager::COLOR,
491	'default' => '',
492	'selectors' => [
493	'{{WRAPPER}} .jltma-flip-box-front' => 'background-color: {{VALUE}};',
494	],
495	]
496	);
497
498	$this->add_control(
499	'front_box_title_color',
500	[
501	'label' => __('Title', 'master-addons' ),
502	'type' => Controls_Manager::COLOR,
503	'global' => [
504	'default' => Global_Colors::COLOR_PRIMARY,
505	],
506	'default' => '#393c3f',
507	'selectors' => [
508	'{{WRAPPER}} .front-icon-title' => 'color: {{VALUE}};',
509	],
510	'condition' => [
511	'front_title!' => ''
512	],
513	]
514	);
515
516	$this->add_group_control(
517	Group_Control_Typography::get_type(),
518	[
519	'name' => 'front_box_title_typography',
520	'label' => __('Title Typography', 'master-addons' ),
521	'global' => [
522	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
523	],
524	'selector' => '{{WRAPPER}} .front-icon-title',
525	]
526	);
527
528	$this->add_control(
529	'front_box_text_color',
530	[
531	'label' => __('Description Color', 'master-addons' ),
532	'type' => Controls_Manager::COLOR,
533	'global' => [
534	'default' => Global_Colors::COLOR_PRIMARY,
535	],
536	'default' => '#78909c',
537	'selectors' => [
538	'{{WRAPPER}} .jltma-flip-box-front p' => 'color: {{VALUE}};',
539	],
540
541	]
542	);
543
544	$this->add_group_control(
545	Group_Control_Typography::get_type(),
546	[
547	'name' => 'front_box_text_typography',
548	'label' => __('Description Typography', 'master-addons' ),
549	'global' => [
550	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
551	],
552	'selector' => '{{WRAPPER}} .jltma-flip-box-front p',
553	]
554	);
555
556	/**
557	* Front Box icons styles
558	**/
559	$this->add_control(
560	'front_box_icon_color',
561	[
562	'label' => __('Icon Color', 'master-addons' ),
563	'type' => Controls_Manager::COLOR,
564	'global' => [
565	'default' => Global_Colors::COLOR_PRIMARY,
566	],
567	'default' => '#4b00e7',
568	'selectors' => [
569	'{{WRAPPER}} .jltma-flip-box-front .icon-wrapper i' => 'color: {{VALUE}};',
570	'{{WRAPPER}} .jltma-flip-box-front .icon-wrapper svg' => 'fill: {{VALUE}};',
571	],
572	'condition' => [
573	'front_icon!' => ''
574	],
575	]
576	);
577
578	$this->add_control(
579	'front_box_icon_fill_color',
580	[
581	'label' => __('Icon Fill Color', 'master-addons' ),
582	'type' => Controls_Manager::COLOR,
583	'global' => [
584	'default' => Global_Colors::COLOR_PRIMARY,
585	],
586	'default' => '#41dcab',
587	'selectors' => [
588	'{{WRAPPER}} .jltma-flip-icon-view-stacked' => 'background-color: {{VALUE}};',
589	],
590	'condition' => [
591	'front_icon_view' => 'stacked'
592	],
593	]
594	);
595
596	$this->add_group_control(
597	Group_Control_Border::get_type(),
598	[
599	'name' => 'front_box_icon_border',
600	'label' => __('Box Border', 'master-addons' ),
601	'placeholder' => '1px',
602	'default' => '1px',
603	'selector' => '{{WRAPPER}} .jltma-flip-box-front .jltma-flip-icon-view-framed, {{WRAPPER}} .jltma-flip-box-front .jltma-flip-icon-view-stacked',
604	'label_block' => true,
605	'condition' => [
606	'front_icon_view!' => 'default'
607	],
608	]
609	);
610
611	$this->add_control(
612	'front_icon_size',
613	[
614	'label' => __('Icon Size (px)', 'master-addons' ),
615	'type' => Controls_Manager::SLIDER,
616	'range' => [
617	'px' => [
618	'min' => 6,
619	'max' => 300,
620	],
621	],
622	'selectors' => [
623	'{{WRAPPER}} .jltma-flip-box-front .icon-wrapper i' => 'font-size: {{SIZE}}{{UNIT}};',
624	'{{WRAPPER}} .jltma-flip-box-front .icon-wrapper svg' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
625	],
626	]
627	);
628
629	$this->add_control(
630	'front_icon_padding',
631	[
632	'label' => __('Icon Padding', 'master-addons' ),
633	'type' => Controls_Manager::SLIDER,
634	'selectors' => [
635	'{{WRAPPER}} .jltma-flip-box-front .icon-wrapper' => 'padding: {{SIZE}}{{UNIT}};',
636	],
637	'default' => [
638	'size' => 1.5,
639	'unit' => 'em',
640	],
641	'range' => [
642	'em' => [
643	'min' => 0,
644	],
645	],
646	'condition' => [
647	'front_icon_view!' => 'default',
648	],
649	]
650	);
651
652	$this->end_controls_section();
653
654	$this->start_controls_section(
655	'section-back-box-style',
656	[
657	'label' => esc_html__('Back Box', 'master-addons' ),
658	'tab' => Controls_Manager::TAB_STYLE
659	]
660	);
661
662	$this->add_group_control(
663	Group_Control_Background::get_type(),
664	[
665	'name' => 'back_box_background',
666	'label' => __('Back Box Background', 'master-addons' ),
667	'types' => ['classic', 'gradient'],
668	'selector' => '{{WRAPPER}} .jltma-flip-box-back',
669	]
670	);
671
672	$this->add_control(
673	'back_box_title_color',
674	[
675	'label' => __('Title', 'master-addons' ),
676	'type' => Controls_Manager::COLOR,
677	'global' => [
678	'default' => Global_Colors::COLOR_PRIMARY,
679	],
680	'default' => '#FFF',
681	'selectors' => [
682	'{{WRAPPER}} .back-icon-title' => 'color: {{VALUE}};',
683	],
684
685	]
686	);
687
688	$this->add_group_control(
689	Group_Control_Typography::get_type(),
690	[
691	'name' => 'back_box_title_typography',
692	'label' => __('Title Typography', 'master-addons' ),
693	'global' => [
694	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
695	],
696	'selector' => '{{WRAPPER}} .back-icon-title',
697	]
698	);
699
700	$this->add_control(
701	'back_box_text_color',
702	[
703	'label' => __('Description Color', 'master-addons' ),
704	'type' => Controls_Manager::COLOR,
705	'global' => [
706	'default' => Global_Colors::COLOR_PRIMARY,
707	],
708	'default' => '#FFF',
709	'selectors' => [
710	'{{WRAPPER}} .jltma-flip-box-back p' => 'color: {{VALUE}};',
711	],
712
713	]
714	);
715
716	$this->add_group_control(
717	Group_Control_Typography::get_type(),
718	[
719	'name' => 'back_box_text_typography',
720	'label' => __('Description Typography', 'master-addons' ),
721	'global' => [
722	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
723	],
724	'selector' => '{{WRAPPER}} .jltma-flip-box-back p',
725	]
726	);
727
728	/**
729	* Back Box icons styles
730	**/
731	$this->add_control(
732	'back_box_icon_color',
733	[
734	'label' => __('Icon Color', 'master-addons' ),
735	'type' => Controls_Manager::COLOR,
736	'global' => [
737	'default' => Global_Colors::COLOR_PRIMARY,
738	],
739	'default' => '#FFF',
740	'selectors' => [
741	'{{WRAPPER}} .jltma-flip-box-back .icon-wrapper i' => 'color: {{VALUE}};',
742	'{{WRAPPER}} .jltma-flip-box-back .icon-wrapper svg' => 'fill: {{VALUE}};',
743	],
744	'condition' => [
745	'back_icon!' => ''
746	],
747	]
748	);
749
750	$this->add_control(
751	'back_box_icon_fill_color',
752	[
753	'label' => __('Icon Fill Color', 'master-addons' ),
754	'type' => Controls_Manager::COLOR,
755	'global' => [
756	'default' => Global_Colors::COLOR_PRIMARY,
757	],
758	'default' => '#fff',
759	'selectors' => [
760	'{{WRAPPER}} .jltma-flip-box-back .jltma-flip-icon-view-stacked' => 'background-color: {{VALUE}};',
761	],
762	'condition' => [
763	'front_icon_view' => 'stacked'
764	],
765	]
766	);
767
768	$this->add_group_control(
769	Group_Control_Border::get_type(),
770	[
771	'name' => 'back_box_icon_border',
772	'label' => __('Box Border', 'master-addons' ),
773	'placeholder' => '1px',
774	'default' => '1px',
775	'selector' => '{{WRAPPER}} .jltma-flip-box-back .jltma-flip-icon-view-framed, {{WRAPPER}} .jltma-flip-box-back .jltma-flip-icon-view-stacked',
776	'label_block' => true,
777	'condition' => [
778	'back_icon_view!' => 'default'
779	],
780	]
781	);
782
783	$this->add_control(
784	'back_icon_size',
785	[
786	'label' => __('Icon Size (px)', 'master-addons' ),
787	'type' => Controls_Manager::SLIDER,
788	'range' => [
789	'px' => [
790	'min' => 6,
791	'max' => 300,
792	],
793	],
794	'selectors' => [
795	'{{WRAPPER}} .jltma-flip-box-back .icon-wrapper i' => 'font-size: {{SIZE}}{{UNIT}};',
796	'{{WRAPPER}} .jltma-flip-box-back .icon-wrapper svg' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
797	],
798	]
799	);
800
801	$this->add_control(
802	'back_icon_padding',
803	[
804	'label' => __('Icon Padding', 'master-addons' ),
805	'type' => Controls_Manager::SLIDER,
806	'selectors' => [
807	'{{WRAPPER}} .jltma-flip-box-back .icon-wrapper' => 'padding: {{SIZE}}{{UNIT}};',
808	],
809	'default' => [
810	'size' => 1.5,
811	'unit' => 'em',
812	],
813	'range' => [
814	'em' => [
815	'min' => 0,
816	],
817	],
818	'condition' => [
819	'back_icon_view!' => 'default',
820	],
821	]
822	);
823
824	$this->end_controls_section();
825
826	$this->start_controls_section(
827	'section_action_button_style',
828	[
829	'label' => __('Action Button', 'master-addons' ),
830	'tab' => Controls_Manager::TAB_STYLE,
831	]
832	);
833
834	$this->start_controls_tabs('jltma_flipbox_action_btn_style');
835
836	$this->start_controls_tab(
837	'jltma_flipbox_action_btn_style_normal',
838	[
839	'label' => esc_html__('Normal', 'master-addons' )
840	]
841	);
842
843	$this->add_control(
844	'button_text_color',
845	[
846	'label' => __('Text Color', 'master-addons' ),
847	'type' => Controls_Manager::COLOR,
848	'default' => '#4b00e7',
849	'selectors' => [
850	'{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button' => 'color: {{VALUE}};',
851	],
852	]
853	);
854
855	$this->add_group_control(
856	Group_Control_Typography::get_type(),
857	[
858	'name' => 'typography',
859	'label' => __('Typography', 'master-addons' ),
860	'global' => [
861	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
862	],
863	'selector' => '{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button',
864	]
865	);
866
867	$this->add_control(
868	'background_color',
869	[
870	'label' => __('Background Color', 'master-addons' ),
871	'type' => Controls_Manager::COLOR,
872	'global' => [
873	'default' => Global_Colors::COLOR_PRIMARY,
874	],
875	// 'default' => '#fff',
876	'selectors' => [
877	'{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button' => 'background: {{VALUE}};',
878	],
879	]
880	);
881
882	$this->add_group_control(
883	Group_Control_Border::get_type(),
884	[
885	'name' => 'border',
886	'label' => __('Border', 'master-addons' ),
887	'placeholder' => '1px',
888	'default' => '1px',
889	'selector' => '{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button',
890	]
891	);
892
893	$this->add_control(
894	'border_radius',
895	[
896	'label' => __('Border Radius', 'master-addons' ),
897	'type' => Controls_Manager::DIMENSIONS,
898	'size_units' => ['px', '%'],
899	'selectors' => [
900	'{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
901	],
902	]
903	);
904
905	$this->add_control(
906	'text_padding',
907	[
908	'label' => __('Padding', 'master-addons' ),
909	'type' => Controls_Manager::DIMENSIONS,
910	'size_units' => ['px', 'em', '%'],
911	'selectors' => [
912	'{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
913	],
914	]
915	);
916
917	$this->end_controls_tab();
918
919	$this->start_controls_tab(
920	'jltma_flipbox_action_btn_style_hover',
921	[
922	'label' => esc_html__('Hover', 'master-addons' )
923	]
924	);
925
926	$this->add_control(
927	'button_text_color_hover',
928	[
929	'label' => __('Text Color', 'master-addons' ),
930	'type' => Controls_Manager::COLOR,
931	'default' => '#4b00e7',
932	'selectors' => [
933	'{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button:hover' => 'color: {{VALUE}};',
934	],
935	]
936	);
937
938	// $this->add_group_control(
939	// Group_Control_Typography::get_type(),
940	// [
941	// 'name' => 'typography',
942	// 'label' => __( 'Typography', 'master-addons' ),
943	// 'global' => [
944	// 'default' => Global_Typography::TYPOGRAPHY_ACCENT,
945	// ],
946	// 'selector' => '{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button:hover',
947	// ]
948	// );
949
950	$this->add_control(
951	'background_color_hover',
952	[
953	'label' => __('Background Color', 'master-addons' ),
954	'type' => Controls_Manager::COLOR,
955	'global' => [
956	'default' => Global_Colors::COLOR_ACCENT,
957	],
958	'default' => '#fff',
959	'selectors' => [
960	'{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button:hover' => 'background: {{VALUE}};',
961	],
962	]
963	);
964
965	$this->add_group_control(
966	Group_Control_Border::get_type(),
967	[
968	'name' => 'border_hover',
969	'label' => __('Border', 'master-addons' ),
970	'placeholder' => '1px',
971	'default' => '1px',
972	'selector' => '{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button:hover',
973	]
974	);
975
976	$this->add_control(
977	'border_radius_hover',
978	[
979	'label' => __('Border Radius', 'master-addons' ),
980	'type' => Controls_Manager::DIMENSIONS,
981	'size_units' => ['px', '%'],
982	'selectors' => [
983	'{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
984	],
985	]
986	);
987
988	$this->add_control(
989	'text_padding_hover',
990	[
991	'label' => __('Padding', 'master-addons' ),
992	'type' => Controls_Manager::DIMENSIONS,
993	'size_units' => ['px', 'em', '%'],
994	'selectors' => [
995	'{{WRAPPER}} .jltma-flip-box-wrapper .jltma-flip-box-back .jltma-flipbox-content .jltma-flip-button:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
996	],
997	]
998	);
999
1000	$this->end_controls_tab();
1001	$this->end_controls_tabs();
1002
1003	$this->end_controls_section();
1004
1005	// Help Docs section (links from config.php)
1006	$this->jltma_help_docs();
1007
1008	$this->upgrade_to_pro_message();
1009	}
1010
1011	protected function render()
1012	{
1013	$settings = $this->get_settings_for_display();
1014
1015	// Whitelist allowed HTML tags to prevent XSS
1016	$allowed_tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'p'];
1017	$front_title_tag = in_array($settings['front_title_html_tag'], $allowed_tags, true)
1018	? $settings['front_title_html_tag']
1019	: 'h3';
1020	$back_title_tag = in_array($settings['back_title_html_tag'], $allowed_tags, true)
1021	? $settings['back_title_html_tag']
1022	: 'h3';
1023
1024	$this->add_render_attribute(
1025	'ma_el_flipbox',
1026	'class',
1027	[
1028	'jltma-flip-box'
1029	]
1030	);
1031
1032	$this->add_render_attribute('front-icon-wrapper', 'class', 'icon-wrapper');
1033	$this->add_render_attribute('front-icon-wrapper', 'class', 'jltma-flip-icon-view-' . esc_attr($settings['front_icon_view']));
1034	$this->add_render_attribute('front-icon-wrapper', 'class', 'jltma-flip-icon-shape-' . esc_attr($settings['front_icon_shape']));
1035	$this->add_render_attribute('front-icon-title', 'class', 'front-icon-title');
1036	$this->add_render_attribute('front-icon', 'class', $settings['front_icon']);
1037
1038	$this->add_render_attribute('back-icon-wrapper', 'class', 'icon-wrapper');
1039	$this->add_render_attribute('back-icon-wrapper', 'class', 'jltma-flip-icon-view-' . esc_attr($settings['back_icon_view']));
1040	$this->add_render_attribute('back-icon-wrapper', 'class', 'jltma-flip-icon-shape-' . esc_attr($settings['back_icon_shape']));
1041	$this->add_render_attribute('back-icon-title', 'class', 'back-icon-title');
1042	$this->add_render_attribute('back-icon', 'class', $settings['back_icon']);
1043
1044	$this->add_render_attribute('button', 'class', 'jltma-flip-button');
1045	// add_link_attributes() handles href, target, rel and custom_attributes.
1046	if (!empty($settings['link']['url'])) {
1047	$this->add_link_attributes('button', $settings['link']);
1048	}
1049
1050	$flip_box = $this->get_settings_for_display('front_box_image');
1051
1052	if (isset($flip_box['id']) && $flip_box['id'] != "") {
1053	$flip_box_url_src = Group_Control_Image_Size::get_attachment_image_src(
1054	$flip_box['id'],
1055	'full',
1056	$settings
1057	);
1058	}
1059
1060	if (!empty($flip_box['url'])) {
1061	$flip_box_url = $flip_box['url'];
1062	} else {
1063	$flip_box_url = isset($flip_box_url_src);
1064	}
1065	?>
1066
1067	<div class="jltma-flip-box-wrapper <?php echo esc_attr($settings['ma_flipbox_layout_style']); ?> <?php if ($settings['ma_el_flip_3d']) {
1068	echo esc_attr($settings['ma_el_flip_3d']);
1069	}; ?>">
1070
1071	<div class="jltma-flip-box-inner">
1072	<div class="jltma-flip-box-front">
1073	<div class="jltma-flipbox-content">
1074
1075	<?php if ($settings['ma_flipbox_layout_style'] == "two") { ?>
1076
1077	<?php if (isset($flip_box_url) && $flip_box_url != "") { ?>
1078	<img src="<?php echo esc_url($flip_box_url); ?>" alt="<?php echo esc_attr(get_post_meta($flip_box['id'], '_wp_attachment_image_alt', true)); ?>">
1079	<?php } ?>
1080
1081	<?php } else if (($settings['ma_flipbox_layout_style'] == "one") \|\| ($settings['ma_flipbox_layout_style'] == "three")) { ?>
1082
1083	<?php if ((!empty($settings['icon']) \|\| !empty($settings['front_icon']['value']))) { ?>
1084	<div <?php echo $this->get_render_attribute_string('front-icon-wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Elementor get_render_attribute_string() returns safe HTML attributes ?>>
1085	<?php
1086	$migrated = isset($settings['__fa4_migrated']['front_icon']);
1087	$is_new = empty($settings['icon']) && \Elementor\Icons_Manager::is_migration_allowed();
1088
1089	if ($is_new \|\| $migrated){
1090	\Elementor\Icons_Manager::render_icon($settings['front_icon'], ['aria-hidden' => 'true', 'class' => 'front-icon']);
1091	} else { ?>
1092	<i class="front-icon <?php echo esc_attr($settings['icon']); ?>" aria-hidden="true"></i>
1093	<?php } ?>
1094	</div>
1095	<?php } ?>
1096
1097	<?php if (!empty($settings['front_title'])) { ?>
1098	<<?php echo esc_html($front_title_tag); ?> <?php echo $this->get_render_attribute_string('front-icon-title'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Elementor get_render_attribute_string() returns safe HTML attributes ?>>
1099	<?php echo wp_kses_post($this->parse_text_editor($settings['front_title'])); ?>
1100	</<?php echo esc_html($front_title_tag); ?>>
1101	<?php } ?>
1102
1103	<?php if (!empty($settings['front_text'])) {
1104	?>
1105	<p>
1106	<?php echo wp_kses_post( $this->parse_text_editor($settings['front_text']) ); ?>
1107	</p>
1108	<?php }
1109	?>
1110
1111	<?php } ?>
1112
1113	<?php //else if( $settings['ma_flipbox_layout_style'] == "three") {}
1114	?>
1115
1116	<?php if ($settings['ma_flipbox_layout_style'] == "four") { ?>
1117
1118	<?php if (!empty($settings['front_icon'])) { ?>
1119	<div <?php echo $this->get_render_attribute_string('front-icon-wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Elementor get_render_attribute_string() returns safe HTML attributes ?>>
1120	<?php
1121	$migrated = isset($settings['__fa4_migrated']['front_icon']);
1122	$is_new = empty($settings['icon']) && \Elementor\Icons_Manager::is_migration_allowed();
1123
1124	if ($is_new \|\| $migrated){
1125	\Elementor\Icons_Manager::render_icon($settings['front_icon'], ['aria-hidden' => 'true', 'class' => 'front-icon']);
1126	} else { ?>
1127	<i class="front-icon <?php echo esc_attr($settings['icon']); ?>" aria-hidden="true"></i>
1128	<?php } ?>
1129	</div>
1130	<?php } ?>
1131
1132	<?php } ?>
1133
1134	</div>
1135	</div>
1136
1137	<div class="jltma-flip-box-back">
1138	<div class="jltma-flipbox-content">
1139	<?php if (!empty($settings['back_icon'])) { ?>
1140	<div <?php echo $this->get_render_attribute_string('back-icon-wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Elementor get_render_attribute_string() returns safe HTML attributes ?>>
1141	<?php
1142	$migrated = isset($settings['__fa4_migrated']['back_icon']);
1143	$is_new = empty($settings['icon']) && \Elementor\Icons_Manager::is_migration_allowed();
1144
1145	if ($is_new \|\| $migrated){
1146	\Elementor\Icons_Manager::render_icon($settings['back_icon'], ['aria-hidden' => 'true', 'class' => 'back-icon']);
1147	} else { ?>
1148	<i class="back-icon <?php echo esc_attr($settings['icon']); ?>" aria-hidden="true"></i>
1149	<?php } ?>
1150	</div>
1151	<?php } ?>
1152
1153	<?php if (!empty($settings['back_title'])) { ?>
1154	<<?php echo esc_html($back_title_tag); ?> <?php echo $this->get_render_attribute_string('back-icon-title'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Elementor get_render_attribute_string() returns safe HTML attributes ?>>
1155	<?php echo wp_kses_post( $this->parse_text_editor($settings['back_title']) ); ?>
1156	</<?php echo esc_html($back_title_tag); ?>>
1157	<?php } ?>
1158
1159	<?php if (!empty($settings['back_text'])) { ?>
1160	<p>
1161	<?php echo wp_kses_post( $this->parse_text_editor($settings['back_text']) ); ?>
1162	</p>
1163	<?php } ?>
1164
1165	<?php if (!empty($settings['action_text'])) { ?>
1166	<div class="jltma-flip-button-wrapper">
1167	<a <?php echo $this->get_render_attribute_string('button'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Elementor get_render_attribute_string() returns safe HTML attributes ?>>
1168	<span class="elementor-button-text">
1169	<?php echo wp_kses_post( $this->parse_text_editor($settings['action_text']) ); ?>
1170	</span>
1171	</a>
1172	</div>
1173	<?php } ?>
1174	</div>
1175	</div>
1176	</div>
1177	</div>
1178	<?php
1179	}
1180
1181	protected function content_template()
1182	{
1183	}
1184	}
1185