51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
function initBoundaries(elementId, updateUrl) {
|
|
function updateBoundaries() {
|
|
const container = document.getElementById(elementId);
|
|
if (!container) {
|
|
console.warn("initBoundaries : element " + elementId + " is not found !");
|
|
return;
|
|
}
|
|
|
|
const rect = container.getBoundingClientRect();
|
|
const width = Math.floor(rect.width);
|
|
const height = Math.floor(rect.height);
|
|
console.log("boundaries: ", rect)
|
|
|
|
// Send boundaries to server
|
|
htmx.ajax('POST', updateUrl, {
|
|
target: '#' + elementId,
|
|
swap: 'outerHTML',
|
|
values: {width: width, height: height}
|
|
});
|
|
}
|
|
|
|
// Debounce function
|
|
let resizeTimeout;
|
|
|
|
function debouncedUpdate() {
|
|
clearTimeout(resizeTimeout);
|
|
resizeTimeout = setTimeout(updateBoundaries, 250);
|
|
}
|
|
|
|
// Update on load
|
|
setTimeout(updateBoundaries, 100);
|
|
|
|
// Update on window resize
|
|
const container = document.getElementById(elementId);
|
|
container.addEventListener('resize', debouncedUpdate);
|
|
|
|
// Cleanup on element removal
|
|
if (container) {
|
|
const observer = new MutationObserver(function (mutations) {
|
|
mutations.forEach(function (mutation) {
|
|
mutation.removedNodes.forEach(function (node) {
|
|
if (node.id === elementId) {
|
|
window.removeEventListener('resize', debouncedUpdate);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
observer.observe(container.parentNode, {childList: true});
|
|
}
|
|
}
|