Newer
Older
vmk-ui-kit / src / js / components / popover.js
const initializedRoots = new WeakSet();

function open(root) {
	root.classList.add("is-open");
}

function close(root) {
	root.classList.remove("is-open");
}

function isOpen(root) {
	return root.classList.contains("is-open");
}

function toggle(root) {
	if(isOpen(root)) {
		close(root);
	} else {
		open(root);
	}
}

function init(root = document) {
	if(initializedRoots.has(root)) {
		return;
	}

	root.addEventListener("click", event => {
		const trigger = event.target.closest("[data-popover-toggle]");

		if(trigger) {
			const popover = trigger.closest(".popover");

			if(popover) {
				event.preventDefault();
				toggle(popover);
			}

			return;
		}

		const inside = event.target.closest(".popover-panel");

		if(inside) {
			return;
		}

		root.querySelectorAll(".popover.is-open:not([data-vmk-managed])").forEach(popover => close(popover));
	});

	root.addEventListener("keydown", event => {
		if(event.key === "Escape") {
			root.querySelectorAll(".popover.is-open:not([data-vmk-managed])").forEach(popover => close(popover));
		}
	});

	initializedRoots.add(root);
}

export default {
	init,
	open,
	close,
	toggle,
	isOpen
};