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

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

877 lines 37.3 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
7	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
8	use Elementor\Group_Control_Background;
9	use Elementor\Group_Control_Border;
10	use Elementor\Group_Control_Box_Shadow;
11	use Elementor\Group_Control_Css_Filter;
12	use Elementor\Group_Control_Image_Size;
13	use Elementor\Group_Control_Text_Shadow;
14	use Elementor\Group_Control_Typography;
15	use Elementor\Utils;
16	use Elementor\Widget_Base;
17
18	if (!defined('ABSPATH')) {
19	exit; // Exit if accessed directly.
20	}
21
22
23
24	class Image_Hover_Box extends Widget_Base
25	{
26
27
28	public function get_name(): string
29	{
30	return 'king-addons-image-hover-box';
31	}
32
33	public function get_title(): string
34	{
35	return esc_html__('Image Hover Box', 'king-addons');
36	}
37
38	public function get_icon(): string
39	{
40	return 'king-addons-icon king-addons-image-hover-box';
41	}
42
43	public function get_style_depends(): array
44	{
45	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-image-hover-box-style'];
46	}
47
48	public function get_categories(): array
49	{
50	return ['king-addons'];
51	}
52
53	public function get_keywords(): array
54	{
55	return ['image', 'images', 'before', 'after', 'before-after', 'compare', 'hover', 'slider', 'scroll', 'box',
56	'photo', 'photos', 'picture', 'scrolling', 'scroller', 'scrollable', 'animation', 'effect', 'animated',
57	'image hover over', 'image hover', 'hover box', 'image box', 'image layout', 'layout', 'image hover box',
58	'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'picture', 'king', 'addons', 'mouseover',
59	'slide', 'background', 'arrow', 'arrows', 'kingaddons', 'king-addons', 'info box', 'info', 'cta', 'banner',
60	'layout', 'animated box', 'hover text', 'text box', 'text banner'];
61	}
62
63	public function get_custom_help_url()
64	{
65	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
66	}
67
68	protected function register_controls(): void
69	{
70	$this->start_controls_section(
71	'king_addons_image_hover_box_section_image',
72	[
73	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Image', 'king-addons'),
74	]
75	);
76
77	$this->add_control(
78	'king_addons_image_hover_box_image',
79	[
80	'label' => esc_html__('Upload Image', 'king-addons'),
81	'type' => Controls_Manager::MEDIA,
82	'dynamic' => array('active' => true),
83	'default' => array(
84	'url' => Utils::get_placeholder_image_src(),
85	),
86	'show_external' => true,
87	]
88	);
89
90	$this->add_group_control(
91	Group_Control_Image_Size::get_type(),
92	[
93	'name' => 'king_addons_image_hover_box_image_size',
94	'default' => 'full',
95	]
96	);
97
98	$this->add_control(
99	'king_addons_image_hover_box_image_custom_link',
100	[
101	'label' => esc_html__('Link', 'king-addons'),
102	'type' => Controls_Manager::URL,
103	'dynamic' => array('active' => true),
104	'show_external' => false,
105	]
106	);
107
108	$this->add_control(
109	'king_addons_image_hover_box_image_layout',
110	[
111	'label' => '<b>' . esc_html__('Layout (effect)', 'king-addons') . '</b>',
112	'type' => Controls_Manager::SELECT,
113	'default' => 'layout-1',
114	'options' => array(
115	'layout-1' => esc_html__('Slide Up 1', 'king-addons'),
116	'layout-2' => esc_html__('Slide Up 2', 'king-addons'),
117	'layout-5' => esc_html__('Slide Up 3', 'king-addons'),
118	'layout-10' => esc_html__('Slide Line Up', 'king-addons'),
119	'layout-3' => esc_html__('Slide Line Right', 'king-addons'),
120	'layout-4' => esc_html__('Slide Border 1', 'king-addons'),
121	'layout-6' => esc_html__('Slide Border 2', 'king-addons'),
122	'layout-7' => esc_html__('Opacity Angles', 'king-addons'),
123	'layout-8' => esc_html__('Opacity Borders', 'king-addons'),
124	'layout-9' => esc_html__('Crossing', 'king-addons'),
125	'layout-11' => esc_html__('Magic Overlay', 'king-addons'),
126	),
127	]
128	);
129
130	$this->add_control(
131	'king_addons_image_hover_box_active',
132	[
133	'label' => esc_html__('Always Hovered', 'king-addons'),
134	'type' => Controls_Manager::SWITCHER,
135	]
136	);
137
138	$this->add_control(
139	'king_addons_image_hover_box_hover_effect',
140	[
141	'label' => esc_html__('Hover Effect', 'king-addons'),
142	'type' => Controls_Manager::SELECT,
143	'options' => array(
144	'none' => esc_html__('None', 'king-addons'),
145	'zoom-in' => esc_html__('Zoom In', 'king-addons'),
146	'zoom-out' => esc_html__('Zoom Out', 'king-addons'),
147	'scale' => esc_html__('Scale', 'king-addons'),
148	'grayscale' => esc_html__('Grayscale', 'king-addons'),
149	'blur' => esc_html__('Blur', 'king-addons'),
150	'bright' => esc_html__('Bright', 'king-addons'),
151	'sepia' => esc_html__('Sepia', 'king-addons'),
152	),
153	'default' => 'none',
154	]
155	);
156
157	$this->add_control(
158	'king_addons_image_hover_box_height',
159	[
160	'label' => esc_html__('Height', 'king-addons'),
161	'type' => Controls_Manager::SELECT,
162	'options' => array(
163	'default' => esc_html__('Default (auto)', 'king-addons'),
164	'custom' => esc_html__('Custom', 'king-addons'),
165	),
166	'default' => 'default',
167	]
168	);
169
170	$this->add_responsive_control(
171	'king_addons_image_hover_box_custom_height',
172	[
173	'label' => esc_html__('Height', 'king-addons'),
174	'type' => Controls_Manager::SLIDER,
175	'size_units' => array('px', 'em', 'vh', 'custom'),
176	'condition' => array(
177	'king_addons_image_hover_box_height' => 'custom',
178	),
179	'default' => array(
180	'size' => 300,
181	),
182	'range' => array(
183	'px' => array(
184	'min' => 1,
185	'max' => 600,
186	),
187	),
188	'selectors' => array(
189	'{{WRAPPER}} .king-addons-image-hover-box img' => 'height: {{SIZE}}{{UNIT}};',
190	),
191	]
192	);
193
194	$this->add_responsive_control(
195	'king_addons_image_hover_box_image_fit',
196	[
197	'label' => esc_html__('Image Fit', 'king-addons'),
198	'type' => Controls_Manager::SELECT,
199	'options' => array(
200	'cover' => esc_html__('Cover', 'king-addons'),
201	'fill' => esc_html__('Fill', 'king-addons'),
202	'contain' => esc_html__('Contain', 'king-addons'),
203	),
204	'default' => 'cover',
205	'selectors' => array(
206	'{{WRAPPER}} .king-addons-image-hover-box img' => 'object-fit: {{VALUE}}',
207	),
208	'condition' => array(
209	'king_addons_image_hover_box_height' => 'custom',
210	),
211	]
212	);
213
214	$this->add_responsive_control(
215	'king_addons_image_hover_box_image_fit_position',
216	[
217	'label' => esc_html__('Image Fit Position', 'king-addons'),
218	'type' => Controls_Manager::SELECT,
219	'options' => [
220	'top' => esc_html__('Top', 'king-addons'),
221	'bottom' => esc_html__('Bottom', 'king-addons'),
222	'left' => esc_html__('Left', 'king-addons'),
223	'right' => esc_html__('Right', 'king-addons'),
224	'center' => esc_html__('Center', 'king-addons'),
225	],
226	'default' => 'center',
227	'selectors' => [
228	'{{WRAPPER}} .king-addons-image-hover-box img' => 'object-position: {{VALUE}};',
229	],
230	'condition' => array(
231	'king_addons_image_hover_box_height' => 'custom',
232	),
233	]
234	);
235
236	$this->end_controls_section();
237
238	$this->start_controls_section(
239	'king_addons_image_hover_box_section_texts',
240	[
241	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Texts', 'king-addons'),
242	]
243	);
244
245	$this->add_control(
246	'king_addons_image_hover_box_title',
247	[
248	'label' => '<b>' . esc_html__('Title', 'king-addons') . '</b>',
249	'placeholder' => esc_html__('Title', 'king-addons'),
250	'type' => Controls_Manager::TEXT,
251	'dynamic' => array('active' => true),
252	'default' => esc_html__('Title', 'king-addons'),
253	'label_block' => true,
254	]
255	);
256
257	$this->add_control(
258	'king_addons_image_hover_box_title_tag',
259	[
260	'label' => esc_html__('HTML Tag', 'king-addons'),
261	'type' => Controls_Manager::SELECT,
262	'default' => 'h3',
263	'options' => array(
264	'h1' => 'H1',
265	'h2' => 'H2',
266	'h3' => 'H3',
267	'h4' => 'H4',
268	'h5' => 'H5',
269	'h6' => 'H6',
270	'div' => 'div',
271	'span' => 'span',
272	'p' => 'p',
273	),
274	'label_block' => true,
275	]
276	);
277
278	$this->add_control(
279	'king_addons_image_hover_box_description_hint',
280	[
281	'label' => esc_html__('Description', 'king-addons'),
282	'type' => Controls_Manager::HEADING,
283	]
284	);
285
286	$this->add_control(
287	'king_addons_image_hover_box_description',
288	[
289	'label' => esc_html__('Description', 'king-addons'),
290	'type' => Controls_Manager::WYSIWYG,
291	'dynamic' => array('active' => true),
292	'default' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', 'king-addons'),
293	'label_block' => true,
294	]
295	);
296
297	$this->add_control(
298	'king_addons_image_hover_box_title_text_align',
299	[
300	'label' => esc_html__('Alignment', 'king-addons'),
301	'type' => Controls_Manager::CHOOSE,
302	'options' => array(
303	'left' => array(
304	'title' => esc_html__('Left', 'king-addons'),
305	'icon' => 'eicon-text-align-left',
306	),
307	'center' => array(
308	'title' => esc_html__('Center', 'king-addons'),
309	'icon' => 'eicon-text-align-center',
310	),
311	'right' => array(
312	'title' => esc_html__('Right', 'king-addons'),
313	'icon' => 'eicon-text-align-right',
314	),
315	),
316	'default' => 'left',
317	'toggle' => false,
318	'selectors' => array(
319	'{{WRAPPER}} .king-addons-image-hover-box-text-title, {{WRAPPER}} .king-addons-image-hover-box-text-description' => 'text-align: {{VALUE}} ;',
320	),
321	]
322	);
323
324	$this->end_controls_section();
325
326	$this->start_controls_section(
327	'king_addons_image_hover_box_opacity_style',
328	[
329	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
330	'tab' => Controls_Manager::TAB_STYLE,
331	]
332	);
333
334	$this->add_control(
335	'king_addons_image_hover_box_image_bg_color',
336	[
337	'label' => esc_html__('Background Color', 'king-addons'),
338	'type' => Controls_Manager::COLOR,
339	'selectors' => array(
340	'{{WRAPPER}} .king-addons-image-hover-box' => 'background: {{VALUE}};',
341	),
342	]
343	);
344
345	$this->add_control(
346	'king_addons_image_hover_box_image_opacity',
347	[
348	'label' => esc_html__('Image Opacity', 'king-addons'),
349	'type' => Controls_Manager::SLIDER,
350	'default' => array(
351	'size' => 1,
352	),
353	'range' => array(
354	'px' => array(
355	'min' => 0,
356	'max' => 1,
357	'step' => .1,
358	),
359	),
360	'selectors' => array(
361	'{{WRAPPER}} .king-addons-image-hover-box img' => 'opacity: {{SIZE}};',
362	),
363	]
364	);
365
366	$this->add_control(
367	'king_addons_image_hover_box_image_hover_opacity',
368	[
369	'label' => esc_html__('Hover Opacity', 'king-addons'),
370	'type' => Controls_Manager::SLIDER,
371	'default' => array(
372	'size' => 1,
373	),
374	'range' => array(
375	'px' => array(
376	'min' => 0,
377	'max' => 1,
378	'step' => .1,
379	),
380	),
381	'separator' => 'after',
382	'selectors' => array(
383	'{{WRAPPER}}:hover .king-addons-image-hover-box img' => 'opacity: {{SIZE}};',
384	),
385	]
386	);
387
388	$this->add_control(
389	'king_addons_image_hover_box_title_border_width',
390	[
391	'label' => esc_html__('Hover Border Width', 'king-addons'),
392	'type' => Controls_Manager::SLIDER,
393	'size_units' => array('px', '%', 'em'),
394	'default' => array(
395	'size' => 2,
396	),
397	'condition' => array(
398	'king_addons_image_hover_box_image_layout' => array('layout-3', 'layout-9', 'layout-10'),
399	),
400	'selectors' => array(
401	'{{WRAPPER}} .king-addons-image-hover-box-layout-3 .king-addons-image-hover-box-text-title::after' => 'height: {{size}}{{unit}};',
402	'{{WRAPPER}} .king-addons-image-hover-box-layout-9 .king-addons-image-hover-box-text::before, {{WRAPPER}} .king-addons-image-hover-box-layout-9 .king-addons-image-hover-box-text::after' => 'height: {{size}}{{unit}};',
403	'{{WRAPPER}} .king-addons-image-hover-box-layout-10 .king-addons-image-hover-box-text-title::after' => 'height: {{size}}{{unit}};',
404	),
405	]
406	);
407
408	$this->add_control(
409	'king_addons_image_hover_box_style3_title_border',
410	[
411	'label' => esc_html__('Hover Border Color', 'king-addons'),
412	'type' => Controls_Manager::COLOR,
413	'condition' => array(
414	'king_addons_image_hover_box_image_layout' => array('layout-3', 'layout-9', 'layout-10'),
415	),
416	'separator' => 'after',
417	'selectors' => array(
418	'{{WRAPPER}} .king-addons-image-hover-box-layout-3 .king-addons-image-hover-box-text-title::after' => 'background: {{VALUE}};',
419	'{{WRAPPER}} .king-addons-image-hover-box-layout-9 .king-addons-image-hover-box-text::before, {{WRAPPER}} .king-addons-image-hover-box-layout-9 .king-addons-image-hover-box-text::after' => 'background: {{VALUE}};',
420	'{{WRAPPER}} .king-addons-image-hover-box-layout-10 .king-addons-image-hover-box-text-title::after' => 'background: {{VALUE}};',
421	),
422	]
423	);
424
425	$this->add_control(
426	'king_addons_image_hover_box_inner_border_width',
427	[
428	'label' => esc_html__('Hover Border Width', 'king-addons'),
429	'type' => Controls_Manager::SLIDER,
430	'size_units' => array('px', '%', 'em'),
431	'default' => array(
432	'size' => 2,
433	),
434	'condition' => array(
435	'king_addons_image_hover_box_image_layout' => array('layout-4', 'layout-6', 'layout-7', 'layout-8'),
436	),
437	'selectors' => array(
438	'{{WRAPPER}} .king-addons-image-hover-box-layout-4 .king-addons-image-hover-box-text::after, {{WRAPPER}} .king-addons-image-hover-box-layout-4 .king-addons-image-hover-box-text::before, {{WRAPPER}} .king-addons-image-hover-box-layout-6 .king-addons-image-hover-box-text::before' => 'border-width: {{size}}{{unit}};',
439	'{{WRAPPER}} .king-addons-image-hover-box-layout-7 .king-addons-image-hover-box-br.king-addons-image-hover-box-bleft, {{WRAPPER}} .king-addons-image-hover-box-layout-7 .king-addons-image-hover-box-br.king-addons-image-hover-box-bright , {{WRAPPER}} .king-addons-image-hover-box-layout-8 .king-addons-image-hover-box-br.king-addons-image-hover-box-bright,{{WRAPPER}} .king-addons-image-hover-box-layout-8 .king-addons-image-hover-box-br.king-addons-image-hover-box-bleft' => 'width: {{size}}{{unit}};',
440	'{{WRAPPER}} .king-addons-image-hover-box-layout-7 .king-addons-image-hover-box-br.king-addons-image-hover-box-btop, {{WRAPPER}} .king-addons-image-hover-box-layout-7 .king-addons-image-hover-box-br.king-addons-image-hover-box-bottom , {{WRAPPER}} .king-addons-image-hover-box-layout-8 .king-addons-image-hover-box-br.king-addons-image-hover-box-bottom,{{WRAPPER}} .king-addons-image-hover-box-layout-8 .king-addons-image-hover-box-br.king-addons-image-hover-box-btop ' => 'height: {{size}}{{unit}};',
441	),
442	]
443	);
444
445	$this->add_control(
446	'king_addons_image_hover_box_scaled_border_color',
447	[
448	'label' => esc_html__('Hover Border Color', 'king-addons'),
449	'type' => Controls_Manager::COLOR,
450	'condition' => array(
451	'king_addons_image_hover_box_image_layout' => array('layout-4', 'layout-6', 'layout-7', 'layout-8'),
452	),
453	'selectors' => array(
454	'{{WRAPPER}} .king-addons-image-hover-box-layout-4 .king-addons-image-hover-box-text::after, {{WRAPPER}} .king-addons-image-hover-box-layout-4 .king-addons-image-hover-box-text::before, {{WRAPPER}} .king-addons-image-hover-box-layout-6 .king-addons-image-hover-box-text::before' => 'border-color: {{VALUE}};',
455	'{{WRAPPER}} .king-addons-image-hover-box-layout-7 .king-addons-image-hover-box-br, {{WRAPPER}} .king-addons-image-hover-box-layout-8 .king-addons-image-hover-box-br' => 'background-color: {{VALUE}};',
456	),
457	]
458	);
459
460	$this->add_group_control(
461	Group_Control_Css_Filter::get_type(),
462	[
463	'name' => 'king_addons_image_hover_box_css_filters',
464	'selector' => '{{WRAPPER}} .king-addons-image-hover-box img',
465	]
466	);
467
468	$this->add_group_control(
469	Group_Control_Css_Filter::get_type(),
470	[
471	'name' => 'king_addons_image_hover_box_hover_css_filters',
472	'label' => esc_html__('Hover CSS Filters', 'king-addons'),
473	'selector' => '{{WRAPPER}}:hover .king-addons-image-hover-box img',
474	]
475	);
476
477	$this->add_group_control(
478	Group_Control_Border::get_type(),
479	[
480	'name' => 'king_addons_image_hover_box_image_border',
481	'selector' => '{{WRAPPER}} .king-addons-image-hover-box',
482	]
483	);
484
485	$this->add_control(
486	'king_addons_image_hover_box_image_border_radius',
487	[
488	'label' => esc_html__('Border Radius', 'king-addons'),
489	'type' => Controls_Manager::DIMENSIONS,
490	'size_units' => array('px', '%', 'em'),
491	'selectors' => array(
492	'{{WRAPPER}} .king-addons-image-hover-box, {{WRAPPER}} .king-addons-image-hover-box-gradient' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
493	),
494	'condition' => array(
495	'king_addons_image_hover_box_image_adv_radius!' => 'yes',
496	),
497	]
498	);
499
500	$this->add_control(
501	'king_addons_image_hover_box_image_adv_radius',
502	[
503	'label' => esc_html__('Advanced Border Radius', 'king-addons'),
504	'type' => Controls_Manager::SWITCHER,
505	'description' => esc_html__('Apply custom radius values. Get the radius value from ', 'king-addons') . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>',
506	]
507	);
508
509	$this->add_control(
510	'king_addons_image_hover_box_image_adv_radius_value',
511	[
512	'label' => esc_html__('Border Radius', 'king-addons'),
513	'type' => Controls_Manager::TEXT,
514	'dynamic' => array('active' => true),
515	'selectors' => array(
516	'{{WRAPPER}} .king-addons-image-hover-box, {{WRAPPER}} .king-addons-image-hover-box-gradient' => 'border-radius: {{VALUE}};',
517	),
518	'condition' => array(
519	'king_addons_image_hover_box_image_adv_radius' => 'yes',
520	),
521	]
522	);
523
524	$this->add_control(
525	'king_addons_image_hover_box_blend_mode',
526	[
527	'label' => esc_html__('Blend Mode', 'king-addons'),
528	'type' => Controls_Manager::SELECT,
529	'options' => array(
530	'' => esc_html__('Normal', 'king-addons'),
531	'multiply' => 'Multiply',
532	'screen' => 'Screen',
533	'overlay' => 'Overlay',
534	'darken' => 'Darken',
535	'lighten' => 'Lighten',
536	'color-dodge' => 'Color Dodge',
537	'saturation' => 'Saturation',
538	'color' => 'Color',
539	'luminosity' => 'Luminosity',
540	),
541	'separator' => 'before',
542	'selectors' => array(
543	'{{WRAPPER}} .king-addons-image-hover-box' => 'mix-blend-mode: {{VALUE}}',
544	),
545	]
546	);
547
548	$this->end_controls_section();
549
550	$this->start_controls_section(
551	'king_addons_image_hover_box_title_style',
552	[
553	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'),
554	'tab' => Controls_Manager::TAB_STYLE,
555	]
556	);
557
558	$this->add_control(
559	'king_addons_image_hover_box_color_of_title',
560	[
561	'label' => esc_html__('Color', 'king-addons'),
562	'type' => Controls_Manager::COLOR,
563	'global' => array(
564	'default' => Global_Colors::COLOR_PRIMARY,
565	),
566	'selectors' => array(
567	'{{WRAPPER}} .king-addons-image-hover-box-text .king-addons-image-hover-box-text-title' => 'color: {{VALUE}};',
568	),
569	]
570	);
571
572	$this->add_group_control(
573	Group_Control_Typography::get_type(),
574	[
575	'name' => 'king_addons_image_hover_box_title_typography',
576	'selector' => '{{WRAPPER}} .king-addons-image-hover-box-text .king-addons-image-hover-box-text-title',
577	'global' => array(
578	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
579	),
580	]
581	);
582
583	$this->add_control(
584	'king_addons_image_hover_box_style2_title_bg',
585	[
586	'label' => esc_html__('Background', 'king-addons'),
587	'type' => Controls_Manager::COLOR,
588	'default' => '#f2f2f2',
589	'description' => esc_html__('Choose a background color for the title', 'king-addons'),
590	'condition' => array(
591	'king_addons_image_hover_box_image_layout' => 'layout-5',
592	),
593	'selectors' => array(
594	'{{WRAPPER}} .king-addons-image-hover-box-layout-5 .king-addons-image-hover-box-text' => 'background: {{VALUE}};',
595	),
596	]
597	);
598
599	$this->add_group_control(
600	Group_Control_Text_Shadow::get_type(),
601	[
602	'label' => esc_html__('Shadow', 'king-addons'),
603	'name' => 'king_addons_image_hover_box_title_shadow',
604	'selector' => '{{WRAPPER}} .king-addons-image-hover-box-text .king-addons-image-hover-box-text-title',
605	]
606	);
607
608	$this->add_responsive_control(
609	'king_addons_image_hover_box_title_margin',
610	[
611	'label' => esc_html__('Margin', 'king-addons'),
612	'type' => Controls_Manager::DIMENSIONS,
613	'size_units' => array('px', 'em', '%'),
614	'selectors' => array(
615	'{{WRAPPER}} .king-addons-image-hover-box-text-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
616	),
617	]
618	);
619
620	$this->end_controls_section();
621
622	$this->start_controls_section(
623	'king_addons_image_hover_box_styles_of_content',
624	[
625	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Description', 'king-addons'),
626	'tab' => Controls_Manager::TAB_STYLE,
627	]
628	);
629
630	$this->add_control(
631	'king_addons_image_hover_box_color_of_content',
632	[
633	'label' => esc_html__('Color', 'king-addons'),
634	'type' => Controls_Manager::COLOR,
635	'global' => array(
636	'default' => Global_Colors::COLOR_TEXT,
637	),
638	'selectors' => array(
639	'{{WRAPPER}} .king-addons-image-hover-box-text-description' => 'color: {{VALUE}};',
640	),
641	]
642	);
643
644	$this->add_group_control(
645	Group_Control_Typography::get_type(),
646	[
647	'name' => 'king_addons_image_hover_box_content_typography',
648	'selector' => '{{WRAPPER}} .king-addons-image-hover-box-text-description',
649	'global' => array(
650	'default' => Global_Typography::TYPOGRAPHY_TEXT,
651	),
652	]
653	);
654
655	$this->add_group_control(
656	Group_Control_Text_Shadow::get_type(),
657	[
658	'label' => esc_html__('Shadow', 'king-addons'),
659	'name' => 'king_addons_image_hover_box_description_shadow',
660	'selector' => '{{WRAPPER}} .king-addons-image-hover-box-text-description',
661	]
662	);
663
664	$this->add_responsive_control(
665	'king_addons_image_hover_box_desc_margin',
666	[
667	'label' => esc_html__('Margin', 'king-addons'),
668	'type' => Controls_Manager::DIMENSIONS,
669	'size_units' => array('px', 'em', '%'),
670	'selectors' => array(
671	'{{WRAPPER}} .king-addons-image-hover-box-text-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
672	),
673	]
674	);
675
676	$this->end_controls_section();
677
678	$this->start_controls_section(
679	'king_addons_image_hover_box_section_whole_box',
680	[
681	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Whole Box', 'king-addons'),
682	'tab' => Controls_Manager::TAB_STYLE,
683	]
684	);
685
686	$this->add_group_control(
687	Group_Control_Border::get_type(),
688	[
689	'name' => 'king_addons_image_hover_box_border',
690	'selector' => '{{WRAPPER}}',
691	]
692	);
693
694	$this->add_control(
695	'king_addons_image_hover_box_border_radius',
696	[
697	'label' => esc_html__('Border Radius', 'king-addons'),
698	'type' => Controls_Manager::DIMENSIONS,
699	'size_units' => array('px', '%', 'em'),
700	'selectors' => array(
701	'{{WRAPPER}}, {{WRAPPER}} .king-addons-image-hover-box-gradient' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
702	),
703	'condition' => array(
704	'king_addons_image_hover_box_container_image_adv_radius!' => 'yes',
705	),
706	]
707	);
708
709	$this->add_control(
710	'king_addons_image_hover_box_container_image_adv_radius',
711	[
712	'label' => esc_html__('Advanced Border Radius', 'king-addons'),
713	'type' => Controls_Manager::SWITCHER,
714	'description' => esc_html__('Apply custom radius values. Get the radius value from ', 'king-addons') . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>',
715	]
716	);
717
718	$this->add_control(
719	'king_addons_image_hover_box_container_image_adv_radius_value',
720	[
721	'label' => esc_html__('Border Radius', 'king-addons'),
722	'type' => Controls_Manager::TEXT,
723	'dynamic' => array('active' => true),
724	'selectors' => array(
725	'{{WRAPPER}}' => 'border-radius: {{VALUE}};',
726	),
727	'condition' => array(
728	'king_addons_image_hover_box_container_image_adv_radius' => 'yes',
729	),
730	]
731	);
732
733	$this->add_group_control(
734	Group_Control_Box_Shadow::get_type(),
735	[
736	'name' => 'king_addons_image_hover_box_shadow',
737	'selector' => '{{WRAPPER}}',
738	]
739	);
740
741	$this->add_group_control(
742	Group_Control_Background::get_type(),
743	[
744	'name' => 'king_addons_image_hover_box_gradient_color',
745	'types' => array('gradient'),
746	'separator' => 'before',
747	'selector' => '{{WRAPPER}} .king-addons-image-hover-box-gradient:before, {{WRAPPER}} .king-addons-image-hover-box-gradient:after',
748	'condition' => array(
749	'king_addons_image_hover_box_image_layout' => 'layout-11',
750	),
751	]
752	);
753
754	$this->add_control(
755	'king_addons_image_hover_box_first_layer_speed',
756	[
757	'label' => esc_html__('First Layer Transition Speed (seconds)', 'king-addons'),
758	'type' => Controls_Manager::SLIDER,
759	'default' => array(
760	'size' => 0.3,
761	),
762	'range' => array(
763	'px' => array(
764	'min' => 0,
765	'max' => 3,
766	'step' => 0.1,
767	),
768	),
769	'selectors' => array(
770	'{{WRAPPER}} .king-addons-image-hover-box-layout-11:hover .king-addons-image-hover-box-gradient:after' => 'transition-delay: {{SIZE}}s',
771	'{{WRAPPER}} .king-addons-image-hover-box-layout-11 .king-addons-image-hover-box-gradient:before' => 'transition: transform 0.3s ease-out {{SIZE}}s',
772	),
773	'condition' => array(
774	'king_addons_image_hover_box_image_layout' => 'layout-11',
775	),
776	]
777	);
778
779	$this->add_control(
780	'king_addons_image_hover_box_second_layer_speed',
781	[
782	'label' => esc_html__('Second Layer Transition Delay (seconds)', 'king-addons'),
783	'type' => Controls_Manager::SLIDER,
784	'default' => array(
785	'size' => 0.15,
786	),
787	'range' => array(
788	'px' => array(
789	'min' => 0,
790	'max' => 3,
791	'step' => 0.1,
792	),
793	),
794	'selectors' => array(
795	'{{WRAPPER}} .king-addons-image-hover-box-layout-11:hover .king-addons-image-hover-box-gradient:before' => 'transition-delay: {{SIZE}}s',
796	'{{WRAPPER}} .king-addons-image-hover-box-layout-11 .king-addons-image-hover-box-gradient:after' => 'transition: transform 0.3s ease-out {{SIZE}}s',
797
798	),
799	'condition' => array(
800	'king_addons_image_hover_box_image_layout' => 'layout-11',
801	),
802	]
803	);
804
805
806
807
808	$this->end_controls_section();
809
810
811	}
812
813	protected function render(): void
814	{
815	$settings = $this->get_settings_for_display();
816
817	// Define allowed tags and attributes for img tag
818	$allowed_tags = wp_kses_allowed_html('post');
819	$allowed_tags['img']['srcset'] = true;
820	$allowed_tags['img']['sizes'] = true;
821	$allowed_tags['img']['decoding'] = true;
822	$allowed_tags['img']['loading'] = true;
823
824	$title = '<' . esc_html($settings['king_addons_image_hover_box_title_tag']) . ' class="king-addons-image-hover-box-text-title">' . esc_html($settings['king_addons_image_hover_box_title']) . '</' . esc_html($settings['king_addons_image_hover_box_title_tag']) . '>';
825
826	$layout_class = 'king-addons-image-hover-box-' . $settings['king_addons_image_hover_box_image_layout'];
827	$hover_class = ' king-addons-image-hover-box-' . $settings['king_addons_image_hover_box_hover_effect'];
828	$is_active_class = 'yes' === $settings['king_addons_image_hover_box_active'] ? ' king-addons-image-hover-box-active' : '';
829
830	?>
831	<div class="king-addons-image-hover-box king-addons-image-hover-box-min-height <?php echo esc_attr($layout_class . $hover_class . $is_active_class) ?>">
832	<?php if ('layout-7' === $settings['king_addons_image_hover_box_image_layout'] \|\| 'layout-8' === $settings['king_addons_image_hover_box_image_layout']) : ?>
833	<div class="king-addons-image-hover-box-border">
834	<div class="king-addons-image-hover-box-br king-addons-image-hover-box-bleft king-addons-image-hover-box-border-lr"></div>
835	<div class="king-addons-image-hover-box-br king-addons-image-hover-box-bright king-addons-image-hover-box-border-lr"></div>
836	<div class="king-addons-image-hover-box-br king-addons-image-hover-box-btop king-addons-image-hover-box-border-tb"></div>
837	<div class="king-addons-image-hover-box-br king-addons-image-hover-box-bottom king-addons-image-hover-box-border-tb"></div>
838	</div>
839	<?php endif; ?>
840	<?php if (!empty($settings['king_addons_image_hover_box_image']['url'])) : ?>
841	<?php
842	$image_html = Group_Control_Image_Size::get_attachment_image_html($settings, 'king_addons_image_hover_box_image_size', 'king_addons_image_hover_box_image');
843	echo wp_kses($image_html, $allowed_tags);
844	?>
845	<?php endif; ?>
846	<?php if ('layout-11' === $settings['king_addons_image_hover_box_image_layout']) : ?>
847	<div class="king-addons-image-hover-box-gradient"></div>
848	<?php endif; ?>
849	<div class="king-addons-image-hover-box-text">
850	<?php if ('layout-7' === $settings['king_addons_image_hover_box_image_layout']) : ?>
851	<div class="king-addons-image-hover-box-text-centered">
852	<?php endif; ?>
853	<?php
854	echo wp_kses_post($title);
855	if (!empty($settings['king_addons_image_hover_box_description'])) :
856	?>
857	<div class="king-addons-image-hover-box-text-description">
858	<?php echo wp_kses_post($this->parse_text_editor($settings['king_addons_image_hover_box_description']));
859	?>
860	</div>
861	<?php endif; ?>
862	<?php if ('layout-7' === $settings['king_addons_image_hover_box_image_layout']) : ?>
863	</div>
864	<?php endif; ?>
865	</div>
866	<?php
867	if ($settings['king_addons_image_hover_box_image_custom_link']['url']) :
868	?>
869	<a href="<?php echo esc_url($settings['king_addons_image_hover_box_image_custom_link']['url']); ?>"<?php
870	echo(($settings['king_addons_image_hover_box_image_custom_link']['is_external']) ? ' target="_blank"' : '');
871	echo(($settings['king_addons_image_hover_box_image_custom_link']['nofollow']) ? ' rel="nofollow"' : ''); ?>
872	class="king-addons-image-hover-box-link"></a>
873	<?php endif; ?>
874	</div>
875	<?php
876	}
877	}