← All changes | includes/widgets/Image_Comparison/Image_Comparison.php +24 -6 51.1.38 → 51.1.87 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
		@@ -444,8 +444,14 @@
444	444	$allowed_tags['img']['sizes'] = true; // Allow sizes attribute for img tag
445	445	$allowed_tags['img']['decoding'] = true; // Allow decoding attribute for img tag
446	446	$allowed_tags['img']['loading'] = true; // Allow loading attribute for img tag. It is for the lazy loading possibility.
447	447
	448	+ $initial_position = 50;
	449	+ if (isset($settings['kng_image_comparison_box_max_width']['size']) && $settings['kng_image_comparison_box_max_width']['size'] !== '') {
	450	+ $initial_position = (float) $settings['kng_image_comparison_box_max_width']['size'];
	451	+ }
	452	+ $initial_position = max(0, min(100, $initial_position));
	453	+
448	454	?>
449	455	<div class="king-addons-image-comparison king-addons-image-comparison-<?php echo esc_attr($element_ID); ?>">
450	456	<div class="king-addons-image-comparison-container">
451	457	<div class="king-addons-image-comparison-image-before">
		@@ -460,9 +466,9 @@
460	466	echo wp_kses($image_html_after, $allowed_tags);
461	467	?>
462	468	</div>
463	469	</div>
464		- <input type="range" min="0" max="100" value="50"
	470	+ <input type="range" min="0" max="100" value="<?php echo esc_attr((string) $initial_position); ?>"
465	471	aria-label="<?php echo esc_html__('Percentage of the before image shown.', 'king-addons'); ?>"
466	472	class="king-addons-image-comparison-slider king-addons-image-comparison-slider-<?php echo esc_attr($element_ID); ?>"
467	473	/>
468	474	<div class="king-addons-image-comparison-slider-line" aria-hidden="true"></div>
		@@ -470,11 +476,23 @@
470	476	<?php Icons_Manager::render_icon($settings['kng_image_comparison_btn_icon']); ?>
471	477	</div>
472	478	</div>
473	479	<?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		- });";
	480	+ $container_selector = '.king-addons-image-comparison-' . $element_ID;
	481	+ $slider_selector = '.king-addons-image-comparison-slider-' . $element_ID;
	482	+ $inline_js = '(() => {
	483	+ const container = document.querySelector(' . wp_json_encode($container_selector) . ');
	484	+ const slider = document.querySelector(' . wp_json_encode($slider_selector) . ');
	485	+ if (!container || !slider) {
	486	+ return;
	487	+ }
	488	+ const computed = parseFloat(getComputedStyle(container).getPropertyValue("--position"));
	489	+ if (!Number.isNaN(computed)) {
	490	+ slider.value = String(Math.min(100, Math.max(0, computed)));
	491	+ }
	492	+ slider.addEventListener("input", (event) => {
	493	+ container.style.setProperty("--position", `${event.target.value}%`);
	494	+ });
	495	+ })();';
478	496	wp_print_inline_script_tag($inline_js);
479	497	}
480	498	}