🔥删除：暂时注释不必要节点
This commit is contained in:
arlozen
@@ -1,2 +1,2 @@
|
||||
from .toast_box import *
|
||||
from .dialog_box import *
|
||||
# from .toast_box import *
|
||||
# from .dialog_box import *
|
||||
+41
-41
@@ -1,46 +1,46 @@
|
||||
from ... import register_node
|
||||
# from ... import register_node
|
||||
|
||||
@register_node(emoji="🪲")
|
||||
class DialogBox:
|
||||
"""
|
||||
A ComfyUI node that displays dialog boxes during workflow execution.
|
||||
"""
|
||||
# @register_node(emoji="🪲")
|
||||
# class DialogBox:
|
||||
# """
|
||||
# A ComfyUI node that displays dialog boxes during workflow execution.
|
||||
# """
|
||||
|
||||
def __init__(self):
|
||||
pass
|
||||
# def __init__(self):
|
||||
# pass
|
||||
|
||||
@classmethod
|
||||
def INPUT_TYPES(s):
|
||||
return {
|
||||
"required": {
|
||||
"dialog_type": (["info", "success", "warn", "error", "confirm"], {
|
||||
"default": "info"
|
||||
}),
|
||||
"message": ("STRING", {
|
||||
"default": "Hello from DialogBox!",
|
||||
"multiline": True
|
||||
}),
|
||||
}
|
||||
}
|
||||
# @classmethod
|
||||
# def INPUT_TYPES(s):
|
||||
# return {
|
||||
# "required": {
|
||||
# "dialog_type": (["info", "success", "warn", "error", "confirm"], {
|
||||
# "default": "info"
|
||||
# }),
|
||||
# "message": ("STRING", {
|
||||
# "default": "Hello from DialogBox!",
|
||||
# "multiline": True
|
||||
# }),
|
||||
# }
|
||||
# }
|
||||
|
||||
RETURN_TYPES = ("STRING",)
|
||||
RETURN_NAMES = ("message",)
|
||||
FUNCTION = "run"
|
||||
CATEGORY = "EasyToolkit/Debug"
|
||||
OUTPUT_NODE = True
|
||||
# RETURN_TYPES = ("STRING",)
|
||||
# RETURN_NAMES = ("message",)
|
||||
# FUNCTION = "run"
|
||||
# CATEGORY = "EasyToolkit/Debug"
|
||||
# OUTPUT_NODE = True
|
||||
|
||||
def run(self, dialog_type, message):
|
||||
"""
|
||||
Display a dialog box and return user response.
|
||||
"""
|
||||
# The actual dialog display is handled by the frontend JavaScript
|
||||
# This node triggers the frontend extension and passes the dialog configuration
|
||||
return {
|
||||
"result": (message,), # Default empty response, will be updated by frontend
|
||||
"ui": {
|
||||
"dialogs": [{
|
||||
"type": dialog_type,
|
||||
"message": message
|
||||
}]
|
||||
}
|
||||
}
|
||||
# def run(self, dialog_type, message):
|
||||
# """
|
||||
# Display a dialog box and return user response.
|
||||
# """
|
||||
# # The actual dialog display is handled by the frontend JavaScript
|
||||
# # This node triggers the frontend extension and passes the dialog configuration
|
||||
# return {
|
||||
# "result": (message,), # Default empty response, will be updated by frontend
|
||||
# "ui": {
|
||||
# "dialogs": [{
|
||||
# "type": dialog_type,
|
||||
# "message": message
|
||||
# }]
|
||||
# }
|
||||
# }
|
||||
+53
-53
@@ -1,58 +1,58 @@
|
||||
from ... import register_node
|
||||
# from ... import register_node
|
||||
|
||||
@register_node(emoji="🪲")
|
||||
class ToastBox:
|
||||
"""
|
||||
A ComfyUI node that displays toast notifications during workflow execution.
|
||||
"""
|
||||
# @register_node(emoji="🪲")
|
||||
# class ToastBox:
|
||||
# """
|
||||
# A ComfyUI node that displays toast notifications during workflow execution.
|
||||
# """
|
||||
|
||||
def __init__(self):
|
||||
pass
|
||||
# def __init__(self):
|
||||
# pass
|
||||
|
||||
@classmethod
|
||||
def INPUT_TYPES(s):
|
||||
return {
|
||||
"required": {
|
||||
"type": (["info", "success", "warn", "error"], {
|
||||
"default": "info"
|
||||
}),
|
||||
"mode": (["comfyui", "system"], {
|
||||
"default": "comfyui"
|
||||
}),
|
||||
"message": ("STRING", {
|
||||
"default": "Hello from ToastBox!",
|
||||
"multiline": True
|
||||
}),
|
||||
"duration": ("INT", {
|
||||
"default": 3000,
|
||||
"min": 1000,
|
||||
"max": 10000,
|
||||
"step": 500
|
||||
}),
|
||||
}
|
||||
}
|
||||
# @classmethod
|
||||
# def INPUT_TYPES(s):
|
||||
# return {
|
||||
# "required": {
|
||||
# "type": (["info", "success", "warn", "error"], {
|
||||
# "default": "info"
|
||||
# }),
|
||||
# "mode": (["comfyui", "system"], {
|
||||
# "default": "comfyui"
|
||||
# }),
|
||||
# "message": ("STRING", {
|
||||
# "default": "Hello from ToastBox!",
|
||||
# "multiline": True
|
||||
# }),
|
||||
# "duration": ("INT", {
|
||||
# "default": 3000,
|
||||
# "min": 1000,
|
||||
# "max": 10000,
|
||||
# "step": 500
|
||||
# }),
|
||||
# }
|
||||
# }
|
||||
|
||||
RETURN_TYPES = ("STRING",)
|
||||
RETURN_NAMES = ("message",)
|
||||
FUNCTION = "run"
|
||||
CATEGORY = "EasyToolkit/Debug"
|
||||
OUTPUT_NODE = True
|
||||
# RETURN_TYPES = ("STRING",)
|
||||
# RETURN_NAMES = ("message",)
|
||||
# FUNCTION = "run"
|
||||
# CATEGORY = "EasyToolkit/Debug"
|
||||
# OUTPUT_NODE = True
|
||||
|
||||
def run(self, type, message, duration=3000, mode="comfyui"):
|
||||
"""
|
||||
Display a toast notification and pass through any input data.
|
||||
"""
|
||||
# This node doesn't modify data, it just triggers a frontend notification
|
||||
# The actual toast display is handled by the frontend JavaScript
|
||||
# The node execution itself triggers the frontend extension
|
||||
return {
|
||||
"result": (message,),
|
||||
"ui": {
|
||||
"notifications": [{
|
||||
"type": type,
|
||||
"message": message,
|
||||
"duration": duration,
|
||||
"mode": mode
|
||||
}]
|
||||
}
|
||||
}
|
||||
# def run(self, type, message, duration=3000, mode="comfyui"):
|
||||
# """
|
||||
# Display a toast notification and pass through any input data.
|
||||
# """
|
||||
# # This node doesn't modify data, it just triggers a frontend notification
|
||||
# # The actual toast display is handled by the frontend JavaScript
|
||||
# # The node execution itself triggers the frontend extension
|
||||
# return {
|
||||
# "result": (message,),
|
||||
# "ui": {
|
||||
# "notifications": [{
|
||||
# "type": type,
|
||||
# "message": message,
|
||||
# "duration": duration,
|
||||
# "mode": mode
|
||||
# }]
|
||||
# }
|
||||
# }
|
||||
+476
-476
@@ -1,506 +1,506 @@
|
||||
import { app } from "../../scripts/app.js";
|
||||
import {
|
||||
createMessage,
|
||||
createDialogOverlay,
|
||||
createDialogContainer,
|
||||
createDialogTitle,
|
||||
createDialogContent,
|
||||
createButtonContainer,
|
||||
createDialogButton,
|
||||
setupDialogEvents
|
||||
} from "./ui_utils.js";
|
||||
|
||||
/**
|
||||
* Utility functions for ComfyUI dialog and notification boxes
|
||||
* Provides a simplified and consistent API for showing messages to users
|
||||
*/
|
||||
|
||||
/**
|
||||
* Dialog button types enumeration
|
||||
*/
|
||||
export const DialogButtonType = {
|
||||
OK_ONLY: 'ok_only',
|
||||
OK_CANCEL: 'ok_cancel'
|
||||
};
|
||||
|
||||
/**
|
||||
* Dialog result enumeration
|
||||
*/
|
||||
export const DialogResult = {
|
||||
OK: 'ok',
|
||||
CANCEL: 'cancel'
|
||||
};
|
||||
|
||||
/**
|
||||
* Begin a custom dialog box
|
||||
* Creates the overlay and dialog container with title
|
||||
* @param {string} title - Dialog title
|
||||
* @param {Object} [options] - Dialog options
|
||||
* @param {number} [options.minWidth=400] - Minimum dialog width in pixels
|
||||
* @param {number} [options.maxWidth=600] - Maximum dialog width in pixels
|
||||
* @param {number} [options.maxHeight=80] - Maximum dialog height as viewport percentage
|
||||
* @returns {Object} Dialog context containing overlay, dialog, and content elements
|
||||
*/
|
||||
export function beginDialogBox(title, options = {}) {
|
||||
const {
|
||||
minWidth = 400,
|
||||
maxWidth = 600,
|
||||
maxHeight = 80
|
||||
} = options;
|
||||
|
||||
// Create overlay
|
||||
const overlay = createDialogOverlay();
|
||||
|
||||
// Create dialog
|
||||
const dialog = createDialogContainer({ minWidth, maxWidth, maxHeight });
|
||||
|
||||
// Title
|
||||
const titleElement = createDialogTitle(title);
|
||||
dialog.appendChild(titleElement);
|
||||
|
||||
// Content container for user controls
|
||||
const content = createDialogContent();
|
||||
dialog.appendChild(content);
|
||||
|
||||
// Add dialog to overlay
|
||||
overlay.appendChild(dialog);
|
||||
|
||||
// Add to body
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
// Close on Escape key
|
||||
const escapeHandler = (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
document.body.removeChild(overlay);
|
||||
document.removeEventListener('keydown', escapeHandler);
|
||||
}
|
||||
};
|
||||
|
||||
// Setup event handlers
|
||||
const cleanupEvents = setupDialogEvents(overlay, escapeHandler);
|
||||
|
||||
return {
|
||||
overlay,
|
||||
dialog,
|
||||
content,
|
||||
escapeHandler,
|
||||
cleanupEvents
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* End a custom dialog box
|
||||
* Adds buttons and handles cleanup
|
||||
* @param {Object} dialogContext - Dialog context from beginDialogBox
|
||||
* @param {DialogButtonType} buttonType - Type of buttons to show
|
||||
* @param {Function} onButtonClick - Callback when buttons are clicked
|
||||
* @param {Object} [options] - Button options
|
||||
* @param {string} [options.okText='Ok'] - Text for OK button
|
||||
* @param {string} [options.cancelText='Cancel'] - Text for Cancel button
|
||||
*/
|
||||
export function endDialogBox(dialogContext, buttonType, onButtonClick, options = {}) {
|
||||
const {
|
||||
overlay,
|
||||
escapeHandler,
|
||||
cleanupEvents
|
||||
} = dialogContext;
|
||||
|
||||
const {
|
||||
okText = 'Ok',
|
||||
cancelText = 'Cancel'
|
||||
} = options;
|
||||
|
||||
// Buttons container
|
||||
const buttonContainer = createButtonContainer();
|
||||
|
||||
// Cleanup function
|
||||
const cleanup = () => {
|
||||
document.body.removeChild(overlay);
|
||||
if (cleanupEvents) {
|
||||
cleanupEvents();
|
||||
} else {
|
||||
document.removeEventListener('keydown', escapeHandler);
|
||||
}
|
||||
};
|
||||
|
||||
// Add buttons based on buttonType
|
||||
if (buttonType === DialogButtonType.OK_ONLY) {
|
||||
const okButton = createDialogButton(okText, true);
|
||||
okButton.onclick = () => {
|
||||
cleanup();
|
||||
if (onButtonClick) {
|
||||
onButtonClick(DialogResult.OK);
|
||||
}
|
||||
};
|
||||
buttonContainer.appendChild(okButton);
|
||||
} else if (buttonType === DialogButtonType.OK_CANCEL) {
|
||||
const cancelButton = createDialogButton(cancelText, false);
|
||||
cancelButton.onclick = () => {
|
||||
cleanup();
|
||||
if (onButtonClick) {
|
||||
onButtonClick(DialogResult.CANCEL);
|
||||
}
|
||||
};
|
||||
|
||||
const okButton = createDialogButton(okText, true);
|
||||
okButton.onclick = () => {
|
||||
cleanup();
|
||||
if (onButtonClick) {
|
||||
onButtonClick(DialogResult.OK);
|
||||
}
|
||||
};
|
||||
|
||||
buttonContainer.appendChild(okButton);
|
||||
buttonContainer.appendChild(cancelButton);
|
||||
}
|
||||
|
||||
dialogContext.dialog.appendChild(buttonContainer);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Show a message dialog with customizable appearance
|
||||
* @param {string} message - The message to display
|
||||
* @param {Object} [options] - Message options
|
||||
* @param {string} [options.title="Message"] - Dialog title
|
||||
* @param {string} [options.color="#fff"] - Text color
|
||||
* @param {number} [options.minWidth=300] - Minimum dialog width
|
||||
* @param {number} [options.maxWidth=500] - Maximum dialog width
|
||||
* @param {number} [options.maxHeight=80] - Maximum dialog height as viewport percentage
|
||||
*/
|
||||
export function showMessage(message, options = {}) {
|
||||
const {
|
||||
title = "Message",
|
||||
color = "#fff",
|
||||
minWidth = 300,
|
||||
maxWidth = 500,
|
||||
maxHeight = 80
|
||||
} = options;
|
||||
|
||||
const dialogContext = beginDialogBox(title, {
|
||||
minWidth,
|
||||
maxWidth,
|
||||
maxHeight
|
||||
});
|
||||
|
||||
const messageElement = createMessage(message, { color });
|
||||
dialogContext.content.appendChild(messageElement);
|
||||
|
||||
endDialogBox(dialogContext, DialogButtonType.OK_ONLY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show an error message dialog
|
||||
* @param {string} message - The error message
|
||||
* @param {Error} [error] - Optional error object for logging
|
||||
*/
|
||||
export function showError(message, error = null) {
|
||||
const errorMsg = error ? `${message}: ${error.message}` : message;
|
||||
|
||||
showMessage(errorMsg, {
|
||||
title: "❌ Error",
|
||||
color: "#ff6b6b",
|
||||
minWidth: 400,
|
||||
maxWidth: 600
|
||||
});
|
||||
|
||||
if (error) {
|
||||
console.error("[Error]", message, error);
|
||||
} else {
|
||||
console.error("[Error]", message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a success message dialog
|
||||
* @param {string} message - The success message
|
||||
*/
|
||||
export function showSuccess(message) {
|
||||
showMessage(message, {
|
||||
title: "✅ Success",
|
||||
color: "#4caf50",
|
||||
minWidth: 300,
|
||||
maxWidth: 500
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a warning message dialog
|
||||
* @param {string} message - The warning message
|
||||
*/
|
||||
export function showWarning(message) {
|
||||
showMessage(message, {
|
||||
title: "⚠️ Warning",
|
||||
color: "#ff9800",
|
||||
minWidth: 400,
|
||||
maxWidth: 600
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show an info message dialog
|
||||
* @param {string} message - The info message
|
||||
*/
|
||||
export function showInfo(message) {
|
||||
showMessage(message, {
|
||||
title: "ℹ️ Information",
|
||||
color: "#2196f3",
|
||||
minWidth: 300,
|
||||
maxWidth: 500
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a confirmation dialog with custom yes/no text
|
||||
* @param {string} message - The confirmation message
|
||||
* @param {string} [yesText="OK"] - Text for yes button
|
||||
* @param {string} [noText="Cancel"] - Text for no button
|
||||
* @returns {Promise<boolean>} - Promise that resolves to true if user confirmed, false if cancelled
|
||||
*/
|
||||
export function showConfirmDialog(message, yesText = "OK", noText = "Cancel") {
|
||||
return new Promise((resolve) => {
|
||||
const dialogContext = beginDialogBox("Confirmation", {
|
||||
minWidth: 400,
|
||||
maxWidth: 600
|
||||
});
|
||||
|
||||
const messageElement = createMessage(message, { color: "#fff" });
|
||||
messageElement.style.marginBottom = '15px';
|
||||
dialogContext.content.appendChild(messageElement);
|
||||
|
||||
endDialogBox(dialogContext, DialogButtonType.OK_CANCEL, (result) => {
|
||||
resolve(result === DialogResult.OK);
|
||||
}, {
|
||||
okText: yesText,
|
||||
cancelText: noText
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a toast notification
|
||||
* @param {Object} options - Toast options
|
||||
* @param {string} options.severity - Severity level: "info", "success", "warn", "error"
|
||||
* @param {string} options.summary - Toast title/summary
|
||||
* @param {string} options.detail - Toast detail message
|
||||
* @param {number} [options.life=3000] - Duration in milliseconds (0 for persistent)
|
||||
*/
|
||||
export function showToast({ severity = "info", summary, detail, life = 3000 }) {
|
||||
app.extensionManager.toast.add({
|
||||
severity,
|
||||
summary,
|
||||
detail,
|
||||
life
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show an info toast notification
|
||||
* @param {string} summary - Toast title
|
||||
* @param {string} detail - Toast detail message
|
||||
* @param {number} [life=3000] - Duration in milliseconds
|
||||
*/
|
||||
export function showToastInfo(summary, detail, life = 3000) {
|
||||
showToast({
|
||||
severity: "info",
|
||||
summary,
|
||||
detail,
|
||||
life
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a success toast notification
|
||||
* @param {string} summary - Toast title
|
||||
* @param {string} detail - Toast detail message
|
||||
* @param {number} [life=3000] - Duration in milliseconds
|
||||
*/
|
||||
export function showToastSuccess(summary, detail, life = 3000) {
|
||||
showToast({
|
||||
severity: "success",
|
||||
summary,
|
||||
detail,
|
||||
life
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show an error toast notification
|
||||
* @param {string} summary - Toast title
|
||||
* @param {string} detail - Toast detail message
|
||||
* @param {number} [life=5000] - Duration in milliseconds (longer default for errors)
|
||||
*/
|
||||
export function showToastError(summary, detail, life = 5000) {
|
||||
showToast({
|
||||
severity: "error",
|
||||
summary,
|
||||
detail,
|
||||
life
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a warning toast notification
|
||||
* @param {string} summary - Toast title
|
||||
* @param {string} detail - Toast detail message
|
||||
* @param {number} [life=4000] - Duration in milliseconds
|
||||
*/
|
||||
export function showToastWarning(summary, detail, life = 4000) {
|
||||
showToast({
|
||||
severity: "warn",
|
||||
summary,
|
||||
detail,
|
||||
life
|
||||
});
|
||||
}
|
||||
// import { app } from "../../scripts/app.js";
|
||||
// import {
|
||||
// createMessage,
|
||||
// createDialogOverlay,
|
||||
// createDialogContainer,
|
||||
// createDialogTitle,
|
||||
// createDialogContent,
|
||||
// createButtonContainer,
|
||||
// createDialogButton,
|
||||
// setupDialogEvents
|
||||
// } from "./ui_utils.js";
|
||||
|
||||
// /**
|
||||
// * Windows System Notification Functions
|
||||
// * Provides system-level notifications using Web Notifications API
|
||||
// * Utility functions for ComfyUI dialog and notification boxes
|
||||
// * Provides a simplified and consistent API for showing messages to users
|
||||
// */
|
||||
|
||||
// /**
|
||||
// * Check if system notifications are supported and permission is granted
|
||||
// * @returns {Promise<boolean>} - Promise that resolves to true if notifications are available
|
||||
// * Dialog button types enumeration
|
||||
// */
|
||||
// export async function checkNotificationSupport() {
|
||||
// if (!('Notification' in window)) {
|
||||
// console.warn('This browser does not support system notifications');
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// if (Notification.permission === 'granted') {
|
||||
// return true;
|
||||
// }
|
||||
|
||||
// if (Notification.permission === 'denied') {
|
||||
// console.warn('Notification permission has been denied');
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// // Request permission
|
||||
// const permission = await Notification.requestPermission();
|
||||
// return permission === 'granted';
|
||||
// }
|
||||
// export const DialogButtonType = {
|
||||
// OK_ONLY: 'ok_only',
|
||||
// OK_CANCEL: 'ok_cancel'
|
||||
// };
|
||||
|
||||
// /**
|
||||
// * Show a system notification
|
||||
// * @param {string} title - Notification title
|
||||
// * @param {Object} [options] - Notification options
|
||||
// * @param {string} [options.body] - Notification body text
|
||||
// * @param {string} [options.icon] - URL of notification icon
|
||||
// * @param {string} [options.image] - URL of notification image
|
||||
// * @param {string} [options.tag] - Notification tag for grouping
|
||||
// * @param {boolean} [options.requireInteraction=false] - Whether notification requires user interaction
|
||||
// * @param {number} [options.timeout=5000] - Auto-close timeout in milliseconds (0 for no auto-close)
|
||||
// * @param {Array} [options.actions] - Array of action objects
|
||||
// * @returns {Promise<Notification|null>} - Promise that resolves to Notification object or null if failed
|
||||
// * Dialog result enumeration
|
||||
// */
|
||||
// export async function showSystemNotification(title, options = {}) {
|
||||
// export const DialogResult = {
|
||||
// OK: 'ok',
|
||||
// CANCEL: 'cancel'
|
||||
// };
|
||||
|
||||
// /**
|
||||
// * Begin a custom dialog box
|
||||
// * Creates the overlay and dialog container with title
|
||||
// * @param {string} title - Dialog title
|
||||
// * @param {Object} [options] - Dialog options
|
||||
// * @param {number} [options.minWidth=400] - Minimum dialog width in pixels
|
||||
// * @param {number} [options.maxWidth=600] - Maximum dialog width in pixels
|
||||
// * @param {number} [options.maxHeight=80] - Maximum dialog height as viewport percentage
|
||||
// * @returns {Object} Dialog context containing overlay, dialog, and content elements
|
||||
// */
|
||||
// export function beginDialogBox(title, options = {}) {
|
||||
// const {
|
||||
// body = '',
|
||||
// icon = '',
|
||||
// image = '',
|
||||
// tag = '',
|
||||
// requireInteraction = false,
|
||||
// timeout = 5000,
|
||||
// actions = []
|
||||
// minWidth = 400,
|
||||
// maxWidth = 600,
|
||||
// maxHeight = 80
|
||||
// } = options;
|
||||
|
||||
// const hasSupport = await checkNotificationSupport();
|
||||
// if (!hasSupport) {
|
||||
// console.warn('System notifications not available, falling back to toast');
|
||||
// showToastInfo(title, body);
|
||||
// return null;
|
||||
// }
|
||||
// // Create overlay
|
||||
// const overlay = createDialogOverlay();
|
||||
|
||||
// const notificationOptions = {
|
||||
// body,
|
||||
// icon,
|
||||
// image,
|
||||
// tag,
|
||||
// requireInteraction,
|
||||
// actions
|
||||
// // Create dialog
|
||||
// const dialog = createDialogContainer({ minWidth, maxWidth, maxHeight });
|
||||
|
||||
// // Title
|
||||
// const titleElement = createDialogTitle(title);
|
||||
// dialog.appendChild(titleElement);
|
||||
|
||||
// // Content container for user controls
|
||||
// const content = createDialogContent();
|
||||
// dialog.appendChild(content);
|
||||
|
||||
// // Add dialog to overlay
|
||||
// overlay.appendChild(dialog);
|
||||
|
||||
// // Add to body
|
||||
// document.body.appendChild(overlay);
|
||||
|
||||
// // Close on Escape key
|
||||
// const escapeHandler = (e) => {
|
||||
// if (e.key === 'Escape') {
|
||||
// document.body.removeChild(overlay);
|
||||
// document.removeEventListener('keydown', escapeHandler);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const notification = new Notification(title, notificationOptions);
|
||||
// // Setup event handlers
|
||||
// const cleanupEvents = setupDialogEvents(overlay, escapeHandler);
|
||||
|
||||
// // Auto-close if timeout is specified
|
||||
// if (timeout > 0) {
|
||||
// setTimeout(() => {
|
||||
// notification.close();
|
||||
// }, timeout);
|
||||
// }
|
||||
|
||||
// return notification;
|
||||
// return {
|
||||
// overlay,
|
||||
// dialog,
|
||||
// content,
|
||||
// escapeHandler,
|
||||
// cleanupEvents
|
||||
// };
|
||||
// }
|
||||
|
||||
/**
|
||||
* Windows-style notification utilities
|
||||
* Provides Windows-specific notification patterns
|
||||
*/
|
||||
|
||||
// /**
|
||||
// * Request notification permission with user-friendly dialog
|
||||
// * @returns {Promise<boolean>} - Promise that resolves to true if permission granted
|
||||
// * End a custom dialog box
|
||||
// * Adds buttons and handles cleanup
|
||||
// * @param {Object} dialogContext - Dialog context from beginDialogBox
|
||||
// * @param {DialogButtonType} buttonType - Type of buttons to show
|
||||
// * @param {Function} onButtonClick - Callback when buttons are clicked
|
||||
// * @param {Object} [options] - Button options
|
||||
// * @param {string} [options.okText='Ok'] - Text for OK button
|
||||
// * @param {string} [options.cancelText='Cancel'] - Text for Cancel button
|
||||
// */
|
||||
// export async function requestNotificationPermission() {
|
||||
// if (!('Notification' in window)) {
|
||||
// showError('System notifications are not supported in this browser');
|
||||
// return false;
|
||||
// }
|
||||
// export function endDialogBox(dialogContext, buttonType, onButtonClick, options = {}) {
|
||||
// const {
|
||||
// overlay,
|
||||
// escapeHandler,
|
||||
// cleanupEvents
|
||||
// } = dialogContext;
|
||||
|
||||
// if (Notification.permission === 'granted') {
|
||||
// return true;
|
||||
// }
|
||||
// const {
|
||||
// okText = 'Ok',
|
||||
// cancelText = 'Cancel'
|
||||
// } = options;
|
||||
|
||||
// if (Notification.permission === 'denied') {
|
||||
// showError('Notification permission has been denied. Please enable notifications in your browser settings.');
|
||||
// return false;
|
||||
// }
|
||||
// // Buttons container
|
||||
// const buttonContainer = createButtonContainer();
|
||||
|
||||
// // Show a friendly permission request dialog
|
||||
// const granted = await showConfirmDialog(
|
||||
// 'Would you like to receive system notifications for workflow updates?',
|
||||
// 'Allow Notifications',
|
||||
// 'Not Now'
|
||||
// );
|
||||
|
||||
// if (granted) {
|
||||
// const permission = await Notification.requestPermission();
|
||||
// if (permission === 'granted') {
|
||||
// showSuccess('Notification permission granted! You will now receive system notifications.');
|
||||
// return true;
|
||||
// // Cleanup function
|
||||
// const cleanup = () => {
|
||||
// document.body.removeChild(overlay);
|
||||
// if (cleanupEvents) {
|
||||
// cleanupEvents();
|
||||
// } else {
|
||||
// showWarning('Notification permission was not granted. You can enable it later in browser settings.');
|
||||
// return false;
|
||||
// document.removeEventListener('keydown', escapeHandler);
|
||||
// }
|
||||
// };
|
||||
|
||||
// // Add buttons based on buttonType
|
||||
// if (buttonType === DialogButtonType.OK_ONLY) {
|
||||
// const okButton = createDialogButton(okText, true);
|
||||
// okButton.onclick = () => {
|
||||
// cleanup();
|
||||
// if (onButtonClick) {
|
||||
// onButtonClick(DialogResult.OK);
|
||||
// }
|
||||
// };
|
||||
// buttonContainer.appendChild(okButton);
|
||||
// } else if (buttonType === DialogButtonType.OK_CANCEL) {
|
||||
// const cancelButton = createDialogButton(cancelText, false);
|
||||
// cancelButton.onclick = () => {
|
||||
// cleanup();
|
||||
// if (onButtonClick) {
|
||||
// onButtonClick(DialogResult.CANCEL);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const okButton = createDialogButton(okText, true);
|
||||
// okButton.onclick = () => {
|
||||
// cleanup();
|
||||
// if (onButtonClick) {
|
||||
// onButtonClick(DialogResult.OK);
|
||||
// }
|
||||
// };
|
||||
|
||||
// buttonContainer.appendChild(okButton);
|
||||
// buttonContainer.appendChild(cancelButton);
|
||||
// }
|
||||
|
||||
// return false;
|
||||
// dialogContext.dialog.appendChild(buttonContainer);
|
||||
// }
|
||||
|
||||
// Default export with all functions
|
||||
export default {
|
||||
DialogButtonType,
|
||||
DialogResult,
|
||||
beginDialogBox,
|
||||
endDialogBox,
|
||||
showMessage,
|
||||
showError,
|
||||
showSuccess,
|
||||
showWarning,
|
||||
showInfo,
|
||||
showConfirmDialog,
|
||||
showToast,
|
||||
showToastInfo,
|
||||
showToastSuccess,
|
||||
showToastError,
|
||||
showToastWarning,
|
||||
// // Windows System Notification Functions
|
||||
// checkNotificationSupport,
|
||||
// showSystemNotification,
|
||||
// closeNotificationsByTag,
|
||||
// requestNotificationPermission
|
||||
};
|
||||
|
||||
// /**
|
||||
// * Show a message dialog with customizable appearance
|
||||
// * @param {string} message - The message to display
|
||||
// * @param {Object} [options] - Message options
|
||||
// * @param {string} [options.title="Message"] - Dialog title
|
||||
// * @param {string} [options.color="#fff"] - Text color
|
||||
// * @param {number} [options.minWidth=300] - Minimum dialog width
|
||||
// * @param {number} [options.maxWidth=500] - Maximum dialog width
|
||||
// * @param {number} [options.maxHeight=80] - Maximum dialog height as viewport percentage
|
||||
// */
|
||||
// export function showMessage(message, options = {}) {
|
||||
// const {
|
||||
// title = "Message",
|
||||
// color = "#fff",
|
||||
// minWidth = 300,
|
||||
// maxWidth = 500,
|
||||
// maxHeight = 80
|
||||
// } = options;
|
||||
|
||||
// const dialogContext = beginDialogBox(title, {
|
||||
// minWidth,
|
||||
// maxWidth,
|
||||
// maxHeight
|
||||
// });
|
||||
|
||||
// const messageElement = createMessage(message, { color });
|
||||
// dialogContext.content.appendChild(messageElement);
|
||||
|
||||
// endDialogBox(dialogContext, DialogButtonType.OK_ONLY);
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Show an error message dialog
|
||||
// * @param {string} message - The error message
|
||||
// * @param {Error} [error] - Optional error object for logging
|
||||
// */
|
||||
// export function showError(message, error = null) {
|
||||
// const errorMsg = error ? `${message}: ${error.message}` : message;
|
||||
|
||||
// showMessage(errorMsg, {
|
||||
// title: "❌ Error",
|
||||
// color: "#ff6b6b",
|
||||
// minWidth: 400,
|
||||
// maxWidth: 600
|
||||
// });
|
||||
|
||||
// if (error) {
|
||||
// console.error("[Error]", message, error);
|
||||
// } else {
|
||||
// console.error("[Error]", message);
|
||||
// }
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Show a success message dialog
|
||||
// * @param {string} message - The success message
|
||||
// */
|
||||
// export function showSuccess(message) {
|
||||
// showMessage(message, {
|
||||
// title: "✅ Success",
|
||||
// color: "#4caf50",
|
||||
// minWidth: 300,
|
||||
// maxWidth: 500
|
||||
// });
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Show a warning message dialog
|
||||
// * @param {string} message - The warning message
|
||||
// */
|
||||
// export function showWarning(message) {
|
||||
// showMessage(message, {
|
||||
// title: "⚠️ Warning",
|
||||
// color: "#ff9800",
|
||||
// minWidth: 400,
|
||||
// maxWidth: 600
|
||||
// });
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Show an info message dialog
|
||||
// * @param {string} message - The info message
|
||||
// */
|
||||
// export function showInfo(message) {
|
||||
// showMessage(message, {
|
||||
// title: "ℹ️ Information",
|
||||
// color: "#2196f3",
|
||||
// minWidth: 300,
|
||||
// maxWidth: 500
|
||||
// });
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Show a confirmation dialog with custom yes/no text
|
||||
// * @param {string} message - The confirmation message
|
||||
// * @param {string} [yesText="OK"] - Text for yes button
|
||||
// * @param {string} [noText="Cancel"] - Text for no button
|
||||
// * @returns {Promise<boolean>} - Promise that resolves to true if user confirmed, false if cancelled
|
||||
// */
|
||||
// export function showConfirmDialog(message, yesText = "OK", noText = "Cancel") {
|
||||
// return new Promise((resolve) => {
|
||||
// const dialogContext = beginDialogBox("Confirmation", {
|
||||
// minWidth: 400,
|
||||
// maxWidth: 600
|
||||
// });
|
||||
|
||||
// const messageElement = createMessage(message, { color: "#fff" });
|
||||
// messageElement.style.marginBottom = '15px';
|
||||
// dialogContext.content.appendChild(messageElement);
|
||||
|
||||
// endDialogBox(dialogContext, DialogButtonType.OK_CANCEL, (result) => {
|
||||
// resolve(result === DialogResult.OK);
|
||||
// }, {
|
||||
// okText: yesText,
|
||||
// cancelText: noText
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Show a toast notification
|
||||
// * @param {Object} options - Toast options
|
||||
// * @param {string} options.severity - Severity level: "info", "success", "warn", "error"
|
||||
// * @param {string} options.summary - Toast title/summary
|
||||
// * @param {string} options.detail - Toast detail message
|
||||
// * @param {number} [options.life=3000] - Duration in milliseconds (0 for persistent)
|
||||
// */
|
||||
// export function showToast({ severity = "info", summary, detail, life = 3000 }) {
|
||||
// app.extensionManager.toast.add({
|
||||
// severity,
|
||||
// summary,
|
||||
// detail,
|
||||
// life
|
||||
// });
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Show an info toast notification
|
||||
// * @param {string} summary - Toast title
|
||||
// * @param {string} detail - Toast detail message
|
||||
// * @param {number} [life=3000] - Duration in milliseconds
|
||||
// */
|
||||
// export function showToastInfo(summary, detail, life = 3000) {
|
||||
// showToast({
|
||||
// severity: "info",
|
||||
// summary,
|
||||
// detail,
|
||||
// life
|
||||
// });
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Show a success toast notification
|
||||
// * @param {string} summary - Toast title
|
||||
// * @param {string} detail - Toast detail message
|
||||
// * @param {number} [life=3000] - Duration in milliseconds
|
||||
// */
|
||||
// export function showToastSuccess(summary, detail, life = 3000) {
|
||||
// showToast({
|
||||
// severity: "success",
|
||||
// summary,
|
||||
// detail,
|
||||
// life
|
||||
// });
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Show an error toast notification
|
||||
// * @param {string} summary - Toast title
|
||||
// * @param {string} detail - Toast detail message
|
||||
// * @param {number} [life=5000] - Duration in milliseconds (longer default for errors)
|
||||
// */
|
||||
// export function showToastError(summary, detail, life = 5000) {
|
||||
// showToast({
|
||||
// severity: "error",
|
||||
// summary,
|
||||
// detail,
|
||||
// life
|
||||
// });
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Show a warning toast notification
|
||||
// * @param {string} summary - Toast title
|
||||
// * @param {string} detail - Toast detail message
|
||||
// * @param {number} [life=4000] - Duration in milliseconds
|
||||
// */
|
||||
// export function showToastWarning(summary, detail, life = 4000) {
|
||||
// showToast({
|
||||
// severity: "warn",
|
||||
// summary,
|
||||
// detail,
|
||||
// life
|
||||
// });
|
||||
// }
|
||||
|
||||
// // /**
|
||||
// // * Windows System Notification Functions
|
||||
// // * Provides system-level notifications using Web Notifications API
|
||||
// // */
|
||||
|
||||
// // /**
|
||||
// // * Check if system notifications are supported and permission is granted
|
||||
// // * @returns {Promise<boolean>} - Promise that resolves to true if notifications are available
|
||||
// // */
|
||||
// // export async function checkNotificationSupport() {
|
||||
// // if (!('Notification' in window)) {
|
||||
// // console.warn('This browser does not support system notifications');
|
||||
// // return false;
|
||||
// // }
|
||||
|
||||
// // if (Notification.permission === 'granted') {
|
||||
// // return true;
|
||||
// // }
|
||||
|
||||
// // if (Notification.permission === 'denied') {
|
||||
// // console.warn('Notification permission has been denied');
|
||||
// // return false;
|
||||
// // }
|
||||
|
||||
// // // Request permission
|
||||
// // const permission = await Notification.requestPermission();
|
||||
// // return permission === 'granted';
|
||||
// // }
|
||||
|
||||
// // /**
|
||||
// // * Show a system notification
|
||||
// // * @param {string} title - Notification title
|
||||
// // * @param {Object} [options] - Notification options
|
||||
// // * @param {string} [options.body] - Notification body text
|
||||
// // * @param {string} [options.icon] - URL of notification icon
|
||||
// // * @param {string} [options.image] - URL of notification image
|
||||
// // * @param {string} [options.tag] - Notification tag for grouping
|
||||
// // * @param {boolean} [options.requireInteraction=false] - Whether notification requires user interaction
|
||||
// // * @param {number} [options.timeout=5000] - Auto-close timeout in milliseconds (0 for no auto-close)
|
||||
// // * @param {Array} [options.actions] - Array of action objects
|
||||
// // * @returns {Promise<Notification|null>} - Promise that resolves to Notification object or null if failed
|
||||
// // */
|
||||
// // export async function showSystemNotification(title, options = {}) {
|
||||
// // const {
|
||||
// // body = '',
|
||||
// // icon = '',
|
||||
// // image = '',
|
||||
// // tag = '',
|
||||
// // requireInteraction = false,
|
||||
// // timeout = 5000,
|
||||
// // actions = []
|
||||
// // } = options;
|
||||
|
||||
// // const hasSupport = await checkNotificationSupport();
|
||||
// // if (!hasSupport) {
|
||||
// // console.warn('System notifications not available, falling back to toast');
|
||||
// // showToastInfo(title, body);
|
||||
// // return null;
|
||||
// // }
|
||||
|
||||
// // const notificationOptions = {
|
||||
// // body,
|
||||
// // icon,
|
||||
// // image,
|
||||
// // tag,
|
||||
// // requireInteraction,
|
||||
// // actions
|
||||
// // };
|
||||
|
||||
// // const notification = new Notification(title, notificationOptions);
|
||||
|
||||
// // // Auto-close if timeout is specified
|
||||
// // if (timeout > 0) {
|
||||
// // setTimeout(() => {
|
||||
// // notification.close();
|
||||
// // }, timeout);
|
||||
// // }
|
||||
|
||||
// // return notification;
|
||||
// // }
|
||||
|
||||
// /**
|
||||
// * Windows-style notification utilities
|
||||
// * Provides Windows-specific notification patterns
|
||||
// */
|
||||
|
||||
// // /**
|
||||
// // * Request notification permission with user-friendly dialog
|
||||
// // * @returns {Promise<boolean>} - Promise that resolves to true if permission granted
|
||||
// // */
|
||||
// // export async function requestNotificationPermission() {
|
||||
// // if (!('Notification' in window)) {
|
||||
// // showError('System notifications are not supported in this browser');
|
||||
// // return false;
|
||||
// // }
|
||||
|
||||
// // if (Notification.permission === 'granted') {
|
||||
// // return true;
|
||||
// // }
|
||||
|
||||
// // if (Notification.permission === 'denied') {
|
||||
// // showError('Notification permission has been denied. Please enable notifications in your browser settings.');
|
||||
// // return false;
|
||||
// // }
|
||||
|
||||
// // // Show a friendly permission request dialog
|
||||
// // const granted = await showConfirmDialog(
|
||||
// // 'Would you like to receive system notifications for workflow updates?',
|
||||
// // 'Allow Notifications',
|
||||
// // 'Not Now'
|
||||
// // );
|
||||
|
||||
// // if (granted) {
|
||||
// // const permission = await Notification.requestPermission();
|
||||
// // if (permission === 'granted') {
|
||||
// // showSuccess('Notification permission granted! You will now receive system notifications.');
|
||||
// // return true;
|
||||
// // } else {
|
||||
// // showWarning('Notification permission was not granted. You can enable it later in browser settings.');
|
||||
// // return false;
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // return false;
|
||||
// // }
|
||||
|
||||
// // Default export with all functions
|
||||
// export default {
|
||||
// DialogButtonType,
|
||||
// DialogResult,
|
||||
// beginDialogBox,
|
||||
// endDialogBox,
|
||||
// showMessage,
|
||||
// showError,
|
||||
// showSuccess,
|
||||
// showWarning,
|
||||
// showInfo,
|
||||
// showConfirmDialog,
|
||||
// showToast,
|
||||
// showToastInfo,
|
||||
// showToastSuccess,
|
||||
// showToastError,
|
||||
// showToastWarning,
|
||||
// // // Windows System Notification Functions
|
||||
// // checkNotificationSupport,
|
||||
// // showSystemNotification,
|
||||
// // closeNotificationsByTag,
|
||||
// // requestNotificationPermission
|
||||
// };
|
||||
|
||||
|
||||
+79
-79
@@ -1,89 +1,89 @@
|
||||
import { app } from "../../../scripts/app.js";
|
||||
import { api } from "../../../scripts/api.js";
|
||||
import {
|
||||
showInfo,
|
||||
showSuccess,
|
||||
showWarning,
|
||||
showError,
|
||||
showConfirmDialog,
|
||||
showMessage
|
||||
} from "../box_utils.js";
|
||||
// import { app } from "../../../scripts/app.js";
|
||||
// import { api } from "../../../scripts/api.js";
|
||||
// import {
|
||||
// showInfo,
|
||||
// showSuccess,
|
||||
// showWarning,
|
||||
// showError,
|
||||
// showConfirmDialog,
|
||||
// showMessage
|
||||
// } from "../box_utils.js";
|
||||
|
||||
/**
|
||||
* Extension for DialogBox node
|
||||
* Displays dialog boxes during workflow execution and captures user responses
|
||||
*/
|
||||
app.registerExtension({
|
||||
name: "EasyToolkit.DialogBox",
|
||||
// /**
|
||||
// * Extension for DialogBox node
|
||||
// * Displays dialog boxes during workflow execution and captures user responses
|
||||
// */
|
||||
// app.registerExtension({
|
||||
// name: "EasyToolkit.DialogBox",
|
||||
|
||||
async beforeRegisterNodeDef(nodeType, nodeData) {
|
||||
if (nodeData.name === "DialogBox") {
|
||||
// Add custom node behavior
|
||||
const originalOnExecuted = nodeType.prototype.onExecuted;
|
||||
// async beforeRegisterNodeDef(nodeType, nodeData) {
|
||||
// if (nodeData.name === "DialogBox") {
|
||||
// // Add custom node behavior
|
||||
// const originalOnExecuted = nodeType.prototype.onExecuted;
|
||||
|
||||
nodeType.prototype.onExecuted = function(output) {
|
||||
// Call original method if it exists
|
||||
if (originalOnExecuted) {
|
||||
originalOnExecuted.call(this, output);
|
||||
}
|
||||
// nodeType.prototype.onExecuted = function(output) {
|
||||
// // Call original method if it exists
|
||||
// if (originalOnExecuted) {
|
||||
// originalOnExecuted.call(this, output);
|
||||
// }
|
||||
|
||||
const dialogs = output?.dialogs;
|
||||
if (dialogs && dialogs.length > 0) {
|
||||
const dialog = dialogs[0];
|
||||
// Show dialog and capture user response
|
||||
this.showDialog(dialog.type, dialog.message);
|
||||
}
|
||||
};
|
||||
// const dialogs = output?.dialogs;
|
||||
// if (dialogs && dialogs.length > 0) {
|
||||
// const dialog = dialogs[0];
|
||||
// // Show dialog and capture user response
|
||||
// this.showDialog(dialog.type, dialog.message);
|
||||
// }
|
||||
// };
|
||||
|
||||
// Add method to show dialog and capture response
|
||||
nodeType.prototype.showDialog = async function(type, message) {
|
||||
try {
|
||||
// Validate inputs
|
||||
if (!message || message.trim() === "") {
|
||||
console.warn("[DialogBox] Empty message");
|
||||
return;
|
||||
}
|
||||
// // Add method to show dialog and capture response
|
||||
// nodeType.prototype.showDialog = async function(type, message) {
|
||||
// try {
|
||||
// // Validate inputs
|
||||
// if (!message || message.trim() === "") {
|
||||
// console.warn("[DialogBox] Empty message");
|
||||
// return;
|
||||
// }
|
||||
|
||||
const trimmedMessage = message.trim();
|
||||
console.log(`[DialogBox] Showing ${type} dialog: ${trimmedMessage}`);
|
||||
// const trimmedMessage = message.trim();
|
||||
// console.log(`[DialogBox] Showing ${type} dialog: ${trimmedMessage}`);
|
||||
|
||||
let userResponse = "";
|
||||
// let userResponse = "";
|
||||
|
||||
// Use appropriate dialog function based on type
|
||||
switch (type) {
|
||||
case "info":
|
||||
showMessage(trimmedMessage);
|
||||
userResponse = "ok";
|
||||
break;
|
||||
case "success":
|
||||
showSuccess(trimmedMessage);
|
||||
userResponse = "ok";
|
||||
break;
|
||||
case "warn":
|
||||
showWarning(trimmedMessage);
|
||||
userResponse = "ok";
|
||||
break;
|
||||
case "error":
|
||||
showError(trimmedMessage);
|
||||
userResponse = "ok";
|
||||
break;
|
||||
case "confirm":
|
||||
const confirmed = await showConfirmDialog(trimmedMessage);
|
||||
userResponse = confirmed ? "ok" : "cancel";
|
||||
break;
|
||||
default:
|
||||
console.warn(`[DialogBox] Unknown type: ${type}, defaulting to info`);
|
||||
showMessage(trimmedMessage);
|
||||
userResponse = "ok";
|
||||
}
|
||||
// // Use appropriate dialog function based on type
|
||||
// switch (type) {
|
||||
// case "info":
|
||||
// showMessage(trimmedMessage);
|
||||
// userResponse = "ok";
|
||||
// break;
|
||||
// case "success":
|
||||
// showSuccess(trimmedMessage);
|
||||
// userResponse = "ok";
|
||||
// break;
|
||||
// case "warn":
|
||||
// showWarning(trimmedMessage);
|
||||
// userResponse = "ok";
|
||||
// break;
|
||||
// case "error":
|
||||
// showError(trimmedMessage);
|
||||
// userResponse = "ok";
|
||||
// break;
|
||||
// case "confirm":
|
||||
// const confirmed = await showConfirmDialog(trimmedMessage);
|
||||
// userResponse = confirmed ? "ok" : "cancel";
|
||||
// break;
|
||||
// default:
|
||||
// console.warn(`[DialogBox] Unknown type: ${type}, defaulting to info`);
|
||||
// showMessage(trimmedMessage);
|
||||
// userResponse = "ok";
|
||||
// }
|
||||
|
||||
console.log(`[DialogBox] User response: ${userResponse}`);
|
||||
// console.log(`[DialogBox] User response: ${userResponse}`);
|
||||
|
||||
} catch (error) {
|
||||
console.error("[DialogBox] Error showing dialog:", error);
|
||||
showError("DialogBox Error", "Failed to display dialog");
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
// } catch (error) {
|
||||
// console.error("[DialogBox] Error showing dialog:", error);
|
||||
// showError("DialogBox Error", "Failed to display dialog");
|
||||
// }
|
||||
// };
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
+110
-110
@@ -1,123 +1,123 @@
|
||||
import { app } from "../../../scripts/app.js";
|
||||
import { api } from "../../../scripts/api.js";
|
||||
import {
|
||||
showToastInfo,
|
||||
showToastSuccess,
|
||||
showToastWarning,
|
||||
showToastError,
|
||||
showSystemNotification,
|
||||
showWindowsNotification
|
||||
} from "../box_utils.js";
|
||||
// import { app } from "../../../scripts/app.js";
|
||||
// import { api } from "../../../scripts/api.js";
|
||||
// import {
|
||||
// showToastInfo,
|
||||
// showToastSuccess,
|
||||
// showToastWarning,
|
||||
// showToastError,
|
||||
// showSystemNotification,
|
||||
// showWindowsNotification
|
||||
// } from "../box_utils.js";
|
||||
|
||||
/**
|
||||
* Extension for ToastBox node
|
||||
* Displays toast notifications during workflow execution
|
||||
*/
|
||||
app.registerExtension({
|
||||
name: "EasyToolkit.ToastBox",
|
||||
// /**
|
||||
// * Extension for ToastBox node
|
||||
// * Displays toast notifications during workflow execution
|
||||
// */
|
||||
// app.registerExtension({
|
||||
// name: "EasyToolkit.ToastBox",
|
||||
|
||||
async beforeRegisterNodeDef(nodeType, nodeData) {
|
||||
if (nodeData.name === "ToastBox") {
|
||||
// Add custom node behavior
|
||||
const originalOnExecuted = nodeType.prototype.onExecuted;
|
||||
// async beforeRegisterNodeDef(nodeType, nodeData) {
|
||||
// if (nodeData.name === "ToastBox") {
|
||||
// // Add custom node behavior
|
||||
// const originalOnExecuted = nodeType.prototype.onExecuted;
|
||||
|
||||
nodeType.prototype.onExecuted = function(output) {
|
||||
// Call original method if it exists
|
||||
if (originalOnExecuted) {
|
||||
originalOnExecuted.call(this, output);
|
||||
}
|
||||
// nodeType.prototype.onExecuted = function(output) {
|
||||
// // Call original method if it exists
|
||||
// if (originalOnExecuted) {
|
||||
// originalOnExecuted.call(this, output);
|
||||
// }
|
||||
|
||||
const notifications = output?.notifications;
|
||||
if (notifications && notifications.length > 0) {
|
||||
const notification = notifications[0];
|
||||
// Show notification based on node parameters
|
||||
this.showNotification(
|
||||
notification.type,
|
||||
notification.message,
|
||||
notification.duration,
|
||||
notification.mode
|
||||
);
|
||||
}
|
||||
};
|
||||
// const notifications = output?.notifications;
|
||||
// if (notifications && notifications.length > 0) {
|
||||
// const notification = notifications[0];
|
||||
// // Show notification based on node parameters
|
||||
// this.showNotification(
|
||||
// notification.type,
|
||||
// notification.message,
|
||||
// notification.duration,
|
||||
// notification.mode
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
|
||||
// Add method to show notification (toast or system)
|
||||
nodeType.prototype.showNotification = function(type, message, duration, mode = "comfyui") {
|
||||
try {
|
||||
// Validate inputs
|
||||
if (!message || message.trim() === "") {
|
||||
console.warn("[ToastBox] Empty message");
|
||||
return;
|
||||
}
|
||||
// // Add method to show notification (toast or system)
|
||||
// nodeType.prototype.showNotification = function(type, message, duration, mode = "comfyui") {
|
||||
// try {
|
||||
// // Validate inputs
|
||||
// if (!message || message.trim() === "") {
|
||||
// console.warn("[ToastBox] Empty message");
|
||||
// return;
|
||||
// }
|
||||
|
||||
const trimmedMessage = message.trim();
|
||||
const clampedDuration = Math.max(1000, Math.min(10000, duration)); // Clamp duration between 1-10 seconds
|
||||
// const trimmedMessage = message.trim();
|
||||
// const clampedDuration = Math.max(1000, Math.min(10000, duration)); // Clamp duration between 1-10 seconds
|
||||
|
||||
console.log(`[ToastBox] Showing ${type} notification (${mode}): ${trimmedMessage}`);
|
||||
// console.log(`[ToastBox] Showing ${type} notification (${mode}): ${trimmedMessage}`);
|
||||
|
||||
// Choose notification method based on mode
|
||||
if (mode === "system") {
|
||||
// Use system notifications
|
||||
// this.showSystemNotification(type, trimmedMessage, clampedDuration);
|
||||
} else {
|
||||
// Use ComfyUI toast notifications (default)
|
||||
this.showComfyUIToast(type, trimmedMessage, clampedDuration);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("[ToastBox] Error showing notification:", error);
|
||||
// Fallback to error toast
|
||||
showToastError("ToastBox Error", "Failed to display notification", 5000);
|
||||
}
|
||||
};
|
||||
// // Choose notification method based on mode
|
||||
// if (mode === "system") {
|
||||
// // Use system notifications
|
||||
// // this.showSystemNotification(type, trimmedMessage, clampedDuration);
|
||||
// } else {
|
||||
// // Use ComfyUI toast notifications (default)
|
||||
// this.showComfyUIToast(type, trimmedMessage, clampedDuration);
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("[ToastBox] Error showing notification:", error);
|
||||
// // Fallback to error toast
|
||||
// showToastError("ToastBox Error", "Failed to display notification", 5000);
|
||||
// }
|
||||
// };
|
||||
|
||||
// Method to show ComfyUI toast notifications
|
||||
nodeType.prototype.showComfyUIToast = function(type, message, duration) {
|
||||
const toastOptions = {
|
||||
summary: "ToastBox Notification",
|
||||
detail: message,
|
||||
life: duration
|
||||
};
|
||||
// // Method to show ComfyUI toast notifications
|
||||
// nodeType.prototype.showComfyUIToast = function(type, message, duration) {
|
||||
// const toastOptions = {
|
||||
// summary: "ToastBox Notification",
|
||||
// detail: message,
|
||||
// life: duration
|
||||
// };
|
||||
|
||||
// Use appropriate toast function based on type
|
||||
switch (type) {
|
||||
case "info":
|
||||
showToastInfo(toastOptions.summary, toastOptions.detail, toastOptions.life);
|
||||
break;
|
||||
case "success":
|
||||
showToastSuccess(toastOptions.summary, toastOptions.detail, toastOptions.life);
|
||||
break;
|
||||
case "warn":
|
||||
showToastWarning(toastOptions.summary, toastOptions.detail, toastOptions.life);
|
||||
break;
|
||||
case "error":
|
||||
showToastError(toastOptions.summary, toastOptions.detail, toastOptions.life);
|
||||
break;
|
||||
default:
|
||||
console.warn(`[ToastBox] Unknown type: ${type}, defaulting to info`);
|
||||
showToastInfo(toastOptions.summary, toastOptions.detail, toastOptions.life);
|
||||
}
|
||||
};
|
||||
// // Use appropriate toast function based on type
|
||||
// switch (type) {
|
||||
// case "info":
|
||||
// showToastInfo(toastOptions.summary, toastOptions.detail, toastOptions.life);
|
||||
// break;
|
||||
// case "success":
|
||||
// showToastSuccess(toastOptions.summary, toastOptions.detail, toastOptions.life);
|
||||
// break;
|
||||
// case "warn":
|
||||
// showToastWarning(toastOptions.summary, toastOptions.detail, toastOptions.life);
|
||||
// break;
|
||||
// case "error":
|
||||
// showToastError(toastOptions.summary, toastOptions.detail, toastOptions.life);
|
||||
// break;
|
||||
// default:
|
||||
// console.warn(`[ToastBox] Unknown type: ${type}, defaulting to info`);
|
||||
// showToastInfo(toastOptions.summary, toastOptions.detail, toastOptions.life);
|
||||
// }
|
||||
// };
|
||||
|
||||
// // Method to show system notifications
|
||||
// nodeType.prototype.showSystemNotification = function(type, message, duration) {
|
||||
// const titleMap = {
|
||||
// "info": "Info",
|
||||
// "success": "Success",
|
||||
// "warn": "Warning",
|
||||
// "error": "Error"
|
||||
// };
|
||||
// // // Method to show system notifications
|
||||
// // nodeType.prototype.showSystemNotification = function(type, message, duration) {
|
||||
// // const titleMap = {
|
||||
// // "info": "Info",
|
||||
// // "success": "Success",
|
||||
// // "warn": "Warning",
|
||||
// // "error": "Error"
|
||||
// // };
|
||||
|
||||
// const title = titleMap[type] || titleMap.info;
|
||||
// // const title = titleMap[type] || titleMap.info;
|
||||
|
||||
// // Use Windows-style system notification
|
||||
// showWindowsNotification(title, message, type, {
|
||||
// timeout: duration,
|
||||
// requireInteraction: type === "error"
|
||||
// }).catch(error => {
|
||||
// console.warn("[ToastBox] System notification failed, falling back to toast:", error);
|
||||
// // Fallback to ComfyUI toast
|
||||
// this.showComfyUIToast(type, message, duration);
|
||||
// });
|
||||
// };
|
||||
}
|
||||
}
|
||||
});
|
||||
// // // Use Windows-style system notification
|
||||
// // showWindowsNotification(title, message, type, {
|
||||
// // timeout: duration,
|
||||
// // requireInteraction: type === "error"
|
||||
// // }).catch(error => {
|
||||
// // console.warn("[ToastBox] System notification failed, falling back to toast:", error);
|
||||
// // // Fallback to ComfyUI toast
|
||||
// // this.showComfyUIToast(type, message, duration);
|
||||
// // });
|
||||
// // };
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
+287
-287
@@ -1,325 +1,325 @@
|
||||
/**
|
||||
* UI Component Utility Functions
|
||||
* Provides utility functions for creating and managing dialog UI components
|
||||
*/
|
||||
// /**
|
||||
// * UI Component Utility Functions
|
||||
// * Provides utility functions for creating and managing dialog UI components
|
||||
// */
|
||||
|
||||
/**
|
||||
* Create label element
|
||||
* @param {string} text - Label text
|
||||
* @param {Object} options - Configuration options
|
||||
* @param {string} options.color - Text color (default: '#fff')
|
||||
* @param {string} options.fontSize - Font size (default: '14px')
|
||||
* @param {string} options.fontWeight - Font weight (default: 'bold')
|
||||
* @returns {HTMLLabelElement} Label element
|
||||
*/
|
||||
export function createLabel(text, options = {}) {
|
||||
const label = document.createElement('label');
|
||||
label.textContent = text;
|
||||
label.style.color = options.color || '#fff';
|
||||
label.style.fontSize = options.fontSize || '14px';
|
||||
label.style.fontWeight = options.fontWeight || 'bold';
|
||||
// /**
|
||||
// * Create label element
|
||||
// * @param {string} text - Label text
|
||||
// * @param {Object} options - Configuration options
|
||||
// * @param {string} options.color - Text color (default: '#fff')
|
||||
// * @param {string} options.fontSize - Font size (default: '14px')
|
||||
// * @param {string} options.fontWeight - Font weight (default: 'bold')
|
||||
// * @returns {HTMLLabelElement} Label element
|
||||
// */
|
||||
// export function createLabel(text, options = {}) {
|
||||
// const label = document.createElement('label');
|
||||
// label.textContent = text;
|
||||
// label.style.color = options.color || '#fff';
|
||||
// label.style.fontSize = options.fontSize || '14px';
|
||||
// label.style.fontWeight = options.fontWeight || 'bold';
|
||||
|
||||
return label;
|
||||
}
|
||||
// return label;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create input element
|
||||
* @param {Object} options - Configuration options
|
||||
* @param {string} options.type - Input type (default: 'text')
|
||||
* @param {string} options.placeholder - Placeholder text
|
||||
* @param {string} options.value - Initial value
|
||||
* @param {string} options.backgroundColor - Background color (default: '#2d2d2d')
|
||||
* @param {string} options.color - Text color (default: '#fff')
|
||||
* @param {string} options.border - Border style (default: '1px solid #555')
|
||||
* @param {string} options.borderRadius - Border radius (default: '4px')
|
||||
* @param {string} options.fontSize - Font size (default: '14px')
|
||||
* @param {string} options.padding - Padding (default: '8px')
|
||||
* @returns {HTMLInputElement} Input element
|
||||
*/
|
||||
export function createInput(options = {}) {
|
||||
const input = document.createElement('input');
|
||||
input.type = options.type || 'text';
|
||||
// /**
|
||||
// * Create input element
|
||||
// * @param {Object} options - Configuration options
|
||||
// * @param {string} options.type - Input type (default: 'text')
|
||||
// * @param {string} options.placeholder - Placeholder text
|
||||
// * @param {string} options.value - Initial value
|
||||
// * @param {string} options.backgroundColor - Background color (default: '#2d2d2d')
|
||||
// * @param {string} options.color - Text color (default: '#fff')
|
||||
// * @param {string} options.border - Border style (default: '1px solid #555')
|
||||
// * @param {string} options.borderRadius - Border radius (default: '4px')
|
||||
// * @param {string} options.fontSize - Font size (default: '14px')
|
||||
// * @param {string} options.padding - Padding (default: '8px')
|
||||
// * @returns {HTMLInputElement} Input element
|
||||
// */
|
||||
// export function createInput(options = {}) {
|
||||
// const input = document.createElement('input');
|
||||
// input.type = options.type || 'text';
|
||||
|
||||
if (options.placeholder) input.placeholder = options.placeholder;
|
||||
if (options.value) input.value = options.value;
|
||||
// if (options.placeholder) input.placeholder = options.placeholder;
|
||||
// if (options.value) input.value = options.value;
|
||||
|
||||
input.style.padding = options.padding || '8px';
|
||||
input.style.backgroundColor = options.backgroundColor || '#2d2d2d';
|
||||
input.style.color = options.color || '#fff';
|
||||
input.style.border = options.border || '1px solid #555';
|
||||
input.style.borderRadius = options.borderRadius || '4px';
|
||||
input.style.fontSize = options.fontSize || '14px';
|
||||
input.style.boxSizing = 'border-box';
|
||||
// input.style.padding = options.padding || '8px';
|
||||
// input.style.backgroundColor = options.backgroundColor || '#2d2d2d';
|
||||
// input.style.color = options.color || '#fff';
|
||||
// input.style.border = options.border || '1px solid #555';
|
||||
// input.style.borderRadius = options.borderRadius || '4px';
|
||||
// input.style.fontSize = options.fontSize || '14px';
|
||||
// input.style.boxSizing = 'border-box';
|
||||
|
||||
return input;
|
||||
}
|
||||
// return input;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create textarea element
|
||||
* @param {Object} options - Configuration options
|
||||
* @param {string} options.placeholder - Placeholder text
|
||||
* @param {string} options.value - Initial value
|
||||
* @param {string} options.width - Width (default: '100%')
|
||||
* @param {string} options.height - Height (default: '150px')
|
||||
* @param {string} options.backgroundColor - Background color (default: '#2d2d2d')
|
||||
* @param {string} options.color - Text color (default: '#fff')
|
||||
* @param {string} options.border - Border style (default: '1px solid #555')
|
||||
* @param {string} options.borderRadius - Border radius (default: '4px')
|
||||
* @param {string} options.fontSize - Font size (default: '14px')
|
||||
* @param {string} options.fontFamily - Font family (default: 'monospace')
|
||||
* @param {string} options.padding - Padding (default: '8px')
|
||||
* @param {string} options.resize - Resize behavior (default: 'vertical')
|
||||
* @returns {HTMLTextAreaElement} Textarea element
|
||||
*/
|
||||
export function createTextarea(options = {}) {
|
||||
const textarea = document.createElement('textarea');
|
||||
// /**
|
||||
// * Create textarea element
|
||||
// * @param {Object} options - Configuration options
|
||||
// * @param {string} options.placeholder - Placeholder text
|
||||
// * @param {string} options.value - Initial value
|
||||
// * @param {string} options.width - Width (default: '100%')
|
||||
// * @param {string} options.height - Height (default: '150px')
|
||||
// * @param {string} options.backgroundColor - Background color (default: '#2d2d2d')
|
||||
// * @param {string} options.color - Text color (default: '#fff')
|
||||
// * @param {string} options.border - Border style (default: '1px solid #555')
|
||||
// * @param {string} options.borderRadius - Border radius (default: '4px')
|
||||
// * @param {string} options.fontSize - Font size (default: '14px')
|
||||
// * @param {string} options.fontFamily - Font family (default: 'monospace')
|
||||
// * @param {string} options.padding - Padding (default: '8px')
|
||||
// * @param {string} options.resize - Resize behavior (default: 'vertical')
|
||||
// * @returns {HTMLTextAreaElement} Textarea element
|
||||
// */
|
||||
// export function createTextarea(options = {}) {
|
||||
// const textarea = document.createElement('textarea');
|
||||
|
||||
if (options.placeholder) textarea.placeholder = options.placeholder;
|
||||
if (options.value) textarea.value = options.value;
|
||||
// if (options.placeholder) textarea.placeholder = options.placeholder;
|
||||
// if (options.value) textarea.value = options.value;
|
||||
|
||||
textarea.style.width = options.width || '100%';
|
||||
textarea.style.height = options.height || '150px';
|
||||
textarea.style.padding = options.padding || '8px';
|
||||
textarea.style.backgroundColor = options.backgroundColor || '#2d2d2d';
|
||||
textarea.style.color = options.color || '#fff';
|
||||
textarea.style.border = options.border || '1px solid #555';
|
||||
textarea.style.borderRadius = options.borderRadius || '4px';
|
||||
textarea.style.fontSize = options.fontSize || '14px';
|
||||
textarea.style.fontFamily = options.fontFamily || 'monospace';
|
||||
textarea.style.resize = options.resize || 'vertical';
|
||||
textarea.style.boxSizing = 'border-box';
|
||||
// textarea.style.width = options.width || '100%';
|
||||
// textarea.style.height = options.height || '150px';
|
||||
// textarea.style.padding = options.padding || '8px';
|
||||
// textarea.style.backgroundColor = options.backgroundColor || '#2d2d2d';
|
||||
// textarea.style.color = options.color || '#fff';
|
||||
// textarea.style.border = options.border || '1px solid #555';
|
||||
// textarea.style.borderRadius = options.borderRadius || '4px';
|
||||
// textarea.style.fontSize = options.fontSize || '14px';
|
||||
// textarea.style.fontFamily = options.fontFamily || 'monospace';
|
||||
// textarea.style.resize = options.resize || 'vertical';
|
||||
// textarea.style.boxSizing = 'border-box';
|
||||
|
||||
return textarea;
|
||||
}
|
||||
// return textarea;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create form container
|
||||
* @param {Object} options - Configuration options
|
||||
* @param {string} options.display - Display mode (default: 'flex')
|
||||
* @param {string} options.flexDirection - Layout direction (default: 'column')
|
||||
* @param {string} options.gap - Element spacing (default: '15px')
|
||||
* @returns {HTMLDivElement} Form container element
|
||||
*/
|
||||
export function createFormContainer(options = {}) {
|
||||
const container = document.createElement('div');
|
||||
container.style.display = options.display || 'flex';
|
||||
container.style.flexDirection = options.flexDirection || 'column';
|
||||
container.style.gap = options.gap || '15px';
|
||||
// /**
|
||||
// * Create form container
|
||||
// * @param {Object} options - Configuration options
|
||||
// * @param {string} options.display - Display mode (default: 'flex')
|
||||
// * @param {string} options.flexDirection - Layout direction (default: 'column')
|
||||
// * @param {string} options.gap - Element spacing (default: '15px')
|
||||
// * @returns {HTMLDivElement} Form container element
|
||||
// */
|
||||
// export function createFormContainer(options = {}) {
|
||||
// const container = document.createElement('div');
|
||||
// container.style.display = options.display || 'flex';
|
||||
// container.style.flexDirection = options.flexDirection || 'column';
|
||||
// container.style.gap = options.gap || '15px';
|
||||
|
||||
return container;
|
||||
}
|
||||
// return container;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create form field container
|
||||
* @param {Object} options - Configuration options
|
||||
* @param {string} options.display - Display mode (default: 'flex')
|
||||
* @param {string} options.flexDirection - Layout direction (default: 'column')
|
||||
* @param {string} options.gap - Element spacing (default: '5px')
|
||||
* @returns {HTMLDivElement} Field container element
|
||||
*/
|
||||
export function createFieldContainer(options = {}) {
|
||||
const container = document.createElement('div');
|
||||
container.style.display = options.display || 'flex';
|
||||
container.style.flexDirection = options.flexDirection || 'column';
|
||||
container.style.gap = options.gap || '5px';
|
||||
// /**
|
||||
// * Create form field container
|
||||
// * @param {Object} options - Configuration options
|
||||
// * @param {string} options.display - Display mode (default: 'flex')
|
||||
// * @param {string} options.flexDirection - Layout direction (default: 'column')
|
||||
// * @param {string} options.gap - Element spacing (default: '5px')
|
||||
// * @returns {HTMLDivElement} Field container element
|
||||
// */
|
||||
// export function createFieldContainer(options = {}) {
|
||||
// const container = document.createElement('div');
|
||||
// container.style.display = options.display || 'flex';
|
||||
// container.style.flexDirection = options.flexDirection || 'column';
|
||||
// container.style.gap = options.gap || '5px';
|
||||
|
||||
return container;
|
||||
}
|
||||
// return container;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create complete form field (label + input/textarea)
|
||||
* @param {string} labelText - Label text
|
||||
* @param {string} fieldType - Field type ('input' or 'textarea')
|
||||
* @param {Object} fieldOptions - Field configuration options
|
||||
* @param {Object} containerOptions - Container configuration options
|
||||
* @returns {Object} Object containing container, label and field
|
||||
*/
|
||||
export function createFormField(labelText, fieldType, fieldOptions = {}, containerOptions = {}) {
|
||||
const container = createFieldContainer(containerOptions);
|
||||
const label = createLabel(labelText);
|
||||
let field;
|
||||
// /**
|
||||
// * Create complete form field (label + input/textarea)
|
||||
// * @param {string} labelText - Label text
|
||||
// * @param {string} fieldType - Field type ('input' or 'textarea')
|
||||
// * @param {Object} fieldOptions - Field configuration options
|
||||
// * @param {Object} containerOptions - Container configuration options
|
||||
// * @returns {Object} Object containing container, label and field
|
||||
// */
|
||||
// export function createFormField(labelText, fieldType, fieldOptions = {}, containerOptions = {}) {
|
||||
// const container = createFieldContainer(containerOptions);
|
||||
// const label = createLabel(labelText);
|
||||
// let field;
|
||||
|
||||
if (fieldType === 'textarea') {
|
||||
field = createTextarea(fieldOptions);
|
||||
} else {
|
||||
field = createInput(fieldOptions);
|
||||
}
|
||||
// if (fieldType === 'textarea') {
|
||||
// field = createTextarea(fieldOptions);
|
||||
// } else {
|
||||
// field = createInput(fieldOptions);
|
||||
// }
|
||||
|
||||
container.appendChild(label);
|
||||
container.appendChild(field);
|
||||
// container.appendChild(label);
|
||||
// container.appendChild(field);
|
||||
|
||||
return {
|
||||
container,
|
||||
label,
|
||||
field
|
||||
};
|
||||
}
|
||||
// return {
|
||||
// container,
|
||||
// label,
|
||||
// field
|
||||
// };
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create message element
|
||||
* @param {string} message - Message text
|
||||
* @param {Object} [options] - Configuration options
|
||||
* @param {string} [options.color="#fff"] - Text color
|
||||
* @param {string} [options.fontSize="14px"] - Font size
|
||||
* @param {string} [options.lineHeight="1.5"] - Line height
|
||||
* @param {string} [options.whiteSpace="pre-wrap"] - White space handling
|
||||
* @param {string} [options.wordBreak="break-word"] - Word breaking
|
||||
* @returns {HTMLElement} - Styled message element
|
||||
*/
|
||||
export function createMessage(message, options = {}) {
|
||||
const {
|
||||
color = "#fff",
|
||||
fontSize = "14px",
|
||||
lineHeight = "1.5",
|
||||
whiteSpace = "pre-wrap",
|
||||
wordBreak = "break-word"
|
||||
} = options;
|
||||
// /**
|
||||
// * Create message element
|
||||
// * @param {string} message - Message text
|
||||
// * @param {Object} [options] - Configuration options
|
||||
// * @param {string} [options.color="#fff"] - Text color
|
||||
// * @param {string} [options.fontSize="14px"] - Font size
|
||||
// * @param {string} [options.lineHeight="1.5"] - Line height
|
||||
// * @param {string} [options.whiteSpace="pre-wrap"] - White space handling
|
||||
// * @param {string} [options.wordBreak="break-word"] - Word breaking
|
||||
// * @returns {HTMLElement} - Styled message element
|
||||
// */
|
||||
// export function createMessage(message, options = {}) {
|
||||
// const {
|
||||
// color = "#fff",
|
||||
// fontSize = "14px",
|
||||
// lineHeight = "1.5",
|
||||
// whiteSpace = "pre-wrap",
|
||||
// wordBreak = "break-word"
|
||||
// } = options;
|
||||
|
||||
const messageElement = document.createElement('div');
|
||||
messageElement.textContent = message;
|
||||
messageElement.style.color = color;
|
||||
messageElement.style.fontSize = fontSize;
|
||||
messageElement.style.lineHeight = lineHeight;
|
||||
messageElement.style.whiteSpace = whiteSpace;
|
||||
messageElement.style.wordBreak = wordBreak;
|
||||
// const messageElement = document.createElement('div');
|
||||
// messageElement.textContent = message;
|
||||
// messageElement.style.color = color;
|
||||
// messageElement.style.fontSize = fontSize;
|
||||
// messageElement.style.lineHeight = lineHeight;
|
||||
// messageElement.style.whiteSpace = whiteSpace;
|
||||
// messageElement.style.wordBreak = wordBreak;
|
||||
|
||||
return messageElement;
|
||||
}
|
||||
// return messageElement;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create dialog overlay element
|
||||
* @returns {HTMLDivElement} Overlay element
|
||||
*/
|
||||
export function createDialogOverlay() {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.style.position = 'fixed';
|
||||
overlay.style.top = '0';
|
||||
overlay.style.left = '0';
|
||||
overlay.style.width = '100%';
|
||||
overlay.style.height = '100%';
|
||||
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
|
||||
overlay.style.display = 'flex';
|
||||
overlay.style.justifyContent = 'center';
|
||||
overlay.style.alignItems = 'center';
|
||||
overlay.style.zIndex = '10000';
|
||||
// /**
|
||||
// * Create dialog overlay element
|
||||
// * @returns {HTMLDivElement} Overlay element
|
||||
// */
|
||||
// export function createDialogOverlay() {
|
||||
// const overlay = document.createElement('div');
|
||||
// overlay.style.position = 'fixed';
|
||||
// overlay.style.top = '0';
|
||||
// overlay.style.left = '0';
|
||||
// overlay.style.width = '100%';
|
||||
// overlay.style.height = '100%';
|
||||
// overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
|
||||
// overlay.style.display = 'flex';
|
||||
// overlay.style.justifyContent = 'center';
|
||||
// overlay.style.alignItems = 'center';
|
||||
// overlay.style.zIndex = '10000';
|
||||
|
||||
return overlay;
|
||||
}
|
||||
// return overlay;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create dialog container element
|
||||
* @param {Object} options - Dialog options
|
||||
* @param {number} options.minWidth - Minimum dialog width in pixels
|
||||
* @param {number} options.maxWidth - Maximum dialog width in pixels
|
||||
* @param {number} options.maxHeight - Maximum dialog height as viewport percentage
|
||||
* @returns {HTMLDivElement} Dialog container element
|
||||
*/
|
||||
export function createDialogContainer(options = {}) {
|
||||
const { minWidth = 400, maxWidth = 600, maxHeight = 80 } = options;
|
||||
// /**
|
||||
// * Create dialog container element
|
||||
// * @param {Object} options - Dialog options
|
||||
// * @param {number} options.minWidth - Minimum dialog width in pixels
|
||||
// * @param {number} options.maxWidth - Maximum dialog width in pixels
|
||||
// * @param {number} options.maxHeight - Maximum dialog height as viewport percentage
|
||||
// * @returns {HTMLDivElement} Dialog container element
|
||||
// */
|
||||
// export function createDialogContainer(options = {}) {
|
||||
// const { minWidth = 400, maxWidth = 600, maxHeight = 80 } = options;
|
||||
|
||||
const dialog = document.createElement('div');
|
||||
dialog.style.backgroundColor = '#1e1e1e';
|
||||
dialog.style.border = '1px solid #555';
|
||||
dialog.style.borderRadius = '8px';
|
||||
dialog.style.padding = '20px';
|
||||
dialog.style.minWidth = `${minWidth}px`;
|
||||
dialog.style.maxWidth = `${maxWidth}px`;
|
||||
dialog.style.maxHeight = `${maxHeight}vh`;
|
||||
dialog.style.display = 'flex';
|
||||
dialog.style.flexDirection = 'column';
|
||||
dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.5)';
|
||||
// const dialog = document.createElement('div');
|
||||
// dialog.style.backgroundColor = '#1e1e1e';
|
||||
// dialog.style.border = '1px solid #555';
|
||||
// dialog.style.borderRadius = '8px';
|
||||
// dialog.style.padding = '20px';
|
||||
// dialog.style.minWidth = `${minWidth}px`;
|
||||
// dialog.style.maxWidth = `${maxWidth}px`;
|
||||
// dialog.style.maxHeight = `${maxHeight}vh`;
|
||||
// dialog.style.display = 'flex';
|
||||
// dialog.style.flexDirection = 'column';
|
||||
// dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.5)';
|
||||
|
||||
return dialog;
|
||||
}
|
||||
// return dialog;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create dialog title element
|
||||
* @param {string} title - Dialog title
|
||||
* @returns {HTMLHeadingElement} Title element
|
||||
*/
|
||||
export function createDialogTitle(title) {
|
||||
const titleElement = document.createElement('h3');
|
||||
titleElement.textContent = title;
|
||||
titleElement.style.margin = '0 0 15px 0';
|
||||
titleElement.style.color = '#fff';
|
||||
titleElement.style.fontSize = '18px';
|
||||
// /**
|
||||
// * Create dialog title element
|
||||
// * @param {string} title - Dialog title
|
||||
// * @returns {HTMLHeadingElement} Title element
|
||||
// */
|
||||
// export function createDialogTitle(title) {
|
||||
// const titleElement = document.createElement('h3');
|
||||
// titleElement.textContent = title;
|
||||
// titleElement.style.margin = '0 0 15px 0';
|
||||
// titleElement.style.color = '#fff';
|
||||
// titleElement.style.fontSize = '18px';
|
||||
|
||||
return titleElement;
|
||||
}
|
||||
// return titleElement;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create dialog content container
|
||||
* @returns {HTMLDivElement} Content container element
|
||||
*/
|
||||
export function createDialogContent() {
|
||||
const content = document.createElement('div');
|
||||
content.style.flex = '1';
|
||||
content.style.overflow = 'auto';
|
||||
content.style.marginBottom = '15px';
|
||||
// /**
|
||||
// * Create dialog content container
|
||||
// * @returns {HTMLDivElement} Content container element
|
||||
// */
|
||||
// export function createDialogContent() {
|
||||
// const content = document.createElement('div');
|
||||
// content.style.flex = '1';
|
||||
// content.style.overflow = 'auto';
|
||||
// content.style.marginBottom = '15px';
|
||||
|
||||
return content;
|
||||
}
|
||||
// return content;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create button container for dialog
|
||||
* @returns {HTMLDivElement} Button container element
|
||||
*/
|
||||
export function createButtonContainer() {
|
||||
const buttonContainer = document.createElement('div');
|
||||
buttonContainer.style.display = 'flex';
|
||||
buttonContainer.style.justifyContent = 'flex-end';
|
||||
buttonContainer.style.gap = '10px';
|
||||
// /**
|
||||
// * Create button container for dialog
|
||||
// * @returns {HTMLDivElement} Button container element
|
||||
// */
|
||||
// export function createButtonContainer() {
|
||||
// const buttonContainer = document.createElement('div');
|
||||
// buttonContainer.style.display = 'flex';
|
||||
// buttonContainer.style.justifyContent = 'flex-end';
|
||||
// buttonContainer.style.gap = '10px';
|
||||
|
||||
return buttonContainer;
|
||||
}
|
||||
// return buttonContainer;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Create styled button for dialogs
|
||||
* @param {string} text - Button text
|
||||
* @param {boolean} isPrimary - Whether this is a primary button
|
||||
* @returns {HTMLButtonElement} Styled button element
|
||||
*/
|
||||
export function createDialogButton(text, isPrimary = false) {
|
||||
const button = document.createElement('button');
|
||||
button.textContent = text;
|
||||
button.style.padding = '8px 20px';
|
||||
button.style.backgroundColor = isPrimary ? '#007acc' : '#555';
|
||||
button.style.color = '#fff';
|
||||
button.style.border = 'none';
|
||||
button.style.borderRadius = '4px';
|
||||
button.style.cursor = 'pointer';
|
||||
button.style.fontSize = '14px';
|
||||
// /**
|
||||
// * Create styled button for dialogs
|
||||
// * @param {string} text - Button text
|
||||
// * @param {boolean} isPrimary - Whether this is a primary button
|
||||
// * @returns {HTMLButtonElement} Styled button element
|
||||
// */
|
||||
// export function createDialogButton(text, isPrimary = false) {
|
||||
// const button = document.createElement('button');
|
||||
// button.textContent = text;
|
||||
// button.style.padding = '8px 20px';
|
||||
// button.style.backgroundColor = isPrimary ? '#007acc' : '#555';
|
||||
// button.style.color = '#fff';
|
||||
// button.style.border = 'none';
|
||||
// button.style.borderRadius = '4px';
|
||||
// button.style.cursor = 'pointer';
|
||||
// button.style.fontSize = '14px';
|
||||
|
||||
// Hover effects
|
||||
button.onmouseover = () => {
|
||||
button.style.backgroundColor = isPrimary ? '#0098ff' : '#666';
|
||||
};
|
||||
button.onmouseout = () => {
|
||||
button.style.backgroundColor = isPrimary ? '#007acc' : '#555';
|
||||
};
|
||||
// // Hover effects
|
||||
// button.onmouseover = () => {
|
||||
// button.style.backgroundColor = isPrimary ? '#0098ff' : '#666';
|
||||
// };
|
||||
// button.onmouseout = () => {
|
||||
// button.style.backgroundColor = isPrimary ? '#007acc' : '#555';
|
||||
// };
|
||||
|
||||
return button;
|
||||
}
|
||||
// return button;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Setup dialog event handlers
|
||||
* @param {HTMLElement} overlay - Dialog overlay element
|
||||
* @param {Function} escapeHandler - Escape key handler function
|
||||
* @returns {Function} Cleanup function to remove event listeners
|
||||
*/
|
||||
export function setupDialogEvents(overlay, escapeHandler) {
|
||||
// Close on overlay click
|
||||
overlay.onclick = (e) => {
|
||||
if (e.target === overlay) {
|
||||
document.body.removeChild(overlay);
|
||||
}
|
||||
};
|
||||
// /**
|
||||
// * Setup dialog event handlers
|
||||
// * @param {HTMLElement} overlay - Dialog overlay element
|
||||
// * @param {Function} escapeHandler - Escape key handler function
|
||||
// * @returns {Function} Cleanup function to remove event listeners
|
||||
// */
|
||||
// export function setupDialogEvents(overlay, escapeHandler) {
|
||||
// // Close on overlay click
|
||||
// overlay.onclick = (e) => {
|
||||
// if (e.target === overlay) {
|
||||
// document.body.removeChild(overlay);
|
||||
// }
|
||||
// };
|
||||
|
||||
// Close on Escape key
|
||||
document.addEventListener('keydown', escapeHandler);
|
||||
// // Close on Escape key
|
||||
// document.addEventListener('keydown', escapeHandler);
|
||||
|
||||
// Return cleanup function
|
||||
return () => {
|
||||
document.removeEventListener('keydown', escapeHandler);
|
||||
};
|
||||
}
|
||||
// // Return cleanup function
|
||||
// return () => {
|
||||
// document.removeEventListener('keydown', escapeHandler);
|
||||
// };
|
||||
// }
|
||||
Reference in New Issue
Block a user