2026-07-16 14:40:45 +02:00
1 changed files with 122 additions and 0 deletions
--- a/deployed/mod_image_split_view/modules/mod_image_split_view/index.html
+++ b/deployed/mod_image_split_view/modules/mod_image_split_view/index.html
@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script>
+			function initComparisons() {
+
+				function compareImages(img) {
+					var slider, img, clicked = 0, w = img.offsetWidth, h = img.offsetHeight;
+					
+					img.style.width = (w / 2) + "px";
+					
+					slider = document.createElement("DIV");
+					slider.setAttribute("class", "img-comp-slider");
+					
+					img.parentElement.insertBefore(slider, img);
+					
+					slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
+					slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
+					
+					slider.addEventListener("mousedown", slideReady);
+					window.addEventListener("mouseup", slideFinish);
+					slider.addEventListener("touchstart", slideReady);
+					window.addEventListener("touchstop", slideFinish);
+
+					function slideReady(e) {
+						e.preventDefault();
+						clicked = 1;
+						window.addEventListener("mousemove", slideMove);
+						window.addEventListener("touchmove", slideMove);
+					}
+
+					function slideFinish() { clicked = 0; }
+
+					function slideMove(e) {
+						var pos;
+						if (clicked == 0) return false;
+						pos = getCursorPos(e)
+						if (pos < 0) pos = 0;
+						if (pos > w) pos = w;
+						slide(pos);
+					}
+
+					function getCursorPos(e) {
+						var a, x = 0;
+						e = e || window.event;
+						a = img.getBoundingClientRect();
+						x = e.pageX - a.left;
+						x = x - window.pageXOffset;
+						return x;
+					}
+
+					function slide(x) {
+						img.style.width = x + "px";
+						slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
+					}
+				}
+				
+				var url = new URL(window.location.href).searchParams;
+				var images = url.get("images").split("|");
+				var imageWidth = url.get("image-width");
+				var imageHeight = url.get("image-height");
+				var sliderColor = url.get("slider-color");
+				var sliderOpacity = Number(url.get("slider-opacity")) / 100;
+				
+				console.log(sliderColor);
+				for (var i = 0; i < images.length; i++) {
+					var temp = document.getElementsByClassName("img-comp-img")[i].getElementsByTagName("img")[0];
+					temp.src = images[i];
+					temp.width = imageWidth;
+					temp.height = imageHeight;
+				}
+				
+				compareImages(document.getElementsByClassName("img-comp-overlay")[0]);
+				document.getElementsByClassName("img-comp-slider")[0].style.backgroundColor = "#" + sliderColor;
+				document.getElementsByClassName("img-comp-slider")[0].style.opacity = sliderOpacity;
+			}
+		</script>
+		<style>
+			* {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+			}
+
+			.img-comp-container {
+				position: relative;
+				height: 200px; /*should be the same height as the images*/
+			}
+
+			.img-comp-img {
+				position: absolute;
+				width: auto;
+				height: auto;
+				overflow: hidden;
+			}
+
+			.img-comp-img img {
+				display: block;
+				vertical-align: middle;
+			}
+
+			.img-comp-slider {
+				position: absolute;
+				z-index: 9;
+				cursor: ew-resize;
+				/*set the appearance of the slider:*/
+				width: 40px;
+				height: 40px;
+				background-color: transparent;
+				opacity: 0.7;
+				border-radius: 50%;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="img-comp-container">
+			<div class="img-comp-img"><img src="#" alt="" /></div>
+			<div class="img-comp-img img-comp-overlay"><img src="#" alt="" /></div>
+		</div>
+		<script>initComparisons();</script>
+	</body>
+</html>