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

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

634 lines 25.5 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Image_Size;
9	use Elementor\Repeater;
10	use Elementor\Utils;
11	use Elementor\Widget_Base;
12
13	if (!defined('ABSPATH')) {
14	exit; // Exit if accessed directly.
15	}
16
17
18
19	class Hovering_Image_Stack extends Widget_Base
20	{
21
22
23	public function get_name(): string
24	{
25	return 'king-addons-hovering-image-stack';
26	}
27
28	public function get_title(): string
29	{
30	return esc_html__('Hovering Image Stack', 'king-addons');
31	}
32
33	public function get_icon(): string
34	{
35	return 'king-addons-icon king-addons-hovering-image-stack';
36	}
37
38	public function get_style_depends(): array
39	{
40	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-hovering-image-stack-style'];
41	}
42
43	public function get_categories(): array
44	{
45	return ['king-addons'];
46	}
47
48	public function get_keywords(): array
49	{
50	return ['hovering image stack', 'image stack', 'image', 'images', 'before', 'after', 'hovering', 'compare',
51	'hover', 'slider', 'scroll', 'box',
52	'photo', 'photos', 'picture', 'scrolling', 'scroller', 'scrollable', 'animation', 'effect', 'animated',
53	'image hover over', 'image hover', 'hover box', 'image box', 'image layout', 'layout', 'image hover box',
54	'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'picture', 'king', 'addons', 'mouseover',
55	'slide', 'background', 'kingaddons', 'king-addons', 'info box', 'info', 'cta', 'banner',
56	'layout', 'animated box', 'hover text', 'text box', 'text banner'];
57	}
58
59	public function get_custom_help_url()
60	{
61	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
62	}
63
64	public function has_widget_inner_wrapper(): bool {
65	return true;
66	}
67
68	protected function register_controls(): void
69	{
70	/** SECTION: CONTENT */
71	$this->start_controls_section(
72	'king_addons_hovering_image_stack_section_image_stack',
73	[
74	'label' => esc_html__('Image Stack', 'king-addons'),
75	'tab' => Controls_Manager::TAB_CONTENT,
76	]
77	);
78
79	$repeater = new Repeater();
80
81	$repeater->add_control(
82	'king_addons_hovering_image_stack_image',
83	[
84	'label' => esc_html__('Image', 'king-addons'),
85	'type' => Controls_Manager::MEDIA,
86	'default' => [
87	'url' => Utils::get_placeholder_image_src(),
88	],
89	'dynamic' => [
90	'active' => true,
91	],
92	]
93	);
94	$repeater->add_group_control(
95	Group_Control_Image_Size::get_type(),
96	[
97	'name' => 'king_addons_hovering_image_stack_image_size',
98	'default' => 'full',
99	'separator' => 'before',
100	'dynamic' => [
101	'active' => true,
102	],
103	]
104	);
105
106	$repeater->add_control(
107	'king_addons_hovering_image_stack_link',
108	[
109	'label' => esc_html__('Link', 'king-addons'),
110	'type' => Controls_Manager::URL,
111	'label_block' => true,
112	'placeholder' => esc_html__('https://example.com', 'king-addons'),
113	'dynamic' => [
114	'active' => true,
115	]
116	]
117	);
118
119	$repeater->add_responsive_control(
120	'king_addons_hovering_image_stack_image_offset_y',
121	[
122	'label' => esc_html__('Offset Y', 'king-addons'),
123	'type' => Controls_Manager::SLIDER,
124	'size_units' => ['px', '%'],
125	'range' => [
126	'px' => [
127	'min' => -1000,
128	'max' => 1000,
129	'step' => 5,
130	],
131	'%' => [
132	'min' => -100,
133	'max' => 100,
134	],
135	],
136	'default' => [
137	'unit' => 'px',
138	'size' => 0,
139	],
140	'selectors' => [
141	'{{WRAPPER}} .king-addons-hovering-image-stack-item{{CURRENT_ITEM}}' => 'top: {{SIZE}}{{UNIT}};',
142	],
143	]
144	);
145
146	$repeater->add_responsive_control(
147	'king_addons_hovering_image_stack_image_offset_x',
148	[
149	'label' => esc_html__('Offset X', 'king-addons'),
150	'type' => Controls_Manager::SLIDER,
151	'size_units' => ['px', '%'],
152	'range' => [
153	'px' => [
154	'min' => -1000,
155	'max' => 1000,
156	'step' => 5,
157	],
158	'%' => [
159	'min' => -100,
160	'max' => 100,
161	],
162	],
163	'default' => [
164	'unit' => 'px',
165	'size' => 0,
166	],
167	'selectors' => [
168	'{{WRAPPER}} .king-addons-hovering-image-stack-item{{CURRENT_ITEM}}' => 'left: {{SIZE}}{{UNIT}};',
169	],
170	]
171	);
172
173	$repeater->add_responsive_control(
174	'king_addons_hovering_image_stack_image_width',
175	[
176	'label' => esc_html__('Width (px)', 'king-addons'),
177	'type' => Controls_Manager::NUMBER,
178	'step' => 1,
179	'min' => 1,
180	'default' => 200,
181	'selectors' => [
182	'{{WRAPPER}} .king-addons-hovering-image-stack-item{{CURRENT_ITEM}} img' => 'width: {{VALUE}}px;',
183	],
184	'separator' => 'before',
185	]
186	);
187
188	$repeater->add_responsive_control(
189	'king_addons_hovering_image_stack_image_height',
190	[
191	'label' => esc_html__('Height (px)', 'king-addons'),
192	'type' => Controls_Manager::NUMBER,
193	'step' => 1,
194	'min' => 1,
195	'default' => 200,
196	'selectors' => [
197	'{{WRAPPER}} .king-addons-hovering-image-stack-item{{CURRENT_ITEM}} img' => 'height: {{VALUE}}px;',
198	],
199	]
200	);
201
202	$repeater->add_responsive_control(
203	'king_addons_hovering_image_stack_image_fit',
204	[
205	'label' => esc_html__('Image Fit', 'king-addons'),
206	'type' => Controls_Manager::SELECT,
207	'options' => array(
208	'cover' => esc_html__('Cover', 'king-addons'),
209	'fill' => esc_html__('Fill', 'king-addons'),
210	'contain' => esc_html__('Contain', 'king-addons'),
211	),
212	'default' => 'cover',
213	'selectors' => array(
214	'{{WRAPPER}} .king-addons-hovering-image-stack-item{{CURRENT_ITEM}} img' => 'object-fit: {{VALUE}}',
215	),
216	]
217	);
218
219	$repeater->add_responsive_control(
220	'king_addons_hovering_image_stack_image_fit_position',
221	[
222	'label' => esc_html__('Image Fit Position', 'king-addons'),
223	'type' => Controls_Manager::SELECT,
224	'options' => [
225	'top' => esc_html__('Top', 'king-addons'),
226	'bottom' => esc_html__('Bottom', 'king-addons'),
227	'left' => esc_html__('Left', 'king-addons'),
228	'right' => esc_html__('Right', 'king-addons'),
229	'center' => esc_html__('Center', 'king-addons'),
230	],
231	'default' => 'center',
232	'selectors' => [
233	'{{WRAPPER}} .king-addons-hovering-image-stack-item{{CURRENT_ITEM}} img' => 'object-position: {{VALUE}};',
234	],
235	]
236	);
237
238	$repeater->add_responsive_control(
239	'king_addons_hovering_image_stack_image_z_index',
240	[
241	'label' => esc_html__('Z-Index', 'king-addons'),
242	'type' => Controls_Manager::NUMBER,
243	'step' => 1,
244	'selectors' => [
245	'{{WRAPPER}} .king-addons-hovering-image-stack-item{{CURRENT_ITEM}}' => 'z-index: {{VALUE}};',
246	],
247	'separator' => 'before',
248	]
249	);
250
251	$this->add_control(
252	'king_addons_hovering_image_stack_image_list',
253	[
254	'show_label' => true,
255	'label' => esc_html__('Items', 'king-addons'),
256	'type' => Controls_Manager::REPEATER,
257	'fields' => $repeater->get_controls(),
258	'title_field' => '{{{ name }}}',
259	'default' => [
260	[
261	'king_addons_hovering_image_stack_image' => [
262	'url' => Utils::get_placeholder_image_src(),
263	],
264	'king_addons_hovering_image_stack_image_offset_y' => [
265	'size' => 0,
266	'unit' => 'px',
267	],
268	'king_addons_hovering_image_stack_image_offset_x' => [
269	'size' => 35,
270	'unit' => 'px',
271	],
272	],
273	[
274	'king_addons_hovering_image_stack_image' => [
275	'url' => Utils::get_placeholder_image_src(),
276	],
277	'king_addons_hovering_image_stack_image_offset_y' => [
278	'size' => 250,
279	'unit' => 'px',
280	],
281	'king_addons_hovering_image_stack_image_offset_x' => [
282	'size' => 0,
283	'unit' => 'px',
284	],
285	],
286	[
287	'king_addons_hovering_image_stack_image' => [
288	'url' => Utils::get_placeholder_image_src(),
289	],
290	'king_addons_hovering_image_stack_image_offset_y' => [
291	'size' => 100,
292	'unit' => 'px',
293	],
294	'king_addons_hovering_image_stack_image_offset_x' => [
295	'size' => 180,
296	'unit' => 'px',
297	],
298	],
299	],
300	]
301	);
302
303	$this->add_control(
304	'king_addons_hovering_image_stack_image_infinite_animation',
305	[
306	'label' => esc_html__('Infinite Animation', 'king-addons'),
307	'type' => Controls_Manager::SELECT,
308	'options' => [
309	'' => esc_html__('None', 'king-addons'),
310	'king-addons-hovering-image-stack-bounce-sm' => esc_html__('Bounce Small', 'king-addons'),
311	'king-addons-hovering-image-stack-bounce-md' => esc_html__('Bounce Medium', 'king-addons'),
312	'king-addons-hovering-image-stack-bounce-lg' => esc_html__('Bounce Large', 'king-addons'),
313	'king-addons-hovering-image-stack-fade' => esc_html__('Fade', 'king-addons'),
314	'king-addons-hovering-image-stack-rotating' => esc_html__('Rotating', 'king-addons'),
315	'king-addons-hovering-image-stack-rotating-inverse' => esc_html__('Rotating inverse', 'king-addons'),
316	'king-addons-hovering-image-stack-scale-sm' => esc_html__('Scale Small', 'king-addons'),
317	'king-addons-hovering-image-stack-scale-md' => esc_html__('Scale Medium', 'king-addons'),
318	'king-addons-hovering-image-stack-scale-lg' => esc_html__('Scale Large', 'king-addons'),
319	],
320	'default' => 'king-addons-hovering-image-stack-bounce-sm',
321	'separator' => 'before',
322	]
323	);
324
325	$this->add_control(
326	'king_addons_hovering_image_stack_animation_speed',
327	[
328	'label' => esc_html__('Animation speed (ms)', 'king-addons'),
329	'type' => Controls_Manager::NUMBER,
330	'min' => 0,
331	'step' => 100,
332	'default' => 6000,
333	'selectors' => [
334	'{{WRAPPER}} .king-addons-hovering-image-stack-wrapper' => '--king-addons-hovering-image-animation-speed:{{SIZE}}ms',
335	],
336	]
337	);
338
339	$this->add_control(
340	'king_addons_hovering_image_stack_hover_animation_style',
341	[
342	'label' => esc_html__('Hover Animation', 'king-addons'),
343	'type' => Controls_Manager::SELECT,
344	'options' => [
345	'none' => esc_html__('None', 'king-addons'),
346	'king-addons-hovering-image-img-stack-fly-sm' => esc_html__('Fly Small', 'king-addons'),
347	'king-addons-hovering-image-img-stack-fly' => esc_html__('Fly Medium', 'king-addons'),
348	'king-addons-hovering-image-img-stack-fly-lg' => esc_html__('Fly Large', 'king-addons'),
349	'king-addons-hovering-image-img-stack-scale-sm' => esc_html__('Scale Small', 'king-addons'),
350	'king-addons-hovering-image-img-stack-scale' => esc_html__('Scale Medium', 'king-addons'),
351	'king-addons-hovering-image-img-stack-scale-lg' => esc_html__('Scale Large', 'king-addons'),
352	'king-addons-hovering-image-img-stack-scale-inverse-sm' => esc_html__('Scale Inverse Small', 'king-addons'),
353	'king-addons-hovering-image-img-stack-scale-inverse' => esc_html__('Scale Inverse Medium', 'king-addons'),
354	'king-addons-hovering-image-img-stack-scale-inverse-lg' => esc_html__('Scale Inverse Large', 'king-addons'),
355	],
356	'default' => 'king-addons-hovering-image-img-stack-scale-sm',
357	'separator' => 'before',
358	]
359	);
360
361	$this->add_control(
362	'king_addons_hovering_image_stack_hover_animation_speed',
363	[
364	'label' => esc_html__('Hover animation speed (ms)', 'king-addons'),
365	'type' => Controls_Manager::NUMBER,
366	'min' => 0,
367	'step' => 10,
368	'default' => 300,
369	'selectors' => [
370	'{{WRAPPER}} .king-addons-hovering-image-stack-wrapper' => '--king-addons-hovering-image-hover-animation-speed:{{SIZE}}ms',
371	],
372	]
373	);
374
375	$this->end_controls_section();
376	/** END SECTION: CONTENT */
377
378	/** SECTION: STYLE */
379	$this->start_controls_section(
380	'king_addons_hovering_image_stack_section_image_stack_style',
381	[
382	'label' => esc_html__('General', 'king-addons'),
383	'tab' => Controls_Manager::TAB_STYLE,
384	]
385	);
386
387	$this->add_responsive_control(
388	'king_addons_hovering_image_stack_image_container_width',
389	[
390	'label' => esc_html__('Width', 'king-addons'),
391	'type' => Controls_Manager::SLIDER,
392	'default' => [
393	'size' => 550,
394	'unit' => 'px',
395	],
396	'tablet_default' => [
397	'unit' => '%',
398	],
399	'mobile_default' => [
400	'unit' => '%',
401	],
402	'size_units' => ['px', '%', 'vw'],
403	'range' => [
404	'%' => [
405	'min' => 1,
406	'max' => 100,
407	],
408	'px' => [
409	'min' => 1,
410	'max' => 2000,
411	],
412	'vw' => [
413	'min' => 1,
414	'max' => 100,
415	],
416	],
417	'selectors' => [
418	'{{WRAPPER}} .king-addons-hovering-image-stack-wrapper' => 'width: {{SIZE}}{{UNIT}};',
419	],
420	]
421	);
422
423	$this->add_responsive_control(
424	'king_addons_hovering_image_stack_image_container_height',
425	[
426	'label' => esc_html__('Minimum Height', 'king-addons'),
427	'type' => Controls_Manager::SLIDER,
428	'size_units' => ['px', 'vh', 'em'],
429	'range' => [
430	'px' => [
431	'min' => 0,
432	'max' => 1000,
433	'step' => 1,
434	],
435	'em' => [
436	'min' => 0,
437	'max' => 100,
438	],
439	'vh' => [
440	'min' => 0,
441	'max' => 100,
442	],
443	],
444	'default' => [
445	'size' => 550,
446	'unit' => 'px',
447	],
448	'selectors' => [
449	'{{WRAPPER}} .king-addons-hovering-image-stack-wrapper' => 'min-height: {{SIZE}}{{UNIT}}',
450	]
451	]
452	);
453
454	$this->add_responsive_control(
455	'king_addons_hovering_image_stack_image_layers_overflow',
456	[
457	'label' => esc_html__('Overflow', 'king-addons'),
458	'type' => Controls_Manager::SELECT,
459	'options' => array(
460	'visible' => esc_html__('Visible', 'king-addons'),
461	'hidden' => esc_html__('Hidden', 'king-addons'),
462	'scroll' => esc_html__('Scroll', 'king-addons'),
463	),
464	'default' => 'visible',
465	'selectors' => array(
466	'{{WRAPPER}} .king-addons-hovering-image-stack-wrapper' => 'overflow: {{VALUE}}',
467	),
468	]
469	);
470
471	$this->add_responsive_control(
472	'king_addons_hovering_image_stack_image_container_align',
473	[
474	'label' => esc_html__('Alignment', 'king-addons'),
475	'type' => Controls_Manager::CHOOSE,
476	'options' => [
477	'left' => [
478	'title' => esc_html__('Left', 'king-addons'),
479	'icon' => 'eicon-text-align-left',
480	],
481	'center' => [
482	'title' => esc_html__('Center', 'king-addons'),
483	'icon' => 'eicon-text-align-center',
484	],
485	'right' => [
486	'title' => esc_html__('Right', 'king-addons'),
487	'icon' => 'eicon-text-align-right',
488	],
489	],
490	'toggle' => true,
491	'default' => 'center',
492	'separator' => 'before',
493	'selectors' => [
494	'{{WRAPPER}} .elementor-widget-container' => 'text-align: {{VALUE}};',
495	],
496	]
497	);
498
499	$this->add_control(
500	'king_addons_hovering_image_stack_hr',
501	[
502	'type' => Controls_Manager::DIVIDER,
503	]
504	);
505
506	$this->start_controls_tabs('king_addons_hovering_image_stack_tabs_hover_style');
507
508	$this->start_controls_tab(
509	'king_addons_hovering_image_stack_tab_button_normal',
510	[
511	'label' => esc_html__('Normal', 'king-addons'),
512	]
513	);
514
515	$this->add_group_control(
516	Group_Control_Box_Shadow::get_type(),
517	[
518	'name' => 'king_addons_hovering_image_stack_img_box_shadow',
519	'label' => esc_html__('Box Shadow', 'king-addons'),
520	'selector' => '{{WRAPPER}} .king-addons-hovering-image-stack-item img',
521
522	]
523	);
524	$this->end_controls_tab();
525
526	$this->start_controls_tab(
527	'king_addons_hovering_image_stack_tab_button_hover',
528	[
529	'label' => esc_html__('Hover', 'king-addons'),
530	]
531	);
532
533	$this->add_group_control(
534	Group_Control_Box_Shadow::get_type(),
535	[
536	'name' => 'king_addons_hovering_image_stack_img_box_shadow_hover',
537	'label' => esc_html__('Box Shadow on Hover', 'king-addons'),
538	'selector' => '{{WRAPPER}} .king-addons-hovering-image-stack-item img:hover',
539
540	]
541	);
542
543	$this->end_controls_tab();
544
545	$this->end_controls_tabs();
546
547	$this->add_group_control(
548	Group_Control_Border::get_type(),
549	[
550	'name' => 'king_addons_hovering_image_stack_border',
551	'label' => esc_html__('Border', 'king-addons'),
552	'selector' => '{{WRAPPER}} .king-addons-hovering-image-stack-item img',
553	'separator' => 'before',
554	]
555	);
556
557	$this->add_responsive_control(
558	'king_addons_hovering_image_stack_image_border_radius',
559	[
560	'label' => esc_html__('Border Radius', 'king-addons'),
561	'type' => Controls_Manager::DIMENSIONS,
562	'size_units' => ['px', '%'],
563	'default' => [
564	'top' => 5,
565	'right' => 5,
566	'bottom' => 5,
567	'left' => 5,
568	],
569	'selectors' => [
570	'{{WRAPPER}} .king-addons-hovering-image-stack-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
571	'{{WRAPPER}} .king-addons-hovering-image-stack-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
572	],
573	]
574	);
575
576	$this->end_controls_section();
577	/** END SECTION: STYLE */
578	}
579
580	protected function render(): void
581	{
582	$settings = $this->get_settings_for_display();
583	if (empty($settings['king_addons_hovering_image_stack_image_list'])) {
584	return;
585	}
586
587	echo '<div class="king-addons-hovering-image-stack-wrapper">';
588
589	foreach ($settings['king_addons_hovering_image_stack_image_list'] as $item) {
590	$dynamic_class = 'elementor-repeater-item-' . esc_attr($item['_id']);
591	$infinite_animation_class = esc_attr($settings['king_addons_hovering_image_stack_image_infinite_animation']);
592	$hover_animation_class = esc_attr($settings['king_addons_hovering_image_stack_hover_animation_style']);
593
594	if (isset($item['king_addons_hovering_image_stack_link']) && !empty($item['king_addons_hovering_image_stack_link']['url'])) {
595	echo '<a class="king-addons-hovering-image-stack-item ' . esc_attr($dynamic_class) . ' ' . esc_attr($infinite_animation_class) . '" href="' . esc_url($item['king_addons_hovering_image_stack_link']['url']) . '"';
596	if (!empty($item['king_addons_hovering_image_stack_link']['is_external'])) {
597	echo ' target="_blank"';
598	}
599	if (!empty($item['king_addons_hovering_image_stack_link']['nofollow'])) {
600	echo ' rel="nofollow"';
601	}
602	echo '>';
603	} else {
604	echo '<div class="king-addons-hovering-image-stack-item ' . esc_attr($dynamic_class) . ' ' . esc_attr($infinite_animation_class) . '">';
605	}
606
607	if (!empty($item['king_addons_hovering_image_stack_image']['id'])) {
608	$image_src = Group_Control_Image_Size::get_attachment_image_src($item['king_addons_hovering_image_stack_image']['id'], 'king_addons_hovering_image_stack_image_size', $item);
609	$image_alt = $item['king_addons_hovering_image_stack_image']['alt'];
610	echo '<img src="' . esc_url($image_src) . '" alt="' . esc_attr($image_alt) . '" class="king-addons-hovering-image-stack-img ' . esc_attr($hover_animation_class) . '"/>';
611	} else {
612	if ('custom' !== $item['king_addons_hovering_image_stack_image_size_size']) {
613	$width = esc_attr(get_option($item['king_addons_hovering_image_stack_image_size_size'] . '_size_w'));
614	$height = esc_attr(get_option($item['king_addons_hovering_image_stack_image_size_size'] . '_size_h'));
615	} else {
616	$width = esc_attr($item['king_addons_hovering_image_stack_image_size_custom_dimension']['width']);
617	$height = esc_attr($item['king_addons_hovering_image_stack_image_size_custom_dimension']['height']);
618	}
619	$height = '0' == $height ? 'auto' : $height . 'px';
620
621	$image_url = !empty($item['king_addons_hovering_image_stack_image']['url']) ? esc_url($item['king_addons_hovering_image_stack_image']['url']) : esc_url(Utils::get_placeholder_image_src());
622	echo '<img src="' . esc_url($image_url) . '" style="width: ' . esc_attr($width) . 'px; height: ' . esc_attr($height) . ';" class="king-addons-hovering-image-stack-img ' . esc_attr($hover_animation_class) . '"/>';
623	}
624
625	if (isset($item['king_addons_hovering_image_stack_link']) && !empty($item['king_addons_hovering_image_stack_link']['url'])) {
626	echo '</a>';
627	} else {
628	echo '</div>';
629	}
630	}
631
632	echo '</div>';
633	}
634	}