dom-align

import domAlign from 'dom-align'; // Create a source and target node for alignment demonstration. // In a real application, these would be existing DOM elements. const sourceNode = document.createElement('div'); sourceNode.id = 'sourceNode'; sourceNode.style.cssText = 'position:absolute; left:-9999px; top:-9999px; width:100px; height:50px; background-color:blue; color:white; padding:5px;'; sourceNode.textContent = 'I am the source!'; document.body.appendChild(sourceNode); const targetNode = document.createElement('div'); targetNode.id = 'targetNode'; targetNode.style.cssText = 'position:relative; margin-top:150px; margin-left:200px; width:200px; height:100px; border:2px solid red; display:inline-block; padding:10px;'; targetNode.textContent = 'I am the target!'; document.body.appendChild(targetNode); // Define the alignment configuration. const alignConfig = { points: ['tl', 'br'], // Align top-left of sourceNode with bottom-right of targetNode offset: [5, 10], // Offset sourceNode by 5px in x, 10px in y after initial alignment targetOffset: ['-10%', '-5%'], // Offset targetNode by -10% of its width, -5% of its height overflow: { adjustX: true, adjustY: true }, // Auto-adjust position if sourceNode overflows viewport }; // Perform the alignment. The function returns an AlignResult object. const alignResult = domAlign(sourceNode, targetNode, alignConfig); console.log('Alignment successful:', alignResult.align); console.log('Adjustments made:', alignResult.overflow); // To clean up or re-align, you might remove elements or call domAlign again with different configs. // For demonstration, let's log the final position: setTimeout(() => { console.log(`Source node final position: left=${sourceNode.style.left}, top=${sourceNode.style.top}`); }, 0);