import type { Attachment } from 'svelte/attachments';

/**
 * A line of facts kept apart by dots (`.sep`) that wraps: a dot left at
 * the end of a line, or carried to the start of the next, is hidden, as
 * it would then part nothing. It keeps its place, so hiding it moves no
 * fact, and is judged again as the line is resized.
 */
export const wrapDots: Attachment<HTMLElement> = (line) => {
	const middle = (el: Element) => {
		const r = el.getBoundingClientRect();
		return r.top + r.height / 2;
	};
	const judge = () => {
		for (const dot of line.querySelectorAll<HTMLElement>('.sep')) {
			const at = middle(dot);
			const apart = (el: Element | null) =>
				!!el && Math.abs(middle(el) - at) > dot.offsetHeight / 2;
			const alone = apart(dot.previousElementSibling) || apart(dot.nextElementSibling);
			dot.classList.toggle('sep-wrapped', alone);
		}
	};
	judge();
	const sized = new ResizeObserver(judge);
	sized.observe(line);
	return () => sized.disconnect();
};