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

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

885 lines 35.4 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Image_Size;
9	use Elementor\Group_Control_Typography;
10	use Elementor\Icons_Manager;
11	use Elementor\Repeater;
12	use Elementor\Utils;
13	use Elementor\Widget_Base;
14
15	/** @noinspection SpellCheckingInspection */
16	if (!defined('ABSPATH')) {
17	exit; // Exit if accessed directly.
18	}
19
20
21
22	class Image_Hotspots extends Widget_Base
23	{
24
25
26	public function get_name(): string
27	{
28	return 'king-addons-image-hotspots';
29	}
30
31	public function get_title(): string
32	{
33	return esc_html__('Image Hotspots', 'king-addons');
34	}
35
36	public function get_icon(): string
37	{
38	return 'king-addons-icon king-addons-image-hotspots';
39	}
40
41	public function get_style_depends(): array
42	{
43	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-image-hotspots-style'];
44	}
45
46	public function get_categories(): array
47	{
48	return ['king-addons'];
49	}
50
51	public function get_keywords(): array
52	{
53	return ['image', 'images', 'hotspot', 'hotspots', 'popup', 'animation', 'animated', 'spot', 'spots', 'effect',
54	'interactive', 'click', 'target', 'point', 'dot', 'dots', 'point', 'points', 'pulsation', 'mouse', 'hover',
55	'over', 'hover over', 'picture', 'king', 'addons', 'kingaddons', 'king-addons', 'hot', 'hot spot'];
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	/** START TAB: CONTENT ===================== */
66	/** SECTION: Image ===================== */
67	$this->start_controls_section(
68	'kng_img_hotspots_section_image',
69	[
70	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Image', 'king-addons'),
71	]
72	);
73
74	$this->add_control(
75	'kng_img_hotspots_image',
76	[
77	'label' => esc_html__('Image', 'king-addons'),
78	'type' => Controls_Manager::MEDIA,
79	'default' => [
80	'url' => Utils::get_placeholder_image_src(),
81	],
82	]
83	);
84
85	$this->add_group_control(
86	Group_Control_Image_Size::get_type(),
87	[
88	'name' => 'kng_img_hotspots_image_size',
89	'default' => 'full',
90	'separator' => 'before',
91	]
92	);
93
94	$this->add_group_control(
95	Group_Control_Border::get_type(),
96	[
97	'name' => 'kng_img_hotspots_image_border',
98	'selector' => '{{WRAPPER}} .king-addons-image-hotspots-image',
99	]
100	);
101
102	$this->add_group_control(
103	Group_Control_Box_Shadow::get_type(),
104	[
105	'name' => 'kng_img_hotspots_image_shadow',
106	'selector' => '{{WRAPPER}} .king-addons-image-hotspots-image',
107	]
108	);
109
110	$this->add_responsive_control(
111	'kng_img_hotspots_image_border_radius',
112	[
113	'label' => esc_html__('Border Radius', 'king-addons'),
114	'type' => Controls_Manager::DIMENSIONS,
115	'size_units' => ['px', '%'],
116	'selectors' => [
117	'{{WRAPPER}} .king-addons-image-hotspots-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
118	]
119	]
120	);
121
122	$this->end_controls_section();
123	/** END SECTION: Image ===================== */
124
125	/** SECTION: Hotspots ===================== */
126	$this->start_controls_section(
127	'kng_img_hotspots_section_hotspots',
128	[
129	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Hotspots', 'king-addons'),
130	]
131	);
132
133	$repeater = new Repeater();
134
135	$repeater->start_controls_tabs('kng_img_hotspots_tabs_hotspot_item');
136
137	$repeater->start_controls_tab(
138	'kng_img_hotspots_tab_hotspot_item_content',
139	[
140	'label' => esc_html__('Content', 'king-addons'),
141	]
142	);
143
144	$repeater->add_control(
145	'kng_img_hotspots_hotspot_icon',
146	[
147	'label' => esc_html__('Icon', 'king-addons'),
148	'type' => Controls_Manager::ICONS,
149	'skin' => 'inline',
150	'label_block' => false,
151	'default' => [
152	'value' => 'fas fa-plus',
153	'library' => 'fa-solid',
154	],
155	]
156	);
157
158	$repeater->add_control(
159	'kng_img_hotspots_hotspot_icon_text',
160	[
161	'label' => esc_html__('Icon Text', 'king-addons'),
162	'type' => Controls_Manager::TEXT,
163	]
164	);
165
166	$repeater->add_control(
167	'kng_img_hotspots_hotspot_icon_link',
168	[
169	'label' => esc_html__('Icon Link', 'king-addons'),
170	'type' => Controls_Manager::URL,
171	'separator' => 'before',
172	]
173	);
174
175	/** @noinspection SpellCheckingInspection */
176	$repeater->add_control(
177	'kng_img_hotspots_icon_position_custom_reverse_switcher',
178	[
179	'label' => esc_html__('Reverse Icon Position', 'king-addons'),
180	'type' => Controls_Manager::SWITCHER,
181	'description' => esc_html__('Reverse icon position for this hotspot instead of global from the Style tab.', 'king-addons'),
182	'separator' => 'before',
183	]
184	);
185
186	$repeater->add_control(
187	'kng_img_hotspots_icon_size_custom_switcher',
188	[
189	'label' => esc_html__('Custom Icon Size', 'king-addons'),
190	'type' => Controls_Manager::SWITCHER,
191	'description' => esc_html__('Use custom icon size for this hotspot instead of global from the Style tab.', 'king-addons'),
192	'separator' => 'before',
193	]
194	);
195
196	$repeater->add_responsive_control(
197	'kng_img_hotspots_icon_size_custom',
198	[
199	'label' => esc_html__('Icon Size', 'king-addons'),
200	'type' => Controls_Manager::NUMBER,
201	'step' => 1,
202	'min' => 0,
203	'default' => 15,
204	'selectors' => [
205	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-hotspot-content i' => 'font-size: {{VALUE}}px; width: {{VALUE}}px;',
206	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-hotspot-content img' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
207	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-hotspot-content svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;'
208	],
209	'condition' => [
210	'kng_img_hotspots_icon_size_custom_switcher' => 'yes',
211	],
212	]
213	);
214
215	$repeater->add_control(
216	'kng_img_hotspots_hotspot_custom_colors',
217	[
218	'label' => esc_html__('Custom Colors', 'king-addons'),
219	'type' => Controls_Manager::SWITCHER,
220	'description' => esc_html__('Use custom colors for this hotspot instead of global from the Style tab.', 'king-addons'),
221	'separator' => 'before',
222	]
223	);
224
225	$repeater->add_control(
226	'kng_img_hotspots_hotspot_custom_icon_text_color',
227	[
228	'label' => esc_html__('Icon & Text Color (optional)', 'king-addons'),
229	'type' => Controls_Manager::COLOR,
230	'default' => '#ffffff',
231	'selectors' => [
232	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-hotspot-content' => 'color: {{VALUE}}',
233	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-hotspot-content svg' => 'fill: {{VALUE}}',
234	],
235	'condition' => [
236	'kng_img_hotspots_hotspot_custom_colors' => 'yes',
237	],
238	]
239	);
240
241	$repeater->add_control(
242	'kng_img_hotspots_hotspot_custom_bg_color',
243	[
244	'label' => esc_html__('Background Color', 'king-addons'),
245	'type' => Controls_Manager::COLOR,
246	'default' => '#574ff7',
247	'selectors' => [
248	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-hotspot-content' => 'background-color: {{VALUE}}',
249	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-hotspot-item:before' => 'background-color: {{VALUE}}',
250	'{{WRAPPER}} {{CURRENT_ITEM}}.king-addons-hotspot-item:after' => 'background-color: {{VALUE}}'
251	],
252	'condition' => [
253	'kng_img_hotspots_hotspot_custom_colors' => 'yes',
254	],
255	]
256	);
257
258	$repeater->add_control(
259	'kng_img_hotspots_hotspot_tooltip',
260	[
261	'label' => esc_html__('Tooltip', 'king-addons'),
262	'type' => Controls_Manager::SWITCHER,
263	'default' => 'yes',
264	'separator' => 'before',
265	]
266	);
267
268	$repeater->add_control(
269	'kng_img_hotspots_hotspot_tooltip_always_show',
270	[
271	'label' => esc_html__('Always show tooltip', 'king-addons'),
272	'type' => Controls_Manager::SWITCHER,
273	'default' => 'no',
274	'condition' => [
275	'kng_img_hotspots_hotspot_tooltip' => 'yes',
276	],
277	]
278	);
279
280	$repeater->add_control(
281	'kng_img_hotspots_hotspot_tooltip_content',
282	[
283	'label' => '',
284	'type' => Controls_Manager::WYSIWYG,
285	'default' => esc_html__("Hotspot's Tooltip Text", "king-addons"),
286	'condition' => [
287	'kng_img_hotspots_hotspot_tooltip' => 'yes',
288	],
289	]
290	);
291
292	$repeater->end_controls_tab();
293
294	$repeater->start_controls_tab(
295	'kng_img_hotspots_tab_hotspot_item_position',
296	[
297	'label' => esc_html__('Position', 'king-addons'),
298	]
299	);
300
301	$repeater->add_responsive_control(
302	'kng_img_hotspots_hotspot_h_position',
303	[
304	'type' => Controls_Manager::SLIDER,
305	'label' => esc_html__('Horizontal Position (%)', 'king-addons'),
306	'size_units' => ['%'],
307	'range' => [
308	'%' => [
309	'min' => 0,
310	'max' => 100,
311	]
312	],
313	'default' => [
314	'unit' => '%',
315	'size' => 50,
316	],
317	'selectors' => [
318	'{{CURRENT_ITEM}}.king-addons-hotspot-item' => 'left: {{SIZE}}{{UNIT}};',
319	],
320	'separator' => 'before',
321	]
322	);
323
324	$repeater->add_responsive_control(
325	'kng_img_hotspots_hotspot_v_position',
326	[
327	'type' => Controls_Manager::SLIDER,
328	'label' => esc_html__('Vertical Position (%)', 'king-addons'),
329	'size_units' => ['%'],
330	'range' => [
331	'%' => [
332	'min' => 0,
333	'max' => 100,
334	]
335	],
336	'default' => [
337	'unit' => '%',
338	'size' => 50,
339	],
340	'selectors' => [
341	'{{CURRENT_ITEM}}.king-addons-hotspot-item' => 'top: {{SIZE}}{{UNIT}};',
342	],
343	'separator' => 'before',
344	]
345	);
346
347	$repeater->end_controls_tab();
348
349	$repeater->end_controls_tabs();
350
351	$this->add_control(
352	'kng_img_hotspots_hotspot_items',
353	[
354	'type' => Controls_Manager::REPEATER,
355	'fields' => $repeater->get_controls(),
356	'default' => [
357	[
358	'kng_img_hotspots_hotspot_icon_text' => '',
359	'kng_img_hotspots_hotspot_tooltip_content' => 'Hotspot #1',
360	'kng_img_hotspots_hotspot_h_position' => [
361	'unit' => '%',
362	'size' => 35,
363	],
364	'kng_img_hotspots_hotspot_v_position' => [
365	'unit' => '%',
366	'size' => 40,
367	],
368	],
369	[
370	'kng_img_hotspots_hotspot_icon_text' => '',
371	'kng_img_hotspots_hotspot_tooltip_content' => 'Hotspot #2',
372	'kng_img_hotspots_hotspot_h_position' => [
373	'unit' => '%',
374	'size' => 55,
375	],
376	'kng_img_hotspots_hotspot_v_position' => [
377	'unit' => '%',
378	'size' => 20,
379	],
380	],
381
382	],
383	'title_field' => '{{ kng_img_hotspots_hotspot_tooltip_content }}',
384	]
385	);
386
387	$this->end_controls_section();
388	/** END SECTION: Hotspots ===================== */
389	/** END TAB: CONTENT ===================== */
390
391	/** TAB: STYLE ===================== */
392	/** SECTION: Hotspots ===================== */
393	$this->start_controls_section(
394	'kng_img_hotspots_section_style_hotspots',
395	[
396	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Hotspots', 'king-addons'),
397	'tab' => Controls_Manager::TAB_STYLE,
398	]
399	);
400
401	$this->add_control(
402	'kng_img_hotspots_hotspot_color',
403	[
404	'label' => esc_html__('Icon & Title Color (optional)', 'king-addons'),
405	'type' => Controls_Manager::COLOR,
406	'default' => '#ffffff',
407	'selectors' => [
408	'{{WRAPPER}} .king-addons-hotspot-content' => 'color: {{VALUE}}',
409	'{{WRAPPER}} .king-addons-hotspot-content svg' => 'fill: {{VALUE}}',
410	],
411	]
412	);
413
414	$this->add_control(
415	'kng_img_hotspots_hotspot_bg_color',
416	[
417	'label' => esc_html__('Background Color', 'king-addons'),
418	'type' => Controls_Manager::COLOR,
419	'default' => '#574ff7',
420	'selectors' => [
421	'{{WRAPPER}} .king-addons-hotspot-content' => 'background-color: {{VALUE}}',
422	'{{WRAPPER}} .king-addons-hotspot-item:before' => 'background-color: {{VALUE}}',
423	'{{WRAPPER}} .king-addons-hotspot-item:after' => 'background-color: {{VALUE}}'
424	],
425	]
426	);
427
428	$this->add_control(
429	'kng_img_hotspots_hotspot_item_animation',
430	[
431	'label' => esc_html__('Pulse Animation', 'king-addons'),
432	'type' => Controls_Manager::SWITCHER,
433	'default' => 'yes',
434	'prefix_class' => 'king-addons-hotspot-item-animation-',
435	'frontend_available' => true
436	]
437	);
438
439	$this->add_group_control(
440	Group_Control_Box_Shadow::get_type(),
441	[
442	'name' => 'kng_img_hotspots_hotspot_box_shadow',
443	'selector' => '{{WRAPPER}} .king-addons-hotspot-content',
444	]
445	);
446
447	$this->add_group_control(
448	Group_Control_Typography::get_type(),
449	[
450	'label' => esc_html__('Title Typography', 'king-addons'),
451	'name' => 'kng_img_hotspots_title_typography',
452	'selector' => '{{WRAPPER}} .king-addons-hotspot-icon-text',
453	]
454	);
455
456	/** Icon ===================== */
457	$this->add_control(
458	'kng_img_hotspots_icon_section',
459	[
460	'label' => esc_html__('Icon', 'king-addons'),
461	'type' => Controls_Manager::HEADING,
462	'separator' => 'before',
463	]
464	);
465
466	/** @noinspection SpellCheckingInspection */
467	$this->add_control(
468	'kng_img_hotspots_icon_position',
469	[
470	'label' => esc_html__('Position', 'king-addons'),
471	'type' => Controls_Manager::CHOOSE,
472	'label_block' => false,
473	'default' => 'left',
474	'options' => [
475	'left' => [
476	'title' => esc_html__('Left', 'king-addons'),
477	'icon' => 'eicon-h-align-left',
478	],
479	'right' => [
480	'title' => esc_html__('Right', 'king-addons'),
481	'icon' => 'eicon-h-align-right',
482	],
483	],
484	'prefix_class' => 'king-addons-hotspot-icon-text-position-',
485	]
486	);
487
488	$this->add_responsive_control(
489	'kng_img_hotspots_icon_size',
490	[
491	'label' => esc_html__('Icon Size', 'king-addons'),
492	'type' => Controls_Manager::NUMBER,
493	'step' => 1,
494	'min' => 0,
495	'default' => 15,
496	'selectors' => [
497	'{{WRAPPER}} .king-addons-hotspot-content i' => 'font-size: {{VALUE}}px; width: {{VALUE}}px;',
498	'{{WRAPPER}} .king-addons-hotspot-content img' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
499	'{{WRAPPER}} .king-addons-hotspot-content svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;'
500	],
501	]
502	);
503
504	$this->add_responsive_control(
505	'kng_img_hotspots_icon_box_w',
506	[
507	'label' => esc_html__('Box Minimum Width', 'king-addons'),
508	'type' => Controls_Manager::NUMBER,
509	'step' => 1,
510	'min' => 0,
511	'default' => 40,
512	'selectors' => [
513	'{{WRAPPER}} .king-addons-hotspot-content' => 'min-width: {{VALUE}}px;',
514	],
515	]
516	);
517
518	$this->add_responsive_control(
519	'kng_img_hotspots_icon_box_h',
520	[
521	'label' => esc_html__('Box Minimum Height', 'king-addons'),
522	'type' => Controls_Manager::NUMBER,
523	'step' => 1,
524	'min' => 0,
525	'default' => 40,
526	'selectors' => [
527	'{{WRAPPER}} .king-addons-hotspot-content' => 'min-height: {{VALUE}}px;',
528	],
529	]
530	);
531
532	$this->add_responsive_control(
533	'kng_img_hotspots_space_b_icon_title',
534	[
535	'label' => esc_html__('Space between icon and title (px)', 'king-addons'),
536	'type' => Controls_Manager::NUMBER,
537	'step' => 1,
538	'min' => 0,
539	'default' => 10,
540	'selectors' => [
541	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-left .king-addons-has-hotspot-icon-text:not(.king-addons-has-hotspot-icon-reverse) i' => 'margin-right: {{VALUE}}px;',
542	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-right .king-addons-has-hotspot-icon-text:not(.king-addons-has-hotspot-icon-reverse) i' => 'margin-left: {{VALUE}}px;',
543	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-left .king-addons-has-hotspot-icon-text:not(.king-addons-has-hotspot-icon-reverse) img' => 'margin-right: {{VALUE}}px;',
544	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-right .king-addons-has-hotspot-icon-text:not(.king-addons-has-hotspot-icon-reverse) img' => 'margin-left: {{VALUE}}px;',
545	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-left .king-addons-has-hotspot-icon-text:not(.king-addons-has-hotspot-icon-reverse) svg' => 'margin-right: {{VALUE}}px;',
546	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-right .king-addons-has-hotspot-icon-text:not(.king-addons-has-hotspot-icon-reverse) svg' => 'margin-left: {{VALUE}}px;',
547	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-left .king-addons-has-hotspot-icon-text.king-addons-has-hotspot-icon-reverse i' => 'margin-left: {{VALUE}}px;',
548	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-right .king-addons-has-hotspot-icon-text.king-addons-has-hotspot-icon-reverse i' => 'margin-right: {{VALUE}}px;',
549	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-left .king-addons-has-hotspot-icon-text.king-addons-has-hotspot-icon-reverse img' => 'margin-left: {{VALUE}}px;',
550	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-right .king-addons-has-hotspot-icon-text.king-addons-has-hotspot-icon-reverse img' => 'margin-right: {{VALUE}}px;',
551	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-left .king-addons-has-hotspot-icon-text.king-addons-has-hotspot-icon-reverse svg' => 'margin-left: {{VALUE}}px;',
552	'{{WRAPPER}}.king-addons-hotspot-icon-text-position-right .king-addons-has-hotspot-icon-text.king-addons-has-hotspot-icon-reverse svg' => 'margin-right: {{VALUE}}px;',
553	],
554	]
555	);
556
557	$this->add_responsive_control(
558	'kng_img_hotspots_icon_box_padding',
559	[
560	'label' => esc_html__('Box Padding', 'king-addons'),
561	'type' => Controls_Manager::DIMENSIONS,
562	'size_units' => ['px'],
563	'default' => [
564	'top' => 20,
565	'right' => 20,
566	'bottom' => 20,
567	'left' => 20,
568	],
569	'selectors' => [
570	'{{WRAPPER}} .king-addons-hotspot-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
571	],
572	]
573	);
574	/** END: Icon ===================== */
575
576	/** Border ===================== */
577	$this->add_control(
578	'kng_img_hotspots_border_section',
579	[
580	'label' => esc_html__('Border', 'king-addons'),
581	'type' => Controls_Manager::HEADING,
582	'separator' => 'before',
583	]
584	);
585
586	$this->add_control(
587	'kng_img_hotspots_hotspot_border_type',
588	[
589	'label' => esc_html__('Border Type', 'king-addons'),
590	'type' => Controls_Manager::SELECT,
591	'options' => [
592	'none' => esc_html__('None', 'king-addons'),
593	'solid' => esc_html__('Solid', 'king-addons'),
594	'double' => esc_html__('Double', 'king-addons'),
595	'dotted' => esc_html__('Dotted', 'king-addons'),
596	'dashed' => esc_html__('Dashed', 'king-addons'),
597	'groove' => esc_html__('Groove', 'king-addons'),
598	],
599	'default' => 'none',
600	'selectors' => [
601	'{{WRAPPER}} .king-addons-hotspot-content' => 'border-style: {{VALUE}};',
602	],
603	]
604	);
605
606	$this->add_control(
607	'kng_img_hotspots_hotspot_border_color',
608	[
609	'label' => esc_html__('Border Color', 'king-addons'),
610	'type' => Controls_Manager::COLOR,
611	'default' => '#574ff7',
612	'selectors' => [
613	'{{WRAPPER}} .king-addons-hotspot-content' => 'border-color: {{VALUE}}',
614	],
615	]
616	);
617
618	$this->add_responsive_control(
619	'kng_img_hotspots_hotspot_border_width',
620	[
621	'label' => esc_html__('Border Width', 'king-addons'),
622	'type' => Controls_Manager::DIMENSIONS,
623	'size_units' => ['px'],
624	'default' => [
625	'top' => 1,
626	'right' => 1,
627	'bottom' => 1,
628	'left' => 1,
629	],
630	'selectors' => [
631	'{{WRAPPER}} .king-addons-hotspot-content' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
632	],
633	'condition' => [
634	'kng_img_hotspots_hotspot_border_type!' => 'none',
635	],
636	]
637	);
638
639	$this->add_responsive_control(
640	'kng_img_hotspots_hotspot_border_radius',
641	[
642	'label' => esc_html__('Border Radius', 'king-addons'),
643	'type' => Controls_Manager::DIMENSIONS,
644	'size_units' => ['px', '%'],
645	'default' => [
646	'top' => 100,
647	'right' => 100,
648	'bottom' => 100,
649	'left' => 100,
650	],
651	'selectors' => [
652	'{{WRAPPER}} .king-addons-hotspot-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
653	'{{WRAPPER}} .king-addons-hotspot-item:before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
654	'{{WRAPPER}} .king-addons-hotspot-item:after' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
655	],
656	'separator' => 'before',
657	]
658	);
659	/** END: Border ===================== */
660
661	$this->end_controls_section();
662	/** END SECTION: Hotspots ===================== */
663
664	/** SECTION: Tooltips ===================== */
665	$this->start_controls_section(
666	'kng_img_hotspots_section_style_tooltips',
667	[
668	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Tooltips', 'king-addons'),
669	'tab' => Controls_Manager::TAB_STYLE,
670	]
671	);
672
673	$this->add_control(
674	'kng_img_hotspots_tooltip_animation',
675	[
676	'label' => esc_html__('Appearing Animation', 'king-addons'),
677	'type' => Controls_Manager::SELECT,
678	'options' => [
679	'simple' => esc_html__('Simple', 'king-addons'),
680	'shake' => esc_html__('Shake', 'king-addons'),
681	'double-shake' => esc_html__('Double Shake', 'king-addons'),
682	'stretch' => esc_html__('Stretch', 'king-addons'),
683	'floating' => esc_html__('Floating', 'king-addons'),
684	],
685	'default' => 'simple',
686	'prefix_class' => 'king-addons-hotspot-animation-',
687	]
688	);
689
690	$this->add_control(
691	'kng_img_hotspots_tooltip_color',
692	[
693	'label' => esc_html__('Text Color', 'king-addons'),
694	'type' => Controls_Manager::COLOR,
695	'default' => '#ffffff',
696	'selectors' => [
697	'{{WRAPPER}} .king-addons-hotspot-tooltip-content' => 'color: {{VALUE}}',
698	],
699	]
700	);
701
702	$this->add_control(
703	'kng_img_hotspots_tooltip_bg_color',
704	[
705	'type' => Controls_Manager::COLOR,
706	'label' => esc_html__('Background Color', 'king-addons'),
707	'default' => '#222222',
708	'selectors' => [
709	'{{WRAPPER}} .king-addons-hotspot-tooltip-content' => 'background-color: {{VALUE}}',
710	'{{WRAPPER}} .king-addons-hotspot-tooltip-content:before' => 'border-top-color: {{VALUE}}'
711	],
712	]
713	);
714
715	$this->add_responsive_control(
716	'kng_img_hotspots_tooltip_width',
717	[
718	'label' => esc_html__('Tooltip Width', 'king-addons'),
719	'type' => Controls_Manager::NUMBER,
720	'min' => 50,
721	'step' => 1,
722	'default' => 150,
723	'selectors' => [
724	'{{WRAPPER}} .king-addons-hotspot-tooltip-content' => 'width: {{SIZE}}px;',
725	],
726	]
727	);
728
729	$this->add_group_control(
730	Group_Control_Box_Shadow::get_type(),
731	[
732	'name' => 'kng_img_hotspots_tooltip_box_shadow',
733	'selector' => '{{WRAPPER}} .king-addons-hotspot-tooltip-content',
734	]
735	);
736
737	$this->add_group_control(
738	Group_Control_Typography::get_type(),
739	[
740	'name' => 'kng_img_hotspots_tooltip_typography',
741	'label' => esc_html__('Typography', 'king-addons'),
742	'selector' => '{{WRAPPER}} .king-addons-hotspot-tooltip-content',
743	]
744	);
745
746	$this->add_responsive_control(
747	'kng_img_hotspots_tooltip_padding',
748	[
749	'label' => esc_html__('Padding', 'king-addons'),
750	'type' => Controls_Manager::DIMENSIONS,
751	'size_units' => ['px',],
752	'default' => [
753	'top' => 10,
754	'right' => 10,
755	'bottom' => 10,
756	'left' => 10,
757	],
758	'selectors' => [
759	'{{WRAPPER}} .king-addons-hotspot-tooltip-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
760	],
761	'separator' => 'before',
762	]
763	);
764
765	$this->add_responsive_control(
766	'kng_img_hotspots_tooltip_border_radius',
767	[
768	'label' => esc_html__('Border Radius', 'king-addons'),
769	'type' => Controls_Manager::DIMENSIONS,
770	'size_units' => ['px', '%'],
771	'default' => [
772	'top' => 5,
773	'right' => 5,
774	'bottom' => 5,
775	'left' => 5,
776	],
777	'selectors' => [
778	'{{WRAPPER}} .king-addons-hotspot-tooltip-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
779	],
780	'separator' => 'before',
781	]
782	);
783
784	$this->end_controls_section();
785	/** END SECTION: Tooltips ===================== */
786	/** END TAB: STYLE ===================== */
787	}
788
789	protected function render(): void
790	{
791	$settings = $this->get_settings();
792	/** START: Hotspots Container ===================== */
793	?>
794	<div class="king-addons-image-hotspots-container">
795	<div class="king-addons-image-hotspots-image">
796	<?php
797	// Define allowed tags and attributes
798	$allowed_tags = wp_kses_allowed_html('post');
799	$allowed_tags['img']['srcset'] = true; // Allow srcset attribute for img tag
800	$allowed_tags['img']['sizes'] = true; // Allow sizes attribute for img tag
801	$allowed_tags['img']['decoding'] = true; // Allow decoding attribute for img tag
802	$allowed_tags['img']['loading'] = true; // Allow loading attribute for img tag. It is for the lazy loading possibility.
803
804	$image_html = Group_Control_Image_Size::get_attachment_image_html($settings, 'kng_img_hotspots_image_size', 'kng_img_hotspots_image');
805	echo wp_kses($image_html, $allowed_tags);
806	?>
807	</div>
808	<div class="king-addons-image-hotspots-items">
809	<?php
810
811	$item_count = 0;
812
813	/** @noinspection PhpUnusedLocalVariableInspection */
814	foreach ($settings['kng_img_hotspots_hotspot_items'] as $key => $item) {
815
816	$hotspot_tag = 'div';
817	$tooltip_always_show = '';
818	$icon_reverse_position = '';
819
820	if ('yes' === $item['kng_img_hotspots_hotspot_tooltip_always_show']) {
821	$tooltip_always_show = ' king-addons-hotspot-tooltip-always-show';
822	}
823
824	if ('yes' === $item['kng_img_hotspots_icon_position_custom_reverse_switcher']) {
825	$icon_reverse_position = ' king-addons-has-hotspot-icon-reverse';
826	}
827
828	$this->add_render_attribute('kng_img_hotspots_hotspot_item_attribute' . $item_count, 'class', 'elementor-repeater-item-' . esc_attr($item['_id']) . ' king-addons-hotspot-item' . esc_attr($tooltip_always_show));
829	$this->add_render_attribute('kng_img_hotspots_hotspot_content_attribute' . $item_count, 'class', 'elementor-repeater-item-' . esc_attr($item['_id']) . ' king-addons-hotspot-content');
830
831	if ('' !== $item['kng_img_hotspots_hotspot_icon_text']) {
832	$this->add_render_attribute('kng_img_hotspots_hotspot_content_attribute' . $item_count, 'class', 'king-addons-has-hotspot-icon-text' . esc_attr($icon_reverse_position));
833	} else {
834	$this->add_render_attribute('kng_img_hotspots_hotspot_content_attribute' . $item_count, 'class', 'king-addons-has-not-hotspot-icon-text');
835	}
836
837	if ('' !== $item['kng_img_hotspots_hotspot_icon_link']['url']) {
838
839	$hotspot_tag = 'a';
840
841	$this->add_render_attribute('kng_img_hotspots_hotspot_content_attribute' . $item_count, 'href', esc_url($item['kng_img_hotspots_hotspot_icon_link']['url']));
842
843	if ($item['kng_img_hotspots_hotspot_icon_link']['is_external']) {
844	$this->add_render_attribute('kng_img_hotspots_hotspot_content_attribute' . $item_count, 'target', '_blank');
845	}
846
847	if ($item['kng_img_hotspots_hotspot_icon_link']['nofollow']) {
848	$this->add_render_attribute('kng_img_hotspots_hotspot_content_attribute' . $item_count, 'rel', 'nofollow');
849	}
850
851	}
852
853	/** START: Hotspot Item ===================== */
854	echo '<div class="elementor-repeater-item-' .
855	esc_attr($item['_id']) . ' king-addons-hotspot-item' .
856	esc_attr($tooltip_always_show) . '">';
857
858	$html = '<' . esc_attr($hotspot_tag) . ' ' . $this->get_render_attribute_string('kng_img_hotspots_hotspot_content_attribute' . $item_count) . '>';
859	echo wp_kses($html, wp_kses_allowed_html('post'));
860
861	Icons_Manager::render_icon($item['kng_img_hotspots_hotspot_icon']);
862
863	if ('' !== $item['kng_img_hotspots_hotspot_icon_text']) {
864	echo '<span class="king-addons-hotspot-icon-text">' . esc_html($item['kng_img_hotspots_hotspot_icon_text']) . '</span>';
865	}
866
867	echo '</' . esc_attr($hotspot_tag) . '>';
868
869	if ('yes' === $item['kng_img_hotspots_hotspot_tooltip'] && '' !== $item['kng_img_hotspots_hotspot_tooltip_content']) {
870	echo '<div class="king-addons-hotspot-tooltip-content">';
871	echo wp_kses_post($item['kng_img_hotspots_hotspot_tooltip_content']);
872	echo '</div>';
873	}
874
875	echo '</div>';
876	/** END: Hotspot Item ===================== */
877
878	$item_count++;
879	} ?>
880	</div>
881	</div>
882	<?php
883	/** END: Hotspots Container ===================== */
884	}
885	}