PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.83
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.83
51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 All 39 releases
← All changes | includes/widgets/Image_Comparison/Image_Comparison.php +488 -0 51.1.2 → 51.1.83 View file →
@@ -1,0 +1,488 @@
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 +}