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

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

488 lines 18.4 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_Css_Filter;
9	use Elementor\Group_Control_Image_Size;
10	use Elementor\Icons_Manager;
11	use Elementor\Utils;
12	use Elementor\Widget_Base;
13
14	/** @noinspection SpellCheckingInspection */
15	if (!defined('ABSPATH')) {
16	exit; // Exit if accessed directly.
17	}
18
19
20
21	class Image_Comparison extends Widget_Base
22	{
23
24
25	public function get_name(): string
26	{
27	return 'king-addons-image-comparison';
28	}
29
30	public function get_title(): string
31	{
32	return esc_html__('Image Comparison', 'king-addons');
33	}
34
35	public function get_icon(): string
36	{
37	/** @noinspection SpellCheckingInspection */
38	return 'king-addons-icon king-addons-image-comparison';
39	}
40
41	public function get_style_depends(): array
42	{
43	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-image-comparison-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', 'before', 'after', 'before-after', 'compare', 'comparison', 'slider', 'scroll',
54	'photo', 'photos', 'picture', 'scrolling', 'scroller', 'scrollable', 'animation', 'effect', 'animated',
55	'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'picture', 'king', 'addons', 'mouseover',
56	'slide', 'background', 'arrow', 'arrows', 'kingaddons', 'king-addons'];
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	protected function register_controls(): void
65	{
66	/** START TAB: CONTENT ===================== */
67	/** SECTION: General ===================== */
68	$this->start_controls_section(
69	'kng_image_comparison_section_general',
70	[
71	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
72	]
73	);
74
75	$this->add_control(
76	'kng_image_comparison_info',
77	[
78	'type' => Controls_Manager::ALERT,
79	'alert_type' => 'info',
80	'content' => esc_html__('The comparison box uses the height from the Image After by default. It is always good practice to use images with the same width and height for comparison.', 'king-addons'),
81	]
82	);
83
84	$this->add_control(
85	'kng_image_comparison_image_before',
86	[
87	'label' => '<b>' . esc_html__('Image Before', 'king-addons') . '</b>',
88	'type' => Controls_Manager::MEDIA,
89	'default' => [
90	'url' => Utils::get_placeholder_image_src(),
91	],
92	'ai' => [
93	'active' => false,
94	],
95	]
96	);
97
98	$this->add_group_control(
99	Group_Control_Image_Size::get_type(),
100	[
101	'name' => 'kng_image_comparison_image_before_size',
102	'default' => 'full',
103	]
104	);
105
106	$this->add_responsive_control(
107	'kng_image_comparison_image_before_fit',
108	[
109	'label' => esc_html__('Image-Fit', 'king-addons'),
110	'type' => Controls_Manager::SELECT,
111	'options' => [
112	'none' => esc_html__('None', 'king-addons'),
113	'cover' => esc_html__('Cover', 'king-addons'),
114	'contain' => esc_html__('Contain', 'king-addons'),
115	'fill' => esc_html__('Fill', 'king-addons'),
116	],
117	'default' => 'cover',
118	'selectors' => [
119	'{{WRAPPER}} .king-addons-image-comparison-container .king-addons-image-comparison-image-before img' => 'object-fit: {{VALUE}};',
120	],
121	'separator' => 'after',
122	]
123	);
124
125	$this->add_control(
126	'kng_image_comparison_image_after',
127	[
128	'label' => '<b>' . esc_html__('Image After', 'king-addons') . '</b>',
129	'type' => Controls_Manager::MEDIA,
130	'default' => [
131	'url' => Utils::get_placeholder_image_src(),
132	],
133	'ai' => [
134	'active' => false,
135	],
136	]
137	);
138
139	$this->add_group_control(
140	Group_Control_Image_Size::get_type(),
141	[
142	'name' => 'kng_image_comparison_image_after_size',
143	'default' => 'full',
144	]
145	);
146
147	$this->add_responsive_control(
148	'kng_image_comparison_image_after_fit',
149	[
150	'label' => esc_html__('Image-Fit', 'king-addons'),
151	'type' => Controls_Manager::SELECT,
152	'options' => [
153	'none' => esc_html__('None', 'king-addons'),
154	'cover' => esc_html__('Cover', 'king-addons'),
155	'contain' => esc_html__('Contain', 'king-addons'),
156	'fill' => esc_html__('Fill', 'king-addons'),
157	],
158	'default' => 'none',
159	'selectors' => [
160	'{{WRAPPER}} .king-addons-image-comparison-container .king-addons-image-comparison-image-after img' => 'object-fit: {{VALUE}};',
161	],
162	'separator' => 'after',
163	]
164	);
165
166	$this->add_responsive_control(
167	'kng_image_comparison_box_max_height',
168	[
169	'label' => esc_html__('Box Maximum Height (px)', 'king-addons'),
170	'type' => Controls_Manager::NUMBER,
171	'min' => 50,
172	'step' => 1,
173	'default' => 600,
174	'selectors' => [
175	'{{WRAPPER}} .king-addons-image-comparison' => 'max-height: {{SIZE}}px;'
176	],
177	]
178	);
179
180	$this->add_control(
181	'kng_image_comparison_CSS_filters_head',
182	[
183	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Image overlay filters', 'king-addons'),
184	'type' => Controls_Manager::HEADING,
185	'separator' => 'before',
186	]
187	);
188
189	$this->add_group_control(
190	Group_Control_Css_Filter::get_type(),
191	[
192	'label' => esc_html__('CSS Filter for Image Before', 'king-addons'),
193	'name' => 'kng_image_comparison_image_before_css_filters',
194	'selector' => '{{WRAPPER}} .king-addons-image-comparison-image-before',
195	'separator' => 'before',
196	]
197	);
198
199	$this->add_group_control(
200	Group_Control_Css_Filter::get_type(),
201	[
202	'label' => esc_html__('CSS Filter for Image After', 'king-addons'),
203	'name' => 'kng_image_comparison_image_after_css_filters',
204	'selector' => '{{WRAPPER}} .king-addons-image-comparison-image-after',
205	]
206	);
207
208	$this->add_control(
209	'kng_image_comparison_slider_line_head',
210	[
211	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Slider', 'king-addons'),
212	'type' => Controls_Manager::HEADING,
213	'separator' => 'before',
214	]
215	);
216
217	$this->add_control(
218	'kng_image_comparison_slider_line_color',
219	[
220	'label' => esc_html__('Slider Line Color', 'king-addons'),
221	'type' => Controls_Manager::COLOR,
222	'default' => '#FFFFFF',
223	'selectors' => [
224	'{{WRAPPER}} .king-addons-image-comparison-slider-line' => 'background-color: {{VALUE}};',
225	],
226	]
227	);
228
229	$this->add_control(
230	'kng_image_comparison_slider_btn_color',
231	[
232	'label' => esc_html__('Slider Button Color', 'king-addons'),
233	'type' => Controls_Manager::COLOR,
234	'default' => '#FFFFFF',
235	'selectors' => [
236	'{{WRAPPER}} .king-addons-image-comparison-slider-button' => 'background-color: {{VALUE}};',
237	],
238	]
239	);
240
241	$this->add_responsive_control(
242	'kng_image_comparison_box_max_width',
243	[
244	'label' => esc_html__('Slider Initial Position', 'king-addons'),
245	'description' => esc_html__('If there were previous moves of slider, then check the live site for updates on the slider initial position.', 'king-addons'),
246	'type' => Controls_Manager::SLIDER,
247	'size_units' => ['%'],
248	'range' => [
249	'%' => [
250	'min' => 0,
251	'max' => 100,
252	],
253	],
254	'default' => [
255	'unit' => '%',
256	'size' => 50,
257	],
258	'selectors' => [
259	'{{WRAPPER}} .king-addons-image-comparison' => '--position: {{SIZE}}{{UNIT}};'
260	],
261	]
262	);
263
264	$this->add_control(
265	'kng_image_comparison_icon_head',
266	[
267	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Icon', 'king-addons'),
268	'type' => Controls_Manager::HEADING,
269	'separator' => 'before',
270	]
271	);
272
273	$this->add_control(
274	'kng_image_comparison_btn_icon',
275	[
276	'label' => esc_html__('Select Icon', 'king-addons'),
277	'type' => Controls_Manager::ICONS,
278	'skin' => 'inline',
279	'label_block' => false,
280	'default' => [
281	'value' => 'fas fa-arrows-alt-h',
282	'library' => 'fa-solid',
283	],
284	]
285	);
286
287	$this->add_control(
288	'kng_image_comparison_btn_color',
289	[
290	'label' => esc_html__('Icon Color (optional)', 'king-addons'),
291	'type' => Controls_Manager::COLOR,
292	'default' => '#000000',
293	'selectors' => [
294	'{{WRAPPER}} .king-addons-image-comparison-slider-button' => 'color: {{VALUE}};',
295	'{{WRAPPER}} .king-addons-image-comparison-slider-button svg' => 'fill: {{VALUE}};',
296	],
297	]
298	);
299
300	$this->add_responsive_control(
301	'kng_image_comparison_btn_size',
302	[
303	'label' => esc_html__('Icon Size (px)', 'king-addons'),
304	'type' => Controls_Manager::NUMBER,
305	'min' => 1,
306	'step' => 1,
307	'default' => 22,
308	'selectors' => [
309	'{{WRAPPER}} .king-addons-image-comparison-slider-button' => 'font-size: {{VALUE}}px;',
310	'{{WRAPPER}} .king-addons-image-comparison-slider-button svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
311	],
312	]
313	);
314
315	$this->add_control(
316	'kng_image_comparison_icon_box_head',
317	[
318	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Icon Box', 'king-addons'),
319	'type' => Controls_Manager::HEADING,
320	'separator' => 'before',
321	]
322	);
323
324	$this->add_group_control(
325	Group_Control_Border::get_type(),
326	[
327	'name' => 'kng_image_comparison_btn_border',
328	'label' => esc_html__('Border', 'king-addons'),
329	'selector' => '{{WRAPPER}} .king-addons-image-comparison-slider-button',
330	'fields_options' => [
331	'border' => [
332	'default' => 'none',
333	],
334	],
335	]
336	);
337
338	$this->add_group_control(
339	Group_Control_Box_Shadow::get_type(),
340	[
341	'name' => 'kng_image_comparison_btn_shadow',
342	'label' => esc_html__('Shadow', 'king-addons'),
343	'selector' => '{{WRAPPER}} .king-addons-image-comparison-slider-button',
344	]
345	);
346
347	$this->add_responsive_control(
348	'kng_image_comparison_btn_padding',
349	[
350	'label' => esc_html__('Padding', 'king-addons'),
351	'type' => Controls_Manager::DIMENSIONS,
352	'size_units' => ['em', 'px'],
353	'default' => [
354	'top' => 15,
355	'right' => 15,
356	'bottom' => 15,
357	'left' => 15,
358	'unit' => 'px',
359	'isLinked' => true,
360	],
361	'selectors' => [
362	'{{WRAPPER}} .king-addons-image-comparison-slider-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
363	]
364	]
365	);
366
367	$this->add_responsive_control(
368	'kng_image_comparison_btn_border_radius',
369	[
370	'label' => esc_html__('Border Radius', 'king-addons'),
371	'type' => Controls_Manager::DIMENSIONS,
372	'size_units' => ['px', '%', 'vw', 'vh'],
373	'default' => [
374	'top' => 100,
375	'right' => 100,
376	'bottom' => 100,
377	'left' => 100,
378	'unit' => 'vw',
379	'isLinked' => true,
380	],
381	'selectors' => [
382	'{{WRAPPER}} .king-addons-image-comparison-slider-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
383	]
384	]
385	);
386
387	$this->add_control(
388	'kng_image_comparison_box_shadow_head',
389	[
390	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Main Box', 'king-addons'),
391	'type' => Controls_Manager::HEADING,
392	'separator' => 'before',
393	]
394	);
395
396	$this->add_group_control(
397	Group_Control_Border::get_type(),
398	[
399	'name' => 'kng_image_comparison_box_border',
400	'label' => esc_html__('Border', 'king-addons'),
401	'selector' => '{{WRAPPER}} .king-addons-image-comparison',
402	'fields_options' => [
403	'border' => [
404	'default' => 'none',
405	],
406	],
407	]
408	);
409
410	$this->add_group_control(
411	Group_Control_Box_Shadow::get_type(),
412	[
413	'name' => 'kng_image_comparison_box_shadow',
414	'label' => esc_html__('Shadow', 'king-addons'),
415	'selector' => '{{WRAPPER}} .king-addons-image-comparison',
416	]
417	);
418
419	$this->add_responsive_control(
420	'kng_image_comparison_border_radius',
421	[
422	'label' => esc_html__('Border Radius', 'king-addons'),
423	'type' => Controls_Manager::DIMENSIONS,
424	'size_units' => ['px', '%'],
425	'selectors' => [
426	'{{WRAPPER}} .king-addons-image-comparison' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
427	]
428	]
429	);
430
431	$this->end_controls_section();
432	/** END SECTION: General ===================== */
433	/** END TAB: CONTENT ===================== */
434	}
435
436	protected function render(): void
437	{
438	$settings = $this->get_settings_for_display();
439	$element_ID = sanitize_key($this->get_id());
440
441	// Define allowed tags and attributes
442	$allowed_tags = wp_kses_allowed_html('post');
443	$allowed_tags['img']['srcset'] = true; // Allow srcset attribute for img tag
444	$allowed_tags['img']['sizes'] = true; // Allow sizes attribute for img tag
445	$allowed_tags['img']['decoding'] = true; // Allow decoding attribute for img tag
446	$allowed_tags['img']['loading'] = true; // Allow loading attribute for img tag. It is for the lazy loading possibility.
447
448	?>
449	<div class="king-addons-image-comparison king-addons-image-comparison-<?php echo esc_attr($element_ID); ?>">
450	<div class="king-addons-image-comparison-container">
451	<div class="king-addons-image-comparison-image-before">
452	<?php
453	$image_html_before = Group_Control_Image_Size::get_attachment_image_html($settings, 'kng_image_comparison_image_before_size', 'kng_image_comparison_image_before');
454	echo wp_kses($image_html_before, $allowed_tags);
455	?>
456	</div>
457	<div class="king-addons-image-comparison-image-after">
458	<?php
459	$image_html_after = Group_Control_Image_Size::get_attachment_image_html($settings, 'kng_image_comparison_image_after_size', 'kng_image_comparison_image_after');
460	echo wp_kses($image_html_after, $allowed_tags);
461	?>
462	</div>
463	</div>
464	<input type="range" min="0" max="100" value="50"
465	aria-label="<?php echo esc_html__('Percentage of the before image shown.', 'king-addons'); ?>"
466	class="king-addons-image-comparison-slider king-addons-image-comparison-slider-<?php echo esc_attr($element_ID); ?>"
467	/>
468	<div class="king-addons-image-comparison-slider-line" aria-hidden="true"></div>
469	<div class="king-addons-image-comparison-slider-button" aria-hidden="true">
470	<?php Icons_Manager::render_icon($settings['kng_image_comparison_btn_icon']); ?>
471	</div>
472	</div>
473	<?php
474	$container_selector = '.king-addons-image-comparison-' . $element_ID;
475	$slider_selector = '.king-addons-image-comparison-slider-' . $element_ID;
476	$inline_js = '(() => {
477	const container = document.querySelector(' . wp_json_encode($container_selector) . ');
478	const slider = document.querySelector(' . wp_json_encode($slider_selector) . ');
479	if (!container \|\| !slider) {
480	return;
481	}
482	slider.addEventListener("input", (event) => {
483	container.style.setProperty("--position", `${event.target.value}%`);
484	});
485	})();';
486	wp_print_inline_script_tag($inline_js);
487	}
488	}