ARAI#90481 De (clientside) zoom & pan functies pas onload initialiseren
svn path=/Website/branches/v2025.3/; revision=71017
This commit is contained in:
@@ -105,7 +105,7 @@ imgurl += "&sizeY=" + (1*sizeY);
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<% FCLTMHeader.Generate({}); %>
|
<% FCLTMHeader.Generate({}); %>
|
||||||
<script>
|
<script>
|
||||||
<% if (!readonly)
|
<% if (!readonly)
|
||||||
{ %>
|
{ %>
|
||||||
// is er niet met bootstrap $(function() { $.mobile.zoom.enable(true); });
|
// 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() {
|
// Pinch-to-zoom and pan for the image (always enabled)
|
||||||
img.style.transform = "translate(" + posX + "px," + posY + "px) scale(" + scale + ")";
|
$(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) {
|
function setTransform() {
|
||||||
if (e.touches.length === 1) {
|
img.style.transform = "translate(" + posX + "px," + posY + "px) scale(" + scale + ")";
|
||||||
dragging = true;
|
|
||||||
startX = e.touches[0].clientX - lastX;
|
|
||||||
startY = e.touches[0].clientY - lastY;
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
img.addEventListener('touchmove', function(e) {
|
img.addEventListener('touchstart', function(e) {
|
||||||
if (e.touches.length === 1 && dragging) {
|
if (e.touches.length === 1) {
|
||||||
e.preventDefault();
|
dragging = true;
|
||||||
posX = e.touches[0].clientX - startX;
|
startX = e.touches[0].clientX - lastX;
|
||||||
posY = e.touches[0].clientY - startY;
|
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;
|
lastX = posX;
|
||||||
lastY = posY;
|
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) {
|
// Optional: double tap to reset
|
||||||
img._startDist = dist;
|
var lastTap = 0;
|
||||||
img._startScale = scale;
|
img.addEventListener('touchend', function(e) {
|
||||||
} else {
|
var now = new Date().getTime();
|
||||||
var newScale = img._startScale * (dist / img._startDist);
|
if (e.touches.length === 0 && now - lastTap < 300) {
|
||||||
scale = Math.max(1, Math.min(newScale, 5)); // Clamp zoom
|
scale = 1; posX = 0; posY = 0; lastX = 0; lastY = 0;
|
||||||
setTransform();
|
setTransform();
|
||||||
}
|
}
|
||||||
}
|
if (e.touches.length > 0) {
|
||||||
}, { passive: false });
|
lastTap = 0;
|
||||||
|
} else {
|
||||||
|
lastTap = now;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
img.addEventListener('touchend', function(e) {
|
// Mouse wheel zoom (desktop)
|
||||||
dragging = false;
|
img.addEventListener('wheel', function(e) {
|
||||||
img._startDist = null;
|
e.preventDefault();
|
||||||
img._startScale = scale;
|
var delta = e.deltaY < 0 ? 1.1 : 0.9;
|
||||||
lastX = posX;
|
scale = Math.max(1, Math.min(scale * delta, 5));
|
||||||
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();
|
setTransform();
|
||||||
}
|
});
|
||||||
if (e.touches.length > 0) {
|
|
||||||
lastTap = 0;
|
|
||||||
} else {
|
|
||||||
lastTap = now;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
</script>
|
||||||
// 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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<%
|
<%
|
||||||
|
|||||||
@@ -101,6 +101,105 @@ imgurl += "&sizeY=" + (1*sizeY);
|
|||||||
$(this).parent().scrollLeft(($(this).width() - $(this).parent().width()) / 2);
|
$(this).parent().scrollLeft(($(this).width() - $(this).parent().width()) / 2);
|
||||||
$(this).parent().scrollTop(($(this).height() - $(this).parent().height()) / 2);
|
$(this).parent().scrollTop(($(this).height() - $(this).parent().height()) / 2);
|
||||||
}) // JGL: Waarom? .load();
|
}) // 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)
|
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">
|
<img alt="<%=L("lcl_room_cad")%>" style="height:auto;display:block;margin:0 auto;" src="<%=safe.htmlattr(imgurl)%>" id="plattegrond-img">
|
||||||
</div>
|
</div>
|
||||||
<%
|
<%
|
||||||
|
|
||||||
// En nu nog de legenda
|
// En nu nog de legenda
|
||||||
if (thema_key != -1 || themaI_key != -1) {
|
if (thema_key != -1 || themaI_key != -1) {
|
||||||
|
|
||||||
@@ -245,7 +343,6 @@ imgurl += "&sizeY=" + (1*sizeY);
|
|||||||
oRs.Close();
|
oRs.Close();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
CONTENT_END();
|
CONTENT_END();
|
||||||
FOOTER();
|
FOOTER();
|
||||||
@@ -253,106 +350,4 @@ imgurl += "&sizeY=" + (1*sizeY);
|
|||||||
PDA_PAGE_END(); %>
|
PDA_PAGE_END(); %>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<% ASPPAGE_END(); %>
|
<% 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>
|
|
||||||
Reference in New Issue
Block a user