@olenbetong/appframe-core 2.6.1 → 2.7.0

package/es/alert.js

@@ -0,0 +1,81 @@
+import { getLocalizedString } from "./getLocalizedString.js";
+const template = `
+	<dialog class="alert-dialog">
+			<form method="dialog">
+					<article></article>
+					<footer>
+							<menu></menu>
+					</footer>
+			</form>
+	</dialog>
+`;
+if (globalThis.document && !document.querySelector("#AlertDialogTemplate")) {
+    let $template = document.createElement("template");
+    $template.id = "AlertDialogTemplate";
+    $template.innerHTML = template;
+    document.body.append($template);
+}
+export function waitForDialog(dialog) {
+    return new Promise((resolve) => {
+        dialog.addEventListener("close", resolve, { once: true });
+    });
+}
+export async function openAlertDialog({ buttons, content, className }) {
+    let $template = document.querySelector("#AlertDialogTemplate");
+    if (!$template)
+        throw Error("No alert dialog template found");
+    let $dialog = $template.content.firstElementChild?.cloneNode(true);
+    let $content = $dialog?.querySelector("article");
+    let $menu = $dialog?.querySelector("footer menu");
+    console.log({ $dialog, $content, $menu });
+    if (!$dialog || !$content || !$menu)
+        throw Error("Invalid alert dialog template");
+    if (className) {
+        $dialog.classList.add(className);
+    }
+    $content.appendChild(typeof content === "string" ? document.createTextNode(content) : content);
+    for (let { label, value, primary } of buttons) {
+        let listItem = document.createElement("li");
+        let buttonElem = document.createElement("button");
+        buttonElem.value = value;
+        if (primary) {
+            buttonElem.classList.add("primary");
+        }
+        buttonElem.textContent = label;
+        listItem.appendChild(buttonElem);
+        $menu.appendChild(buttonElem);
+    }
+    document.body.appendChild($dialog);
+    $dialog.showModal();
+    await waitForDialog($dialog);
+    let result = $dialog.returnValue || "cancel";
+    document.body.removeChild($dialog);
+    return result;
+}
+export var ConfirmButtons;
+(function (ConfirmButtons) {
+    ConfirmButtons[ConfirmButtons["YesNo"] = 0] = "YesNo";
+    ConfirmButtons[ConfirmButtons["OkCancel"] = 1] = "OkCancel";
+})(ConfirmButtons || (ConfirmButtons = {}));
+export async function confirm(prompt, button = ConfirmButtons.YesNo) {
+    let buttons = [
+        { label: getLocalizedString("No"), value: "no" },
+        { label: getLocalizedString("Yes"), value: "yes", primary: true },
+    ];
+    console.log(button);
+    if (button == ConfirmButtons.OkCancel) {
+        buttons = [
+            { label: getLocalizedString("Cancel"), value: "no" },
+            { label: getLocalizedString("OK"), value: "yes", primary: true },
+        ];
+    }
+    let result = await openAlertDialog({ content: prompt, buttons });
+    return result === "yes";
+}
+export async function alert(prompt) {
+    await openAlertDialog({
+        content: prompt,
+        className: "alert",
+        buttons: [{ label: getLocalizedString("OK"), value: "ok", primary: true }],
+    });
+}

package/es/index.d.ts

@@ -21,6 +21,8 @@ export { logActivity, startActivity } from "./logActivity.js";
 export { default as SessionHandler } from "./SessionHandler.js";
 export { UserSession };
 export { getSettings, saveSettings } from "./settings.js";
