raw-dialogs
Getting Started
Installation
$ npm i raw-dialogs --save
Basic Usage
const dialogs = require("raw-dialogs");
//***NEW Methods ****
//Creates a simple alert with message,
dialogs.alert("message"); //immovable alert.
dialogs.alert("message", "titlebar"); //alert movable.
dialogs.alert("message", "titlebar", "button-label"); //label the button.
dialogs.alert("message", "titlebar", callbackfunction); //function to be called when button clicked.
dialogs.alert("message", "titlebar", "button-label", callbackfunction); //label the button and call function.
//Creates prompt
dialogs.prompt("message"); //unmovable alert.
dialogs.prompt("message", "titlebar"); //alert movable.
dialogs.prompt("message", "titlebar", "button-label"); //label the button.
dialogs.prompt("message", "titlebar", callbackfunction); //function to be called when button clicked.
dialogs.prompt("message", "titlebar", "button-label", callbackfunction); //label the button and call function.
//To create alert set the props (JSON format) and pass it to createDialog() method
let props = {
type: "alert",
titlebar: "Alerting Application",
message: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
defaultvalue: "Default Value",
buttons: [
{
label: "Enter your name and click proceed",
callbackfunction: [
{ name: "alertMessage", params: ["param1", "param2"] },
{ name: "alertMessage1" }
]
}
]
}
dialogs.createDialog(props);
/*To create a simple Prompt set the props (JSON format) and pass it to createDialog() method
An Input will be shown to get the input*/
let props = {
type: "prompt",
titlebar: "Prompting Application",
message: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
defaultvalue: "Default Value",
buttons: [
{
label: "Enter your name and click proceed",
callbackfunction: [
{ name: "alertMessage", params: ["param1", "param2"] },
{ name: "alertMessage1" }
]
}
]
};
dialogs.createDialog(props);
/*To create an overlay set the props (JSON format) and pass it to createDialog() method
This option is to allow us to create a lot complex forms.
*/
let props = {
type: "overlay",
titlebar: "Overlaying Application",
title: "Add New Client Information",
fullscreen: false,
help: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ",
message: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>",
form: {
cssclass: "form",
controls: [
{
type: "label",
caption: "Name",
style: "color: red; font-weight: bold",
},
{
type: "input",
inputtype: "text",
placeholder: "Placeholder that will be shown",
cssclass: "form-controls", //CSS from Bootstrap
},
{
type: "label",
caption: "Age",
style: "color: blue; font-weight: bold",
},
{
type: "select",
options: "< 15, 15-30, 31-45, 46-60, 61-75, > 75",
values: "1, 2, 3,4,5,6 ",
defaultvalue: "31-45",
cssclass: "form-controls, chosen-select", //CSS from Bootstrap
},
{
type: "label",
caption: "Address",
style: "color: gray; font-weight: bold",
},
{
type: "textarea",
rows: 5,
placeholder: "Placeholder that will be shown",
cssclass: "form-controls", //CSS from Bootstrap
},
],
},
buttons: [
{
label: "Ok",
callbackfunction: [{name: alertMessage}],
cssclass: "btn, btn-primary", //Button CSS from Bootstrap
focus: true,
},
{
label: "Cancel",
callbackfunction: [
{name: alertMessage1, params: [param1, param2],
{name: alertMessage}
],
cssclass: "btn, btn-warning", //Button CSS from Bootstrap
},
],
};
dialogs.createDialog(props);
Props
Prop | Type | Description | Default | Version |
---|---|---|---|---|
type | string |
Overlay, Prompt or Alert | alert | v1.0.1 |
id | string |
DOM Element ID | alert | v1.0.7 |
titlebar | string |
Text shown in the title bar of dialogs | "Title" | v1.0.1 |
cssclass | string |
css class that needs to be assigned | - | v1.0.1 |
style | string |
inline style string separated by commas | - | v1.0.7 |
message | string |
Message to be displayed | "Message" | v1.0.1 |
defaultvalue | string |
Default value assigned to the control | - | v1.0.4 |
fullscreen | boolean |
Does the dialogs needs to be fullscreen | false | v1.0.1 |
buttons | JSON |
JSON List array | - | v1.0.1 |
buttons: label | string |
Label of the button | "Ok" | v1.0.1 |
buttons: callbackfunction [{name: functionname, {params: [param1, ...,paramX] } } | array |
array of functions to call when on click | close | v1.0.7 |
buttons: focus | boolean |
The button to focus, when multiple last one | false | v1.0.1 |
overlay: title | string |
h3 title | "Title" | v1.0.1 |
overlay: help | string |
Help text in purple | null | v1.0.1 |
overlay: form | JSON |
Container of other form controls | null | v1.0.1 |
form: type | string |
Controls viz. label, input, select, textarea | - | v1.0.1 |
label: caption | string |
Caption of the label | - | v1.0.1 |
input: placeholder | string |
Placeholder text | null | v1.0.1 |
input: inputtype | string |
All acceptable HTML input types | - | v1.0.1 |
textarea: rows | integer |
Number of rows in the textarea | - | v1.0.1 |
Styling
The class name can be passed as a string seperated by comma(,), either custom CSS classes created or classes from other open-source CSS frameworks (bootstrap etc...).
v1.0.7 Introduces the inline styling. Pass the style parameters separated by semi colon for overlay:form controls.
eg. style: "color:red; font-weight: bold"
Reachout for feedback and comments
Feel free to Contact me or Create an issue
License
Released under the Mit License
Screen-shots
Example
https://github.com/raw-codes/raw-dialogs/tree/master/example