king-addons / includes / widgets / Content_Flip_Box / Content_Flip_Box.php

Content_Flip_Box.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.49, at includes/widgets/Content_Flip_Box/Content_Flip_Box.php

1,875 lines 70.7 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Typography;
7	use Elementor\Group_Control_Background;
8	use Elementor\Group_Control_Image_Size;
9	use Elementor\Group_Control_Border;
10	use Elementor\Widget_Base;
11
12	if (!defined('ABSPATH')) {
13	exit; // Exit if accessed directly.
14	}
15
16
17
18	class Content_Flip_Box extends Widget_Base
19	{
20
21
22	public function get_name(): string
23	{
24	return 'king-addons-content-flip-box';
25	}
26
27	public function get_title(): string
28	{
29	return esc_html__('Content Flip Box', 'king-addons');
30	}
31
32	public function get_icon(): string
33	{
34	return 'king-addons-icon king-addons-content-flip-box';
35	}
36
37	public function get_style_depends(): array
38	{
39	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-content-flip-box-style'];
40	}
41
42	public function get_categories(): array
43	{
44	return ['king-addons'];
45	}
46
47	public function get_keywords(): array
48	{
49	return ['image', 'images', 'before', 'after', 'before-after', 'compare', 'hover', 'slider', 'scroll', 'box',
50	'photo', 'photos', 'picture', 'scrolling', 'scroller', 'scrollable', 'animation', 'effect', 'animated',
51	'image hover over', 'image hover', 'hover box', 'image box', 'image layout', 'layout', 'image hover box',
52	'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'picture', 'king', 'addons', 'mouseover',
53	'slide', 'background', 'arrow', 'arrows', 'kingaddons', 'king-addons', 'info box', 'info', 'cta', 'banner',
54	'layout', 'animated box', 'hover text', 'text box', 'text banner', 'flip', 'content', 'flip box',
55	'content flip', 'content flip box'];
56	}
57
58	public function get_custom_help_url()
59	{
60	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
61	}
62
63	protected function register_controls(): void
64	{
65
66	$this->start_controls_section(
67	'king_addons_content_flip_box_section_front',
68	[
69	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Front Side', 'king-addons'),
70	]
71	);
72
73	$this->add_control(
74	'king_addons_content_flip_box_front_icon_type',
75	[
76	'label' => esc_html__('Select Icon Type', 'king-addons'),
77	'type' => Controls_Manager::SELECT,
78	'default' => 'icon',
79	'options' => [
80	'none' => esc_html__('None', 'king-addons'),
81	'icon' => esc_html__('Icon', 'king-addons'),
82	'image' => esc_html__('Image', 'king-addons'),
83	],
84	]
85	);
86
87	$this->add_control(
88	'king_addons_content_flip_box_front_image',
89	[
90	'label' => esc_html__('Image', 'king-addons'),
91	'type' => Controls_Manager::MEDIA,
92	'dynamic' => [
93	'active' => true,
94	],
95	'condition' => [
96	'king_addons_content_flip_box_front_icon_type' => 'image',
97	],
98	]
99	);
100
101	$this->add_group_control(
102	Group_Control_Image_Size::get_type(),
103	[
104	'name' => 'king_addons_content_flip_box_front_image_size',
105	'default' => 'full',
106	'condition' => [
107	'king_addons_content_flip_box_front_icon_type' => 'image',
108	],
109	]
110	);
111
112	$this->add_control(
113	'king_addons_content_flip_box_front_icon',
114	[
115	'label' => esc_html__('Icon', 'king-addons'),
116	'type' => Controls_Manager::ICONS,
117	'skin' => 'inline',
118	'label_block' => false,
119	'default' => [
120	'value' => 'fas fa-crown',
121	'library' => 'fa-solid',
122	],
123	'condition' => [
124	'king_addons_content_flip_box_front_icon_type' => 'icon',
125	],
126	]
127	);
128
129	$this->add_control(
130	'king_addons_content_flip_box_front_trigger',
131	[
132	'label' => esc_html__('Trigger', 'king-addons'),
133	'type' => Controls_Manager::SELECT,
134	'default' => 'hover',
135	'options' => [
136	'hover' => esc_html__('Hover on box', 'king-addons'),
137	'box' => esc_html__('Click on box', 'king-addons'),
138	'button' => esc_html__('Click on button', 'king-addons'),
139	],
140	'separator' => 'before',
141	]
142	);
143
144	$this->add_control(
145	'king_addons_content_flip_box_front_button_text',
146	[
147	'label' => esc_html__('Front Button', 'king-addons'),
148	'type' => Controls_Manager::TEXT,
149	'dynamic' => [
150	'active' => true,
151	],
152	'default' => esc_html__('Front Button', 'king-addons'),
153	'condition' => [
154	'king_addons_content_flip_box_front_trigger' => 'button',
155	],
156	]
157	);
158
159	$this->add_control(
160	'king_addons_content_flip_box_front_button_icon',
161	[
162	'label' => esc_html__('Button Icon', 'king-addons'),
163	'type' => Controls_Manager::ICONS,
164	'skin' => 'inline',
165	'label_block' => false,
166	'default' => [
167	'value' => 'fas fa-crown',
168	'library' => 'fa-solid',
169	],
170	'condition' => [
171	'king_addons_content_flip_box_front_trigger' => 'button',
172	],
173	]
174	);
175
176	$this->add_control(
177	'king_addons_content_flip_box_front_title',
178	[
179	'label' => esc_html__('Front Title', 'king-addons'),
180	'type' => Controls_Manager::TEXT,
181	'dynamic' => [
182	'active' => true,
183	],
184	'default' => esc_html__('Front Title', 'king-addons'),
185	'separator' => 'before',
186	]
187	);
188
189	$this->add_control(
190	'king_addons_content_flip_box_front_description',
191	[
192	'label' => esc_html__('Description', 'king-addons'),
193	'type' => Controls_Manager::WYSIWYG,
194	'default' => esc_html__('Hover over the mouse here to see the back side content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. ', 'king-addons'),
195	'separator' => 'before',
196	]
197	);
198
199	$this->end_controls_section();
200
201	$this->start_controls_section(
202	'king_addons_content_flip_box_section_back',
203	[
204	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Back Side', 'king-addons'),
205	]
206	);
207
208	$this->add_control(
209	'king_addons_content_flip_box_back_icon_type',
210	[
211	'label' => esc_html__('Select Icon Type', 'king-addons'),
212	'type' => Controls_Manager::SELECT,
213	'default' => 'icon',
214	'options' => [
215	'none' => esc_html__('None', 'king-addons'),
216	'icon' => esc_html__('Icon', 'king-addons'),
217	'image' => esc_html__('Image', 'king-addons'),
218	],
219	]
220	);
221
222	$this->add_control(
223	'king_addons_content_flip_box_back_image',
224	[
225	'label' => esc_html__('Image', 'king-addons'),
226	'type' => Controls_Manager::MEDIA,
227	'dynamic' => [
228	'active' => true,
229	],
230	'condition' => [
231	'king_addons_content_flip_box_back_icon_type' => 'image',
232	],
233	]
234	);
235
236	$this->add_group_control(
237	Group_Control_Image_Size::get_type(),
238	[
239	'name' => 'king_addons_content_flip_box_back_image_size',
240	'default' => 'full',
241	'condition' => [
242	'king_addons_content_flip_box_back_icon_type' => 'image',
243	],
244	]
245	);
246
247	$this->add_control(
248	'king_addons_content_flip_box_back_icon',
249	[
250	'label' => esc_html__('Icon', 'king-addons'),
251	'type' => Controls_Manager::ICONS,
252	'skin' => 'inline',
253	'label_block' => false,
254	'default' => [
255	'value' => 'fas fa-crown',
256	'library' => 'fa-solid',
257	],
258	'condition' => [
259	'king_addons_content_flip_box_back_icon_type' => 'icon',
260	],
261	]
262	);
263
264	$this->add_control(
265	'king_addons_content_flip_box_back_link_type',
266	[
267	'label' => esc_html__('Link on element', 'king-addons'),
268	'type' => Controls_Manager::SELECT,
269	'options' => [
270	'none' => esc_html__('None', 'king-addons'),
271	'title' => esc_html__('Title', 'king-addons'),
272	'box' => esc_html__('Whole Box', 'king-addons'),
273	'button' => esc_html__('Button', 'king-addons'),
274	],
275	'default' => 'none',
276	'separator' => 'before',
277	]
278	);
279
280	$this->add_control(
281	'king_addons_content_flip_box_back_link',
282	[
283	'type' => Controls_Manager::URL,
284	'dynamic' => [
285	'active' => true,
286	],
287	'label' => esc_html__('Link URL', 'king-addons'),
288	'placeholder' => esc_html__('https://example.com', 'king-addons'),
289	'default' => [
290	'url' => '#',
291	],
292	'condition' => [
293	'king_addons_content_flip_box_back_link_type!' => 'none',
294	],
295	]
296	);
297
298	$this->add_control(
299	'king_addons_content_flip_box_back_button_text',
300	[
301	'label' => esc_html__('Back Button', 'king-addons'),
302	'type' => Controls_Manager::TEXT,
303	'dynamic' => [
304	'active' => true,
305	],
306	'default' => esc_html__('Back Button', 'king-addons'),
307	'condition' => [
308	'king_addons_content_flip_box_back_link_type' => ['button'],
309	],
310	]
311	);
312
313	$this->add_control(
314	'king_addons_content_flip_box_back_button_icon',
315	[
316	'label' => esc_html__('Button Icon', 'king-addons'),
317	'type' => Controls_Manager::ICONS,
318	'skin' => 'inline',
319	'label_block' => false,
320	'default' => [
321	'value' => 'fas fa-crown',
322	'library' => 'fa-solid',
323	],
324	'condition' => [
325	'king_addons_content_flip_box_back_link_type' => ['button'],
326	],
327	]
328	);
329
330	$this->add_control(
331	'king_addons_content_flip_box_back_title',
332	[
333	'label' => esc_html__('Back Title', 'king-addons'),
334	'type' => Controls_Manager::TEXT,
335	'dynamic' => [
336	'active' => true,
337	],
338	'default' => esc_html__('Back Title', 'king-addons'),
339	'separator' => 'before',
340	]
341	);
342
343	$this->add_control(
344	'king_addons_content_flip_box_back_description',
345	[
346	'label' => esc_html__('Description', 'king-addons'),
347	'type' => Controls_Manager::WYSIWYG,
348	'default' => esc_html__('Back side content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'king-addons'),
349	'separator' => 'before',
350	]
351	);
352
353	$this->end_controls_section();
354
355	$this->start_controls_section(
356	'king_addons_content_flip_box_section_settings',
357	[
358	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Box Settings', 'king-addons'),
359	]
360	);
361
362	$this->add_responsive_control(
363	'king_addons_content_flip_box_box_height',
364	[
365	'type' => Controls_Manager::SLIDER,
366	'label' => esc_html__('Height', 'king-addons'),
367	'size_units' => ['px', 'vh'],
368	'range' => [
369	'px' => [
370	'min' => 20,
371	'max' => 1000,
372	],
373	'vh' => [
374	'min' => 20,
375	'max' => 100,
376	],
377	],
378	'default' => [
379	'unit' => 'px',
380	'size' => 350,
381	],
382	'selectors' => [
383	'{{WRAPPER}} .king-addons-content-flip-box' => 'height: {{SIZE}}{{UNIT}};',
384	],
385	]
386	);
387
388	$this->add_responsive_control(
389	'king_addons_content_flip_box_box_border_radius',
390	[
391	'type' => Controls_Manager::SLIDER,
392	'label' => esc_html__('Border Radius', 'king-addons'),
393	'size_units' => ['px', '%'],
394	'range' => [
395	'px' => [
396	'min' => 0,
397	'max' => 700,
398	],
399	'%' => [
400	'min' => 0,
401	'max' => 100,
402	],
403	],
404	'default' => [
405	'unit' => 'px',
406	'size' => 0,
407	],
408	'selectors' => [
409	'{{WRAPPER}} .king-addons-content-flip-box' => 'border-radius: {{SIZE}}{{UNIT}};',
410	'{{WRAPPER}} .king-addons-content-flip-box-item' => 'border-radius: {{SIZE}}{{UNIT}};',
411	'{{WRAPPER}} .king-addons-content-flip-box-overlay' => 'border-radius: {{SIZE}}{{UNIT}};',
412	],
413	'separator' => 'before',
414	]
415	);
416
417	$this->add_control(
418	'king_addons_content_flip_box_box_animation',
419	[
420	'label' => esc_html__('Animation', 'king-addons'),
421	'type' => Controls_Manager::SELECT,
422	'default' => 'flip',
423	'options' => [
424	'fade' => esc_html__('Fade', 'king-addons'),
425	'flip' => esc_html__('Flip', 'king-addons'),
426	'slide' => esc_html__('Slide', 'king-addons'),
427	'push' => esc_html__('Push', 'king-addons'),
428	'zoom-out' => esc_html__('Zoom Out', 'king-addons'),
429	'zoom-in' => esc_html__('Zoom In', 'king-addons'),
430	],
431	'prefix_class' => 'king-addons-content-flip-box-animation-',
432	'render_type' => 'template',
433	'separator' => 'before',
434	]
435	);
436
437	$this->add_control(
438	'king_addons_content_flip_box_box_anim_3d',
439	[
440	'label' => esc_html__('3D Animation', 'king-addons'),
441	'type' => Controls_Manager::SWITCHER,
442	'default' => 'yes',
443	'prefix_class' => 'king-addons-content-flip-box-animation-3d-',
444	'render_type' => 'template',
445	'condition' => [
446	'king_addons_content_flip_box_box_animation' => 'flip',
447	],
448	]
449	);
450
451	$this->add_control(
452	'king_addons_content_flip_box_box_anim_direction',
453	[
454	'label' => esc_html__('Animation Direction', 'king-addons'),
455	'type' => Controls_Manager::SELECT,
456	'default' => 'right',
457	'options' => [
458	'left' => esc_html__('Left', 'king-addons'),
459	'right' => esc_html__('Right', 'king-addons'),
460	'up' => esc_html__('Top', 'king-addons'),
461	'down' => esc_html__('Bottom', 'king-addons'),
462	],
463	'prefix_class' => 'king-addons-content-flip-box-anim-direction-',
464	'render_type' => 'template',
465	'condition' => [
466	'king_addons_content_flip_box_box_animation!' => ['fade', 'zoom-in', 'zoom-out'],
467	],
468	]
469	);
470
471	$this->add_control(
472	'king_addons_content_flip_box_box_anim_duration',
473	[
474	'label' => esc_html__('Animation Duration (ms)', 'king-addons'),
475	'type' => Controls_Manager::NUMBER,
476	'default' => 500,
477	'min' => 0,
478	'step' => 10,
479	'selectors' => [
480	'{{WRAPPER}} .king-addons-content-flip-box-item' => 'transition-duration: {{VALUE}}ms;',
481	],
482	'render_type' => 'template',
483	]
484	);
485
486	$this->add_control(
487	'king_addons_content_flip_box_box_animation_timing',
488	[
489	'label' => esc_html__('Animation Timing', 'king-addons'),
490	'type' => Controls_Manager::SELECT,
491	'options' => [
492	'ease' => 'Ease',
493	'linear' => 'Linear',
494	'ease-in' => 'Ease In',
495	'ease-out' => 'Ease Out',
496	],
497	'default' => 'ease',
498	]
499	);
500
501	$this->end_controls_section();
502
503	$this->start_controls_section(
504	'king_addons_content_flip_box_section_style_front',
505	[
506	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Front Side', 'king-addons'),
507	'tab' => Controls_Manager::TAB_STYLE,
508	]
509	);
510
511	$this->add_group_control(
512	Group_Control_Background::get_type(),
513	[
514	'name' => 'king_addons_content_flip_box_front_bg_color',
515	'types' => ['classic', 'gradient'],
516	'fields_options' => [
517	'color' => [
518	'default' => '#9B62FF',
519	],
520	'background' => [
521	'default' => 'classic',
522	]
523	],
524	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-front',
525	]
526	);
527
528	$this->add_control(
529	'king_addons_content_flip_box_front_overlay_color',
530	[
531	'label' => esc_html__('Overlay Color', 'king-addons'),
532	'type' => Controls_Manager::COLOR,
533	'default' => '#c1c1c1',
534	'selectors' => [
535	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-overlay' => 'background-color: {{VALUE}};',
536	],
537	'separator' => 'before',
538	'condition' => [
539	'king_addons_content_flip_box_front_bg_color_image[id]!' => '',
540	],
541	]
542	);
543
544	$this->add_responsive_control(
545	'king_addons_content_flip_box_front_padding',
546	[
547	'label' => esc_html__('Padding', 'king-addons'),
548	'type' => Controls_Manager::DIMENSIONS,
549	'default' => [
550	'top' => 20,
551	'right' => 20,
552	'bottom' => 20,
553	'left' => 20,
554	],
555	'size_units' => ['px', '%'],
556	'selectors' => [
557	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
558	],
559	'separator' => 'before',
560	]
561	);
562
563	$this->add_control(
564	'king_addons_content_flip_box_front_vr_position',
565	[
566	'label' => esc_html__('Vertical Position', 'king-addons'),
567	'type' => Controls_Manager::CHOOSE,
568	'label_block' => false,
569	'default' => 'middle',
570	'options' => [
571	'top' => [
572	'title' => esc_html__('Top', 'king-addons'),
573	'icon' => 'eicon-v-align-top',
574	],
575	'middle' => [
576	'title' => esc_html__('Middle', 'king-addons'),
577	'icon' => 'eicon-v-align-middle',
578	],
579	'bottom' => [
580	'title' => esc_html__('Bottom', 'king-addons'),
581	'icon' => 'eicon-v-align-bottom',
582	],
583	],
584	'selectors_dictionary' => [
585	'top' => 'flex-start',
586	'middle' => 'center',
587	'bottom' => 'flex-end'
588	],
589	'selectors' => [
590	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-content' => 'justify-content: {{VALUE}};',
591	],
592	'separator' => 'before',
593	]
594	);
595
596	$this->add_control(
597	'king_addons_content_flip_box_front_align',
598	[
599	'label' => esc_html__('Alignment', 'king-addons'),
600	'type' => Controls_Manager::CHOOSE,
601	'label_block' => false,
602	'default' => 'center',
603	'options' => [
604	'left' => [
605	'title' => esc_html__('Left', 'king-addons'),
606	'icon' => 'eicon-text-align-left',
607	],
608	'center' => [
609	'title' => esc_html__('Center', 'king-addons'),
610	'icon' => 'eicon-text-align-center',
611	],
612	'right' => [
613	'title' => esc_html__('Right', 'king-addons'),
614	'icon' => 'eicon-text-align-right',
615	],
616	],
617	'prefix_class' => 'king-addons-content-flip-box-front-align-',
618	'render_type' => 'template',
619	'selectors' => [
620	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-content' => 'text-align: {{VALUE}};',
621	],
622	]
623	);
624
625	$this->add_group_control(
626	Group_Control_Border::get_type(),
627	[
628	'name' => 'king_addons_content_flip_box_front_border',
629	'label' => esc_html__('Border', 'king-addons'),
630	'fields_options' => [
631	'color' => [
632	'default' => '#E8E8E8',
633	],
634	'width' => [
635	'default' => [
636	'top' => '1',
637	'right' => '1',
638	'bottom' => '1',
639	'left' => '1',
640	'isLinked' => true,
641	],
642	],
643	],
644	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-front',
645	'separator' => 'before',
646	]
647	);
648
649	$this->add_control(
650	'king_addons_content_flip_box_front_image_section',
651	[
652	'label' => esc_html__('Image', 'king-addons'),
653	'type' => Controls_Manager::HEADING,
654	'separator' => 'before',
655	'condition' => [
656	'king_addons_content_flip_box_front_icon_type' => 'image',
657	],
658	]
659	);
660
661	$this->add_responsive_control(
662	'king_addons_content_flip_box_front_image_width',
663	[
664	'label' => esc_html__('Width', 'king-addons'),
665	'type' => Controls_Manager::SLIDER,
666	'size_units' => ['%', 'px'],
667	'range' => [
668	'%' => [
669	'min' => 1,
670	'max' => 100,
671	],
672	'px' => [
673	'min' => 1,
674	'max' => 300,
675	],
676	],
677	'default' => [
678	'unit' => 'px',
679	'size' => 50,
680	],
681	'selectors' => [
682	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-image img' => 'max-width: {{SIZE}}{{UNIT}};',
683	],
684	'condition' => [
685	'king_addons_content_flip_box_front_icon_type' => 'image',
686	],
687	]
688	);
689
690	$this->add_responsive_control(
691	'king_addons_content_flip_box_front_image_distance',
692	[
693	'label' => esc_html__('Distance', 'king-addons'),
694	'type' => Controls_Manager::SLIDER,
695	'size_units' => ['px'],
696	'range' => [
697	'px' => [
698	'min' => 0,
699	'max' => 300,
700	],
701	],
702	'default' => [
703	'unit' => 'px',
704	'size' => 5,
705	],
706	'selectors' => [
707	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-image' => 'margin-bottom:{{SIZE}}{{UNIT}};',
708	],
709	'condition' => [
710	'king_addons_content_flip_box_front_icon_type' => 'image',
711	],
712	]
713	);
714
715	$this->add_control(
716	'king_addons_content_flip_box_front_image_border_radius',
717	[
718	'type' => Controls_Manager::SLIDER,
719	'label' => esc_html__('Border Radius', 'king-addons'),
720	'size_units' => ['px', '%'],
721	'range' => [
722	'px' => [
723	'min' => 0,
724	'max' => 150,
725	],
726	'%' => [
727	'min' => 0,
728	'max' => 100,
729	],
730	],
731	'default' => [
732	'unit' => 'px',
733	'size' => 0,
734	],
735	'selectors' => [
736	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-image img' => 'border-radius: {{SIZE}}{{UNIT}};',
737	],
738	'condition' => [
739	'king_addons_content_flip_box_front_icon_type' => 'image',
740	],
741	]
742	);
743
744	$this->add_control(
745	'king_addons_content_flip_box_front_icon_section',
746	[
747	'label' => esc_html__('Icon', 'king-addons'),
748	'type' => Controls_Manager::HEADING,
749	'separator' => 'before',
750	'condition' => [
751	'king_addons_content_flip_box_front_icon_type' => 'icon',
752	],
753	]
754	);
755
756	$this->add_control(
757	'king_addons_content_flip_box_front_icon_color',
758	[
759	'label' => esc_html__('Color', 'king-addons'),
760	'type' => Controls_Manager::COLOR,
761	'default' => '#ffffff',
762	'selectors' => [
763	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-icon' => 'color: {{VALUE}};',
764	],
765	'condition' => [
766	'king_addons_content_flip_box_front_icon_type' => 'icon',
767	],
768	]
769	);
770
771	$this->add_control(
772	'king_addons_content_flip_box_front_icon_size',
773	[
774	'label' => esc_html__('Font Size', 'king-addons'),
775	'type' => Controls_Manager::SLIDER,
776	'size_units' => ['px'],
777	'range' => [
778	'px' => [
779	'min' => 0,
780	'max' => 300,
781	],
782	],
783	'default' => [
784	'unit' => 'px',
785	'size' => 40,
786	],
787	'selectors' => [
788	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-icon' => 'font-size: {{SIZE}}{{UNIT}};',
789	],
790	'condition' => [
791	'king_addons_content_flip_box_front_icon_type' => 'icon',
792	],
793	]
794	);
795
796	$this->add_control(
797	'king_addons_content_flip_box_front_icon_distance',
798	[
799	'label' => esc_html__('Distance', 'king-addons'),
800	'type' => Controls_Manager::SLIDER,
801	'size_units' => ['px'],
802	'range' => [
803	'px' => [
804	'min' => 0,
805	'max' => 150,
806	],
807	],
808	'default' => [
809	'unit' => 'px',
810	'size' => 7,
811	],
812	'selectors' => [
813	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
814	],
815	'condition' => [
816	'king_addons_content_flip_box_front_icon_type' => 'icon',
817	],
818	]
819	);
820
821	$this->add_control(
822	'king_addons_content_flip_box_front_title_section',
823	[
824	'label' => esc_html__('Title', 'king-addons'),
825	'type' => Controls_Manager::HEADING,
826	'separator' => 'before',
827	]
828	);
829
830	$this->add_control(
831	'king_addons_content_flip_box_front_title_color',
832	[
833	'label' => esc_html__('Color', 'king-addons'),
834	'type' => Controls_Manager::COLOR,
835	'default' => '#ffffff',
836	'selectors' => [
837	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-title' => 'color: {{VALUE}};',
838	],
839	]
840	);
841
842	$this->add_group_control(
843	Group_Control_Typography::get_type(),
844	[
845	'name' => 'king_addons_content_flip_box_front_title_typography',
846	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-title',
847	]
848	);
849
850	$this->add_control(
851	'king_addons_content_flip_box_front_title_distance',
852	[
853	'label' => esc_html__('Distance', 'king-addons'),
854	'type' => Controls_Manager::SLIDER,
855	'size_units' => ['px'],
856	'range' => [
857	'px' => [
858	'min' => 0,
859	'max' => 150,
860	],
861	],
862	'default' => [
863	'unit' => 'px',
864	'size' => 12,
865	],
866	'selectors' => [
867	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-title' => 'margin: 0 0 {{SIZE}}{{UNIT}};',
868	],
869	]
870	);
871
872	$this->add_control(
873	'king_addons_content_flip_box_front_description_section',
874	[
875	'label' => esc_html__('Description', 'king-addons'),
876	'type' => Controls_Manager::HEADING,
877	'separator' => 'before',
878	]
879	);
880
881	$this->add_control(
882	'king_addons_content_flip_box_front_description_color',
883	[
884	'label' => esc_html__('Color', 'king-addons'),
885	'type' => Controls_Manager::COLOR,
886	'default' => '#ffffff',
887	'selectors' => [
888	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-description' => 'color: {{VALUE}};',
889	],
890	]
891	);
892
893	$this->add_group_control(
894	Group_Control_Typography::get_type(),
895	[
896	'name' => 'king_addons_content_flip_box_front_description_typography',
897	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-description',
898	]
899	);
900
901	$this->add_control(
902	'king_addons_content_flip_box_front_description_distance',
903	[
904	'label' => esc_html__('Distance', 'king-addons'),
905	'type' => Controls_Manager::SLIDER,
906	'size_units' => ['px'],
907	'range' => [
908	'px' => [
909	'min' => 0,
910	'max' => 150,
911	],
912	],
913	'default' => [
914	'unit' => 'px',
915	'size' => 20,
916	],
917	'selectors' => [
918	'{{WRAPPER}} .king-addons-content-flip-box-front .king-addons-content-flip-box-description' => 'margin-bottom: {{SIZE}}{{UNIT}};',
919	],
920	]
921	);
922
923	$this->end_controls_section();
924
925	$this->start_controls_section(
926	'king_addons_content_flip_box_section_style_back',
927	[
928	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Back Side', 'king-addons'),
929	'tab' => Controls_Manager::TAB_STYLE,
930	]
931	);
932
933	$this->add_group_control(
934	Group_Control_Background::get_type(),
935	[
936	'name' => 'king_addons_content_flip_box_back_bg_color',
937	'types' => ['classic', 'gradient'],
938	'fields_options' => [
939	'color' => [
940	'default' => '#5B03FF',
941	],
942	'background' => [
943	'default' => 'classic',
944	]
945	],
946	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-back',
947	]
948	);
949
950	$this->add_control(
951	'king_addons_content_flip_box_back_overlay_color',
952	[
953	'label' => esc_html__('Overlay Color', 'king-addons'),
954	'type' => Controls_Manager::COLOR,
955	'default' => '#c1c1c1',
956	'selectors' => [
957	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-overlay' => 'background-color: {{VALUE}};',
958	],
959	'separator' => 'before',
960	'condition' => [
961	'king_addons_content_flip_box_back_bg_color_image[id]!' => '',
962	],
963	]
964	);
965
966	$this->add_responsive_control(
967	'king_addons_content_flip_box_back_padding',
968	[
969	'label' => esc_html__('Padding', 'king-addons'),
970	'type' => Controls_Manager::DIMENSIONS,
971	'default' => [
972	'top' => 20,
973	'right' => 20,
974	'bottom' => 20,
975	'left' => 20,
976	],
977	'size_units' => ['px', '%'],
978	'selectors' => [
979	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
980	],
981	'separator' => 'before',
982	]
983	);
984
985	$this->add_control(
986	'king_addons_content_flip_box_back_vr_position',
987	[
988	'label' => esc_html__('Vertical Position', 'king-addons'),
989	'type' => Controls_Manager::CHOOSE,
990	'label_block' => false,
991	'default' => 'middle',
992	'options' => [
993	'top' => [
994	'title' => esc_html__('Top', 'king-addons'),
995	'icon' => 'eicon-v-align-top',
996	],
997	'middle' => [
998	'title' => esc_html__('Middle', 'king-addons'),
999	'icon' => 'eicon-v-align-middle',
1000	],
1001	'bottom' => [
1002	'title' => esc_html__('Bottom', 'king-addons'),
1003	'icon' => 'eicon-v-align-bottom',
1004	],
1005	],
1006	'selectors_dictionary' => [
1007	'top' => 'flex-start',
1008	'middle' => 'center',
1009	'bottom' => 'flex-end'
1010	],
1011	'selectors' => [
1012	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-content' => 'justify-content: {{VALUE}};',
1013	],
1014	'separator' => 'before',
1015	]
1016	);
1017
1018	$this->add_control(
1019	'king_addons_content_flip_box_back_align',
1020	[
1021	'label' => esc_html__('Alignment', 'king-addons'),
1022	'type' => Controls_Manager::CHOOSE,
1023	'label_block' => false,
1024	'default' => 'center',
1025	'options' => [
1026	'left' => [
1027	'title' => esc_html__('Left', 'king-addons'),
1028	'icon' => 'eicon-text-align-left',
1029	],
1030	'center' => [
1031	'title' => esc_html__('Center', 'king-addons'),
1032	'icon' => 'eicon-text-align-center',
1033	],
1034	'right' => [
1035	'title' => esc_html__('Right', 'king-addons'),
1036	'icon' => 'eicon-text-align-right',
1037	],
1038	],
1039	'prefix_class' => 'king-addons-content-flip-box-back-align-',
1040	'render_type' => 'template',
1041	'selectors' => [
1042	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-content' => 'text-align: {{VALUE}};',
1043	],
1044	]
1045	);
1046
1047	$this->add_group_control(
1048	Group_Control_Border::get_type(),
1049	[
1050	'name' => 'king_addons_content_flip_box_back_border',
1051	'label' => esc_html__('Border', 'king-addons'),
1052	'fields_options' => [
1053	'color' => [
1054	'default' => '#E8E8E8',
1055	],
1056	'width' => [
1057	'default' => [
1058	'top' => '1',
1059	'right' => '1',
1060	'bottom' => '1',
1061	'left' => '1',
1062	'isLinked' => true,
1063	],
1064	],
1065	],
1066	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-back',
1067	'separator' => 'before',
1068	]
1069	);
1070
1071	$this->add_control(
1072	'king_addons_content_flip_box_back_image_section',
1073	[
1074	'label' => esc_html__('Image', 'king-addons'),
1075	'type' => Controls_Manager::HEADING,
1076	'separator' => 'before',
1077	'condition' => [
1078	'king_addons_content_flip_box_back_icon_type' => 'image',
1079	],
1080	]
1081	);
1082
1083	$this->add_responsive_control(
1084	'king_addons_content_flip_box_back_image_width',
1085	[
1086	'label' => esc_html__('Width', 'king-addons'),
1087	'type' => Controls_Manager::SLIDER,
1088	'size_units' => ['%', 'px'],
1089	'range' => [
1090	'%' => [
1091	'min' => 1,
1092	'max' => 100,
1093	],
1094	'px' => [
1095	'min' => 1,
1096	'max' => 300,
1097	],
1098	],
1099	'default' => [
1100	'unit' => 'px',
1101	'size' => 50,
1102	],
1103	'selectors' => [
1104	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-image img' => 'max-width: {{SIZE}}{{UNIT}};',
1105	],
1106	'condition' => [
1107	'king_addons_content_flip_box_back_icon_type' => 'image',
1108	],
1109	]
1110	);
1111
1112	$this->add_responsive_control(
1113	'king_addons_content_flip_box_back_image_distance',
1114	[
1115	'label' => esc_html__('Distance', 'king-addons'),
1116	'type' => Controls_Manager::SLIDER,
1117	'size_units' => ['px'],
1118	'range' => [
1119	'px' => [
1120	'min' => 0,
1121	'max' => 150,
1122	],
1123	],
1124	'default' => [
1125	'unit' => 'px',
1126	'size' => 5,
1127	],
1128	'selectors' => [
1129	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-image' => 'margin-bottom:{{SIZE}}{{UNIT}};',
1130	],
1131	'condition' => [
1132	'king_addons_content_flip_box_back_icon_type' => 'image',
1133	],
1134	]
1135	);
1136
1137	$this->add_control(
1138	'king_addons_content_flip_box_back_image_border_radius',
1139	[
1140	'type' => Controls_Manager::SLIDER,
1141	'label' => esc_html__('Border Radius', 'king-addons'),
1142	'size_units' => ['px', '%'],
1143	'range' => [
1144	'px' => [
1145	'min' => 0,
1146	'max' => 150,
1147	],
1148	'%' => [
1149	'min' => 0,
1150	'max' => 100,
1151	],
1152	],
1153	'default' => [
1154	'unit' => 'px',
1155	'size' => 0,
1156	],
1157	'selectors' => [
1158	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-image img' => 'border-radius: {{SIZE}}{{UNIT}};',
1159	],
1160	'condition' => [
1161	'king_addons_content_flip_box_back_icon_type' => 'image',
1162	],
1163	]
1164	);
1165
1166	$this->add_control(
1167	'king_addons_content_flip_box_back_icon_section',
1168	[
1169	'label' => esc_html__('Icon', 'king-addons'),
1170	'type' => Controls_Manager::HEADING,
1171	'separator' => 'before',
1172	'condition' => [
1173	'king_addons_content_flip_box_back_icon_type' => 'icon',
1174	],
1175	]
1176	);
1177
1178	$this->add_control(
1179	'king_addons_content_flip_box_back_icon_color',
1180	[
1181	'label' => esc_html__('Color', 'king-addons'),
1182	'type' => Controls_Manager::COLOR,
1183	'default' => '#ffffff',
1184	'selectors' => [
1185	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-icon' => 'color: {{VALUE}};',
1186	],
1187	'condition' => [
1188	'king_addons_content_flip_box_back_icon_type' => 'icon',
1189	],
1190	]
1191	);
1192
1193	$this->add_control(
1194	'king_addons_content_flip_box_back_icon_size',
1195	[
1196	'label' => esc_html__('Font Size', 'king-addons'),
1197	'type' => Controls_Manager::SLIDER,
1198	'size_units' => ['px'],
1199	'range' => [
1200	'px' => [
1201	'min' => 0,
1202	'max' => 300,
1203	],
1204	],
1205	'default' => [
1206	'unit' => 'px',
1207	'size' => 40,
1208	],
1209	'selectors' => [
1210	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-icon' => 'font-size: {{SIZE}}{{UNIT}};',
1211	],
1212	'condition' => [
1213	'king_addons_content_flip_box_back_icon_type' => 'icon',
1214	],
1215	]
1216	);
1217
1218	$this->add_control(
1219	'king_addons_content_flip_box_back_icon_distance',
1220	[
1221	'label' => esc_html__('Distance', 'king-addons'),
1222	'type' => Controls_Manager::SLIDER,
1223	'size_units' => ['px'],
1224	'range' => [
1225	'px' => [
1226	'min' => 0,
1227	'max' => 150,
1228	],
1229	],
1230	'default' => [
1231	'unit' => 'px',
1232	'size' => 7,
1233	],
1234	'selectors' => [
1235	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
1236	],
1237	'condition' => [
1238	'king_addons_content_flip_box_back_icon_type' => 'icon',
1239	],
1240	]
1241	);
1242
1243	$this->add_control(
1244	'king_addons_content_flip_box_back_title_section',
1245	[
1246	'label' => esc_html__('Title', 'king-addons'),
1247	'type' => Controls_Manager::HEADING,
1248	'separator' => 'before',
1249	]
1250	);
1251
1252	$this->add_control(
1253	'king_addons_content_flip_box_back_title_color',
1254	[
1255	'label' => esc_html__('Color', 'king-addons'),
1256	'type' => Controls_Manager::COLOR,
1257	'default' => '#ffffff',
1258	'selectors' => [
1259	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-title' => 'color: {{VALUE}};',
1260	],
1261	]
1262	);
1263
1264	$this->add_group_control(
1265	Group_Control_Typography::get_type(),
1266	[
1267	'name' => 'king_addons_content_flip_box_back_title_typography',
1268	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-title',
1269	]
1270	);
1271
1272	$this->add_control(
1273	'king_addons_content_flip_box_back_title_distance',
1274	[
1275	'label' => esc_html__('Distance', 'king-addons'),
1276	'type' => Controls_Manager::SLIDER,
1277	'size_units' => ['px'],
1278	'range' => [
1279	'px' => [
1280	'min' => 0,
1281	'max' => 150,
1282	],
1283	],
1284	'default' => [
1285	'unit' => 'px',
1286	'size' => 12,
1287	],
1288	'selectors' => [
1289	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-title' => 'margin: 0 0 {{SIZE}}{{UNIT}};',
1290	],
1291	]
1292	);
1293
1294	$this->add_control(
1295	'king_addons_content_flip_box_back_description_section',
1296	[
1297	'label' => esc_html__('Description', 'king-addons'),
1298	'type' => Controls_Manager::HEADING,
1299	'separator' => 'before',
1300	]
1301	);
1302
1303	$this->add_control(
1304	'king_addons_content_flip_box_back_description_color',
1305	[
1306	'label' => esc_html__('Color', 'king-addons'),
1307	'type' => Controls_Manager::COLOR,
1308	'default' => '#ffffff',
1309	'selectors' => [
1310	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-description' => 'color: {{VALUE}};',
1311	],
1312	]
1313	);
1314
1315	$this->add_group_control(
1316	Group_Control_Typography::get_type(),
1317	[
1318	'name' => 'king_addons_content_flip_box_back_description_typography',
1319	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-description',
1320	]
1321	);
1322
1323	$this->add_control(
1324	'king_addons_content_flip_box_back_description_distance',
1325	[
1326	'label' => esc_html__('Distance', 'king-addons'),
1327	'type' => Controls_Manager::SLIDER,
1328	'size_units' => ['px'],
1329	'range' => [
1330	'px' => [
1331	'min' => 0,
1332	'max' => 150,
1333	],
1334	],
1335	'default' => [
1336	'unit' => 'px',
1337	'size' => 20,
1338	],
1339	'selectors' => [
1340	'{{WRAPPER}} .king-addons-content-flip-box-back .king-addons-content-flip-box-description' => 'margin-bottom: {{SIZE}}{{UNIT}};',
1341	],
1342	]
1343	);
1344
1345	$this->end_controls_section();
1346
1347	$this->start_controls_section(
1348	'king_addons_content_flip_box_section_style_button',
1349	[
1350	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Front Button', 'king-addons'),
1351	'tab' => Controls_Manager::TAB_STYLE,
1352	'condition' => [
1353	'king_addons_content_flip_box_front_trigger' => 'button',
1354	],
1355	]
1356	);
1357
1358	$this->start_controls_tabs(
1359	'king_addons_content_flip_box_section_style_button_tabs'
1360	);
1361
1362	$this->start_controls_tab(
1363	'king_addons_content_flip_box_section_style_button_tab',
1364	[
1365	'label' => esc_html__('Normal', 'king-addons'),
1366	]
1367	);
1368
1369	$this->add_group_control(
1370	Group_Control_Typography::get_type(),
1371	[
1372	'name' => 'king_addons_content_flip_box_front_button_typography',
1373	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-button',
1374	]
1375	);
1376
1377	$this->add_control(
1378	'king_addons_content_flip_box_front_button_color',
1379	[
1380	'label' => esc_html__('Text Color', 'king-addons'),
1381	'type' => Controls_Manager::COLOR,
1382	'default' => '#ffffff',
1383	'selectors' => [
1384	'{{WRAPPER}} .king-addons-content-flip-box-button' => 'color: {{VALUE}};',
1385	],
1386	]
1387	);
1388
1389	$this->add_control(
1390	'king_addons_content_flip_box_front_button_bg_color',
1391	[
1392	'label' => esc_html__('Background Color', 'king-addons'),
1393	'type' => Controls_Manager::COLOR,
1394	'default' => '#8C56E2',
1395	'selectors' => [
1396	'{{WRAPPER}} .king-addons-content-flip-box-button' => 'background-color: {{VALUE}};',
1397	],
1398	]
1399	);
1400
1401	$this->add_group_control(
1402	Group_Control_Border::get_type(),
1403	[
1404	'name' => 'king_addons_content_flip_box_front_button_border',
1405	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-button',
1406	]
1407	);
1408
1409	$this->add_control(
1410	'king_addons_content_flip_box_front_button_border_radius',
1411	[
1412	'label' => esc_html__('Border Radius', 'king-addons'),
1413	'type' => Controls_Manager::SLIDER,
1414	'size_units' => ['px', '%'],
1415	'range' => [
1416	'px' => [
1417	'min' => 0,
1418	'max' => 50,
1419	],
1420	'%' => [
1421	'min' => 0,
1422	'max' => 100,
1423	],
1424	],
1425	'default' => [
1426	'unit' => 'px',
1427	'size' => 3,
1428	],
1429	'selectors' => [
1430	'{{WRAPPER}} .king-addons-content-flip-box-button' => 'border-radius: {{SIZE}}{{UNIT}};',
1431	],
1432	]
1433	);
1434
1435	$this->add_control(
1436	'king_addons_content_flip_box_front_button_padding',
1437	[
1438	'label' => esc_html__('Padding', 'king-addons'),
1439	'type' => Controls_Manager::DIMENSIONS,
1440	'default' => [
1441	'top' => 12,
1442	'right' => 24,
1443	'bottom' => 12,
1444	'left' => 24,
1445	'isLinked' => true,
1446	],
1447	'size_units' => ['px', 'em'],
1448	'selectors' => [
1449	'{{WRAPPER}} .king-addons-content-flip-box-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1450	],
1451	]
1452	);
1453
1454	$this->end_controls_tab();
1455
1456	$this->start_controls_tab(
1457	'king_addons_content_flip_box_section_style_button_tab_hover',
1458	[
1459	'label' => esc_html__('Hover', 'king-addons'),
1460	]
1461	);
1462
1463	$this->add_control(
1464	'king_addons_content_flip_box_front_button_color_hover',
1465	[
1466	'label' => esc_html__('Text Color', 'king-addons'),
1467	'type' => Controls_Manager::COLOR,
1468	'default' => '#ffffff',
1469	'selectors' => [
1470	'{{WRAPPER}} .king-addons-content-flip-box-button:hover' => 'color: {{VALUE}};',
1471	],
1472	]
1473	);
1474
1475	$this->add_control(
1476	'king_addons_content_flip_box_front_button_bg_color_hover',
1477	[
1478	'label' => esc_html__('Background Color', 'king-addons'),
1479	'type' => Controls_Manager::COLOR,
1480	'default' => '#413BE4',
1481	'selectors' => [
1482	'{{WRAPPER}} .king-addons-content-flip-box-button:hover' => 'background-color: {{VALUE}};',
1483	],
1484	]
1485	);
1486
1487	$this->add_control(
1488	'king_addons_content_flip_box_front_button_border_color_hover',
1489	[
1490	'label' => esc_html__('Border Color', 'king-addons'),
1491	'type' => Controls_Manager::COLOR,
1492	'default' => '',
1493	'selectors' => [
1494	'{{WRAPPER}} .king-addons-content-flip-box-button:hover' => 'border-color: {{VALUE}};',
1495	],
1496	]
1497	);
1498
1499	$this->add_control(
1500	'king_addons_content_flip_box_front_button_animation_hover',
1501	[
1502	'label' => esc_html__('Animation', 'king-addons'),
1503	'type' => Controls_Manager::HOVER_ANIMATION,
1504	]
1505	);
1506
1507	$this->end_controls_tab();
1508
1509	$this->end_controls_tabs();
1510
1511	$this->end_controls_section();
1512
1513	$this->start_controls_section(
1514	'king_addons_content_flip_box_section_style_backside_button',
1515	[
1516	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Back Button', 'king-addons'),
1517	'tab' => Controls_Manager::TAB_STYLE,
1518	'condition' => [
1519	'king_addons_content_flip_box_back_link_type' => 'button',
1520	],
1521	]
1522	);
1523
1524	$this->start_controls_tabs(
1525	'king_addons_content_flip_box_section_style_backside_button_tabs'
1526	);
1527
1528	$this->start_controls_tab(
1529	'king_addons_content_flip_box_section_style_backside_button_tab',
1530	[
1531	'label' => esc_html__('Normal', 'king-addons'),
1532	]
1533	);
1534
1535	$this->add_group_control(
1536	Group_Control_Typography::get_type(),
1537	[
1538	'name' => 'king_addons_content_flip_box_backside_button_typography',
1539	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-button-backside',
1540	]
1541	);
1542
1543	$this->add_control(
1544	'king_addons_content_flip_box_backside_button_color',
1545	[
1546	'label' => esc_html__('Text Color', 'king-addons'),
1547	'type' => Controls_Manager::COLOR,
1548	'default' => '#ffffff',
1549	'selectors' => [
1550	'{{WRAPPER}} .king-addons-content-flip-box-button-backside' => 'color: {{VALUE}};',
1551	],
1552	]
1553	);
1554
1555	$this->add_control(
1556	'king_addons_content_flip_box_backside_button_bg_color',
1557	[
1558	'label' => esc_html__('Background Color', 'king-addons'),
1559	'type' => Controls_Manager::COLOR,
1560	'default' => '#8C56E2',
1561	'selectors' => [
1562	'{{WRAPPER}} .king-addons-content-flip-box-button-backside' => 'background-color: {{VALUE}};',
1563	],
1564	]
1565	);
1566
1567	$this->add_group_control(
1568	Group_Control_Border::get_type(),
1569	[
1570	'name' => 'king_addons_content_flip_box_backside_button_border',
1571	'selector' => '{{WRAPPER}} .king-addons-content-flip-box-button-backside',
1572	]
1573	);
1574
1575	$this->add_control(
1576	'king_addons_content_flip_box_backside_button_border_radius',
1577	[
1578	'label' => esc_html__('Border Radius', 'king-addons'),
1579	'type' => Controls_Manager::SLIDER,
1580	'size_units' => ['px', '%'],
1581	'range' => [
1582	'px' => [
1583	'min' => 0,
1584	'max' => 50,
1585	],
1586	'%' => [
1587	'min' => 0,
1588	'max' => 100,
1589	],
1590	],
1591	'default' => [
1592	'unit' => 'px',
1593	'size' => 3,
1594	],
1595	'selectors' => [
1596	'{{WRAPPER}} .king-addons-content-flip-box-button-backside' => 'border-radius: {{SIZE}}{{UNIT}};',
1597	],
1598	]
1599	);
1600
1601	$this->add_control(
1602	'king_addons_content_flip_box_backside_button_padding',
1603	[
1604	'label' => esc_html__('Padding', 'king-addons'),
1605	'type' => Controls_Manager::DIMENSIONS,
1606	'default' => [
1607	'top' => 12,
1608	'right' => 24,
1609	'bottom' => 12,
1610	'left' => 24,
1611	'isLinked' => true,
1612	],
1613	'size_units' => ['px', 'em'],
1614	'selectors' => [
1615	'{{WRAPPER}} .king-addons-content-flip-box-button-backside' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1616	],
1617	]
1618	);
1619
1620	$this->end_controls_tab();
1621
1622	$this->start_controls_tab(
1623	'king_addons_content_flip_box_section_style_backside_button_tab_hover',
1624	[
1625	'label' => esc_html__('Hover', 'king-addons'),
1626	]
1627	);
1628
1629	$this->add_control(
1630	'king_addons_content_flip_box_backside_button_color_hover',
1631	[
1632	'label' => esc_html__('Text Color', 'king-addons'),
1633	'type' => Controls_Manager::COLOR,
1634	'default' => '#ffffff',
1635	'selectors' => [
1636	'{{WRAPPER}} .king-addons-content-flip-box-button-backside:hover' => 'color: {{VALUE}};',
1637	],
1638	]
1639	);
1640
1641	$this->add_control(
1642	'king_addons_content_flip_box_backside_button_bg_color_hover',
1643	[
1644	'label' => esc_html__('Background Color', 'king-addons'),
1645	'type' => Controls_Manager::COLOR,
1646	'default' => '#413BE4',
1647	'selectors' => [
1648	'{{WRAPPER}} .king-addons-content-flip-box-button-backside:hover' => 'background-color: {{VALUE}};',
1649	],
1650	]
1651	);
1652
1653	$this->add_control(
1654	'king_addons_content_flip_box_backside_button_border_color_hover',
1655	[
1656	'label' => esc_html__('Border Color', 'king-addons'),
1657	'type' => Controls_Manager::COLOR,
1658	'default' => '',
1659	'selectors' => [
1660	'{{WRAPPER}} .king-addons-content-flip-box-button-backside:hover' => 'border-color: {{VALUE}};',
1661	],
1662	]
1663	);
1664
1665	$this->add_control(
1666	'king_addons_content_flip_box_backside_button_animation_hover',
1667	[
1668	'label' => esc_html__('Animation', 'king-addons'),
1669	'type' => Controls_Manager::HOVER_ANIMATION,
1670	]
1671	);
1672
1673	$this->end_controls_tab();
1674
1675	$this->end_controls_tabs();
1676
1677
1678
1679
1680	$this->end_controls_section();
1681
1682
1683
1684	}
1685
1686	protected function render(): void
1687	{
1688	$settings = $this->get_settings();
1689	$id = $this->get_id();
1690
1691	$front_image_src = Group_Control_Image_Size::get_attachment_image_src($settings['king_addons_content_flip_box_front_image']['id'], 'king_addons_content_flip_box_front_image_size', $settings);
1692	if (!$front_image_src) {
1693	$front_image_src = $settings['king_addons_content_flip_box_front_image']['url'];
1694	}
1695	$front_alt_text = $settings['king_addons_content_flip_box_front_image']['alt'] ?? '';
1696
1697	$back_image_src = Group_Control_Image_Size::get_attachment_image_src($settings['king_addons_content_flip_box_back_image']['id'], 'king_addons_content_flip_box_back_image_size', $settings);
1698	if (!$back_image_src) {
1699	$back_image_src = $settings['king_addons_content_flip_box_back_image']['url'];
1700	}
1701	$back_alt_text = $settings['king_addons_content_flip_box_back_image']['alt'] ?? '';
1702
1703	$back_button_element = 'div';
1704	$back_link = $settings['king_addons_content_flip_box_back_link']['url'];
1705	if ($back_link !== '') {
1706	$back_button_element = 'a';
1707	}
1708
1709	echo '<div class="king-addons-content-flip-box king-addons-content-flip-box-' . esc_attr($id) . '" data-trigger="' . esc_attr($settings['king_addons_content_flip_box_front_trigger']) . '">';
1710
1711	echo '<div class="king-addons-content-flip-box-item king-addons-content-flip-box-front king-addons-content-flip-animation-timing-' . esc_attr($settings['king_addons_content_flip_box_box_animation_timing']) . '">';
1712	echo '<div class="king-addons-content-flip-box-overlay"></div>';
1713	echo '<div class="king-addons-content-flip-box-content">';
1714
1715	if ($settings['king_addons_content_flip_box_front_icon_type'] === 'icon' && !empty($settings['king_addons_content_flip_box_front_icon']['value'])) {
1716	echo '<div class="king-addons-content-flip-box-icon">';
1717	echo '<i class="' . esc_attr($settings['king_addons_content_flip_box_front_icon']['value']) . '"></i>';
1718	echo '</div>';
1719	} elseif ($settings['king_addons_content_flip_box_front_icon_type'] === 'image' && !empty($front_image_src)) {
1720	echo '<div class="king-addons-content-flip-box-image">';
1721	echo '<img alt="' . esc_attr($front_alt_text) . '" src="' . esc_url($front_image_src) . '">';
1722	echo '</div>';
1723	}
1724
1725	if (!empty($settings['king_addons_content_flip_box_front_title'])) {
1726	echo '<h3 class="king-addons-content-flip-box-title">' . wp_kses_post($settings['king_addons_content_flip_box_front_title']) . '</h3>';
1727	}
1728
1729	if (!empty($settings['king_addons_content_flip_box_front_description'])) {
1730	echo '<div class="king-addons-content-flip-box-description">' . wp_kses_post($settings['king_addons_content_flip_box_front_description']) . '</div>';
1731	}
1732
1733	if ($settings['king_addons_content_flip_box_front_trigger'] === 'button') {
1734	echo '<div class="king-addons-content-flip-box-button-wrap' . esc_attr($settings['king_addons_content_flip_box_front_button_animation_hover'] ? ' elementor-animation-' . $settings['king_addons_content_flip_box_front_button_animation_hover'] : '') . '">';
1735	echo '<div class="king-addons-content-flip-box-button">';
1736	if (!empty($settings['king_addons_content_flip_box_front_button_text'])) {
1737	echo '<span class="king-addons-content-flip-box-button-text">' . esc_html($settings['king_addons_content_flip_box_front_button_text']) . '</span>';
1738	}
1739	if (!empty($settings['king_addons_content_flip_box_front_button_icon']['value'])) {
1740	echo '<span class="king-addons-content-flip-box-button-icon">';
1741	echo '<i class="' . esc_attr($settings['king_addons_content_flip_box_front_button_icon']['value']) . '"></i>';
1742	echo '</span>';
1743	}
1744	echo '</div>';
1745	echo '</div>';
1746	}
1747
1748	echo '</div>';
1749	echo '</div>';
1750
1751	echo '<div class="king-addons-content-flip-box-item king-addons-content-flip-box-back king-addons-content-flip-animation-timing-' . esc_attr($settings['king_addons_content_flip_box_box_animation_timing']) . '">';
1752	echo '<div class="king-addons-content-flip-box-overlay"></div>';
1753	echo '<div class="king-addons-content-flip-box-content">';
1754
1755	if ($settings['king_addons_content_flip_box_back_link_type'] === 'box') {
1756	echo '<a class="king-addons-content-flip-box-link" href="' . esc_url($settings['king_addons_content_flip_box_back_link']['url']) . '"';
1757	if ($settings['king_addons_content_flip_box_back_link']['is_external']) {
1758	echo ' target="_blank"';
1759	}
1760	if ($settings['king_addons_content_flip_box_back_link']['nofollow']) {
1761	echo ' rel="nofollow"';
1762	}
1763	echo '></a>';
1764	}
1765
1766	if ($settings['king_addons_content_flip_box_back_icon_type'] === 'icon' && !empty($settings['king_addons_content_flip_box_back_icon']['value'])) {
1767	echo '<div class="king-addons-content-flip-box-icon">';
1768	echo '<i class="' . esc_attr($settings['king_addons_content_flip_box_back_icon']['value']) . '"></i>';
1769	echo '</div>';
1770	} elseif ($settings['king_addons_content_flip_box_back_icon_type'] === 'image' && !empty($back_image_src)) {
1771	echo '<div class="king-addons-content-flip-box-image">';
1772	echo '<img alt="' . esc_attr($back_alt_text) . '" src="' . esc_url($back_image_src) . '">';
1773	echo '</div>';
1774	}
1775
1776	if (!empty($settings['king_addons_content_flip_box_back_title'])) {
1777	echo '<h3 class="king-addons-content-flip-box-title">';
1778	if ($settings['king_addons_content_flip_box_back_link_type'] === 'title' \|\| $settings['king_addons_content_flip_box_back_link_type'] === 'button-title') {
1779	echo '<a href="' . esc_url($settings['king_addons_content_flip_box_back_link']['url']) . '"';
1780	if ($settings['king_addons_content_flip_box_back_link']['is_external']) {
1781	echo ' target="_blank"';
1782	}
1783	if ($settings['king_addons_content_flip_box_back_link']['nofollow']) {
1784	echo ' rel="nofollow"';
1785	}
1786	echo '>';
1787	}
1788	echo wp_kses_post($settings['king_addons_content_flip_box_back_title']);
1789	if ($settings['king_addons_content_flip_box_back_link_type'] === 'title' \|\| $settings['king_addons_content_flip_box_back_link_type'] === 'button-title') {
1790	echo '</a>';
1791	}
1792	echo '</h3>';
1793	}
1794
1795	if (!empty($settings['king_addons_content_flip_box_back_description'])) {
1796	echo '<div class="king-addons-content-flip-box-description">' . wp_kses_post($settings['king_addons_content_flip_box_back_description']) . '</div>';
1797	}
1798
1799	if ($settings['king_addons_content_flip_box_back_link_type'] === 'button' \|\| $settings['king_addons_content_flip_box_back_link_type'] === 'button-title') {
1800	echo '<div class="king-addons-content-flip-box-button-wrap">';
1801	echo '<' . esc_html($back_button_element) . ' class="king-addons-content-flip-box-button-backside' . esc_attr($settings['king_addons_content_flip_box_backside_button_animation_hover'] ? ' elementor-animation-' . $settings['king_addons_content_flip_box_backside_button_animation_hover'] : '') . '" href="' . esc_url($settings['king_addons_content_flip_box_back_link']['url']) . '"';
1802	if ($settings['king_addons_content_flip_box_back_link']['is_external']) {
1803	echo ' target="_blank"';
1804	}
1805	if ($settings['king_addons_content_flip_box_back_link']['nofollow']) {
1806	echo ' rel="nofollow"';
1807	}
1808	echo '>';
1809	if (!empty($settings['king_addons_content_flip_box_back_button_text'])) {
1810	echo '<span class="king-addons-content-flip-box-button-text">' . esc_html($settings['king_addons_content_flip_box_back_button_text']) . '</span>';
1811	}
1812	if (!empty($settings['king_addons_content_flip_box_back_button_icon']['value'])) {
1813	echo '<span class="king-addons-content-flip-box-button-icon">';
1814	echo '<i class="' . esc_attr($settings['king_addons_content_flip_box_back_button_icon']['value']) . '"></i>';
1815	echo '</span>';
1816	}
1817	echo '</' . esc_html($back_button_element) . '>';
1818	echo '</div>';
1819	}
1820
1821	echo '</div>';
1822	echo '</div>';
1823	echo '</div>';
1824
1825	$inline_js = "(function () {
1826	function doFlipBox() {
1827	let flipBox = document.querySelector('.king-addons-content-flip-box-" . esc_js($id) . "');
1828	if (!flipBox) return;
1829
1830	let flipBoxTrigger = flipBox.getAttribute('data-trigger');
1831
1832	if (flipBoxTrigger === 'box') {
1833	flipBox.querySelector('.king-addons-content-flip-box-front').addEventListener('click', function () {
1834	flipBox.classList.add('king-addons-content-flip-box-active');
1835	});
1836
1837	window.addEventListener('click', function (event) {
1838	if (!event.target.closest('.king-addons-content-flip-box-" . esc_js($id) . "')) {
1839	flipBox.classList.remove('king-addons-content-flip-box-active');
1840	}
1841	});
1842
1843	} else if (flipBoxTrigger === 'button') {
1844	flipBox.querySelector('.king-addons-content-flip-box-button').addEventListener('click', function () {
1845	flipBox.classList.add('king-addons-content-flip-box-active');
1846	});
1847
1848	window.addEventListener('click', function (event) {
1849	if (!event.target.closest('.king-addons-content-flip-box-" . esc_js($id) . "')) {
1850	flipBox.classList.remove('king-addons-content-flip-box-active');
1851	}
1852	});
1853
1854	} else if (flipBoxTrigger === 'hover') {
1855	flipBox.addEventListener('mouseenter', function () {
1856	flipBox.classList.add('king-addons-content-flip-box-active');
1857	});
1858
1859	flipBox.addEventListener('mouseleave', function () {
1860	flipBox.classList.remove('king-addons-content-flip-box-active');
1861	});
1862	}
1863	}
1864
1865	if (document.readyState === 'complete') {
1866	doFlipBox();
1867	} else {
1868	document.addEventListener('DOMContentLoaded', doFlipBox);
1869	}
1870	})();";
1871
1872	wp_print_inline_script_tag($inline_js);
1873	}
1874	}
1875