+export { alert, confirm, ConfirmButtons, openAlertDialog, waitForDialog } from "./alert.js";
+export type { AlertDialogButton, AlertDialogOptions } from "./alert.js";
 export declare const version: string;
 declare global {
     var __VERSION__: string;

package/es/index.js

@@ -15,4 +15,5 @@ export { logActivity, startActivity } from "./logActivity.js";
 export { default as SessionHandler } from "./SessionHandler.js";
 export { UserSession };
 export { getSettings, saveSettings } from "./settings.js";
-export const version = "2.6.1";
+export { alert, confirm, ConfirmButtons, openAlertDialog, waitForDialog } from "./alert.js";
+export const version = "2.7.0";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olenbetong/appframe-core",
-	"version": "2.6.1",
+	"version": "2.7.0",
 	"description": "Javascript libraries to utilize the Appframe framework",
 	"type": "module",
 	"sideEffects": [
@@ -48,5 +48,5 @@
 	"devDependencies": {
 		"chalk": "^5.1.2"
 	},
-	"gitHead": "523363eb14f80f32006f78ec85f65fecb2bdc1b5"
+	"gitHead": "33c7f963b43ac6c4993b1da34d5761663e4c1546"
 }

package/src/alert.ts

@@ -0,0 +1,106 @@
+import { getLocalizedString } from "./getLocalizedString.js";
+
+const template = `
+	<dialog class="alert-dialog">
+			<form method="dialog">
+					<article></article>
+					<footer>
+							<menu></menu>
+					</footer>
+			</form>
+	</dialog>
+`;
+
+if (globalThis.document && !document.querySelector("#AlertDialogTemplate")) {
+	let $template = document.createElement("template");
+	$template.id = "AlertDialogTemplate";
+	$template.innerHTML = template;
+	document.body.append($template);
+}
+
+export function waitForDialog(dialog: HTMLDialogElement) {
+	return new Promise((resolve) => {
+		dialog.addEventListener("close", resolve, { once: true });
+	});
+}
+
+export type AlertDialogButton = {
+	label: string;
+	value: string;
+	primary?: boolean;
+};
+
+export type AlertDialogOptions = {
+	buttons: AlertDialogButton[];
+	content: string | HTMLElement;
+	className?: string;
+};
+
+export async function openAlertDialog({ buttons, content, className }: AlertDialogOptions) {
+	let $template = document.querySelector<HTMLTemplateElement>("#AlertDialogTemplate");
+	if (!$template) throw Error("No alert dialog template found");
+
+	let $dialog = $template.content.firstElementChild?.cloneNode(true) as HTMLDialogElement | null;
+	let $content = $dialog?.querySelector("article");
+	let $menu = $dialog?.querySelector("footer menu");
+	console.log({ $dialog, $content, $menu });
+	if (!$dialog || !$content || !$menu) throw Error("Invalid alert dialog template");
+
+	if (className) {
+		$dialog.classList.add(className);
+	}
+
+	$content.appendChild(typeof content === "string" ? document.createTextNode(content) : content);
+	for (let { label, value, primary } of buttons) {
+		let listItem = document.createElement("li");
+		let buttonElem = document.createElement("button");
+		buttonElem.value = value;
+		if (primary) {
+			buttonElem.classList.add("primary");
+		}
+		buttonElem.textContent = label;
+		listItem.appendChild(buttonElem);
+		$menu.appendChild(buttonElem);
+	}
+
+	document.body.appendChild($dialog);
+	$dialog.showModal();
+
+	await waitForDialog($dialog);
+	let result = $dialog.returnValue || "cancel";
+	document.body.removeChild($dialog);
+
+	return result;
+}
+
+export enum ConfirmButtons {
+	YesNo,
+	OkCancel,
+}
+
+export async function confirm(prompt: string, button: ConfirmButtons = ConfirmButtons.YesNo): Promise<boolean> {
+	let buttons: AlertDialogButton[] = [
+		{ label: getLocalizedString("No"), value: "no" },
+		{ label: getLocalizedString("Yes"), value: "yes", primary: true },
+	];
+
+	console.log(button);
+
+	if (button == ConfirmButtons.OkCancel) {
+		buttons = [
+			{ label: getLocalizedString("Cancel"), value: "no" },
+			{ label: getLocalizedString("OK"), value: "yes", primary: true },
+		];
+	}
+
+	let result = await openAlertDialog({ content: prompt, buttons });
+	return result === "yes";
+}
+
+export async function alert(prompt: string): Promise<void> {
+	await openAlertDialog({
+		content: prompt,
+		className: "alert",
+		buttons: [{ label: getLocalizedString("OK"), value: "ok", primary: true }],
+	});
+}

package/src/index.ts

@@ -22,6 +22,8 @@ export { logActivity, startActivity } from "./logActivity.js";
 export { default as SessionHandler } from "./SessionHandler.js";
 export { UserSession };
 export { getSettings, saveSettings } from "./settings.js";
+export { alert, confirm, ConfirmButtons, openAlertDialog, waitForDialog } from "./alert.js";
+export type { AlertDialogButton, AlertDialogOptions } from "./alert.js";
 
 export const version = __VERSION__;