astro/dist/runtime/client/dev-toolbar/apps/utils/window.js

Astro is a modern site builder with web best practices, performance, and DX front-of-mind.

import { settings } from "../../settings.js";
export function createWindowElement(content, placement = settings.config.placement) {
	const windowElement = document.createElement("astro-dev-toolbar-window");
	windowElement.innerHTML = content;
	windowElement.placement = placement;
	return windowElement;
}
export function closeOnOutsideClick(eventTarget, additionalCheck) {
	function onPageClick(event) {
		const target = event.target;
		if (!target) return;
		if (!target.closest) return;
		if (target.closest("astro-dev-toolbar")) return;
		if (additionalCheck && additionalCheck(target)) return;
		eventTarget.dispatchEvent(new CustomEvent("toggle-app", { detail: { state: false } }));
	}
	eventTarget.addEventListener("app-toggled", (event) => {
		if (event.detail.state === true) {
			document.addEventListener("click", onPageClick, true);
		} else {
			document.removeEventListener("click", onPageClick, true);
		}
	});
}
export function synchronizePlacementOnUpdate(eventTarget, canvas) {
	eventTarget.addEventListener("placement-updated", (evt) => {
		if (!(evt instanceof CustomEvent)) {
			return;
		}
		const windowElement = canvas.querySelector("astro-dev-toolbar-window");
		if (!windowElement) {
			return;
		}
		const event = evt;
		windowElement.placement = event.detail.placement;
	});
}