Leaderline init script for usage in eg. Elementor .. leaderline: https://anseki.github.io/leader-line/

leaderline.init.js

const leaderlineInit = () => {
	const elements = document.querySelectorAll('[data-leaderline]');
	if(elements.length < 1) return;

	elements.forEach(element => {
		const data = {
			color: 'rgba(0,161,224,0.5)', // set your default color
			startPlug: 'disc', // set your default start plug
			endPlug: 'disc', // set your default end plug
			path: 'grid' // set your default path style
		};
		let endElement = document.querySelector(`.${element.dataset.leaderline}`);
		console.log(element,endElement);
		if(element.dataset.leaderlinestart)
			data.startSocket = element.dataset.leaderlinestart;
		if(element.dataset.leaderlineend)
			data.endSocket = element.dataset.leaderlineend;
		if(element.dataset.leaderendoffsetx && element.dataset.leaderendoffsety) {
			const x = element.dataset.leaderendoffsetx;
			const y = element.dataset.leaderendoffsety;
			endElement = LeaderLine.pointAnchor(endElement, {
				x: x.includes('%')?x:parseInt(x),
				y: y.includes('%')?y:parseInt(y)
			});
		}
		if(element.dataset.leadersize)
			data.size = parseInt(element.dataset.leadersize);
		if(element.dataset.leadercolor)
			data.color = element.dataset.leadercolor;
		if(element.dataset.leaderdelay){
			setTimeout(() => {
				new LeaderLine(
					element,
					endElement,
					data);
			},parseInt(element.dataset.leaderdelay));
		}else{
			new LeaderLine(
				element,
				endElement,
				data);
		}
	});
};

window.addEventListener('elementor/frontend/init', ()=>{
	leaderlineInit();
});