PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.86
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.86
51.1.86 51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 All 40 releases
← All changes | includes/widgets/Content_Flip_Box/Content_Flip_Box.php +1874 -0 51.1.2 → 51.1.86 View file →
@@ -1,0 +1,1874 @@
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:[email protected]?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 = Core::displaySettings($this);
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 +}