cadline_web/www_archline_hu
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(deployed): add mod_image_split_view (no-source, vetted live)

Browse Source 
mod_image_split_view module; no manifest version, unmapped -> deployed files.

Signed-off-by: LÁZÁR Imre <imre@illusion.hu>
Assisted-by: claude-code@claude-opus-4-8
This commit is contained in:
LÁZÁR Imre AI Agent 2026-07-16 11:24:51 +02:00
parent 02d0ff622f
commit 41818cc299
1 changed files with 122 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
deployed/mod_image_split_view/modules/mod_image_split_view/index.html Normal file
View File

@ -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>