add image compare tool

render/base.css

@@ -290,11 +290,43 @@ body.mini { /* split feature */
 }
 .block-gold.anim_off,
 .block-gold.anim_force_off,
-.all_diff .block-gold {
+.all_diff .block-gold,
+.split_compare .block-gold{
 	animation: none;
 }
 
 
+
+
+
+.split_compare .image-container {
+	cursor: col-resize;
+}
+.split_compare .block-gold {
+	overflow: hidden;
+	width: 50%;
+	position: absolute;
+	z-index: 10;
+}
+
+.split_compare .separator {
+	width: 1px;
+	height: 100%;
+	cursor: col-resize;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	z-index: 10;
+	backdrop-filter: invert(1);
+}
+.split_compare .block-test:after {
+	left: auto;
+	right: 25px;
+}
+
+
+
+
 :root {
 	--animation-duration: 0.7s;
 	--height-image: calc((100vh - 800px) / 2);
@@ -352,10 +384,15 @@ body.mini { /* split feature */
 	top: auto;
 }
 
-
 .image-container, img, .block {
 	max-width: 100%;
 }
+/* TODO: исправить конфликт с image split compare */
+.split_compare .image-container,
+.split_compare img,
+.split_compare .block {
+	max-width: unset;
+}
 
 table {
 	position: relative;

render/index.js

@@ -198,6 +198,7 @@ function buildTestResultImages(data) {
 				Tag('div', {"class": "block block-gold"}, null, [Tag('img', {src: d.image_gold, loading: "lazy", "class": "gold"})]),
 				Tag('div', {"class": "block block-test"}, null, [Tag('img', {src: d.image_test, loading: "lazy", "class": "test"})]),
 				Tag('div', {"class": "block block-diff"}, null, [Tag('img', {src: d.image_diff, loading: "lazy", "class": "diff"})]),
+				Tag('div', {"class": "separator"}, null, null),
 			])
 			//Tag('img', {src: d.image_flip}),
 		]);
@@ -315,6 +316,7 @@ window.onload = () => {
 	const vpadding = loadFromLocalStorage("rendertest_vpadding", true);
 	const all_diff = loadFromLocalStorage("rendertest_all_diff", false);
 	const diffMode = loadFromLocalStorage("rendertest_diffmode", "click");
+	const imageCompareMode = loadFromLocalStorage("rendertest_imagecomparemode", "switch");
 	const imagePosition = loadFromLocalStorage("rendertest_imageposition", "center");
 	let isPaused = loadFromLocalStorage("rendertest_paused", false);
 
@@ -361,12 +363,24 @@ window.onload = () => {
 						Text(" Image compare mode")
 					]),
 					Tag("label", null, null, [
-						Tag("input", {"type": "radio", "name": "compare_mode", "value": "switch", "checked": "checked"}), 
+						Tag("input", {"type": "radio", "name": "compare_mode", "value": "switch", ...uglyChecked(imageCompareMode === "switch")}, null, null, "input", (e) => {
+							images.classList.toggle("split_compare");
+							saveToLocalStorage("rendertest_imagecomparemode", e.target.value);
+							for (let blocks of images.querySelectorAll(".block-gold")) {
+								blocks.removeAttribute("style"); // FIXME
+							}
+							for (let seps of images.querySelectorAll(".separator")) {
+								seps.removeAttribute("style"); // FIXME
+							}
+						}),
 						Tag("span", {"class": "emoji"}, "🎞"), 
 						Text(" Switch images")
 					]),
 					Tag("label", {"title": "under construction"}, null, [
-						Tag("input", {"type": "radio", "name": "compare_mode", "value": "split", "disabled": "disabled"}), 
+						Tag("input", {"type": "radio", "name": "compare_mode", "value": "split", ...uglyChecked(imageCompareMode === "split")}, null, null, "input", (e) => {
+							images.classList.toggle("split_compare");
+							saveToLocalStorage("rendertest_imagecomparemode", e.target.value);
+						}),
 						Tag("span", {"class": "emoji"}, "🪓"), 
 						Text(" Split images")
 					])
@@ -558,7 +572,9 @@ window.onload = () => {
 	if (diffMode === "separate") {
 		images.classList.toggle("diff_separate");
 	}
-
+	if (imageCompareMode === "split") {
+		images.classList.toggle("split_compare");
+	}
 	changeAnimationDuration(isPaused ? 0 : numberInput.value);
 
 	// stop animation when not in the viewport
@@ -579,6 +595,34 @@ window.onload = () => {
 		observer.observe(element);
 	}
 
+	// TODO: subs&unsubs
+	function getPointerPositionPercentage(container, event) {
+		const rect = container.getBoundingClientRect();
+		let x;
+		switch (event.type) {
+			case "mousemove":
+				x = event.clientX - rect.left;
+				break;
+			case "touchmove": // TODO: testing
+				x = event.touches[0].clientX - rect.left;
+				break;
+		}
+		const percent = (x / rect.width) * 100;
+		return percent;
+	}
+	images.addEventListener("mousemove", (event) => {
+		if (images.classList.contains("split_compare")) {
+			const target = event.target.closest(".image-container");
+			if (target) {
+				event.preventDefault();
+				const percent = getPointerPositionPercentage(target, event);
+				const separator = target.querySelector(".separator");
+				const compare = target.querySelector(".block-gold");
+				compare.style.width = `${percent}%`;
+				separator.style.left = `${percent}%`;
+			}
+		}
+	});
 }