alert.idjs

await alert("Alert message.", "warn");
await alert("Info message.", "info");
await alert("Unglaublich: Mit munterer Müdigkeit mehrfach gestrandet, eilen kabellose Kapuziner kantigen Kaufmannschaften hinterher. Greift da etwa die öde Haubitze nach Keimzellen kläglicher Katastralgemeinden.");


async function alert(msg, type) {

	if(!msg || msg.constructor !== String) {
		msg = "";
	}
	if(!type || type.constructor !== String) {
		type = "";
	}

	const app = global.app ?? require("indesign").app;

	let dialogElem = document.getElementById("rd-alert");
	if(!dialogElem) {
		dialogElem = createAlertDialog();
	}
	
	let backgroundColor;

	switch(type.toLowerCase()) {
		case "warn":
			backgroundColor = 'lightcoral';
			break;
		case "info":
			backgroundColor = 'lightgreen ';
			break;
		default:
			backgroundColor = 'initial';
	}

	dialogElem.style.backgroundColor = backgroundColor;

	if(backgroundColor === 'initial'){
		if(app.generalPreferences.uiBrightnessPreference <= 0.5) {
			dialogElem.style.color = "white";
		} else {
			dialogElem.style.color = "black";
		}
	}

	let msgElem = dialogElem.querySelector('#rd-alert-message');
	if(!!msgElem) {
		msgElem.textContent = msg;
	}
	
	await dialogElem.showModal();

	return dialogElem;
}

/**
 * Create dialog
 * @returns {Element}
 */
function createAlertDialog() {

	const DIALOG_ID	= "rd-alert";
	
	/* Namespace für styles hinzufügen rd- */
	const styles = `
		dialog#${DIALOG_ID} {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 80px;
			max-height: 800px;
			min-width: 200px;
			max-width: 400px;
			padding: 30px 40px 20px 40px;
			color: inherit;
		}
		p#${DIALOG_ID}-message {
			margin-bottom: 2rem;
			font-size: 1rem;
		}
	`;

	const template = `
		<p id="${DIALOG_ID}-message"></p>
		<sp-button id="${DIALOG_ID}-close-button">OK</sp-button>
	`;

	const styleElem = document.createElement('style');
	const stylesTextNode = document.createTextNode(styles);
	styleElem.appendChild(stylesTextNode);

	const headElem = document.querySelector('head');
	headElem.appendChild(styleElem);

	const dialogElem = document.createElement('dialog');
	dialogElem.setAttribute('id', DIALOG_ID);
	dialogElem.innerHTML = template;

	document.body.appendChild(dialogElem);

	const buttonElem = dialogElem.querySelector(`#${DIALOG_ID}-close-button`);
	buttonElem.addEventListener('click', evt => {
		dialogElem.close();
	});
	
	return dialogElem;
}