admin/Facilitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ARAI#90481 De (clientside) zoom & pan functies pas onload initialiseren

Browse Source 
svn path=/Website/branches/v2025.3/; revision=71017
This commit is contained in:
Koen Reefman
2025-11-20 13:26:18 +00:00
parent 4002dd1925
commit 081ee768dd
2 changed files with 166 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
APPL/PDA/plattegrond.asp
View File

@@ -105,7 +105,7 @@ imgurl += "&sizeY=" + (1*sizeY);
<html>
<head>
<% FCLTMHeader.Generate({}); %>
<script>
<script>
<% if (!readonly)
{ %>
// is er niet met bootstrap $(function() { $.mobile.zoom.enable(true); });
@@ -164,82 +164,83 @@ imgurl += "&sizeY=" + (1*sizeY);
}
}
<% } %>
// Pinch-to-zoom and pan for the image (always enabled)
(function() {
var img = document.querySelector('#mobplan img');
if (!img) return;
var lastScale = 1, scale = 1, lastX = 0, lastY = 0, posX = 0, posY = 0, startX = 0, startY = 0, dragging = false;
function setTransform() {
img.style.transform = "translate(" + posX + "px," + posY + "px) scale(" + scale + ")";
}
// Pinch-to-zoom and pan for the image (always enabled)
$(function () {
var img = document.querySelector('#mobplan img');
if (!img) return;
var lastScale = 1, scale = 1, lastX = 0, lastY = 0, posX = 0, posY = 0, startX = 0, startY = 0, dragging = false;
img.addEventListener('touchstart', function(e) {
if (e.touches.length === 1) {
dragging = true;
startX = e.touches[0].clientX - lastX;
startY = e.touches[0].clientY - lastY;
function setTransform() {
img.style.transform = "translate(" + posX + "px," + posY + "px) scale(" + scale + ")";
}
});
img.addEventListener('touchmove', function(e) {
if (e.touches.length === 1 && dragging) {
e.preventDefault();
posX = e.touches[0].clientX - startX;
posY = e.touches[0].clientY - startY;
img.addEventListener('touchstart', function(e) {
if (e.touches.length === 1) {
dragging = true;
startX = e.touches[0].clientX - lastX;
startY = e.touches[0].clientY - lastY;
}
});
img.addEventListener('touchmove', function(e) {
if (e.touches.length === 1 && dragging) {
e.preventDefault();
posX = e.touches[0].clientX - startX;
posY = e.touches[0].clientY - startY;
lastX = posX;
lastY = posY;
setTransform();
} else if (e.touches.length === 2) {
e.preventDefault();
dragging = false;
var dx = e.touches[0].clientX - e.touches[1].clientX;
var dy = e.touches[0].clientY - e.touches[1].clientY;
var dist = Math.sqrt(dx*dx + dy*dy);
if (!img._startDist) {
img._startDist = dist;
img._startScale = scale;
} else {
var newScale = img._startScale * (dist / img._startDist);
scale = Math.max(1, Math.min(newScale, 5)); // Clamp zoom
setTransform();
}
}
}, { passive: false });
img.addEventListener('touchend', function(e) {
dragging = false;
img._startDist = null;
img._startScale = scale;
lastX = posX;
lastY = posY;
setTransform();
} else if (e.touches.length === 2) {
e.preventDefault();
dragging = false;
var dx = e.touches[0].clientX - e.touches[1].clientX;
var dy = e.touches[0].clientY - e.touches[1].clientY;
var dist = Math.sqrt(dx*dx + dy*dy);
});
if (!img._startDist) {
img._startDist = dist;
img._startScale = scale;
} else {
var newScale = img._startScale * (dist / img._startDist);
scale = Math.max(1, Math.min(newScale, 5)); // Clamp zoom
// Optional: double tap to reset
var lastTap = 0;
img.addEventListener('touchend', function(e) {
var now = new Date().getTime();
if (e.touches.length === 0 && now - lastTap < 300) {
scale = 1; posX = 0; posY = 0; lastX = 0; lastY = 0;
setTransform();
}
}
}, { passive: false });
if (e.touches.length > 0) {
lastTap = 0;
} else {
lastTap = now;
}
});
img.addEventListener('touchend', function(e) {
dragging = false;
img._startDist = null;
img._startScale = scale;
lastX = posX;
lastY = posY;
});
// Optional: double tap to reset
var lastTap = 0;
img.addEventListener('touchend', function(e) {
var now = new Date().getTime();
if (e.touches.length === 0 && now - lastTap < 300) {
scale = 1; posX = 0; posY = 0; lastX = 0; lastY = 0;
// Mouse wheel zoom (desktop)
img.addEventListener('wheel', function(e) {
e.preventDefault();
var delta = e.deltaY < 0 ? 1.1 : 0.9;
scale = Math.max(1, Math.min(scale * delta, 5));
setTransform();
}
if (e.touches.length > 0) {
lastTap = 0;
} else {
lastTap = now;
}
});
});
// Mouse wheel zoom (desktop)
img.addEventListener('wheel', function(e) {
e.preventDefault();
var delta = e.deltaY < 0 ? 1.1 : 0.9;
scale = Math.max(1, Math.min(scale * delta, 5));
setTransform();
});
})();
</script>
</script>
</head>
<body>
<%

205
APPL/PDA/res_plattegrond.asp
View File

@@ -101,6 +101,105 @@ imgurl += "&sizeY=" + (1*sizeY);
$(this).parent().scrollLeft(($(this).width() - $(this).parent().width()) / 2);
$(this).parent().scrollTop(($(this).height() - $(this).parent().height()) / 2);
}) // JGL: Waarom? .load();
var img = document.getElementById('plattegrond-img');
var container = document.getElementById('mobplan');
var scale = 1, posX = 0, posY = 0, lastX = 0, lastY = 0, startX = 0, startY = 0, dragging = false;
function clamp(val, min, max) {
return Math.max(min, Math.min(max, val));
}
function setTransform() {
var cw = container.clientWidth;
var ch = container.clientHeight;
// Compute pan bounds based on container size & scale
var minX = -(cw * scale - cw) / 2;
var maxX = (cw * scale - cw) / 2;
var minY = -(ch * scale - ch) / 2;
var maxY = (ch * scale - ch) / 2;
posX = clamp(posX, minX, maxX);
posY = clamp(posY, minY, maxY);
lastX = posX;
lastY = posY;
img.style.transform = "translate(" + posX + "px," + posY + "px) scale(" + scale + ")";
}
img.addEventListener('load', function() {
scale = 1;
posX = 0;
posY = 0;
lastX = 0;
lastY = 0;
setTransform();
});
img.addEventListener('touchstart', function(e) {
if (e.touches.length === 1) {
dragging = true;
startX = e.touches[0].clientX - lastX;
startY = e.touches[0].clientY - lastY;
}
});
img.addEventListener('touchmove', function(e) {
if (e.touches.length === 1 && dragging) {
e.preventDefault();
posX = e.touches[0].clientX - startX;
posY = e.touches[0].clientY - startY;
setTransform();
} else if (e.touches.length === 2) {
e.preventDefault();
dragging = false;
var dx = e.touches[0].clientX - e.touches[1].clientX;
var dy = e.touches[0].clientY - e.touches[1].clientY;
var dist = Math.sqrt(dx*dx + dy*dy);
if (!img._startDist) {
img._startDist = dist;
img._startScale = scale;
} else {
var newScale = img._startScale * (dist / img._startDist);
scale = Math.max(1, Math.min(newScale, 5)); // Clamp zoom
setTransform();
}
}
}, { passive: false });
img.addEventListener('touchend', function(e) {
dragging = false;
img._startDist = null;
img._startScale = scale;
lastX = posX;
lastY = posY;
});
// Optional: double tap to reset
var lastTap = 0;
img.addEventListener('touchend', function(e) {
var now = new Date().getTime();
if (e.touches.length === 0 && now - lastTap < 300) {
scale = 1; posX = 0; posY = 0; lastX = 0; lastY = 0;
setTransform();
}
if (e.touches.length > 0) {
lastTap = 0;
} else {
lastTap = now;
}
});
// Mouse wheel zoom (desktop)
img.addEventListener('wheel', function(e) {
e.preventDefault();
var delta = e.deltaY < 0 ? 1.1 : 0.9;
scale = Math.max(1, Math.min(scale * delta, 5));
setTransform();
});
});
function process_info(data)
{
@@ -131,7 +230,6 @@ imgurl += "&sizeY=" + (1*sizeY);
<img alt="<%=L("lcl_room_cad")%>" style="height:auto;display:block;margin:0 auto;" src="<%=safe.htmlattr(imgurl)%>" id="plattegrond-img">
</div>
<%
// En nu nog de legenda
if (thema_key != -1 || themaI_key != -1) {
@@ -245,7 +343,6 @@ imgurl += "&sizeY=" + (1*sizeY);
oRs.Close();
}
}
CONTENT_END();
FOOTER();
@@ -253,106 +350,4 @@ imgurl += "&sizeY=" + (1*sizeY);
PDA_PAGE_END(); %>
</body>
</html>
<% ASPPAGE_END(); %>
<script>
(function() {
var img = document.getElementById('plattegrond-img');
var container = document.getElementById('mobplan');
var scale = 1, posX = 0, posY = 0, lastX = 0, lastY = 0, startX = 0, startY = 0, dragging = false;
function clamp(val, min, max) {
return Math.max(min, Math.min(max, val));
}
function setTransform() {
var cw = container.clientWidth;
var ch = container.clientHeight;
// Compute pan bounds based on container size & scale
var minX = -(cw * scale - cw) / 2;
var maxX = (cw * scale - cw) / 2;
var minY = -(ch * scale - ch) / 2;
var maxY = (ch * scale - ch) / 2;
posX = clamp(posX, minX, maxX);
posY = clamp(posY, minY, maxY);
lastX = posX;
lastY = posY;
img.style.transform = "translate(" + posX + "px," + posY + "px) scale(" + scale + ")";
}
img.addEventListener('load', function() {
scale = 1;
posX = 0;
posY = 0;
lastX = 0;
lastY = 0;
setTransform();
});
img.addEventListener('touchstart', function(e) {
if (e.touches.length === 1) {
dragging = true;
startX = e.touches[0].clientX - lastX;
startY = e.touches[0].clientY - lastY;
}
});
img.addEventListener('touchmove', function(e) {
if (e.touches.length === 1 && dragging) {
e.preventDefault();
posX = e.touches[0].clientX - startX;
posY = e.touches[0].clientY - startY;
setTransform();
} else if (e.touches.length === 2) {
e.preventDefault();
dragging = false;
var dx = e.touches[0].clientX - e.touches[1].clientX;
var dy = e.touches[0].clientY - e.touches[1].clientY;
var dist = Math.sqrt(dx*dx + dy*dy);
if (!img._startDist) {
img._startDist = dist;
img._startScale = scale;
} else {
var newScale = img._startScale * (dist / img._startDist);
scale = Math.max(1, Math.min(newScale, 5)); // Clamp zoom
setTransform();
}
}
}, { passive: false });
img.addEventListener('touchend', function(e) {
dragging = false;
img._startDist = null;
img._startScale = scale;
lastX = posX;
lastY = posY;
});
// Optional: double tap to reset
var lastTap = 0;
img.addEventListener('touchend', function(e) {
var now = new Date().getTime();
if (e.touches.length === 0 && now - lastTap < 300) {
scale = 1; posX = 0; posY = 0; lastX = 0; lastY = 0;
setTransform();
}
if (e.touches.length > 0) {
lastTap = 0;
} else {
lastTap = now;
}
});
// Mouse wheel zoom (desktop)
img.addEventListener('wheel', function(e) {
e.preventDefault();
var delta = e.deltaY < 0 ? 1.1 : 0.9;
scale = Math.max(1, Math.min(scale * delta, 5));
setTransform();
});
})();
</script>
<% ASPPAGE_END(); %>