@akamine96204/jsdialog v3.5.1
JSDialog
The JSDialog is a promise-based JavaScript utility that imitates native dialogs in desktop applications and provides a user-friendly way to display input dialogs, message dialogs, plain dialogs, and confirmation dialogs.
Message Dialog, Plain Dialog, and Instruction Dialog can be used without the await keyword, and for Input Dialog and Confirm Dialog, since they require waiting for user input, await must be used or use then() to get the input data. Not using await will make all dialog appear at once.
CDN Links
To use the Dialog class in your project, include the following CDN links in your HTML:
<script src="https://res.cloudinary.com/dy0sbkf3u/raw/upload/Dialog.js"></script>or for the minified version:
<script src="https://res.cloudinary.com/dy0sbkf3u/raw/upload/Dialog.min.js"></script>node package install
npm i @akamine20496/jsdialogInstallation
You can include the Dialog class in your project by either downloading the JavaScript file, linking to it via a CDN, or install in node package as shown above.
Usage
Input Dialog
To create an input dialog, use the showInputDialog method. This method returns a promise that resolves with the user input.
const result = await Dialog.showInputDialog("Enter your name", "Please provide your name:");
console.log("User input:", result.output, "Option used:", result.option);Message Dialog
To show a message dialog, use the showMessageDialog method. This method displays a message to the user.
await Dialog.showMessageDialog("Information", "This is a message dialog.");Confirmation Dialog
To ask the user for a Yes or No answer, use the showConfirmDialog method. This method returns a promise that resolves with the user's choice.
const userChoice = await Dialog.showConfirmDialog("Confirm Action", "Are you sure you want to proceed?");
if (userChoice.option === Dialog.YES_OPTION) {
console.log("User chose Yes");
} else {
console.log("User chose No");
}Plain Dialog
The showPlainDialog method displays a customizable information dialog to the user.
await Dialog.showPlainDialog('This is a plain dialog', {
backdrop: { 'background-color': 'rgba(0, 0, 0, 1)' },
dialog: { 'width': '400px', 'background-color': '#fff' },
eventStyles: {
button: {
mouseover: { 'background-color': 'green' },
mouseout: {
'color': 'violet',
'background-color': 'lightgray'
}
}
}
});Instruction Dialog
The showInstructionDialog method displays a paginated content that has a page count tracker to the user.
const contents = [
'Page 1, start',
'Page 2 <b>It allows html tags here</b>',
'Page 3, end.'
];
await Dialog.showInstructionDialog('Instruction Dialog', contents, {
btnPrev: { 'background-color': 'red' },
btnNext: { 'background-color': 'green' },
eventStyles: {
'#instructionDialogBtnPrev': {
mouseover: { 'background-color': 'maroon' },
mouseout: { 'background-color': 'red' }
},
'#instructionDialogBtnNext': {
mouseover: { 'background-color': 'darkgreen' },
mouseout: { 'background-color': 'green' }
}
}
})customDialogStyle Object structure
{
backdrop: { 'property': 'value', ... },
dialog: { 'property': 'value', ... },
header: { 'property': 'value', ... },
content: { 'property': 'value', ... },
footer: { 'property': 'value', ... },
btnOk: { 'property': 'value', ... },
btnCancel: { 'property': 'value', ... },
btnYes: { 'property': 'value', ... },
btnNo: { 'property': 'value', ... },
btnPrev: { 'property': 'value', ... },
btnNext: { 'property': 'value', ... },
eventStyles: {
backdrop: {
eventname: { 'property': 'value', ... }
},
dialog: {
eventname: { 'property': 'value', ... }
},
header: {
eventname: { 'property': 'value', ... }
},
content: {
eventname: { 'property': 'value', ... }
},
footer: {
eventname: { 'property': 'value', ... }
},
button: {
eventname: { 'property': 'value', ... }
},
'<button-element-id>': {
eventname: { 'property': 'value', ... }
}
}
}Static Variables
OK_OPTION: State of OK (0).CANCEL_OPTION: State of CANCEL (1).YES_OPTION: State of YES (2).NO_OPTION: State of NO (3).
Methods
showInputDialog(dialogTitle, dialogContent, customDialogStyle): Displays an input dialog and returns the user input.showMessageDialog(dialogTitle, dialogContent, customDialogStyle): Displays a message dialog.showConfirmDialog(dialogTitle, dialogContent, customDialogStyle): Displays a confirmation dialog and returns the user's choice.showPlainDialog(dialogContent, customDialogStyle): Displays a plain dialog and can be customized.showInstructionDialog(dialogTitle, dialogContents, customDialogStyle): Displays a paginated dialog that has a page counter to track the current page.
Options
Input Dialog: Returns an object containing:
output: User input ornull.option:0for OK,1for Cancel.
Confirm Dialog: Returns:
option:2for Yes,3for No.
IDs and Classes
If you want to override manually, please refer to the IDs and Classes below. ID is denoted by #, and Class is denoted by ..
Be sure to add !important in your css value to override it.
Input Dialog
- dialog -> #inputDialog
- title -> #inputDialogTitle
- header -> #inputDialogHeader
- footer -> #inputDialogFooter
- content -> #inputDialogContent, .scrollableDialogContent
- input -> #inputDialogInput
- btnOk -> #inputDialogBtnOk
- btnCancel -> #inputDialogBtnCancel
Message Dialog
- dialog -> #messageDialog
- title -> #messageDialogTitle
- header -> #messageDialogHeader
- footer -> #messageDialogFooter
- content -> #messageDialogContent, .scrollableDialogContent
- btnOk -> #messageDialogBtnOk
Confirm Dialog
- dialog -> #confirmDialog
- title -> #confirmDialogTitle
- header -> #confirmDialogHeader
- footer -> #confirmDialogFooter
- content -> #confirmDialogContent, .scrollableDialogContent
- btnYes -> #confirmDialogBtnYes
- btnNo -> #confirmDialogBtnNo
Instruction Dialog
- dialog -> #instructionDialog
- title -> #instructionDialogTitle
- header -> #instructionDialogHeader
- footer -> #instructionDialogFooter
- content -> #instructionDialogContent, .scrollableDialogContent
- btnOk -> #instructionDialogBtnOk
- btnPrev -> #instructionDialogBtnPrev
- btnNext -> #instructionDialogBtnNext
Plain Dialog
- backdrop -> #plainDialogBackdrop
- dialog -> #plainDialog
- button -> #plainDialogBtnClose
- header -> #plainDialogHeader
- content -> #plainDialogContent, .scrollableDialogContent
Example
Here’s an example that combines the usage of all dialog types:
(async () => {
const name = await Dialog.showInputDialog("Name Input", "Please enter your name:");
console.log("Name entered:", name.output);
await Dialog.showMessageDialog("Welcome", `Hello, ${name.output}!`);
const confirmed = await Dialog.showConfirmDialog("Confirmation", "Do you want to continue?");
if (confirmed.option === Dialog.YES_OPTION) {
console.log("User confirmed.");
} else {
console.log("User cancelled.");
}
await Dialog.showPlainDialog('This is a plain dialog', {
backdrop: { 'background-color': 'rgba(0, 0, 0, 1)' },
dialog: { 'width': '400px', 'background-color': '#fff' },
button: { 'color': 'red', 'background-color': '#fefefe' }
});
const contents = [
'Page 1',
`Page 2 <b>This is a bold text, using b element tag</b>`,
'Page 3'
];
await Dialog.showInstructionDialog('Instruction Dialog', contents, {
btnPrev: { 'background-color': 'green' },
eventStyles: {
'#instructionDialogBtnPrev': {
mouseover: {
'background-color': 'yellow'
},
mouseout: {
'background-color': 'blue'
}
}
}
})
})()