← All changes
|
includes/widgets/Image_Comparison/Image_Comparison.php
+13
-5
51.1.37
→
51.1.83
View file →
| @@ -435,9 +435,9 @@ | ||
| 435 | 435 | |
| 436 | 436 | protected function render(): void |
| 437 | 437 | { |
| 438 | 438 | $settings = $this->get_settings_for_display(); |
| 439 | - $element_ID = $this->get_id(); | |
| 439 | + $element_ID = sanitize_key($this->get_id()); | |
| 440 | 440 | |
| 441 | 441 | // Define allowed tags and attributes |
| 442 | 442 | $allowed_tags = wp_kses_allowed_html('post'); |
| 443 | 443 | $allowed_tags['img']['srcset'] = true; // Allow srcset attribute for img tag |
| @@ -470,11 +470,19 @@ | ||
| 470 | 470 | <?php Icons_Manager::render_icon($settings['kng_image_comparison_btn_icon']); ?> |
| 471 | 471 | </div> |
| 472 | 472 | </div> |
| 473 | 473 | <?php |
| 474 | - $inline_js = "const container_" . esc_js($element_ID) . " = document.querySelector('.king-addons-image-comparison-" . esc_js($element_ID) . "'); | |
| 475 | - document.querySelector('.king-addons-image-comparison-slider-" . esc_js($element_ID) . "').addEventListener('input', (e) => { | |
| 476 | - container_" . esc_js($element_ID) . ".style.setProperty('--position', " . '`${e.target.value}%`' . "); | |
| 477 | - });"; | |
| 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 | + })();'; | |
| 478 | 486 | wp_print_inline_script_tag($inline_js); |
| 479 | 487 | } |
| 480 | 488 | } |